almost 5 years ago

enchant.js を使っていてどうもタップイベントの反応する位置が本来設定している位置からずれるという現象が起こりました。結果的には単純に仕様が理解できてなかっただけなのですが、公式のドキュメントには載ってなさそう(?)なので書き残しておくことにしました。

enchant-stage とは

enchant.js を普通に使うと enchant.js による描画はbodyタグに書いているDOMの上にされてしまいます。なのでenchant.jsの描画を特定の領域だけにして普通のDOMとゲームを混在させたいと思ったりすると少し工夫が必要です。
enchant.js は<div id="enchant-stage"></div>というタグを用意しておくとその中に描画してくれます。しかしこれには微妙な注意点がいくつかありました。

ちゃんと大きさを指定する

<div id="enchant-stage"></div>にはちゃんとCSSで大きさを指定しましょう。
最初全く何も指定していなくて動作がおかしくなりました。何も指定していないとdivタグの大きさが勝手に計算されてしまい想定している大きさとあわなくなってしまいます。これによってGameオブジェクトのscaleプロパティが狂ってしまいます。
ですので

<div id="enchant-stage" style="width:640px;height:640px"></div>

の様にするか、ちゃんとCSSで大きさを指定してあげましょう。

動的にenchant-stageの位置を変えない

new Game(w,h)でGameオブジェクトを初期化した後にenchant-stageの位置を変えてしまうのも禁物です。
自分の場合enchant-stageの上に動的にDOMを生成していたのが原因で動作がおかしくなりました。
Gameオブジェクトではタップ位置を計算するために初期化時に内部にenchant-stageの位置を保持しているのであとから位置を変えてしまうと計算がおかしくなってしまうのが原因のようです。

スケール便利

以上のように最初躓いてしまったのですがちゃんと使えばenchant-stageの大きさとGameオブジェクトで指定した大きさが違ってもscaleを考慮してくれるので気が利いてますね!

← Win8アプリをプログラムから終了させる 追跡と迎撃のアルゴリズム →
 
comments powered by Disqus