2013年01月13日 14:10

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号」は公道デビュー…というか、実際のアプリケーション内にはじめて姿を表わすことになる。

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

 …って…シンプルで何の変哲もない灰色の四角形…なんだか痛車には程遠いなぁ。
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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

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