2Dアクション・テンプレート：メインの作成

＝作成順序＝

作成するものは

メイン
プレイヤー
地面
画像
物理
入力

の６つ。

これらを、以下の順序で作成する。

メイン
- 全体を制御するので、まずはこれを作成
画像
- 確認するのが一番簡単なので、序盤で作成
入力
- 画像さえ表示できれば、それを動かすことで確認できるので、画像の次にやる
物理
- こちらも画像があれば確認できるが、やや大きめの作業なので少し後に回す
地面
- プレイヤーよりも必要な要素が少ないのでこちらを先に
プレイヤー
- 関わるものが多いので、この中では一番最後

＝メインの作成＝

まずは、Flashの画面の大きさなどを設定するために「メイン」を作成する。

普通にゲームを作るだけなら、メインは「Sprite（画像）」を継承して作るが、後で「エディタ」へ組み込む可能性まで考えると、「Box（コンテナ）」として作成しておいた方が良いので、やや面倒だが「mxml」まで作成する。

ここでは、「home/Flex/ActionTemplate」というフォルダを用意して、そこに以下の二つのファイルを作成する。

＝Game.as＝

まずは、実際に処理の流れを担当する「Game.as」を以下のように書く。

package{
  //mxml
  import mx.containers.*;

  public class Game extends Box{
    //==Const==

    //表示画面の大きさ
    static public const CAMERA_W:Number = 400;
    static public const CAMERA_H:Number = 300;


    //---------------------


    //==Singleton==
    private static var m_StaticInstance:Game;
    public static function Instance():Game{
      return m_StaticInstance;
    }


    //==Function==

    //!コンストラクタ
    public function Game(){
      //Singleton
      {
        m_StaticInstance = this;
      }
    }

    //!stageなどの初期化が終了した後に呼んでもらう
    public function Init():void{
      //==Common Init==
      {
        //スクロールバーの表示はしないようにする
        this.horizontalScrollPolicy = "off";
        this.verticalScrollPolicy = "off";

        //自身の幅を設定しておく
        this.width  = CAMERA_W;
        this.height = CAMERA_H;
      }
    }
  }
}

序盤では使わない設定が多いものの、後で役に立つのでこの段階で色々と設定しておく。

画面の大きさの設定
- 「CAMERA_W」と「CAMERA_H」で、ゲーム画面の大きさを設定
Sigleton
- よそからGameのメンバや関数を呼びやすいようにしておく
  - 「Game.Instance().〜」でさわれるようになる
- 原義のSingletonとは微妙に違うので注意
  - コンストラクタがprivateではないので複数個生成できる点とか
スクロールをオフ
- 画面に収まらない画像（＝ステージ）を収納してもスクロールバーが出たりしないように、「= "off"」でスクロールバーをオフにしている。

また、ファイルは「UTF-8」の文字エンコードでセーブしておかないと、コメントを日本語で書いた時に意味不明なエラーが表示されてコンパイルが通らなくなってしまうので注意。（「SJIS」だとエラーになる）

＝Main.mxml＝

上のGame.asを表示するために、「Main.mxml」を以下のように書く。

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:comp="*"
  paddingTop="0" paddingLeft="0"
  paddingRight="0" paddingBottom="0"
  applicationComplete="init()"
>
  <!--Script-->
  <mx:Script>
    <![CDATA[
      //最初のロード完了時の初期化
      private function init():void{
        //幅を、実際のゲーム画面に合わせる
        MyViewStack.width  = Game.CAMERA_W;
        MyViewStack.height = Game.CAMERA_H;
        button_to_start.width  = Game.CAMERA_W;
        button_to_start.height = Game.CAMERA_H;
      }

      //ボタンが押されて開始する時の処理
      private function start():void{
        MyViewStack.selectedChild = main_game;

        main_game.Init();
      }
    ]]>
  </mx:Script>


  <!--View-->
  <mx:ViewStack id="MyViewStack" width="10" height="10">
    <mx:HBox borderStyle="none">
      <mx:Button id="button_to_start" label="Click to Start" buttonDown="start()" width="10" height="10"/>
    </mx:HBox>

    <comp:Game id="main_game" borderStyle="solid"/>
  </mx:ViewStack>
</mx:Application>

ここでも、「絶対必要」というわけではないものの、色々と設定をしておくと便利なので設定しておく。

各paddingを0にしておく
- ブログに埋め込む際などに余白が邪魔になるので0にしておく
初期化時に、ボタンの大きさなどをゲーム画面に合わせる
- applicationComplete（ロード完了時）にinitを設定して、widthなどの値をゲーム画面に合わせておく
ボタンを押すことでスタートさせる
- フォーカスをFlashに移すためにボタンを用意しておいた方がわかりやすいので用意しておく
- ViewStackで「スタートボタン」と「ゲーム画面」の切り替えを実現する

＝実行確認＝

上の二つのファイルを用意したら、次の手順で実行確認する。

cygwinを起動する
ファイルのあるフォルダ（home/Flex/ActionTemplate）に移動する
- 普通はhomeに居るはずなので、「cd Flex/ActionTemplate」で移動。
「amxmlc Main.mxml」でコンパイル
- 「mxmlc Main.mxml」ではコンパイルできないので注意

これで「Main.swf」というファイルができるはずなので、これをブラウザにドラッグ＆ドロップして動作確認する。ボタンが表示されて、クリックしたら空っぽの枠が表示されればOK。

次回以降もドラッグ＆ドロップで確認するのは面倒なので、以下のどちらかを用意しておいた方が良い。

Main.swfを埋め込んだhtmlをローカルに用意して、それをブラウザで表示・更新して確認
デバッグプレーヤーを入れて直接swfを実行できるようにする

デバッグプレーヤーに関してはhttp://www.red-mount.com/blogs/show/flash_debug_player_installが詳しい。また、初期状態ではローカルのファイルをロードする時にエラーが出るので、Adobe - Flash Player：設定マネージャ - グローバルセキュリティ設定パネルのページにある「これらのファイルとフォルダを常に信頼する」の「編集→追加」から、「C:\home\Flex」を指定しておく。

来週から画像の表示に入る。