第1回　ゴルフボールをカップイン！

テクノロジー

2006.12.12 TUE

Lesson4　Flashを使ったゲーム制作

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

（解説：茅原伸幸）

第1回の今回はパットゴルフを作成してみよう。百聞は一見にしかず、まずはサンプルを見てもらいたい【サンプル1】。

【サンプル1】画面内をクリックするとその方向にボールが転がる

画面内をクリックすると、クリックした位置の方向にボールが減速しながら転がっていき、黒い円のカップに入ればカップイン！という単純なものだ。まずは動きの中心となるボールから制作していこう。

ボールの転がるスピードを徐々に減速させる

新規flaファイルを作成し、動きを滑らかにするためフレームレートを31fpsに設定する。次に、ゴルフボールとなる円を描き、中心を基準点としてシンボルに変換して、ムービークリップを作成する（インスタンス名：ball）。立体感を出すために影を描画しているが、基準点はボールの中心になるように注意してほしい【図1】。

【図1】ゴルフボール拡大図。半径は6pxにしている

ボールが作成できたら、試しに_rootのフレーム1に次のActionScriptを記述して実行してみよう。

this.onMouseDown = function() {
ball.speedX = (_root._xmouse-ball._x)*0.07;
ball.speedY = (_root._ymouse-ball._y)*0.07;
ball.onEnterFrame = function() {
this.speedX *= 0.95;
this.speedY *= 0.95;
this._x += this.speedX;
this._y += this.speedY;
};
};

たった10行で次のような動きが再現できる【サンプル2】。

【サンプル2】マウスをクリックした位置に向かってボールが転がってくる

記述したActionScriptについて解説すると、まずボールに初速を与え、ボールは与えられた速度を0.5％ずつ減少しながらボールのx座標、y座標に加算し続けている。速度に0.95を乗算し続けることによってボールの速度は次第に遅くなって行く仕組みだ。リアルな物理計算とは程遠いが、これだけでも充分ゴルフボールの転がりを再現できるようになる。

■Point　初速の大きさと方向

重要なのはボールに与える初速の大きさと方向だか、その関係は次の【図2】を見ていただくとわかりやすいだろう。

【図2】ボールに与える初速の関係

ボールを斜めに転がす場合、その方向・強さは【図2】の赤い矢印で表されている。【図2】のように青い矢印（y方向）と緑の矢印（x方向）に分解してみよう。矢印の長さはそのまま力の強さを表しているため、y方向、x方向へそれぞれの長さの割合で速度を加算すれば、赤い矢印の方向へ転がることになる。ActionScriptで示すと次の2行となる。

ball.speedX = (_root._xmouse-ball._x)*0.07;
ball.speedY = (_root._ymouse-ball._y)*0.07;

x座標、y座標それぞれの距離に乗算している“0.07”はボールの転がるスピードを調整するための係数だ。いろいろ数値を試してみて自分なりのスピードを再現してほしい。また、今回はクリックした位置を基準にして、方向や強さをそのまま指定しているが、ゴルフゲームでよく見るような、ひっきりなしに動いているパワーメーターを止めた位置によってスピードが増減される仕組みにすると、ゲーム性が増しておもしろいだろう。

次はカップの作成だ。ステージ上に半径10pxの黒円を描き、ムービークリップにする（インスタンス名：hole）。ボールとこの黒円が重なったらカップインとする。ActionScriptで示すと次のようになる。

var dist = (hole._x-ball._x)*(hole._x-ball._x)+(hole._y-ball._y)*(hole._y-ball._y);
if (dist<100 && Math.abs(this.speedX)<1 && Math.abs(this.speedY)<1) {
// trace("cupin!!");
}

重なりの判定（当たり判定）はボールとカップの距離で判定している（二点間の距離を求める詳細はLesson1 第3回「二点間の距離を三平方の定理で導き出す」を参照してほしい）。ボールとカップの距離が10px未満になると、ボールの中心がカップの上に重なるので、そこでカップインとしている。

「dist<100」（100は10pxの2乗）となっているのは、それぞれ2乗したままの状態で判定しているためだ。実際の距離は「Math.sqrtメソッド」で平方根を求める必要があるが、今回は当たり判定だけなので、わざわざ正確な距離を求める必要はない。これは少しでも計算を省くための工夫だ。また、「&& Math.abs(this.speedX)<1 && Math.abs(this.speedY)<1」と条件を加えている部分は、スピードが速すぎる場合はカップインさせないためだ。これで、スピードが速すぎるとカップインとなることを避けることができる。

芝生の傾斜に合わせてボールのスピードを調整

さらにゲーム性を加えるために、芝生の絵に合わせてボールの動きにフックやスライスなどの変化をつけるようにしてみよう。傾斜はステージ上に、傾斜となる図を描き、ムービークリップにしている（インスタンス名：undu1）。【サンプル1】でいうと、「＞」、「＜」で表している部分だ。この傾斜のムービークリップとボールが重なっている場合はボールのスピードに変化を加えている。ActionScriptで示すと次のようになる。

if (_root.undu1.hitTest(this._x, this._y, true)) {
this.speedX += 0.05;
this.speedY += -0.02;
}

傾斜とボールの当たり判定には「hitTestメソッド」を利用している。傾斜エリアにボールがあるときは、x方向に0.05、y方向には-0.02ずつ速度を加え続けることにより、ボールはその方向へ少しずつ移動し、あたかも坂を転がっているようにみえる。加算する値はテストしながら適宜調整するとよいだろう。

そのほかに、ステージ外にボールが出てしまった場合の処理や、カップイン後の処理などを加えて、まとめたものが次の【図3】だ。_rootのフレーム1にすべて記述している。

【図3】【サンプル1】はこのActionScriptで動いている

以上で簡単なパットゴルフゲームの“さわり”が理解いただけたであろうか。“さわり”というのは、ボールが停止しなくても続けて打てたり、打数をカウントしていなかったりと、ゲームとしてはまだまだ不十分だからだ。

Flashゲームは作っていてとても楽しく、実装したくなる機能が次から次へと出てきて、気付けば自分でも驚くような長さのActionScriptを記述しているような場合も多いだろう。また、要素が複雑に絡み合い、自分ひとりで制作していて収集がつかなくなることも多い。そういう経験を積むことによって、次第に自分なりのActionScriptの整理の仕方や、パターンなどが形成されてくると思う。ゲーム好きの人もそうでない人も、ぜひ一度はFlashでゲームを制作してみることをおすすめしたい。

次回へつづく