CraftyJSでのモバイル開発 CSSではまり中
Craftyjs でモバイルゲームの開発中なのですが、はまっています。
チュートリアルにしたがって、
の状態からアプリをスタートさせました。
Craftyjs でGame.init() とやると、Javascript でHTML要素が追加されていき、HTMLのbodyタグの中身は、PC上のブラウザでは
<div id="cr-stage" style="width: 320px; height: 432px; overflow: hidden; position: relative; background: rgb(249, 223, 125);"
<div style="position: absolute; z-index: 10; transform-style: preserve-3d; -webkit-transform: scale(1, 1); transform: scale(1, 1); left: 0px; top: 0px;"</div>
<canvas width="320" height="432" style="position: absolute; left: 0px; top: 0px;"></canvas>
</div>
とこんな感じになります。
ところが同じことをAndroidなりiOSなりのモバイル環境でやると、外側の div の style が、position: relative にならないのです。
Craftyjs のソースにあたってみたところ、モバイル以外の環境でのみ、position: relative を追加するようになっていました。
これで何が困るかといいますと、画面をデザイン上、左寄せ、上寄せにしかできないということなんです。
CSSをいじって中央寄せとかにしてしまうと、この position: relative が効果を発揮して、PCブラウザ上ではゲーム画面が中央に来ます。
しかし、モバイル環境ではpotition: relative がないので、その下の canvas の position: absolute と left: 0px; top: 0px が効果を発揮し、ゲーム画面が左寄せ、上寄せになってしまうのです。
背景の位置と、ゲーム画面がずれてしまうのです。
では強引に、CSSで position: relative を書き込んでモバイルでも強制的に relative が効くようにするとどうなるか。
今度はクリック(タッチ)の座標の取得位置がずれてしまいます(こちらについてはまだソース調査中)。
とりあえず今日のところ分かったのはここまでです。
続きの対応策はまた今後、調査していきます。
チュートリアルにしたがって、
の状態からアプリをスタートさせました。
Craftyjs でGame.init() とやると、Javascript でHTML要素が追加されていき、HTMLのbodyタグの中身は、PC上のブラウザでは
<div id="cr-stage" style="width: 320px; height: 432px; overflow: hidden; position: relative; background: rgb(249, 223, 125);"
<div style="position: absolute; z-index: 10; transform-style: preserve-3d; -webkit-transform: scale(1, 1); transform: scale(1, 1); left: 0px; top: 0px;"</div>
<canvas width="320" height="432" style="position: absolute; left: 0px; top: 0px;"></canvas>
</div>
とこんな感じになります。
ところが同じことをAndroidなりiOSなりのモバイル環境でやると、外側の div の style が、position: relative にならないのです。
Craftyjs のソースにあたってみたところ、モバイル以外の環境でのみ、position: relative を追加するようになっていました。
これで何が困るかといいますと、画面をデザイン上、左寄せ、上寄せにしかできないということなんです。
CSSをいじって中央寄せとかにしてしまうと、この position: relative が効果を発揮して、PCブラウザ上ではゲーム画面が中央に来ます。
しかし、モバイル環境ではpotition: relative がないので、その下の canvas の position: absolute と left: 0px; top: 0px が効果を発揮し、ゲーム画面が左寄せ、上寄せになってしまうのです。
背景の位置と、ゲーム画面がずれてしまうのです。
では強引に、CSSで position: relative を書き込んでモバイルでも強制的に relative が効くようにするとどうなるか。
今度はクリック(タッチ)の座標の取得位置がずれてしまいます(こちらについてはまだソース調査中)。
とりあえず今日のところ分かったのはここまでです。
続きの対応策はまた今後、調査していきます。
この記事へのコメント