2013年01月19日

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ベースでは重い。ここは少々工夫が必要になってくるところかもしれないかな。
posted by 管理人 at 13:36| Comment(0) | 雑談 | このブログの読者になる | 更新情報をチェックする

2013年01月13日

Haxe + NME 1回目 四角を描いたりとか

 いきなりだが、ぶっちゃけ小生はHaxeもNMEもよくわからない。わからないからこそ、テキトー思考で色々体当たりしてみたいと思う。重要なのは、その記録を残すことである。というか、いい加減40歳を超えるとこうやって書いとかないと忘れるのよね。

 Haxe単体は何となくAS3なりjavaScriptなりと同じ雰囲気で回せそうな手応えである。クラスの作り方とかも似た感じかな。演算関連も変な癖があったりとかじゃないので、大丈夫。あとは描画関連か。じゃぁNMEで画面にグラフィック的な物を何か書いてみようというあたりから始めてみようか。

 というわけで、最初から。まずはFlashDevelopを立ち上げて、「プロジェクト」の「新規プロジェクト」。でもって、「Haxe」という囲いの中の「NME Project」を選ぶ。下の方の「名前」とか「場所」とかは、ぶっちゃけファイル名関連なので気にしない。とはいえ、「名前」は出来上がりのファイル名になったりしそうな予感もするので、後悔しない名前にしておくと良さそうな気がしないでもない。というか、下手にファイル名だけ変更しようとすると、ソースリストのプロジェクトだのパッケージだのクラス名だの変なところを変更しなければ動かなくなるという罠がこれまで多数あった故、避けたい。つまり結論から言うと、まぁ、変な名前はつけるな一度つけたら二度といじるなって程度で。

 プロジェクトの新規作成ダイアログで「OK」を叩くと、何やらファイルが色々作られる。どのファイルをいじっていいかは…確証はないけど、経験的に「src」っていう中にある「Main.hx」がソースファイルの起点なんだろう。ダブルクリックして、FlashDevelop内に表示っと。

 うぉぅ、40行くらいある。いや待て、落ち着け。これは罠だ。とりあえず素数を数えて…じゃなくて、深呼吸をしながら全体を見回してみよう。


private function init(e)
{
// entry point

// new to Haxe NME? please read *carefully* the readme.txt file!
}


 ふむ。わざわざ「エントリーポイント」ってコメントがあるな。じゃ、ここに何か書いていけばいいんですな。理解。

 理解したら、次だ。エントリーポイントがわかったとはいえ、ここにダラダラ書くのは少々怖い。このファイルはできる限りそっとしておきたい。下の方を見ると何やら「stage」なんて単語も出てくるあたり、基本はActionScript3で行けそうな予感がするし、何やら「splite型」がありそうな雰囲気なので…よし、別クラスを作ってsplite継承して、やりたい事を全部そっちに乗っけてみようか。

 というわけで、善は急げ。思い立ったら即試行。…いや、これホントはプログラマー的にやっちゃいけない事だよね…とか思いつつ、まぁ日本語のリファレンスとか無いんだし英語版だってそんなに多く見つからないし。試行錯誤で覚えるのがいいっしょ。

 FlashDevelopの「プロジェクト」の窓(開いてなければ「表示」の「プロジェクトマネージャー」)で、「src」というフォルダを右クリック、「新規作成」の「new class」。ファイル名は適当に。まぁテストなので「NewClass」のままでもいいか。

 これで出てきたのは、次のコード

class NewClass
{

public function new()
{

}

}


 うん、シンプル。何もない。これですよ、これ。昔の言語はこういうシンプルな場所から書き始めたから理解しやすかったけど、最近の言語はそうじゃないの多すぎ。いや、小生の懐古はほっといて、こっから始めましょうか。

 まず、目標。画面に四角を描く。

 AS3の考え方だと、画面全体は「Stage」という特殊な描画領域。その上に、レイヤー的に「Sprite」とか「MovieClip」とかの描画領域を何枚も乗せる感じ。Haxe+NMEでもこのSpriteはあるようだ。じゃぁ、このSpriteというクラスを継承して、適当に四角形を描いて、Stageに乗っけりゃいいのかな。

 え?…クラス?…継承?小難しい解説は色々あるけど、実はあんまり難しく考える必要はなかったりするのです。

 たとえば、車。シビックでもカローラでもマーチでもいい。仮にシビックにしておこうか。これがプログラムの世界で言う「クラス」の1つと思う事にする。で、シビックを1台買ってきて痛ステッカーを貼りまくると、それはシビックであるものの、世界中で一つだけの別の何かになる。つまり、シビックという物の一つでありながら、他のシビックとは「ちょっと違う」という状態である。オブジェクト指向的には、こういう状態を「シビックを継承した痛車」と言う…んだと思う。また、同じステッカーを作りまくって同じデザインの痛車を作りまくれば、その「痛車クラス」が量産出来たりもする。

 Spriteクラスも似たような感じで、とりあえず「描画領域」という機能を持つ1つの「クラス」だという認識で行ってみよう。たぶん他にも色々機能があるんだろうけど、今は四角形が描ければいいんだから。じゃ、Spriteというベース車を買うとしようか。


class NewClass extends Sprite


 「extends Sprite」という二単語を足しただけ。コツは、この「Sprite」を入力する時に、FlashDevelopのコード補完で「nme.display.Sprite」を選ぶ(他のでもいいのかもしれないけど・・・)事だと思う。いや、確証はないんだけど、これ選んどくと上の方に適当なインポート文を足してくれるっぽいので。

 で、これでこの「NewClass」は「Sprite」と同じ物になった…はずだ。少なくとも、同じ見た目になったはずである。

 ここで、別の見方をしよう。車を納車するためには色々な「初期手続」きがあったりする。プログラム上の「クラス」も「初期化」なんてのがよくあるわけで…それも一応やっておいた方がいい気がする。いや、もしかしたら継承元のクラスに初期化の手続きが必要ないのかもしれないけど、あるかないか判断出来ないなら一応やっとくのが安全策かと。


public function new()
{
super();
}


 というわけで、この「super()」を追加。これは、元になる「Sprite」クラスの初期化部分を実行してくださいという意味らしい。ま、おまじない的な物だとしとくのがいいかな。

 あとは、たぶんAS3と同じだろうと信じて、Spriteクラスに「ステッカーを貼って痛車に仕上げる」感じで、やりたい事を実装すればいい。


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


 よし、Spriteをベースにした我が「NewClass」に、灰色(beginFillで0x888888)の、四角形(drawRectで座標20,20から縦横60)のステッカーを貼り付けたぞ、と。「graphics」については、グラフィック的に色々やるのに必要なおまじない程度に今は思っておくことにする。あと「endFill」は「ステッカー貼るの終わったよ」的な何かね。

 あとは…FlashDevelopの上の方にあるプルダウンボックスから「HTML5」あたりを選択して(Flashとか選んじゃうとプレイヤーが必要だったりとか色々面倒なんで、HTML5ならブラウザで見れるし)…[F5]なり[Shift]+[Enter]なりで実行してみると…うん、何も出ない。

 そりゃそうだ。まだ痛車を作っただけ…正確には、痛車の仕様を決めただけである。これを実体化させて、公道に出さないと誰にも(プログラムの世界の場合、作った本人にも)見ることが出来ない。この場合の公道とは、最初にあった「Main.hx」の「stage」…のはずだ。なので、そちらのエントリーポイントに戻って、ちょこっとだけいじらないといけないか。


private function init(e)
{
// entry point

var itaSprite1:NewClass = new NewClass();
stage.addChild(itaSprite1);

// new to Haxe NME? please read *carefully* the readme.txt file!
}


 2行ほど追加してみた。最初の行の「itaSprite1」とは「痛スプライト1号」。つまりは、この車の名前である。「:」以降の「NewClass」は、先程作った新しいクラス、つまりこの「痛車の車種」である。でもって、「new」以下で「新しくこのクルマを作りました」という状態になる。早い話、この1行で「新たな」痛スプライトが出来たという感じかな。

 で、次の行。「stage」は公道みたいな物。出来上がりのアプリの描画領域全体ですな。ここに「addChild」という命令で「公道デビュー」させる事が出来る。で、「何を」公道デビューさせるかというと、addChildの括弧内の「itaSprite1」である。この1行で我が「痛スプライト1号」は公道デビュー…というか、実際のアプリケーション内にはじめて姿を表わすことになる。

 ここまでできたら、もいちど実行。ブラウザに灰色の四角が表示されたら、ミッションコンプリートである。

 …って…シンプルで何の変哲もない灰色の四角形…なんだか痛車には程遠いなぁ。
posted by 管理人 at 14:10| Comment(0) | Haxe | このブログの読者になる | 更新情報をチェックする

Haxe + NMEことはじめ

 Haxeというプログラミング言語があるそうな。コンパイル型の言語ではあるが、CPUやOSに対してのネイティブなコードを吐き出す類の物ではなく、太古のPascalや現在のJAVAのように中間言語を吐き出すタイプにおそらくは分類出来るのではなかろうか。面白いのは、この吐き出す中間言語に相当する物がjavaScriptだったり、FlashのActionScriptだったり、その他色々な言語での吐き出しが出来るそうな。ふむ…。こういう変態的(ほめている)な道具は大好きである。

 実はこれを知ったのは随分前なれど、年のせいか重い腰が持ち上がらなかったのだが…連休の暇さ加減に飽きがさし試してみる事にした。いや…別途やらなきゃいけない仕事もあるんだけどさ。太古の時代よりこういった行為を「現実逃避」と呼ぶのだな、きっと。

 で、早速。インストールについては、開発環境のFlashDevelopとHaxe本体を入れてしまうだけという割と簡単な物。ぶっちゃけFlashDevelopについては、小生はFlash系で色々やっていたため導入済みで何の問題もない。まぁ、この辺のインストールについては他のサイトに譲ろう。というのも、特にFlashDevelopあたりは結構頻繁に更新が入るため、小生がここで記しても、すぐにやり方が変わってしまうからである。ふむ。諸行無常という奴であろうか…いや、単に書くのが面倒くさいだけである。といっても、現時点では最新版をダウンロードして、デフォルトでインストールして終わり、なんだけどね(あ、書いちゃった)。

 さて。最初の一歩、もはや世界共通の様式美である「HelloWorld」を書いてみる。うん、普通に出来た。日本語は大丈夫だろうか。「疲労ワールド」。うん、ここまでは問題ない。

 では…次のステップかな。画面に線を引いてみよう。

 ………あれ?

 ………グラフィック系に関するリファレンスが見つからない!?

 ………コード補完をひと通り眺めてみても、よくわからない!?

 むぅ。FlashDevelopのプロジェクト作成時に「Haxe AS3 Project」を選んでいれば、ActionScript3のムービークリップやスプライトと同じ扱い方で書けそうなので、そっちなら線だの四角だのを描いたり動かしたりは余裕なんじゃなかろうか…というあたりは理解したのだが、それだと出力もFlashだけになってしまう。小生がやりたいのは、それをHTML5+javaScriptで描いたり動かしたり、時々Android端末に持って行ったり、そんな感じの事なのである。故にこれではダメだ。もうちょっと何かないのだろうか?

 と、ネットを彷徨っていたら「NME」なる物を見つけた。Haxeで使用する、一つのコードからAS3だのjavaScriptだのを吐き出せるライブラリだそうな。…あれ?Haxeの謳い文句と同じじゃね?

 あぁ、そうか。Haxeは言語仕様がメインであって、対応している全部の言語の「最小集合」とでも言うか、そういう感じの部分なんだろうな。それで、ある言語では出来るけど別の言語では出来ないような物は、それを吸収するための、つまりは「出来ない方の言語」で「出来る言語のそれに相当するルーチン」をライブラリとして作っておかなきゃ無理だよなぁ。確かに、AS3のムービークリップなんて他言語じゃライブラリ作らないと無理だな。…という感じに理解した。

 何はともあれ。NMEをダウンロードしてきてインストール。FlashDevelopからHaxeのNME Projectを作成。何もしないでコンパイル、ラン。

 …動かない。エラーではじかれる。というか、コンパイル時にコマンドが見つからないと言われる。諸々のトライがあったがそれは省略して結果だけ書くと、環境変数の関係か知らんが再起動で通るようになった。わはは。

 というわけで、しばらく備忘録も兼ねて Haxe + NME の話でも書いてみたいと思う。
posted by 管理人 at 14:03| Comment(0) | Haxe | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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