Illustratorで描いたSVG図形を利用する
SVGとJavaScriptを利用したゲームの制作に入ります。ゲームは右側で上下に動いている敵(親玉)をショットで撃つだけのシンプルなものです。敵も弾を1発発射し、弾にあたるとゲームオーバーになります。敵には体力があり、一発ではやられません。何発かあてるとゲームクリアです。
シューティングゲームのキャラクターを用意します。今回は、以下の4つのキャラクターを用意しましょう。カッコ内の文字はJavaScriptで制御するID(キャラクター)名です。
- 自機(fighter)
- 自機のビーム(beam)
- 敵(boss)
- 敵の弾(tama)
キャラクターをSVGタグを使って手作業で作成するのは大変なので、Adobe Illustrator CS5を使って描きます。Illustratorでキャラクターを描く場合、キャラクターごとにレイヤーを分けておき、レイヤー名をJavaScriptで制御するID名にします。たとえば自機であればレイヤー名を「fighter」と付けるわけです。
CS4以前のIllustratorは原点が左下で、右上に行くに従って座標値が増加する座標系でしたが、Illustrator CS5からは原点が左上になっており、コンピューターで多く利用されている座標系と同じになっています。このため、SVG図形を描く場合も左上を原点に作成していきます。最終的に図8のようにすべてのキャラクターが左上を基準にして重なっていればOKです。
SVGデータを生成する
Illustratorでキャラクターを描いたらSVG形式で保存します。ファイルメニューから保存または別名で保存を選択し、フォーマットに「SVG」を指定します。
SVGの保存オプションは以下の図のように設定します。
保存されたSVGファイルはテキスト形式のファイルなので、テキストエディターで開きます。作成したキャラクター部分は<g id="キャラクター名">のようになっています。キャラクターのデータを選択してコピーし、HTML文書内にInline SVGとしてペーストすると準備OKです。