ゼットコードログ

コード的な何かを書いていきます。

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 project.xml

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だとflashhtml5でビルドしてテストできるから、エミュレーターはまず使わない気がする。

それでも、それでも、次を実行すれば遅いエミュレーター君が頑張って立ち上がってくれます。

$ 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

Fix OpenFL part 1

次にインターフェースのIDataInput.hxも一緒に直しておく。

Fix OpenFL part 2

さらに 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 あとはやってて、何か問題出たら調べよう。

Fix OpenFL part 3

これで動いた。内容的には単なる記述ミスですね。 そしてこの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/openfl-samples · GitHub

OpenFLでHelloWorld

OpenFLでお決まりのHelloWorldしてみます。 まずはプロジェクトを作りましょう。

$ lime create openfl:project MyProject
$ cd MyProject

プロジェクトをビルドして実行します。ひとまず、flashにしています。

$ lime build project.xml flash
$ lime run flash

真っ白な画面でウィンドウが立ち上がったらひとまず成功。 HelloWorld的なコードをMain.hxに書き足していきます。

OpenFL HellowWorld

再度、lime build&run すれば文字が出た!!

開発をしていると、頻繁にlime build - lime run を繰り返すので2回コマンド叩くのも億劫になってきます。 lime test すると、このふたつを続けて実行してくれます。

$ lime test flash

OpenFLをインストールする(Mac)

OpenFLをインストールする。 Windowsだと、FlashDevelopがあって何かと便利なようですが、 Macでもコマンドラインとか使って、普通に開発できますね。

以下、インストールしたときのメモです。

SetUp OpenFL for Mac