enchant PROを使ってゲーム開発してハマったとこ4つとこれからいじりたいとこ

enchant PROを使ったゲーム一番のりです

3Dスロット風ゲームです。

9leapアプリから「ぼか☆すろ」を開いて遊ぶ事が出来ます。

9leap : ぼか☆すろ by hanachin_ - どこでも遊べる、投稿型ゲームサイト

このエントリでは開発環境と、アプリ開発中にハマったところ4つと、これからいじりたいとこを書きます。

開発環境について

ソース書くのはMacBook Airで作業しました。

enchant PROを使用した作品の動作確認にはAndroidの実機が必要だと考え、開発用の実機としてICONIA TAB A500を学校から借りました。

しかしICONIA TABではOrientationセンサーと3Dしか動作が確認出来ませんでした。

またCameraはlogcatのログを読む限りでは初期化されてるようですがプレビュー表示が出来ませんでした orz

なので今回は3Dだけを使ったゲームを作ることに決めました。

ハマったところや問題点

※僕の環境(とその時試した状態)ではうまく動かなかったけど、他の人のところでは問題なく動くかもしれません

ゲームのソースは9leap : ぼか☆すろ by hanachin_ - どこでも遊べる、投稿型ゲームサイトから入手出来ます。

1. プラグインの読み込み

enchant('nineleap');

enchant.js初心者なので明示的にプラグインの名前を指定する方法を知らず、プラグインが読み込まれないことがありハマりました。

2. 縦長の画面におけるGameのtouchイベントの発生するエリアとScene3Dの描画エリアの違い

game = new Game(320, 320);

という風にGameクラスのインスタンスを作成しています。

Scene3Dは縦長の画面全体を使って描画されてるっぽいです。

画面全体のうちどこかを触ったときに何かしたいとき

game.rootScene.addEventListener('touchstart', function (e) {
// ...
});

このようにSceneのtouchstartイベントに書くと赤線で囲った範囲しか反応しません。

Gameクラスを320x320で初期化しているからだと思います。

ちなみに未解決です。いい方法あったら教えてください。

3. Labelで描画したテキストの残像が消えない

var label = new Label('foobar');  // 1
game.rootScene.addChild(label);
label.text = 'hoge'; // 2
label.text = 'fuga'; // 3

のようなコードで、1で初期化したテキストの描画が2でテキストを再設定した後も消えず、3で再設定すると2は消えるが1は残ったまま、というような事がありました。

9leapにあがっているARサンプルでも同じ現象を確認しました。

なので、それを解消するためにこのようなコードを書きました。

var bg = new Sprite(100, 20);
bg.backgroundColor = '#fff';
game.rootScene.addChild(bg);

var score = 100;
var scoreLabel = new Label('score: ' + score);
var updateScore = function () {
bg.x = 0;

scoreLabel.text = 'score: ' + score;
}
scoreLabel.addEventListener('enterframe', updateScore);
game.rootScene.addChild(scoreLabel);

スコアを毎フレーム再表示する処理です。

スコアを表示するLabelの後ろに背景Spriteを設置しています。

scoreLabel.textを再設定する前にそのSpriteのxを移動させて背景を再描画し、labelのtextの残像を消しています。

4. 箱が明るくならない

箱を明るく表示させたいのに3Dのボックスの明るさのいじり方が分からず暗いままでした。

結論からいうと箱を自己発光させました。

surface.emission、Surface3Dのemissionというプロパティに値を渡すことで発光させる事が出来ました。

surface.emission = [0.8, 0.8, 0.8, 1.0];

箱を明るく表示させるためには光源の位置を移動させるなどの方法があると思いますがドキュメントにそれらしい事が書いてありませんでした。

このemissionというプロパティもenchant PROのドキュメントには書かれていませんでした。

enchant PROのソースを読むとSurface3Dでまだドキュメントが用意されてないプロパティとして

• ambient


• diffuse


• specular


• emission


• shininess

などがありました。

EP_GLという変数を通してAndroid側のOpenGLのオブジェクトをいじっているようです。

なので

1. emissionなどのプロパティに渡す値はOpenGLの同等の関数に渡す値を渡せばよい


2. JSで渡すならどうするだろう?

と考え、配列を渡すことで上手く発光させる事が出来ました。

これからenchant PROをいじるなら

EP_はおそらくenchant PROの頭文字を取った接頭辞で、他にもEP_がついてる変数が

• EP_SENSOR


• EP_CAMERA


• EP_ZXING


• EP_AR


• EP_MEDIA


• EP_SOUND

など、いくつかあります。

これらのオブジェクトの持つプロパティについてどうなってるのか、気になります。

for in文を使ってこれらの持つオブジェクトのプロパティやメソッドを調べたいですね。

まとめ

4つほどつまずく事もありましたがAndroidネイティブの機能を手軽に呼び出すことが出来ました。

今後使う人が増えたりドキュメントが充実したり情報が増えるといいなー!