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 が効くようにするとどうなるか。
今度はクリック(タッチ)の座標の取得位置がずれてしまいます(こちらについてはまだソース調査中)。

とりあえず今日のところ分かったのはここまでです。

続きの対応策はまた今後、調査していきます。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック