HTML5 を使ったシンプルな 2 D ゲームの作り方(序)


去年の年末に schoo (スクー) さんで「クリスマスに使えるアプリを作ろう!- HTML5を使った、はじめての iOS & Android アプリ開発」という講座(っていうの?) 担当させていただきました。

 

そこでお見せしたゲームのサンプルを作成する際に、ついでに 9 ステップで、ある程度まで動作するゲームを作るハンズオンも一緒に作りました。 年明け前にはブログで公開したいと思っていたのですが、なんやかんやで 5 ヵ月も経ってしまいました。

今回から数回に分けて、HTML5 を使用したシンプルな 2D ゲームの作り方を紹介していきたいと思います。

コンセプトとしては、「シンプルな 2 D ゲームを開発しながら HTML5 の機能を学ぶ」というものなので、JavaScript のゲームエンジンやライブラリは一切使用せず、すべてのコードを自らのコーディングでまかなっていきます。

こう書くと、むつかしそうですが、実際やってみるとある程度のところまではずいぶんと簡単に作れるということがご理解いただけるでしょう。

なお、「HTML5 の機能」という性質上、Internet Explorer 9 などの HTML5 機能の実装の足らない、もしくは Internet Explorer 8 のように HTML5 をサポートしていない古い Web ブラウザーでは動作しませんのであしからずご了承ください。

ちなみに作成するゲームは以下のものです。黒い画面をクリックするとゲームが開始します。

なお、動作が妙にカクカクする場合はページをリロードしてください。スムーズに動くようになるはずです。

 

キーボードの左右の矢印キー、もしくは画面のタッチで雪だるまを左右に動かし、降ってくる雪をキャッチするだけの簡単なゲームです。
(※左右に動かない場合は、ゲーム画面を一度クリックしてください)

その前に、HTML5 の機能を使用したゲームについてちょっとだけ紹介。

 

HTML5 の機能を使用したゲーム

HTML5 の機能を使用したゲームは大まかに 2 種類に分けることができます。

ひとつが WebGL を使用した 3D グラフィックゲーム、もうひとつが Canvas や SVG を使用した 2D ゲームです。

これからの記事で紹介していくのは 2 D のカジュアルゲームのほうです。

image
(HTML5 の機能を使ったゲームの種別)

 

2D ゲーム、Canvas と SVG どっちで作る?

HTML5 を使用した 2D ゲームを開発するには Canvas を使用する方法と、SVG (Scalable Vector Graphics) を使用する方法があります。

SVG は、ベクターによる 2D 描画を行うための XML ベースのマークアップで、拡大縮小にも強い滑らかで高品質な画像を描画することができます。また、描画要素をオブジェクトとして扱うことができます。一方、Canvas はプログラムコードからピクセルーベースで描画を行っていきます。

一般的に SVG は静的な画像、表示と印刷のための 高品質ドキュメントなどに向いており、Canvas は高パフォーマンスが必要とされる 複雑なシーンや、リアルタイムの数学的アニメーションに向いていると言われています。

image
(SVG と Canvas では技術的特性が違う)

これからの記事で紹介していくのは Canvas を使用したゲームの開発です。

ここまで紹介した SVG、Canvas、WebGL の比較などについては以下のドキュメントを参照してください。

 

Canvas を使用したゲームプログラミングの流れ

これからの記事では、以下の流れで Canvas を使用したゲームプログラミングを紹介していきます。

  1. Canvas に画像を表示
    ゲームで使用するキャラクターの画像を Canvas にロードする処理を作ります。
    Canvas を使ったゲーム開発の入門記事によっては、キャラクターもプログラムコードで描画するように書かれているものもありますが、じっさい大変なので個人的にはお勧めしません。
  2. タイムフレーム処理の実装
    アニメーションの基礎となるタイムフレームを実装します。
  3. 操作系の実装
    ゲームの中のキャラクターを動かす処理を実装します。
  4. 当たり判定の追加
    ゲーム内のキャラクター同士の接触判定を実装します。アニメーションのプログラミングをゲームとして成立させる基礎的な処理です。
  5. アクションへの効果
    キャラクター同士の接触や、操作に対する反応を実装します。
  6. その他、処理
    スタート画面画面や修了画面などです。この記事では紹介しないかもしれません。

この 1 ~ 5 までの実装を必要最低限でいったん行い、基本的な動作ができたら 1 ~ 6 までの作業を何度も行い、機能追加とブラッシュアップを行っていきます。こういった作業を「イテレーションを回す」といいます。

image
(Canvas を使用したゲームプログラミングの流れ)

 

次回は

実際にコーディングを行っていきます。

エディターはなんでも良いですが、Visual Studio 2013 の使用を前提にして紹介していくので、ぜひ Visual Studio をご準備ください。

個人使用であれば、無償の Visual Studio Community 2013 が使用できますよ。

Visual Studio Community 2013 の入手とインストールの方法は以下を参考にしてください。

 

Real Time Analytics

Clicky

Comments (5)

  1. コーティングに入る前のプロジェクトの作成や、使用する画像ファイルの DL などについて書きましたー。

    HTML5 を使ったシンプルな 2 D ゲームの作り方(準備編)

    blogs.msdn.com/…/how-to-make-2d-game-using-html5-step1.aspx

  2. Shu M より:

    突然、失礼いたします。
    最近になってようやく自作PCをWin8.1Pro(x64)からWin10Pro(x64)にアップグレードし、Microsoft Edgeに関する情報を収集している過程でこのブログに辿り着き、有益な記事の数々を参考にさせていただきました。ありがとうございます。

    いくつか記事を読み進めているうちに、Edgeで閲覧するとこのページのiframe内ドキュメントが表示されていないことに気づきました。この画像のようにエラー表示されます。
    当方のPC環境に起因する問題なのであれば、その原因を突き止めたいと考えているのですが、私のスキルでは解決に至っておりません。
    以下に詳細な状況を記しておきますので、なにか気づいた点があればご助言いただけないでしょうか。よろしくお願いいたします。

    ・既定のプログラムはIE11に設定しており、Edgeは最初に「お気に入り」のインポートを行ったぐらいで特別なにかの設定を変更したつもりはありません。ただし、IE11はWin10以前から色々と設定変更して使用しています。
    ・iframe内にはこのエラーページ(正確にはこのローカルキャッシュ)が表示されています。※このリンクはEdgeでないと表示できないと思います。
    ・Edgeの設定から「閲覧データのクリア」を実施してみても状況は変わりません。
    ・このサイト以外でiframeを使用しているページを表示しても同現象は発生しておりません。
    ・iframe内のソースURLをEdgeのアドレスバーに入力すると、どちらも正常に動作しています。SlideShare画像2Dゲーム画像
    ・IE11でこのページを閲覧するとセキュリティ警告が表示されますが、[すべてのコンテンツを表示]をクリックすれば、”一応”表示されます。(”一応”と書いたのは2Dゲームを表示するiframeの大きさがおかしいからですが、おそらくこれは別問題の気がしています)
    ・IE11のインターネットオプション→セキュリティ→レベルのカスタマイズ→[混在したコンテンツを表示する]を有効にすれば、上記の警告は表示されなくなりますが、Edgeでの状況は変わりません。
    ・Edgeでも上記の[混在したコンテンツを表示する]に相当する設定項目がないかと探してみましたが、見つけることはできませんでした。

    なお、モニター解像度は1680*1050、DPIは等倍、Geforce GTX680 2GB(ドライバー バージョン368.69)で描画しています。
    マルウェア対策にはWindows Defender、Widowsファイアウォールを使用しています。基本的にデフォルトに近い設定のままで、特別変わった設定にしてはいないと思います。

    1. ご報告ありがとうございます。
      数か月前にブログのシステムが変更になりまして、それまで iframe で使用できていた http が使用できず https を使用する必要が出てきました。
      Azure でホストしているものは切り替えが可能なのですが(とはいえ回収が追いついていませんが)、古い記事のものについては改修がむつかしいかもしれません。
      とはいえ、順次直していきますので、すみませんがもうしばらくお待ちくださいませ。

      1. Shu M より:

        ご回答ありがとうございます。

        当方のPC環境に問題が発生しているわけではないことが分かれば、それだけで大丈夫です。
        別にこのページをEdgeで閲覧したくて投稿したわけでもなければ、早急な改修を要求しているわけでもありません。

        ただ、どこかに現在Edgeでは正常に表示できない旨を表記していただくと親切かもしれません。

        このブログではEdgeの使用を推奨する記事を多く提供してくださっています。 普通の感覚では、まさかそのブログ内の別記事がEdgeで閲覧できないとは思わないでしょうから。
        私のように自分の環境がおかしいのではないかと無駄な時間を消費してしまうことになりかねません。

        1. たしかにそうですねぇ。
          それでは明日くらいにでもお知らせページを追加しますね。
          ご意見、ありがとうございました。

Skip to main content