このページの本文へ

HTML5 SVGで作るシューティングゲーム (3/6)

2011年02月21日 13時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

Illustratorで描いたSVG図形を利用する

 SVGとJavaScriptを利用したゲームの制作に入ります。ゲームは右側で上下に動いている敵(親玉)をショットで撃つだけのシンプルなものです。敵も弾を1発発射し、弾にあたるとゲームオーバーになります。敵には体力があり、一発ではやられません。何発かあてるとゲームクリアです。

 シューティングゲームのキャラクターを用意します。今回は、以下の4つのキャラクターを用意しましょう。カッコ内の文字はJavaScriptで制御するID(キャラクター)名です。

  1. 自機(fighter)
  2. 自機のビーム(beam)
  3. 敵(boss)
  4. 敵の弾(tama)

 キャラクターをSVGタグを使って手作業で作成するのは大変なので、Adobe Illustrator CS5を使って描きます。Illustratorでキャラクターを描く場合、キャラクターごとにレイヤーを分けておき、レイヤー名をJavaScriptで制御するID名にします。たとえば自機であればレイヤー名を「fighter」と付けるわけです。

 CS4以前のIllustratorは原点が左下で、右上に行くに従って座標値が増加する座標系でしたが、Illustrator CS5からは原点が左上になっており、コンピューターで多く利用されている座標系と同じになっています。このため、SVG図形を描く場合も左上を原点に作成していきます。最終的に図8のようにすべてのキャラクターが左上を基準にして重なっていればOKです。

【図8】fig08.png

キャラクターは以下の図のようにレイヤー別に分けて作成し、最終的にはこのように重なっていればよい

【図9】fig09.png

敵(親玉)のキャラクター。レイヤー名はboss。ID名も同様にbossとなる

【図10】fig10.png

自機のキャラクター。レイヤー名はfighter。ID名も同様にfighterとなる

【図11】fig11.png

自機のビーム。レイヤー名はbeam。ID名も同様にbeamとなる

【図12】fig12.png

敵の弾のキャラクター。レイヤー名はtama。ID名も同様にtamaとなる

SVGデータを生成する

 Illustratorでキャラクターを描いたらSVG形式で保存します。ファイルメニューから保存または別名で保存を選択し、フォーマットに「SVG」を指定します。

【図13】fig13.png

SVG形式で保存する

 SVGの保存オプションは以下の図のように設定します。

【図14】fig14.png

書き出しに必要なオプションを設定する

 保存されたSVGファイルはテキスト形式のファイルなので、テキストエディターで開きます。作成したキャラクター部分は<g id="キャラクター名">のようになっています。キャラクターのデータを選択してコピーし、HTML文書内にInline SVGとしてペーストすると準備OKです。

【図15】fig15.png

ハイライト部分をコピーし、HTML文書内のsvg要素にペーストする。不要と思われる属性は削除しても構わない

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く