【tmlib.js】とくにつまづいた2つのこと

TM-Shooterブロック崩さぬで利用されているライブラリ『tmlib.js』をいぢりはじめました。
前々からさわってはいたのですが、慣れているenchant.jsとは勝手が違うため「アプリを1本作ろう!」というところまでは至っていませんでした。ですが、ちまちまいぢっているうちに勝手がなんとなくわかってきたので一念発起、現在ゲームをシコシコ製作中です。

今回はtmlib.jsをさわっていて「今後も同じ所で首をひねりそうだな」と感じた2つのポイントを書いておこうと思います。*1

ひとつめはsetInteractive関数です。

これは中央のタイルをタッチするとalertダイアログを表示させるものなのですが、現状はタッチしても反応を返しません。これはElementのタッチが無効化されているためです。タッチを有効にするには、trueを引数として対象ElementのsetInteractiveを実行する必要があります。

    var tile = tm.display.RectangleShape(64, 64).addChildTo(app.currentScene);
    tile.x = tile.y = SCREEN_CENTER_X;
    tile.setInteractive(true);
    tile.on("pointingstart", function() { alert("touch tile"); });

と、このようにコメントアウトを取るとタッチが有効になり、alertダイアログが表示されるようになります。

ふたつめはcheckHierarchyプロパティです。

こちらも中央のタイルをタッチするとalertダイアログを表示させるものです。上のコードと違うのは、ElementをSceneに登録する際にCanvasElementをはさみ、座標もそちらで変更している点です。こちらはなんと! 中央タイルをタッチしても反応がないのは一緒なのですが、左上の何もなくところ(座標で言うとx:0, y:0あたり)をタッチするとalertダイアログが表示されてしまいます。
これは、デフォルトでは親となるCanvasElementの座標が考慮されていないために起こる現象です。親の座標を考慮するにはcheckHierarchyプロパティの値をtrueにします。

    var celm = tm.display.CanvasElement().addChildTo(app.currentScene);
    celm.x = celm.y = SCREEN_CENTER_X;
    
    var tile = tm.display.RectangleShape(64, 64).addChildTo(celm);
    tile.setInteractive(true);
    tile.checkHierarchy = true;
    tile.on("pointingstart", function() { alert("touch tile"); });

これでタイルをタッチするとalertダイアログが表示されるとともに、左上の空間をタッチしても何も起こらなくなりました。

備忘録ということで、今日はこれまで。
最後にtmlib.jsの作者であるphiさん、毎回毎回質問に答えてくれてありがとうございます!

*1:tmlib.jsそのものの使い方は他の方のブログなどを参照して下さい。