2013年02月09日

Haxe + NME 5回目 テキストフィールド、お前もか!!

 ボードゲームのヘクスマップには、記録用にヘクスの番号がついている物があった。あれを表示してみるのもいいかもしれない。というか、どのみちマップのステータスやら、移動距離やら、敵味方の脅威度やらといった情報を、デバッグのために表示させる必要がある。なら、早いうちに簡単に表示させるルーチンを作っておくべきかもしれない。

 というわけで、早速追加。適当なテキストフィールドを作って、描画と同じような感じでループを回して、ループの内側で必要な文字列を書き込んでBitmapにdrawしてやれば良い。座標は、縦方向は六角形の上端に書くとしたら、1個前の縦座標に合わせれば良い。横方向はというと、中心点に合わせて適当に中央合わせしてやれば簡単な事だ。そう…簡単な事のはずである。

 が…
…また…はまった…。
 Bitmap.drawが上手く行かないのは4回目で書いたとおりであるから、同じ方法で逃げるとして…「TextFieldAutoSize.CENTER」がHTML5で機能してくれない。早い話、文字のセンタリングをしてくれないのである。

 あぁ…TextField、お前もか…。もし仮にNMEに「Brute」というクラスがあったとして、そのクラスの挙動が出力する環境によって異なるバグを持っていたとしたら、かのガイウス・ユリウス・カエサルでなくとも、誰もがこう言うだろう。「Et tu, Brute?」 すなわち「ブルータス、お前もか」、と。

 …はい、はい。わかりました。便利機能に頼っちゃいけないってことですね。…こうなると、もうそろそろ諦観の域である。とりあえず問題無さそうな左詰め、つまり「TextField.autoSize = TextFieldAutoSize.LEFT」にして、文字列をセットしたうえでTextFieldの幅を見てx座標を調整しましょうか。


// 文字を描画する
private function drawString(target:BitmapData):Void
{
// 文字列のフォーマットなどを指定…あんまり細かい事はしない方が安全っぽいので、フォントサイズだけ決める
var textFormat:TextFormat = new TextFormat();
textFormat.size = ySize / 2;
// 描画元になるテキストフィールドを設定。NMEを信じてはいけない。なるべくシンプルな設定で。
var textField:TextField = new TextField();
textField.defaultTextFormat = textFormat;
textField.autoSize = TextFieldAutoSize.LEFT; // うかつにCENTERとか使おうとするとNMEはコケる模様

var m:Matrix = new Matrix();
// Matrixを指定しないと、Flashで位置が動かない!!
// Shape.xとShape.yを指定しないと、HTML5で位置が動かない!!
for (y in 0 ... mapMax) {
m.ty = y * ySize - ySize;
textField.y = m.ty;
for (x in 0 ... mapMax) {
if ((x + y) % 2 == oddEven) {
// 文字列を代入。
textField.text = drawStringFunc(x, y);
// widthを元に横位置を調整。
m.tx = x * xSize - textField.width / 2;
textField.x = m.tx;
target.draw(textField, m);
}
}
}
}


 これだけ色々出てくると、クロスプラットフォーム云々はまだまだ夢なのかなぁ、と思ってしまうのだが…否!! この程度の工夫で何とかなるなら、十分クロスプラットフォームと言っていいのではなかろうか。ゲームを作ったとして、3Dがグリグリ動くとかでもない限り、中核部分はプラットフォームに左右されない物だ。つまり表示系だけちょこちょこっと気をつけつつ、なるべく基本的な描画方法で実装さえしてしまえば、あとは何とかなるはずだ…と思いたい。思うことにする。いや、別にクロスプラットフォームにこだわってる訳じゃないので、どっかで捨てるかもしれないけどさ。

 何はともあれ。とりあえず現時点でこんな感じのコードに。ヘクスの描画部分だけ微妙に一般化してみたが、これならクラス全体ももうちょっと一般化した方が良さそうかな、とも思う次第である。

package ;
import nme.display.Bitmap;
import nme.display.BitmapData;
import nme.display.Shape;
import nme.display.Sprite;
import nme.events.MouseEvent;
import nme.geom.Matrix;
import nme.text.TextField;
import nme.text.TextFieldAutoSize;
import nme.text.TextFormat;

/**
* ...
* @author kani-miso
*/

class HexBase extends Sprite
{
static public var ODD_TYPE = 1;
static public var EVEN_TYPE = 0;

// 定数
var mapMax = 21; // マップの縦横最大値
var hexSize = 40; // ヘックスの直径
// 偶数系か奇数系か
var oddEven = 0;
// ヘックスの縦横サイズ(全体で何度も使うのでここで定義)
var xSize:Int;
var ySize:Int;
// マウス位置のヘックスを示すためのカーソル
var cursor:Shape;
// 描画用のbitmapセット
var bitmapData:BitmapData;
var bitmap:Bitmap;

// クラス初期化
public function new()
{
super();
// Hexの縦幅、横幅の計算
xSize = Std.int(1 + hexSize * 3 / 4 / 8) * 8; // 8の倍数にする
ySize = Std.int(xSize / 3 * Math.sqrt(3));

// 表示位置を少しずらす
x = 10;
y = 10;

// bitmapを背景色つきで作成
bitmapData = new BitmapData(xSize * (mapMax - 1), ySize * (mapMax - 1), 0xFFEEFFEE);
bitmap = new Bitmap(bitmapData);
addChild(bitmap);

// bitmapに描画
draw(bitmapData);
drawString(bitmapData);

// カーソルを準備してマウスが動いたら動かす
initCursor();
addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}

// 描画ルーチン
private function draw(target:BitmapData
, centerCircleColor:Int = 0xFF0000
, hexLineColor:Int = 0xFF0000
, rangeLine:Int = -1
):Void
{

// 六角形1個分を描画するためのShape
var shape:Shape = new Shape();

// 中心円を描く
if (centerCircleColor >= 0) {
shape.graphics.lineStyle(1, centerCircleColor);
shape.graphics.drawCircle(0, 0, 4);
}

// Hexの枠線を描く
if (hexLineColor >= 0) {
var octantXSize:Int = xSize >> 3;
shape.graphics.lineStyle(1, hexLineColor);
shape.graphics.moveTo(-5 * octantXSize, 0);
shape.graphics.lineTo(-3 * octantXSize, -ySize);
shape.graphics.lineTo( 3 * octantXSize, -ySize);
shape.graphics.lineTo( 5 * octantXSize, 0);
}

// 四角線を描く
if (rangeLine >= 0) {
var halfYSize:Int = ySize >> 1;
var halfXSize:Int = xSize >> 1;
shape.graphics.lineStyle(1, 0x0000FF, 0.6);
shape.graphics.moveTo(-halfXSize, halfYSize);
shape.graphics.lineTo(-halfXSize, -halfYSize);
shape.graphics.lineTo( halfXSize, -halfYSize);
shape.graphics.lineTo( halfXSize, halfYSize);
shape.graphics.lineTo(-halfXSize, halfYSize);
}

// 出来上がったShapeを、位置をずらして描画
// Matrixを指定しないと、Flashで位置が動かない!!
// Shape.xとShape.yを指定しないと、HTML5で位置が動かない!!
var m:Matrix = new Matrix();
for (y in 0 ... mapMax) {
shape.y = y * ySize;
m.ty = shape.y;
for (x in 0 ... mapMax) {
if ((x + y) % 2 == oddEven) {
shape.x = x * xSize;
m.tx = shape.x;
target.draw(shape, m);
}
}
}
}

// 文字を描画する
private function drawString(target:BitmapData):Void
{
// 文字列のフォーマットなどを指定…あんまり細かい事はしない方が安全っぽいので、フォントサイズだけ決める
var textFormat:TextFormat = new TextFormat();
textFormat.size = ySize / 2;
// 描画元になるテキストフィールドを設定。NMEを信じてはいけない。なるべくシンプルな設定で。
var textField:TextField = new TextField();
textField.defaultTextFormat = textFormat;
textField.autoSize = TextFieldAutoSize.LEFT; // うかつにCENTERとか使おうとするとNMEはコケる模様

var m:Matrix = new Matrix();
// Matrixを指定しないと、Flashで位置が動かない!!
// Shape.xとShape.yを指定しないと、HTML5で位置が動かない!!
for (y in 0 ... mapMax) {
m.ty = y * ySize - ySize;
textField.y = m.ty;
for (x in 0 ... mapMax) {
if ((x + y) % 2 == oddEven) {
// 文字列を代入。
textField.text = drawStringFunc(x, y);
// widthを元に横位置を調整。
m.tx = x * xSize - textField.width / 2;
textField.x = m.tx;
target.draw(textField, m);
}
}
}
}

// Hex番号を文字列で返す関数
private function drawStringFunc(x:Int, y:Int):String
{
//return( ("0" + Std.string(x)) + " " + ("0" + Std.string(y)).substr(1,2) );
return( ("0" + Std.string(x)).substr(-2) + " " + ("0" + Std.string(y + 1 >> 1)).substr(-2) );
}

// カーソル初期化
private function initCursor(thickness:Float = 2
, cursorColor:Int = 0x00FF00
, cursorAlpha:Float = 0.7
, radius:Float = 7
):Void
{
// Shapeを初期化して、適当なサイズの丸を中心に描画
cursor = new Shape();
cursor.graphics.lineStyle(2, cursorColor, cursorAlpha);
cursor.graphics.drawCircle(0, 0, radius);
addChild(cursor);
}

// カーソル移動ルーチン
private function onMouseMove(evt:MouseEvent):Void
{
// 青マス上での座標を得る
var x:Int = Std.int((evt.localX + xSize / 2 ) / xSize);
var y:Int = Std.int((evt.localY + ySize / 2 ) / ySize);
// ヘックス上で有効な値ならカーソルを動かす
cursor.x = x * xSize;
if ((x + y) % 2 == oddEven) {
cursor.y = y * ySize;
} else {
var mod:Int = Std.int(evt.localY + ySize / 2) % Std.int(ySize) - Std.int(ySize / 2);
if (mod > 0 ) {
cursor.y = (y + 1) * ySize;
} else {
cursor.y = (y - 1) * ySize;
}
}
}

}


posted by 管理人 at 16:01| Comment(0) | Haxe | このブログの読者になる | 更新情報をチェックする

Haxe + NME 4回目 ハチの巣にしてやられる

 映画やら漫画やらで、「ハチの巣にしてやるぜ」的なセリフを時々見かける。多数の銃弾を頼りに、相手に対して「穴だらけにしてやる」という意味で使われるこのセリフだが、たいていは言った人がその場あるいはその後に命を落としているような気がする。ってことは、基本的に悪役の吐くべきセリフなのだろうか。

 さて、先のヘクスマップだが、確かに形状はハチの巣になっているものの、多数の銃弾的な物で穴を開けたわけではなく、どちらかというと丁寧に上から順に六角形の3辺を描画している感じである。しかも、わざわざShapeにハチの巣をひと通り描画して、それをBitmapDataに写し取っている。

 どうせShapeに描画してからBitmapDataに転送するなら、1ヘクス分だけShapeに描画しといて、それを座標を変えつつBitmapDataにコピーしてった方がアルゴリズム的にもすっきりするんじゃなかろうか…と、ふと思いついた。つまり、六角形の3辺と中心円、そして青マスの部分を単体で描画したShapeを用意して、青マスの単位で縦横にずらして複写すればいい。1個分のShapeを銃弾に見立てて、形容としても文字通りの意味でも「ハチの巣にしてやるぜ」的な指向で「ハチの巣」を描画しようという寸法である。

 この方法の長所は、境界線や中心円を描く、描かないのオプションが発生した時にif文が発生する回数が少なくなる事。例えば100×100ヘクスを描画するとして、それぞれ10,000回の繰り返しの中にif文を入れて描くか描かないかを判断するというのは、それなりに演算時間を食うはずである。これを、あらかじめ描画したShapeのコピーで処理すれば、たったの1回で済むというわけだ。うん、何だかお得な気がしてきた。

 では…とやってみた。
 …はまった…。
 結論から言う。NMEのBitmap.draw()は、かなりのクセモノだ。いや、HTML5への出力時にSpriteからのDrawが出来ないバグは前から知っていたが、それ以外にも環境によって動作が違うっぽい。

 具体的には、HTML5への出力だとdrawするShapeの位置は「Shape.x Shape.y」によって動く。Flashへの出力だとBitmap.drawの第二引数にMatrixを指定して描画位置を決めるため、Matrixが無いと「Shape.x Shape.y」の値に関わらずBitmapの原点に描画される。そして、再度HTML5に戻ると、このMatrixでの位置指定はなぜか無視されてしまい、Matrixで位置を指定してもBitmapの原点に描画される。

 NMEは基本的にActionScript3のラッパーであると思われる。故に、Flash側での動作が正しいような気がしなくもない。が…何はともあれ、同じソースなのに環境によって差があるというのは困った物である。

 ん〜。どうしよう…。

 待てよ。
  • 「Flashの時はMatrixのみ使用される」
  • 「HTML5の時はShape.x Shape.yのみ使用される」
ということは…。

 なんだ、両方書いときゃいいんじゃん。つまり、こんな感じ。

// 出来上がったShapeを、位置をずらして描画
// Matrixを指定しないと、Flashで位置が動かない!!
// Shape.xとShape.yを指定しないと、HTML5で位置が動かない!!
var m:Matrix = new Matrix();
for (y in 0 ... mapMax) {
shape.y = y * ySize;
m.ty = shape.y;
for (x in 0 ... mapMax) {
if ((x + y) % 2 == 0) {
shape.x = x * xSize;
m.tx = shape.x;
target.draw(shape, m);
}
}
}


 というわけで、今回のNMEでの注意点。

nme.display.Bitmap.draw(Shape, Matrix)を使う時、
  • HTML5に出力する時は、Shapeの x y で位置が決まる
  • Flashに出力する時は Matrix で位置が決まる。
  • 両者の環境で同じ描画をするときには、 x y を入れた上で、同じ値を Matrix に入れておくと何とかなる。
あぁ…我ながらなんて馬鹿な実装してるんだろうなぁ、と思いつつも…プログラムなんて物は、最終的に正しく動けば勝利なのです。うん。

 しかし…何だかこう…「ハチの巣にしてやるぜ」とほざいた物の、いつの間にか倒されて「どうしてこんな…」とか思っている悪役の気分である。
posted by 管理人 at 15:00| Comment(0) | Haxe | このブログの読者になる | 更新情報をチェックする

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年以上新しい記事の投稿がないブログに表示されております。