こんにちは。きんくまです。
「沈まぬ太陽」観てみたいです。
さて、今回は画面遷移をしてみようです。
>> 今回できたものはこちらです。
flixelのロゴが出て
スタートボタンがあって
おすとwelcomeの文字がでる
まずプロジェクトを作ったら、前回解凍してできたファイルのうち、
\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のようなもので、そこにいろいろなものを吊るして表示していきます。
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をいれただけです。
まとめ
・FlxStateに各表示クラスを吊るしていく。
・各表示クラスはflixelの方で拡張したSpriteだったり、Textだったりする。
・FlxGを使って、各画面を遷移させる。
強引にまとめてみました。
このブログで関連すると思われる他の投稿
