[flixel入門2] 画面遷移をしてみよう

2009/11/5

こんにちは。きんくまです。
「沈まぬ太陽」観てみたいです。

さて、今回は画面遷移をしてみようです。
>> 今回できたものはこちらです。

>> ソースファイル一式はこちらです。

flixelのロゴが出て
flixel_2_fig2

スタートボタンがあって
flixel_2_fig3

おすとwelcomeの文字がでる
flixel_2_fig4

まずプロジェクトを作ったら、前回解凍してできたファイルのうち、
\com\adamatomic\flixel以下を
プロジェクトファイルのsrc以下にコピーしておきます。

それでMain.asはFlxGameを継承しておきます。

package
{
  import com.adamatomic.flixel.FlxGame;

  [SWF(width="640", height="480", backgroundColor="#000000")]
  public class Main extends FlxGame
  {
    public function Main():void
    {
      super(320, 240, MenuState, 2, 0xFF000000, true, 0xFFD7FCFF);
    }
  }

}

FlxGameはゲームの大枠の初期設定をします。
superの中身

function FlxGame (GameSizeX : uint, GameSizeY : uint, InitialState : Class, Zoom : uint, BGColor : Number, ShowFlixelLogo : Boolean, FlixelColor : Number, FlixelSound : Class, Frame : Class, ScreenOffsetX : uint, ScreenOffsetY : uint) :

よくわからないプロパティもあるので、必要な部分だけ解説

GameSizeX: uint　…　ゲーム画面の横幅ピクセル数
GameSizeY: uint　…　ゲーム画面の縦幅ピクセル数
InitialState: Class　…　最初に遷移するFlxStateのクラス名
Zoom: uint　…　ピクセルを何倍するか？たとえば2とすると、実際の画面では1pxが2pxとして表示される。
BGColor: Number　…　Flashの背景色(ARGB)
ShowFlixelLogo: Boolean　…　flixelのロゴを一番最初に表示させるか
FlixelColor: Number　…　上記で表示させる場合、その色の設定(ARGB)

という感じ。これはあんまり重要じゃないんで次にいきます。

画面遷移

flixelはFlxStateというものを継承したクラスをきりかえてゲーム画面を変更します。
たとえば、メニュー画面、プレイ画面、エンディング画面など。

FlxStateはDisplayObjectContainerのようなもので、そこにいろいろなものを吊るして表示していきます。

flixel_2_fig1

SpriteとかButtonとかTextとかはflixelの方で拡張したものです。

さきほどFlxGameの引数に一番最初に表示するFlxStateを設定するところがありました。
今回はMenuStateというクラスを作ってみます。

package
{
  import com.adamatomic.flixel.*;

  public class MenuState extends FlxState
  {
    [Embed(source = 'data/finger.png')] private var Finger:Class;
    private var startButton:FlxButton;

    public function MenuState()
    {
      var bg:FlxSprite = new FlxSprite(null, 0, 0, false, false, 100, 20, 0xff39827E);
      var bgov:FlxSprite = new FlxSprite(null, 0, 0, false, false, 100, 20, 0xff82C8C5);
      var text:FlxText = new FlxText(0, 4, 100, 20, "PRESS START", 0xffffff, null, 8, "center");
      startButton = new FlxButton((FlxG.width - 100) / 2, (FlxG.height - 20) / 2, bg, startGame, bgov, text);
      add(startButton);

      FlxG.setCursor(Finger);
    }

    private function startGame():void
    {
      FlxG.switchState(PlayState);
    }


  }

}

それで、ここで各クラスの解説をしようと思ったのですが、力尽きそうなので本家のdocを読んでください。
flixel documentation
この解説はダウンロードしたファイルたちの中にも入っていて、
nanodoc.htmlを開くと見ることができます。

わからなそうなところだけ。

■
[Embed(source = ‘data/finger.png’)] private var Finger:Class;
これは、finger.pngという画像を埋め込んでいます。
それを
FlxG.setCursor(Finger);
というところで使っています。
FlxGはユーティリティ全般で利用するクラスで、ボタンを押したかどうかの判定や音を鳴らしたり、自動当たり判定なんかにも使われます。
で、今回はマウスカーソルを埋め込んだ画像にさしかえています。

■
add(startButton);
これで、この部分のちょくぜんにつくったFlxButtonを画面表示に吊るして追加してます。

■
FlxG.switchState(PlayState);
ここが一番重要なところで、PlayStateという別画面へ遷移する命令です。

遷移先

package
{
  import com.adamatomic.flixel.*;

  public class PlayState extends FlxState
  {
    private var text:FlxText;

    public function PlayState()
    {
      text = new FlxText((FlxG.width - 300) / 2, 60, 300, 200, "Welcome to \nflixel world!", 0x44C4C0, null, 32, "center");
      add(text);
    }

  }

}

遷移先はただFlxTextをいれただけです。