2013年01月19日 13:36

Haxe + NME 2回目 動け!

 HTML5で多少覆ったものの、本来HTMLは静止したコンテンツを表示するのに特化した物である。というか、当初のHTMLは今みたいな綺羅びやかな物を表示するための物でも、表示出来る物でもなかったわけであり、おかげで表組などで無理やり実装していた時期とかあったなぁ、などと懐古してみたりもする。

 他方、当時からのweb上で動きのあるコンテンツ向けのライブラリと言うなら、やはりFlashに軍配が上がるであろう。Flashも言語にActionScript2(AC2)を使用していた時代は、色々と表現方法に無理があったように思えるが、それもActionScript3(AC3)になってからは大分改善され、他の開発言語とさほど遜色なくいじれる言語となったように思われる。

 そして、今回いじっている Haxe + NME の環境はというと、そのAS3の流れを多分に汲んでいるように思われる。リファレンスを見れば見るほどAS3の画面管理の系統に従っているし、ぶっちゃけ表示オブジェクトの管理用クラスに「ムービークリップ」なんて物がある時点で、Flash系と断言してしまって良いだろうという大雑把な見方をしても良いと思われる。

 例によって前置きが長くなったか。何が言いたいかというと、Haxe + NME で何か作るなら、Flashのように動いてないとダメだよね的な話である。

 さてどうするか。二次元上で「動く」という事を最小限実現するならば、「一定時間ごとに」「座標を連続的に変化」させるだけである。

 座標の変化に関しては、先のようにSpriteクラスを派生させて、適当に四角でも描画して、外から座標をいじってやればいい、というところか。まぁ、1個だけ動かすならそれでいいのかもしれないけど、複数あると案外管理が面倒になる。故に、この手のルーチンは派生させたクラス内に置くのが定石である。

 問題は、この「一定時間ごとに」である。従来のFlashを使ってた人なら「EnterFrame」関連でどうにでもなるだろう、と思うだろう。AS3それが何かと問われれば画面更新のタイミングで呼ばれるルーチンだ。で…それがあったのは、Flashだったからである。HTML5のjavascriptベースだとホントにそれがあるのか。速度的にはどうなのか。その辺が心配である。というわけで、まずは最小限の実装でテスト。

 やることは以下のとおり。

 一、「プロジェクト」と書いてあるウィンドウ(表示-プロジェクトマネージャーで表示される)の、「src」で右クリック、「新規作成」の「New Class」で新しいクラスを作る。

 二、新しいクラスに、初期設定として適当な四角を描画させる

 三、新しいクラスに、座標を移動させるルーチンを設定する

 四、新しいクラスに、フレーム表示されるごとに呼ばれる関数として移動ルーチンを登録する

 五、Main.hxで、新しいクラスを呼び出す

 まぁ、こんなもんか。ぶっちゃけ「一」「二」「五」は前回のがそのまま使えるな。というわけで、「三」から実装してみよう。話はかな〜り簡単であり、継承元のSpriteくらすが持つ変数「x」とか「y」をいじってやれば良いだけである。つまり…

public function moveSelf():Void
{
x ++;
}

 いや…これは簡単すぎるか。せめて端に行ったら戻ってこよう。

public function moveSelf():Void
{
x ++;
if (x > stage.stageWidth) x = -width;
}


 続いて、「四」。以前の「new」部分に1行だけ追加。

public function new()
{
super();
graphics.beginFill(0x888888);
graphics.drawRect(20, 20, 60, 60);
graphics.endFill();
addEventListener(Event.ENTER_FRAME, moveSelf);
}

 「event.ENTER_FRAME」は、「nme.events.Event.ENTER_FRAME」と打とうとすると自動的にこうなってくれる。FlashDevelopって便利。

 ただ、このままでは先ほどの移動ルーチンが自動呼び出しを受け付けてくれない。故に、ちょっといじる必要がある。

public function moveSelf(evt:Event):Void
{
x ++;
if (x > stage.stageWidth) x = -width;
}

 「addEventListener」で指定する関数は「Event」型の入力がないとエラーになってしまう。まぁ、現時点では深く考えずに「()」の部分を「(evt:Event)」と変更して、変数の指定だけしておこうか。

 うん。動いた動いた。大丈夫だ。

 ただ、問題は速度。ちょっと試してみたところ、小生の環境で100個くらいのオブジェクトだと、Flashで吐き出す分にはギリギリ何とかなってる感じだが、HTMLベースでは重い。ここは少々工夫が必要になってくるところかもしれないかな。
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。