必要条件

この記事に必要な予備知識

[コードスニペット]パネルの使用経験と、シンボル/タイムライン/ドキュメントプロパティ/Flash Playerバージョン/Androidモバイル端末へのパブリッシュ方法についての基本的な知識。必須ではありませんが、ActionScript 3.0でのプログラミンの知識があるとなおいいでしょう。

Flash ProfessionalのAIR SDKを最新版にアップデートするには「Overlay AIR SDK | Flash Professional CS5.5」をご覧ください。

ユーザーレベル

中級

カジュアルなモバイルゲーム/アプリを作ってみたいけど、ActionScriptを使った開発経験がないという方、この記事はそんなアナタにピッタリです! この記事では、Flash Professional CS5.5の[コードスニペット]パネルを使って、「Jewelry Heist Game」というシンプルなモバイルゲームを作る方法を解説します。[コードスニペット]パネル内にある、デバイスに依存しないインタラクティブコードスニペットやデバイス固有のコードスニペットを(場合によっては改変しながら)使って、ゲームの機能を組み込んでいきます。ActionScriptの知識はほとんど入りません。

[コードスニペット]パネルには、バナー広告やゲームも含めた様々なFlashプロジェクトで利用できるActionScript 3.0スニペットが入っています。この記事を読み進める前に[コードスニペット]パネルやそのコードスニペットを使っておくと、記事をより理解しやすくなるでしょう。[コードスニペット]パネルの使い方については、「始めたばかりのActionScript 3プログラマーおよびデザイナーのためのコードスニペット」をご覧ください。

この記事のサンプルでは、以下のコードスニペットを使用します。

  • [タッチおよびドラッグイベント]スニペット
  • [マウスオーバーイベント]スニペット
  • [カウントダウンタイマー]スニペット
  • [このフレームで停止]スニペット
  • [クリックして特定のフレームに移動し、停止]スニペット

この記事のサンプルは、「Jewelry Heist Game」というシンプルなモバイルゲームです。ゲームの目的は、博物館から宝石を盗むことです。ただし、動くセキュリティレーザービームに触れずに盗まなければなりません。以下の映像は、このゲームをMotorola Droid Xでプレイした様子です。このゲームは記事用のデモバージョンなので、よければみなさん自身でActionScriptを書いて、より複雑なゲームに発展させてください。

「ゲームの遊び方」画面を表示する

まずはサンプルデータ「jewelry_heist.zip」をダウンロードして解凍し、Flash ProfessionalでJewelryHeist.flaを開きます。メインタイムラインを見ると、完成したプロジェクトがどのような構成になっているのかが分かると思います。

3つのフレームがあり、1フレーム目には「ゲームの遊び方」画面、2フレーム目にはゲームのグラフィックやプレイロジック、そして3フレーム目にはゲームオーバー画面が含まれています。最初の作業は、1フレーム目の「ゲームの遊び方」画面にコードスニペットを追加し、ゲームが最初にロードされた際にこの画面が表示されるようにします(図1)。このコードを追加しなければ、ロード終了後すぐに再生ヘッドが2フレーム目に移動し、「ゲームの遊び方」画面が表示されません。

[このフレームで停止]スニペットを使って1フレーム目で停止させる
1フレーム目(「ゲームの遊び方」画面)で再生ヘッドを停止させるコードを追加して、ユーザがPlayボタンをタップする前に「ゲームの遊び方」が目に止まるようにします。

  1. サンプル作成のスターターファイルとして用意したFrame1.flaを開きます。ここには何もまだコードがありません。
  2. instructionレイヤーの1フレーム目をクリックして、再生ヘッドを1フレーム目に移動させます。
  3. メニューから[ウィンドウ]→[コードスニペット]を選んで、[コードスニペット]パネルを開きます。パネル内では、コードスニペットがカテゴリーごとに整理されています。
  4. [タイムラインナビゲーション]カテゴリーにある[このフレームで停止]スニペットをダブルクリックします。すると、[アクション]パネルが開き、「stop();」が追加されます。

この時、タイムラインにActionsレイヤーが自動で作成され、その1フレーム目にコードが記述されます。これ以降に追加していくコードスニペットは全て、このActionsレイヤーに追加されていきます。

[クリックして特定のフレームに移動し、停止]スニペットを使ってPlayボタンに機能を追加する
次にPlayボタンをタップしたら、2フレーム目に移動するようにコードを追加します。

  1. タイムラインのActionsレイヤーの1フレーム目をクリックして、再生ヘッドを1フレーム目に移動させます。
  2. ステージ上にあるPlayボタンのムービークリップを選択します。
  3. [コードスニペット]パネル内の[タイムラインナビゲーション]カテゴリーにある[クリックして特定のフレームに移動し、停止]スニペットをダブルクリックします。すると、インスタンス名の入力を促すダイアログが表示されます。ここでは「Play_MC」と入力して[OK]ボタンをクリックしてください。

4. [アクション]パネルが開き、コードスニペットが追加されます。Playボタンがタップされた際に2フレーム目に移動させるので、最後の 行を「gotoAndStop (5);」から「gotoAndStop (2);」に変更します。この括弧内の値はフレーム番号を示しています。

5.メ  ニューから[制御]→[ムービープレビュー]→[プレビュー]を選びます。Flash Player上で再生されるので、1フレーム目の「ゲームの遊び方」画面が表示され、そこで停止するか確認します。Playボタンをタップしたら、2フ レーム目のゲーム画面に移動するはずです。

6. 保存してFrame1.flaを閉じ、次のセクションへ進みましょう。

ゲームの機能を追加する

続いて2フレーム目を作成していきます。この2フレーム目には、ゲームのグラフィックやゲームを遊ぶためのコードが含まれています。このセクション用に別途Frame2.flaを用意しています。先ほどのFrame1.flaを使って作業を続ける場合は、メニューから[ファイル]→[パブリッシュ設定]を選び、[パブリッシュ設定]ダイアログの[Player]を「Flash Player 10.2」から「AIR for Android」に変更します。この操作に自信がないという方は、Frame2.flaを開いて進めてください。

2フレーム目には、博物館の館内と宝石を展示する台座のグラフィックがあります。このゲームの目的は、動くレーザービームに触れずに宝石を盗むことです(図3)。

[タッチおよびドラッグイベント]スニペットを使って宝石にインタラクションを追加する
[タッチおよびドラッグイベント]スニペットを追加することで、ユーザはタッチ画面上で宝石を選択してドラッグできるようになります。宝石を盗むには、ユーザは宝石をタッチ&ドラッグして、赤いカーテンの裏に移動するようにします。

  1. Frame2.flaを開きます。先のセクションで追加した2つのコードスニペットは、追加された状態になっています。
  2. タイムラインのActionsレイヤーの2フレーム目をクリックします。
  3. ムービークリップGem1(オレンジ)を選択します。
  4. [コードスニペット]パネルが閉じていたら、メニューから[ウィンドウ]→[コードスニペット]を選んで、[コードスニペット]パネルを開きます。
  5. [モバイルタッチイベント]カテゴリーにある[タッチおよびドラッグイベント]スニペットをダブルクリックします。すると、[アクション]パネルが開いて、コードスニペットが追加されます。
  6. ムービークリップGem2とGem3についても、このステップ2~5を繰り返します。
  7. いったん作業内容を保存して、Frame2.flaを開いたまま、次はマウスオーバーイベントを追加します。

[マウスオーバーイベント]スニペットを使ってレーザービームにインタラクションを追加する
スマートフォンにマウスはありませんが、ActionScriptのマウスイベントを使って、タッチ画面上での指の操作をベースにアクションを誘導することができます。2フレーム目には、3つの動くレーザービームがあります。このいずれかに指が触れたら、再生ヘッドが3フレーム目に移動し、ゲームオーバー画面が表示されるようにします。

  1. タイムラインのActionsレイヤーの2フレーム目をクリックして、再生ヘッドを2フレーム目に移動させます。
  2. ステージ上にあるムービークリップLaser1Animation1を選択します。
  3. [コードスニペット]パネルが閉じていたら、メニューから[ウィンドウ]→[コードスニペット]を選んで、[コードスニペット]パネルを開きます。
  4. [イベントハンドラー]カテゴリーにある[マウスオーバーイベント]スニペットをダブルクリックします。すると、[アクション]パネルが開いて、コードスニペットが追加されます。
  5. ムービークリップLaser2Animation2とLaser3Animation3についても、このステップ2~4を繰り返します。
  6. [マウスオーバーイベント]スニペット内にある説明(コメントアウト部分)をよく読んでください。初期では、以下のように[出力]パネルに「マウスオーバー」と表示するコードが記述されています。

// カスタムコードを開始 // このコード例では、出力パネルに "マウスオーバー" という用語が表示されます。 trace("マウスオーバー"); // カスタムコードを終了

ここでは、レーザービームに指が触れた際に3フレーム目に移動させます。そのためには、レーザービームの3つ全てのムービークリップにおいて、「trace("マウスオーバー");」を「gotoAndStop (3); 」に書き換えます。「gotoAndStop (3); 」は、Playボタンの際に使用したものと同じコマンドです。

いったん作業内容を保存して、Frame2.flaを開いたまま、次はカウントダウンタイマーを追加します。

[カウントダウンタイマー]スニペットを使ってタイマーを追加する
[カウントダウンタイマー]スニペットを使ってシンプルなタイマーを追加することができます。このサンプルゲームの特徴の1つとして、10秒以内に宝石を盗まなければなりません。10秒を過ぎたら再生ヘッドを3フレーム目に移動させ、ゲームオーバー画面を表示するようにします。次の作業に沿って、[カウントダウンタイマー]スニペットを使ってタイマーを追加しましょう。

  1. タイムラインのActionsレイヤーの2フレーム目をクリックして、再生ヘッドを2フレーム目に移動させます。
  2. [コードスニペット]パネルが閉じていたら、メニューから[ウィンドウ]→[コードスニペット]を選んで、[コードスニペット]パネルを開きます。[アクション]カテゴリーの一番下にある[カウントダウンタイマー]スニペットをダブルクリックします。すると、[アクション]パネルが開いて、コードスニペットが追加されます。スニペット内にある説明(コメントアウト部分)をよく読んでください。このスニペットでは、特定の秒数(デフォルトでは10,000ミリ秒=10秒に設定されています)からカウントダウンを始めます。そしてデフォルトのコードでは、1秒ずつカウントダウンをして(10秒、9秒、8秒…のように)、残り秒数を[出力]パネルに表示します。このサンプルゲームでは、10秒のカウントダウンを1度だけ行いたいので、そのようにコードを変更していきます。

 まず以下の行を、

var fl_SecondsToCountDown:Number = 10;

次のように書き換えます。

var fl_SecondsToCountDown:Number = 1;

    これで、10秒のカウントダウンを1度だけ行うようになります。

  1. タイムアウトになった際のアクションを指定します。以下の2行を、
trace(fl_SecondsToCountDown + " seconds"); fl_SecondsToCountDown--;

次のように書き換えます。

gotoAndStop(3);

これにより、Playボタンをタップした後、レーザービームに触れることがなければ、10秒後にゲームオーバー画面が表示されるようになります。

 4 保存してFrame2.flaを閉じ、次のセクションへ進みましょう。

ゲームオーバー画面を表示する

ここからの作業を行うにあたり、先のセクションで完成させたFrame2.flaを使って引き続き作業することもできますが、別途用意しているFrame3.flaを使用することをおすすめします。Frame3.flaの3フレーム目(ゲームオーバー画面)にコードを追加していきましょう。

[クリックして特定のフレームに移動し、停止]スニペットを使ってPlay Againボタンに機能を追加する
まずは、ユーザがPlay Againボタンをタップしたら、再生ヘッドが2フレーム目に移動するようにコードを追加します。

  1. Frame3.flaを開きます。先のセクションで追加したコードスニペットは全て、追加された状態になっています。
  2. タイムラインのActionsレイヤーの3フレーム目をクリックします。
  3. ステージ上にあるPlay Againボタンのムービークリップを選択します。
  4. [コードスニペット]パネル内の[タイムラインナビゲーション]カテゴリーにある[クリックして特定のフレームに移動し、停止]スニペットをダブルクリックします。
  5. [アクション]パネルが開き、コードスニペットが追加されます。Play Againボタンがクリックされた際に2フレーム目に移動させるので、以下の行を、

gotoAndStop (5);

次のように書き換えます。

gotoAndStop (2);

これで、Play Againボタンをタップすると再生ヘッドが2フレーム目に移動し、博物館のグラフィックが表示され、再びゲームを遊べるようになります。

これでゲームロジック部分は完成です。ムービープレビューして遊ぶことができます。とはいえ、パフォーマンスの向上をはかったり、モバイルアプリとしての動作の担保など、まだできることが残っています。次のセクションでは、限られたシステムリソースを使って効率良くゲームを動作させるためのノウハウを紹介します。

完成したゲームを最適化する

ここからはゲームにさらに磨きをかけるノウハウを紹介します。モバイルデバイスでスムーズにゲームを動作させるために、実装することをおすすめします。また、ユーザがトラブルなしに繰り返し遊べるようにするという点でも役立ちます。

[カウントダウンタイマー]スニペットをリセットする
まずは、2フレーム目に追加した[カウントダウンタイマー]スニペットの最初期化です。ユーザがPlay Againボタンをタップした際、カウントダウンタイマーの10秒カウントをリセットして再スタートするようにコードを追加します。

  1. 先のセクションで完成したFrame3.flaを開きます。
  2. タイムラインのActionsレイヤーの3フレーム目をクリックして、再生ヘッドを3フレーム目に移動させます。
  3. [アクション]パネルが閉じていたら、メニューから[ウィンドウ]→[アクション]を選んでパネルを開きます。
  4. 1行目に以下のコードを追加します。[クリックして特定のフレームに移動し、停止]スニペットで追加したコードよりも前の位置です。
fl_CountDownTimerInstance.reset();

Quitボタンの機能をアップデートする
Androidの場合、ユーザが手作業でアプリを中止して閉じるまでは、バックグラウンドで動作し続けます。そのため、Quitボタンのロジックをアップデートして、余計なバッテリー消費を防ぐようにします。

  1. タイムラインのActionsレイヤーの3フレーム目をクリックして、再生ヘッドを3フレーム目に移動させます。
  2. ステージ上のムービークリップQuitを選択して、[プロパティ]インスペクタでインスタンス名が「Quit_MC」となっているか確認します。
  3. Actionsレイヤーの3フレーム目を選び、[アクション]パネル内の下側に以下のコードを追加します。

Quit_MC.addEventListener(MouseEvent.CLICK, fl_CloseApplication); function fl_CloseApplication(event:Event):void { NativeApplication.nativeApplication.exit(0); }

このコードによって、Quitボタンをタップすると、モバイルアプリの動作が停止するようになります。

ガベージコレクションでパフォーマンスを改善する
ゲームはほぼ完成していますが、もう1つ改善を施しましょう。それは、3フレーム目を再生する前に、2フレーム目でおきた全てのイベントを消去することです。以下のコードのfunctionは、2フレーム目だけに存在するオブジェクトに対するイベントリスナーを除去するというものです。このコードがなければ、例えば3フレーム目(ゲームオーバー画面)が表示されている際に画面上を指でドラッグすると、タッチ&ドラッグイベントによって関係ないオブジェクトが動いてしまうかもしれません。

  1. タイムラインのActionsレイヤーの2フレーム目をクリックして、再生ヘッドを2フレーム目に移動させます。
  2. [アクション]パネルが閉じていたら、メニューから[ウィンドウ]→[アクション]を選んでパネルを開きます。
  3. [アクション]パネル内の下側に以下のコードを追加します。このfunctionは、ユーザがレーザービームに触れるたびに呼び出され、3フレーム目に送出されます。

function RemoveEventListener() { Laser1_MC.removeEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler); Laser2_MC.removeEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler_2); Laser3_MC.removeEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler_3); Gem1_MC.removeEventListener(TouchEvent.TOUCH_BEGIN, fl_TouchBeginHandler); Gem1_MC.removeEventListener(TouchEvent.TOUCH_END, fl_TouchEndHandler); Gem2_MC.removeEventListener(TouchEvent.TOUCH_BEGIN, fl_TouchBeginHandler_2); Gem2_MC.removeEventListener(TouchEvent.TOUCH_END, fl_TouchEndHandler_2); Gem3_MC.removeEventListener(TouchEvent.TOUCH_BEGIN, fl_TouchBeginHandler_3); Gem3_MC.removeEventListener(TouchEvent.TOUCH_END, fl_TouchEndHandler_3); }

このコードを追加して保存したら、再度ムービープレビューでゲームを試してみてください。今度は、Play Againボタンをタップすると、カウントダウンタイマーがリセットされ、再びプレイできます。他にもこのガベージコレクションによって、3フレーム目で宝石をドラッグしても、確実に静止したままでドラッグできなくなります。

さらに学習したい方へ

完成したJewelry Heist Gameをパブリッシュして、みなさんのAndroidスマートフォン端末で遊んでみてください。アプリをAndroid端末へデプロイする方法については、「Getting started with Adobe AIR for Android」「Flash Professional CS5.5 - Publishing an AIR for Android App」(リンク )をご覧ください。このゲームは、iOS/Android(スマートフォンやタブレット)向けにパブリッシュできます。

この記事で学んだコンセプトやテクニックをもとに、[コードスニペット]パネルを使って様々なモバイルゲームを作ってみてください。多くのコードを書かなくても、魅力的でインタラクティブな体験を創りだすことができるでしょう。

モバイルアプリ開発の情報として、以下のコンテンツもご覧ください。