ゼットコードログ

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

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

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

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

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

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

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

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

test Dispatch Event

OpenFL trace文でデバッグする

printfデバッグをしたい。そのときは trace文を使いましょう。

trace('OpenFLいろいろ');

flash でbuildすると、画面にどんどん表示されます。

trace文が少ないうちはいいけど、これは実際にアプリを作るときは使えないかもしれない・・ 多分、trace文で埋もれてしまう・・

traceをしているファイルと行数がデフォルトで出るのはわかりやすくてよいですね。

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

html5でビルドすると、ブラウザのJavascriptコンソールに吐き出してくれます。 あとはデバッグしたいなら、やっぱりFlashDevelopになるんかなぁ。 ブレークポイントも使いたいしなぁ。

Adobeさん、FlashBuilderでOpenFL使えるようにしてください。

OpenFL クリックイベントを取り扱う

これも定番。

イベントを仕込みたいオブジェクトに対してメソッドを紐付ける。

_rect.addEventListener(MouseEvent.CLICK,onClick);

こちらは四角をクリックしたら、色が変わるコード。

test Mouse Event

OpenFL 時間を表示してみる

定番の時間表示をしてみよう。

現在の時刻を取得して、1秒間隔で更新します。

時間の取得はHaxeで提供されている機能でやります。 最初、自力で文字列つないだりしてたんですが、HaxeだとDateToolsというのがあって色々便利そう。

//  var date:Date = Date.now();
//  var timeText:String = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    var timeText:String = DateTools.format(Date.now(),"%H:%M:%S");

時間を表示するためのTextFieldを用意します。 defaultTextFormatを先に設定しておかないと、フォーマットが更新される前の素の状態で一瞬文字列が表示されてしまうようです。

var format:TextFormat = new TextFormat();
format.align = TextFormatAlign.CENTER;
format.size = 30;
format.bold = true;

_text = new TextField();
_text.defaultTextFormat = format;

_text.text = setCurrentTimeText();
_text.textColor = 0x000000;

タイマー設定。なんのひねりもなし。

_timer = new Timer(1000);
_timer.addEventListener(TimerEvent.TIMER,onTimer);
_timer.start();

さあ、時計が表示されました。時が進んでいく・・

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

ソースコードはもう、まんまActionScriptですね。

Display Current Time

OpenFL 画像を回転させる

画像を回転させてみる。

回転自体はrotationプロパティを指定すれば 指定した角度分だけ回転して表示されます。

//90度回転
_bmp.rotation = 90;

ただ、これだと左上を基準にして回転します。 回転を入れたいときに、中心を基準にして回転させたいことがよくあります。 そこで、Spriteを作って中にビットマップを入れるやり方をやってみました。 表示と回転を分離させます。

_sprite.x = (stage.stageWidth) / 2;
_sprite.y = (stage.stageHeight) / 2;

_bmp.scaleX = 0.5;
_bmp.scaleY = 0.5;
_bmp.x = -(_bmp.width / 2);
_bmp.y = -(_bmp.height / 2);

_sprite.rotation = 45;

これで中心点を基準にして回転してくれます。

FlashでStarlingというフレームワークがあって、 基準点の位置をpivotX = xx,pivotY = yy みたいな感じで指定できた。 今思えば、実は結構すごいことだったんだなぁ。

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

OpenFL rotation image via center position.

OpenFL 画像を表示させる

この手の類のものは画像を表示できないとです。

まず、project.xml で assetの置き場所を指定してあげます。 この場合は assets/img というフォルダ内に画像をわんさか置いていくことになります。

<!-- assets -->
<icon path="assets/openfl.svg" />
<assets path="assets/img" rename="img" />

次にソースコード。 projet.xml で "rename"という項目で別名を設定しているので、画像のパスは別名から始まります。

_bmpData = Assets.getBitmapData ("img/my-kamon1.png");

gist11312245

せっかくの機会なので、以前私が作った 我が家の家紋をアレンジした画像を表示させました。 サイズが大きかったのでscaleで大きさを半分にしています。

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

OpenFLのupgrade

OpenFLのver 1.4.0 が公開されたようです。

OpenFL 1.4 Release

以前のバージョンをすでにインストールしている場合は lime upgradeコマンドを叩いくと新しいバージョンをすぐに入れることができます。

$ lime upgrade openfl

これでいいらしい。

1.4.0 の主たるリリース内容は、まだ自分にはよくわからないけれど Additionalの部分で swfファイル を再生できるライブラリを紹介していて これは結構便利かもしれないと思った。