第4回　3Dニアピンゲーム

今回から始まるLesson4では簡易的な物理シミュレーションを使って、簡単なFlashゲームを制作して みよう。Flashゲームはちょっとしたミニゲームから、これがFlashでできているの！？と驚くような本格的なものまでさまざまなものがある。いきなり本格的なものは敷居が高いので、まずは簡単なものから始めてみよう。Flashゲームの制作はActionScriptのスキルアップにおおいに役立つだろう。

（解説：茅原 伸幸）

第1回は真上からの視点、第2回、第3回は横からの視点だったが、今回は視点を変えて3D風にしてみよう。奥行きをもたせることで、よりリアルな雰囲気のゲームを楽しむことができるだろう【サンプル1】。

一見、複雑そうに見えるかもしれないが、今までのLesson4にLesson3の3D手法を取り入れただけで、目新しいことはしていない。それでは、順を追って制作してみよう。

まずはボールとなる真円のムービークリップを作成し、そのフレーム1に次のActionScriptを記述する【図1】。

次にrootステージ上に、背景、ボールの影、雲を描画する。ボールの影と雲についてはシンボルに変換して、それぞれをムービークリップにする。また、スコア等のテキストフィールドを作成し、それぞれ【図2】のようにインスタンス名を設定しておく。

以上の各要素が作成できたら、少し長いが、次の【図3】のActionScriptをrootのフレーム1に記述しよう。

【サンプル1】で画面をクリックすると、ボールの位置とマウスポインタの位置を元に、x方向、y方向、z方向への初速をボールに与えてから（【図3】緑色背景部分）、ボールの動作が実行される。各初速の強さは各行末に乗算している値によって調整している。ボールは与えられた速度を加算し続けながら、仮想3D空間を移動することになる。

次にボールの移動中の処理だが、x方向への速度には風速を加算し続けることによりボールが左右に曲がる仕組みにしている（【図3】黄色背景部分）。ボールが高く上がるほど、風の影響を受けるように、ボールのy位置も考慮して計算している。また風速は、毎ターン終了時ランダムに決定し、マイナスの値であれば左向きの風、プラスの値であれば右向きの風となる（【図3】グレー背景部分）。

y方向の速度はLesson4の第2回■Point「重力とボールのバウンドを表現する」と同じ仕組みだ。常に下向きの速度を加算し続けて重力を表現し、地表に衝突したときには速度の符号を反転させることによりバウンドを表現している。

z方向の速度は奥行きへの移動を表現するためのもので、速度は次第に減少させている。

ボールのxyzの各速度が微少になると、ショット終了となり、カップとボールの距離を算定し、スコアとして表示する（【図3】オレンジ背景部分）。xyzの3D空間の処理であるが、ボールが止まったときはカップと同じ地表にあるものとし、y座標を考慮せず、x座標とz座標のみを使って、カップとボールとの距離を算定している。このスコアと今までのハイスコアを「Math.minメソッド」を使って評価し、小さいほうの値をハイスコアとして表示している。

スコアを表示した後は、次回の風速をランダムで決定し、ボールを初期位置に移動させて1ターン終了となる。なお、ボールの移動は仮想3D空間座標で行っているため、画面表示には3D座標を2D画面に投影して表示する必要がある。詳細はLesson3「3D表現にチャレンジしよう！」を復習してほしい。

最後にボールの影や雲の動作を付け加えて完了だ。

ボールの影は、ボールの3D空間上の座標を元にしてボールと同じように移動させている。ただ、影は地表を移動するのでy座標は固定したままだ。

雲は風速を元に毎時左右に移動させ、風の方向や強さを表現している。ステージ右に出たときは左端へ、ステージ左端へ出たときは右端に移動しているだけの単純な仕組みだ。

以上、今回のActionScriptはやや長めだったが、ゆっくり見ていくとそれほど難しい処理はしていないことがわかるだろう。3D表現と組み合わせることで単純なゲームでも見栄えやゲーム性に幅が出てくると思う。Flashゲーム作りの一表現として捉えていただければと思う。

――「Flashスキルアップ講座」Lesson4は今回で終了です。
次回Lesson5は1月24日（水）からの掲載開始となります。ご期待ください。