OpenFL プロジェクトの設定
アプリケーションのそもそもの設定などは projext.xml に書いていくようです。 この記事は徐々に調べて行った結果を継ぎ足して行こう。
画面の幅と高さを調整する
ひとまず、画面の幅と高さを調整したかったので、ここを調整しました。 モバイルアプリ開発では定番の 幅は320,高さは480に。 これで、PCでデバッグするときも端末と同じ画面比率でテストしやすくなるんじゃなかろうか。 "unless"というのが気になる・・ 誰か知っていたら教えて下さい。
<window width="320" height="480" unless="mobile" />
背景色を調整する
背景のデフォルトカラーも選べますね。あと、FPSも好きに指定できそう。
<window background="#FFFFFF" fps="60" />
読み込むライブラリを設定する
ソースコードのエントリーポイントと読み込むライブラリ(haxelib)はこうやって指定するみたい。 読み込んでいないライブラリの機能を使おうとすると、lime buildの時点で怒られます。
<!-- classpath, haxe libs -->
<source path="src" />
<haxelib name="openfl" />
<haxelib name="actuate" />
読み込むリソース(画像)の場所を指定する
assets pathでフォルダを指定しておきます。コード内で呼び出すときは renameで指定している名称から。
<!-- assets -->
<icon path="assets/openfl.svg" />
<assets path="assets/img" rename="img" />
AndroidのManifestファイルの内容を設定する
androidタグで設定できます。
<android permission="android.permission.INTERNET"/>
サンプルファイル
以下はproject.xml の全体です。これも徐々に充実させられたらいいなあ。
ちなみに、lime buildのときにxmlファイル名を指定すればいいから、 "project.xml"という名称は別に固定でなくてもいいみたい。
OpenFL 図形を描く
OpenFLのプログラムをAndroidの実機で動かす
初回のみ、setupコマンドを実行します。
自動的にSDKなど必要なもの一式のダウンロードが始まります。
途中でAndroid SDK Managerが立ち上がって、これこれ入れなさいよ的になるので 表示内容に従ってパッケージを入れていきます。途中で応答が消えた場合は 再度 lime setup android を繰り返していけば問題なさそう。
$ lime setup android
そしてUSBでAndroid端末をPCに接続。
あとは、いつもどおり。 lime runしたら、PCに接続した端末にプログラムが入るので 動作確認するだけです。
$ cd BunnyMark
$ lime build project.xml android
$ ime run android
後発で生まれた開発ツールだけあって、つまづきが少なくてサクッといける、洗練されてる印象。 Androidのエミュレーターでもテストできるかもしれないけど、起動が遅いので却下。 特にOpenFLだとflashやhtml5でビルドしてテストできるから、エミュレーターはまず使わない気がする。
それでも、それでも、次を実行すれば遅いエミュレーター君が頑張って立ち上がってくれます。
$ lime test android -emulator
OpenFLのサンプルでエラー
注) Haxeのバージョンが3.1.3以上の場合は特にソースを修正しなくても正常に動作します。
OpenFLのサンプルを実行しようとするとエラーが発生。 例えば、描画のベンチマーク的なことができるBunnyMarkをbuildすると、こんなメッセージが出てきます。
$ lime create openfl:BunnyMark
$ cd BunnyMark
$ lime build project.xml flash
そもそものopenFLのコード自体がおかしいらしい。次のバージョンで修正される、的なこともネットの情報にはありますが、自分で直してしまおう。
/usr/lib/haxe/lib/openfl-native/1,3,0/flash/utils/ByteArray.hx:276: lines 276-294 : Field readDouble should be declared with 'override' since it is inherited from superclass
/usr/lib/haxe/lib/openfl-native/1,3,0/flash/utils/ByteArray.hx:276: lines 276-294 : Field readDouble overloads parent class with different or incomplete type
/usr/lib/haxe/lib/openfl-native/1,3,0/flash/utils/ByteArray.hx:276: lines 276-294 : Void -> Float should be pos : Int -> Float
/usr/lib/haxe/lib/openfl-native/1,3,0/flash/utils/ByteArray.hx:308: lines 308-326 : Field readFloat should be declared with 'override' since it is inherited from superclass
/usr/lib/haxe/lib/openfl-native/1,3,0/flash/utils/ByteArray.hx:308: lines 308-326 : Field readFloat overloads parent class with different or incomplete type
/usr/lib/haxe/lib/openfl-native/1,3,0/flash/utils/ByteArray.hx:308: lines 308-326 : Void -> Float should be pos : Int -> Float
まずはByteArray.hx
次にインターフェースのIDataInput.hxも一緒に直しておく。
さらに neko でbuild した場合に次のようなエラーも出たのでこっちも直しておく。
/usr/lib/haxe/lib/openfl-native/1,3,0/openfl/utils/ArrayBufferView.hx:90: characters 9-28 : Not enough arguments
/usr/lib/haxe/lib/openfl-native/1,3,0/openfl/utils/ArrayBufferView.hx:90: characters 9-28 : Function 'readFloat' requires arguments : position
ただ、この修正で本当にあっているかは謎w あとはやってて、何か問題出たら調べよう。
これで動いた。内容的には単なる記述ミスですね。 そしてこのBunnyMarKは実行してもらうとわかりますが、色々と負荷測定とかするのに便利そう。 これを用途にあわせてカスタマイズしていけばいいのだと思う。 絵がカッコ悪いからそのへんもいい感じに変えてみよう。
OpenFLのサンプルプログラムを手に入れる
手始めに、サンプルになりそうなコードはどこかにないものか? OpenFLをインストールしたら、次のコマンドを実行することでサンプルプロジェクトが生成されます。 まずは、どのようなサンプルが入っているのか見てみましょう。
$ lime create openfl
にょろっと次のように出てきます。
You must specify a template when using the 'create' command.
Usage: lime create openfl:project "com.package.name" "OutputDirectory"
Usage: lime create openfl:(sample) "OutputDirectory"
Usage: lime create extension "ExtensionName"
Available Templates:
* openfl:project
* openfl:ActuateExample
* openfl:AddingAnimation
* openfl:AddingText
* openfl:BunnyMark
* openfl:DisplayingABitmap
* openfl:HandlingKeyboardEvents
* openfl:HandlingMouseEvents
* openfl:HerokuShaders
* openfl:PiratePig
* openfl:PlayingSound
* openfl:SimpleBox2D
* openfl:SimpleOpenGLView
* openfl:SimpleSWFLayout
* extension
「project」と「extension」以外がサンプルですね。 見たいサンプルを指定して実行すると、にょろっとサンプルプロジェクトのひな形を作ってくれます。
$ lime create openfl:ActuateExample
$ cd ActuateExample
$ lime build project.xml html5
$ lime run html5
すべてのサンプルを見たいんだけど、コマンドをいちいち打つのが面倒だと思っていたら GitHubに同じものがあった!!git cloneしてしまったほうが速いかもしれません。
OpenFLでHelloWorld
OpenFLでお決まりのHelloWorldしてみます。 まずはプロジェクトを作りましょう。
$ lime create openfl:project MyProject
$ cd MyProject
プロジェクトをビルドして実行します。ひとまず、flashにしています。
$ lime build project.xml flash
$ lime run flash
真っ白な画面でウィンドウが立ち上がったらひとまず成功。 HelloWorld的なコードをMain.hxに書き足していきます。
再度、lime build&run すれば文字が出た!!
開発をしていると、頻繁にlime build - lime run を繰り返すので2回コマンド叩くのも億劫になってきます。 lime test すると、このふたつを続けて実行してくれます。
$ lime test flash