民芸的プログラミング 〜ソフトウェア開発日記〜

アクセスカウンタ

zoom RSS CraftyJSでのモバイル開発 CSSではまり中

<<   作成日時 : 2014/10/20 17:44   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

Craftyjs でモバイルゲームの開発中なのですが、はまっています。

チュートリアルにしたがって、
<body></body>
の状態からアプリをスタートさせました。

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件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
CraftyJSでのモバイル開発 CSSではまり中 民芸的プログラミング 〜ソフトウェア開発日記〜/BIGLOBEウェブリブログ
文字サイズ:       閉じる