[AS3] Hello flixel « きんくまデザイン

[AS3] Hello flixel

2009/10/5

こんにちは。きんくまです。

ファミコン風のゲームを作るのに便利なライブラリにflixelというのがあります。

flixel_test1_1

>> flixel
>> flixel API

ビットマップ系のゲームを以前に作ろうと思ったことがあったんですが、
飽きっぽい私の性格のせいですぐ挫折しちゃいました。
これならできるのかも！？

pngを用意してあげれば、パターンを指定するだけで便利にアニメーションしたり、
スムーズにスクロールしたりしてくれます。

これを使ったゲームがたくさんアップされています。
結構面白いです。

それで、チュートリアルらしきものは見つけられなかったのですが、
ゲーム丸々一本のソースコードがチュートリアルになっていました。
上のキャプチャでいうと、一番右上のやつです。

ソースコード見ながら、したのやつを作ってみました。

　
ボタンを押したらパーティクルが噴き出すというものです。

まだ詳しく見ていないのですが、サンプルを見ると
Progressionみたいに、シーンを管理しつつ、
FlxSpriteやFlxText、FlxButtonなんかを継承したものをいじるみたい。

ソースは最後に。

——
以下無駄話

最近２冊のアニメの監督の本を読みました。
>> 神山健治の映画は撮ったことがない~映画を撮る方法・試論 (STUDIO VOICE BOOKS) (単行本（ソフトカバー）)
>> アフタヌーン新書 010 これが「演出」なのだっ天才アニメ監督のノウハウ (新書)

そしたら、どちらも昔の映画でいわゆる名作というやつが結構紹介されてました。
ヒッチコック、チャップリン、黒澤明…。
それで、やっぱり見ておいた方がよいだろうと思い、とりあえず２本借りてきて鑑賞。

>> 街の灯（チャップリン）
>> 七人の侍（黒澤明）

で、感想です。※ネタばれあり。
■街の灯
盲目の女性が視力を取り戻した後に、浮浪者のチャップリンが最初は恩人だと気づきません。それで、どうやって気づくのかなー？と思っていたら、手を触れることで気づくんです。そこにやられました。なんでかはわかりません。
とにかく、ぐっときました。

その後に、夢の王子様が実は浮浪者だったと知った女性の顔と、好きだった女性に再開できた喜びと自分が浮浪者だったことがわかってしまったことで夢をぶち壊してしまった困惑との間にゆれるチャップリンの表情。

ネットによると、この最後の場面が映画史に残る名場面らしいのですが、さすがにぐっときましたね。

コメディ部分は、物語中盤のボクシングの場面は、かなり楽しめました。
ただ、チャップリンの後にさんざん真似されてどんどん使い古されてしまったギャグ（自分でいうとドリフ）が多かったので、正直言うと笑えないところがありました。
コントの根っこというか源流を見ました。
ただ、当時はすごく面白かったんだと思います。

7人の侍もと思ったのですが、長くなったので次回にでも。
では。

——————
さきほどのソースコードです。

Main

package
{
  import com.adamatomic.flixel.FlxGame;
  import flash.display.Sprite;
  import flash.events.Event;
  import test.TestState;

  [SWF(width = "640", height = "460", backgroundColor = "#000000")]

  public class Main extends FlxGame
  {

    public function Main():void
    {
      super(320,240,TestState,2,0xff000000,false, 0xffff0000);
    }
  }

}

TestState

package test
{
  import com.adamatomic.flixel.*;

  public class TestState extends FlxState
  {
    [Embed(source = '../data/cursor.png')] private var ImgCursor:Class;

    private var _txt1:FlxText;
    private var _txt2:FlxText;
    private var _startBtn:FlxButton;
    private var _effect:FlxEmitter;
    private var _isFlashed:Boolean = false;

    override public function TestState()
    {
      _txt1 = new FlxText(105, 50, 150, 32, "HELLO", 0x6287DF, null, 32);
      _txt2 = new FlxText(112, 90, 150, 32, "flixel", 0x6287DF, null, 32);
      this.add(_txt1);
      this.add(_txt2);

      _startBtn = new FlxButton(107, 150,
        new FlxSprite(null, 0, 0, false, false, 110, 15, 0xff6287DF),
        onBtnClick,
        new FlxSprite(null, 0, 0, false, false, 110, 15, 0xffffffff),
        new FlxText(20, 0,100,15,"CLICK HERE", 0x000000, null, 10),
        new FlxText(20, 0, 100, 15, "CLICK HERE", 0x000000, null, 10)
        );
      this.add(_startBtn);

      var i:int;
      var fa:FlxArray = new FlxArray();
      var es:FlxSprite;
      for (i = 0; i < 200; i++) {
        es = new FlxSprite(null, 0, 0, false, false, 12, 12, 0xff6287DF);
        this.add(es);
        fa.add(es);
      }
      _effect = new FlxEmitter(FlxG.width/2 - 50, FlxG.height/2- 30, 100, 30, fa, -3, -200, 200, -500, -100,50,-50,400);
      _effect.kill();
      this.add(_effect);

      FlxG.setCursor(ImgCursor);
    }

    override public function update():void
    {
      super.update();
    }

    private function onBtnClick():void
    {
      if (_isFlashed == false) {
        _isFlashed = true;
        FlxG.flash(0xff6287DF, 0.6, function():void { _isFlashed = false; } );
      }

      _effect.kill();
      _effect.reset();
    }
  }

}