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はまだ実装されていなかった)