BallとImageSpriteでアクションゲームに挑戦!! (1/6)

App Inventorでアクションゲームを作りたい！と思ったとき、何より重要となるのが「Ball」と「ImageSprite」という部品です。これらは「スプライト」という機能を提供するためのものです。

スプライトというのは、一般的な２次元のアクションゲームなどで用いられる「キャラクタ」に相当するものです。これらは決まった方向に指定のスピードで動く部品です。アニメーションの処理など何も考えなくとも、「こっちの方向へ、この速度で動け」と設定をすれば、それだけで勝手に動いてくれます。

また、これらの部品には「周囲の壁（？）に衝突したとき」「他の部品とぶつかったとき」などのイベントが用意されています。これらのイベントを利用することで、部品どうしが衝突した時の処理なども作成することができるのです。

BallとImageSpriteの違いは、単純に「表示の違い」です。Ballは、あらかじめ指定したプロパティに応じたボール（色つきの円）を表示します。ImageSpriteは、デフォルトでは何も表示されず、イメージファイルを設定することでそれを表示するようになります。

これらの部品には、アニメーションのためのプロパティがいろいろと用意されています。まずはこれらについてまとめておきましょう。

・Ballの表示に関するプロパティ
PaintColor――ボールの色を指定します。
Radius――ボールの直径を指定します。

・ImageSpriteの表示に関するプロパティ
Picture――表示するイメージを指定します。値の部分をクリックすると、利用可能なイメージがリストで表示されるので、そこでイメージを選択します。まだイメージがない場合は、「Upload new...」ボタンをクリックし、ファイルをアップロードすれば使えるようになります。
Rotates――これは進む方向に合わせてイメージを回転するかどうかを示すものです。ONにすると、イメージが進む方向にあわせて回転し、常にその方向が正面となるように表示されます。OFFだと、イメージの向きはデフォルトの状態のままで回転しません。

・アニメーションに関するプロパティ
Heading――キャラクタの進む方向を示します。これは真右の方向をゼロとし、左回りに1周360度で方向を示した値が設定されます。例えば真上なら90、真下なら270となります。
Interval――表示が更新される感覚を示します。これはミリ秒で換算した数値で指定します。例えば「100」とすれば、0.1秒間隔で表示が更新されます。
Speed――表示が更新されるごとに移動する距離を示すものです。Intervalで指定した時間が経過するごとに、Headingで指定した方向に、このSpeedの距離だけ部品が移動します。
Enabled――アニメーションのON/OFFをするものです。これがONだと、アニメーションが実行されます。OFFにするとアニメーションは停止します。

――まずは、これらの基本的なプロパティの働きをよく頭にいれておきましょう。これらを設定することで、何もブロックなどを組み立てなくともスプライトはアニメーションを開始します。



では、実際にこれらの部品を使ってみましょう。ここでは例としてBallを利用して動かしてみます。以下のように部品を配置してみましょう。

・Canvas
まず、Canvasを配置します。スプライト関係はグラフィックとして部品を描画し動かすものであるため、Canvasの中に配置して使うのが基本です。作成後、Width/Heightをそれぞれ「Fill parent」にしておきましょう。

・Ball
サンプルとしてBallを３つほど配置してみましょう。すべてCanvasの中に配置してください。そしてPaintColor、Heading、Interval、Speedといったものをそれぞれ適当に設定してください。

たったこれだけで、実行すると配置したBallが動き出します。実に簡単ですね！

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※下図は、Canvasに３つのBallを配置したところ。