enchant.js (v0.8.1) + iPhoneで、”Touch to Start”から先に進めないときの対処法

ちょっと色々ありまして、最近enchant.jsを触り始めました。『カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワーク』ということで、「それじゃ、スマホ向けゲームも簡単に作れるのかしら？」と思いましたが、ちょっと触った結果、「うーん、結構難しいかもしれぬ」というのが、今のところの感想です。特に苦しめられているのが、音声再生関係。これについては、できれば後日触れたいと思います。

とりあえずHello World的なサンプルでも動かしてみようということで、enchant.jsのトップページにあるサンプルレベルのソースをサーバに置いてみました。結果、PCのChromeやAndroidのChromeでは問題なく表示されましたが、iPhone(5, iOS 7.1)のSafariで表示してみると、以下の画面になってしまいます。

enchant_fail

“Touch to Start”とあるのでタッチしてみても、うんともすんとも言いません。ネット上を探してみても、同じような現象が起こっているという報告が全くありません。しかたがないので、enchant.jsのソースを読んでみました。ソースのバージョンは、現時点(2014/4/13)で最新のv0.8.1です。

まずポイントになりそうなのが、438行目の”SOUND_ENABLED_ON_MOBILE_SAFARI: true”。これは確か、iOSで音声を再生可能にするためのフラグ。v0.8.1でデフォルトでtrueになった模様。これがtrueになっていると、1386行目のif文で、図の”Touch to Start”を表示するための処理に入る。

iPhoneのときだけ”Touch to Start”を表示させるのは、おそらく音声制御についてのiOSの制約を克服するため。こちらによれば、iOSではユーザによるタッチイベントを発生させないと、audioタグで指定した音声ファイルをロードしてくれないらしい。なので、”Touch to Start”画面を出すことで、音声再生の準備をさせているのだと思う。

で、1401行目のdocument.addEventListener(‘mousedown’, function waitTouch() …の直前と、コールバック関数waitTouch()の中にalertを仕込んでからiPhoneでタッチしてみると、直前に仕込んだalertメッセージは表示されるが、waittTouch()の中のalertメッセージが発生しない。ということは、タッチイベントを捕捉できていないということ。

ここで、記載されているイベント”mousedown”についてさらに調べてみると、こんな記事が見つかりました。

iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。

ということで、1401行目〜1406行目の中で”mousedown”になっている部分を、”touchstart”に置き換えてみる。

document.addEventListener("touchstart", function waitTouch() {
    document.removeEventListener("touchstart", waitTouch);
    core._touched = true;
    core.removeScene(scene);
    core.start(d);
}, false);

この状態で、先の”Touch to Start”画面で画面をタッチすると、続いて正しい画面が表示されました。

enchant_success

もちろん、Androidでの画面表示に影響はありません。

よかったよかっためでたしめでたし…なんですが、「何でこんなすぐに見つかりそうなバグが入っているんだろう？」というのが不思議です。もしかしてこれはバグじゃなくて、たまたま自分の使い方や環境が特殊なために起こっている問題なんでしょうか。わかりませんが、他にも同じようなところでつまづく人が出る可能性もあると思うので、記録として残しておきます。

 

（5/10追記）
特に音声を再生させる必要がないのあれば、ライブラリには手を入れずに、enchant.jsを利用するファイルの方で

enchant();
enchant.ENV.SOUND_ENABLED_ON_MOBILE_SAFARI = false;

とすることで、”Touch to Start”のスプラッシュイメージを表示させないようにできます。その後少し試した感じだと、音声再生させるときも、やり方によっては無理にこのフラグをtrueにしておく必要もない気がします。

 

 

お勉強

Posted by hidaka_hiroji