ゼットコードログ

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

OpenFLのプログラムをiOSの実機で動かす

OpenFL

androidのときのようにsetupコマンドを最初にやるのかと思ったらそうではないみたい。

YouもXcode入れるかい？みたいな質問がでてきてそれで終わっちゃう。

//これはやっても意味なし！！
$ lime setup ios

手順

  1. Xcodeのインストール
  2. 証明書ファイルをセット
  3. iTunes経由でプロビジョニングプロファイルを実機に入れる
  4. lime test ios
  5. 動き出す

Xcodeは普通にAppStoreからダウンロードしてインストールすればOKです。

その後、開発用の証明書を作成して project.xml に次のように設定を入れておきます。

この例だとios_dev.p12が証明書のファイル名で、一緒にパスワードも書いておけます。

<certificate path="ios_dev.p12" password="abcdef" if="ios"/>

iOS実機の場合はさらにプロビジョニングプロファイルをiTunes経由で先に仕込んでおきます。 私はこれに気が付かなくて小一時間悩みました。

あとは他のプラットフォームと同じようにlime test ios で動作すると思います。

$ lime test ios

Androidと違ってシュミレーターの起動速度が速いので、デバッグ時はこちらを使うのがいいかもしれません。 ある程度出来上がったら、実機で確認というパターンでしょうか。

$ lime test ios -simulator

OpenFL XMLのデータを読み取る

OpenFL Haxe

次のような流れでやってみます。

  1. 天気予報のXML情報を取得
  2. XMLの情報を解析
  3. 画面に表示する

XMLは天気情報をXMLで提供してくれているところから取得してみます。

気象庁の天気予報情報を XML で配信 - drk7jp

var requestUrl:String = "http://www.drk7.jp/weather/xml/13.xml";

XMLはHaxeのhaxe.xml.Fastを使うと楽です。

var fastXml = new haxe.xml.Fast(xml);

Fastが大分サポートしてくれるけれども、それでも、for文とif文の連発になってしまう・・ このあたりはActionScriptのほうがもっと簡単に書けるなぁ。属性でフィルタリングしたりできたし。

Android向けにビルドする場合はproject.xml に パーミッションを設定しておきます。

<android permission="android.permission.INTERNET"/>

Parse XML

f:id:z-ohnami:20140506002638p:plain

OpenFL 日本語のフォントを使う

OpenFL

TextFormatでフォントファイルを設定します。

まずは、projet.xmlのリソースファイルでフォントの場所を指定しておきます。

<assets path="assets/font" rename="font" />

で、コードの中では Assets.getFontでフォントを取得して

var font = Assets.getFont ("font/misaki_mincho.ttf");

TextFormatでフォントを指定し

format.font = font.fontName;

TextFieldでformatを紐付け。これでOK。改行は'\n'でいけそう。

_text.text = 'z.ohnamiです。\nIs there any problem ？';
_text.setTextFormat(format);

またはdefaultTextFormatを使う。 text.defaultTextFormat = format; text.text = 'z.ohnamiです。\nIs there any problem ？';

重要なのは順番でtextプロパティを設定した後にsetTextFormatしないとフォントなどTextFormatに指定した内容が反映されないです。 逆にdefaultTextFormatはtextプロパティ設定の前に指定しておきます。

use Font Resource

フォントはこちらのファイルを使わせていただきました。謝。

8×8ドット日本語フォント「美咲フォント」

OpenFL サーバーのAPIを実行して値を取得する

OpenFL

画像の次は文字列です。 apiを叩いて、データを取得する。よくある日常です。

文字列をJSON形式としてパースしています。

var data:String = cast(event.currentTarget.data, String);
var user = Json.parse(data);

var text:TextField = new TextField();
text.text = user.name;

get API Data from server

OpenFL サーバーから画像を取得する

OpenFL

ローカルではなくて、サーバーから動的に画像を取得して表示したい。 とてもよくあることです。

Loaderクラスを使ってみましょう。 読み込み完了時に発動する関数をセットして、その後に画像表示処理を書いていきます。

var requestUrl:String = "http://192.168.24.24/img/hana.jpg";

var loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onLoadError);
loader.load(new URLRequest(requestUrl));

で、lime test flashだと画像が表示されない・・ html5でビルドすると普通に表示された。なぜ？

最初、セキュリティ設定がproject.xml にあって、外との通信を弾いているのかと思ったけどそうでもないっぽい。 これは実機で動作するか確認したほうがいいっすね。

オフィシャルのAPI一覧を見るとLoaderクラスは「Available on all platforms」とあるが・・

display Image from web server

OpenFL イベント発生時にデータも送る

OpenFL Haxe

DataEvent というのがあって、それを使います。

データは文字列に変換しておきます。 最初、cast(value,String) というのがいいのかと思ったら、 コンパイルエラーが出たので使ってないです。

_rect.dispatchEvent(new DataEvent(MyRect.EVENT_MOVE,false,false,Std.string(getNextColor())));

受ける側はこのように。コールバック関数の引数の中に入ってやってきます。

private function onReceiveEvent(event:DataEvent):Void
{
    trace(event.data);
    x += 10;
    y += 10;
    drawRect(Std.parseInt(event.data));
}

Event with data

OpenFL 自作のイベントをクラスに送る

OpenFL

イベントをクラスとかに送れないと、開発はできないでしょう。

MyRectというクラスを作って、1秒毎にイベントを送るテストをしてみました。 これもActionScriptと同じといえばおんなじで、dispatchEventでやれちゃいます。

private function onTimer(event:TimerEvent):Void
{
    _rect.dispatchEvent(new Event(MyRect.EVENT_MOVE));
}

イベントの定数はHaxeにconstがないらしく、inlineというのがあるらしい。

public static inline var EVENT_MOVE:String = 'event_move';

今回は bubble まで 試していないけど、多分いけるんじゃなかろうか。

test Dispatch Event