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

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

クリスマス直前! HTML5 で作る♥ はじめての iOS & Android アプリ開発 from Osamu Monoe

 

そこでお見せしたゲームのサンプルを作成する際に、ついでに 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 の入手とインストールの方法は以下を参考にしてください。

 

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

Real Time Analytics

Clicky