【enchant.js】trackpad.enchant.jsをenchant.js v0.6で使うには【Advent Calendar】

enchant.js Advent Calendarなるものに参加です。

tmlib.jsでもお馴染みのphiさんが、今年の３月にtrackpad.enchant.jsというプラグインを発表されています。
こちら、120x80という小さな範囲で画面全体をカバーできるというスグレモノでして、導入も簡単で非常に便利なんです。ちょっと例を示しましょう。

var bear = new Sprite(32,32);
bear.image = game.assets[charar01.png];

var trackpad = new Trackpad();
game.rootScene.addChild(trackpad);
trackpad.ontouchmove = function(e) {
    bear.moveTo(e.trackX, e.trackY);
};

これで何ができるかって、パッド部分だけでクマを画面全体縦横無尽に移動させることができるんですよ！

ですがこれ、先日リリースされたenchant.js v0.6では利用することができません。
なぜかというと、中で_elementを操作してるからなんですね*1。

もったいない。実にもったいない！
何とか利用する手立てはないものか？

あります、ありますよ。
trackpad.enchant.jsにちょっと手を加えるだけで、途端に使えるようになります！
まずソースを開いて下さい。
25行目から30行目あたりで、以下の様な部分があります。

// 見た目調整
var style = this._element.style;
style.margin = style.padding = "0px";
style.borderRadius = "4px";

はい、単に見た目調整のために_elementを操作してたんですね。ばさっとコメントアウト。
ほ〜ら、使えるようになったでしょう！

え、見た目が違う？　角が丸くない？
わがままですね〜。
まぁそれも方法がなくもないので、ちょっとやってみましょう。
まず継承元を変更します。継承元はEntityでしたが、これをSpriteに変更して下さい。その上で、initializeを以下のように書き換えます。

initialize: function() {
    enchant.Sprite.call(this,TRACKPAD_WIDTH,TRACKPAD_HEIGHT);
    this.image = new Surface(TRACKPAD_WIDTH,TRACKPAD_HEIGHT);
    with(this.image.context) {
        fillStyle = TRACKPAD_COLOR;
        beginPath();
        // 角を丸めたPathを描く
        closePath();
        fill();
    }
    
    // 位置調整
    var game = enchant.Core.instance;
    this.x = (game.width  - this.width) / 2;
    this.y = (game.height - this.height) - TRACKPAD_PADDING_BOTTOM;
},

あ、石投げないで……。
だってPath書くのめんどいんだもん……。
HTML5のCanvasの練習だと思って自分で書いて……。

あと、dispatchEvent関数の中にもenchant.Game.instanceにアクセスしている箇所があるので、enchant.Core.instanceに書き換えましょう。

とてもいいプラグインなので、みなさんも使ってみて下さい！

*1:trackpad.enchant.jsはEntityベースなので影響なさそうですが、とりあえずそこでエラーが出ます。