OpenFlを使ってみる

NMEからOpenFlになってずいぶん経ちますが、久しぶりに使ってみようと思いました。

OpenFlの使い方

インストール

OpenFlのサイト右上にあるDownloadを選択して指示に従ってインストールすればOK。
Haxe、Lime、OpenFLの順にインストールする。

直接ダウンロードするのはhaxeのインストーラだけ。後はhaxelib経由でダウンロード＆インストールできる。

プロジェクトの作成

lime.bat create openfl:project ExampleProject

ExampleProjectは適切なプロジェクト名を入れる。
生成されたExampleProject.hxprojやproject.xmlを適切に修正する。com.exampleやCompany Nameと書いてある部分を適切な物に変える。

ソースコードの修正

試しに画面を余白10px空けて赤く塗りつぶしてみる。Source/Main.hxを次のようにする。

package;

import flash.display.Sprite;

class Main extends Sprite {
    public function new () {
        super ();

        graphics.beginFill(0xff0000, 1.0);
        graphics.drawRect(10, 10, stage.stageWidth-20, stage.stageHeight-20);
        graphics.endFill();
    }
}

ビルド

lime.bat build html5 とか lime.bat build flash とか。

(Cygwinのmakeから実行したいので.batを付けている)

実行

html5なら cygstart Export/html5/bin/index.html とか。

flashなら cygstart Export/flash/bin/ExampleProject.swf とか。

(cygstartは引数で指定されたファイルをWindowsで関連づけられたアプリケーションで開くCygwinのコマンド)

リサイズ対応

Webブラウザでhtml5を表示したにせよデスクトップのFlashプレイヤーでswfを実行したにせよ、ウィンドウサイズを変更したときに右端や下端の余白が10pxで無くなってしまいます。
なので、リサイズされたらグラフィックスを変更するようにします。

package;

import flash.display.Sprite;
import flash.events.Event;

class Main extends Sprite {
    public function new () {
        super ();

        resize();

        stage.addEventListener(Event.RESIZE, function(e:Event){resize();});
    }

    function resize():Void
    {
        // stage.stageWidth, stage.stageHeight変更直後の処理を書く。
        updateBackground();
    }

    function updateBackground():Void
    {
        graphics.clear();
        graphics.beginFill(0xff0000, 1.0);
        graphics.drawRect(10, 10, stage.stageWidth-20, stage.stageHeight-20);
        graphics.endFill();
    }
}

(アニメーション)フレーム毎の処理

試しに赤いボールを画面端でバウンドさせながら移動させてみる(超適当)。

package;

import flash.display.Sprite;
import flash.display.Shape;
import flash.events.Event;

class Main extends Sprite {
    public function new () {
        super ();

        // ボールを作る。
        var ballShape = new Shape();
        ballShape.graphics.beginFill(0xff0000, 1.0);
        ballShape.graphics.drawCircle(0,0,16);
        ballShape.graphics.endFill();
        addChild(ballShape);

        var ball = {
            x:100, y:100, vx:4, vy:4, shape:ballShape
        };

        // フレーム毎に移動させる。
        addEventListener(Event.ENTER_FRAME, function(e:Event){
            ball.x += ball.vx;
            ball.y += ball.vy;
            if(ball.x > stage.stageWidth){
                ball.x = stage.stageWidth;
                ball.vx = -ball.vx;
            }
            if(ball.y > stage.stageHeight){
                ball.y = stage.stageHeight;
                ball.vy = -ball.vy;
            }
            if(ball.x < 0){
                ball.x = 0;
                ball.vx = -ball.vx;
            }
            if(ball.y < 0){
                ball.y = 0;
                ball.vy = -ball.vy;
            }
            ball.shape.x = ball.x;
            ball.shape.y = ball.y;
        });
    }
}

(赤いボールはグラデーションで影を付けたかったのだけど、html5版のGraphics.beginGradientFillはまだ実装されていなかった)