100日後に完成するゲームシステム 65日目「スマホのタッチイベントに対応 その1」

世の中スマホだよね・・・という声に賛同する、弓削田です。 そうです、もはや、パソコンよりも、スマホの使用率が多いんです。 パソコン専用のゲームなんて、ゲーミングPCで遊んでいる人しかいなくて、 簡単なスマホ専用ゲームで遊んでいる人の方が圧倒的に多い世の中です。 というわけで、このゲームもスマホ対応を真剣に考えてみたいと思います。 これまでは、コントローラーカーソルもどきみたいなものを、表示していたんですが、 実際にやっていて、これは使いづらい！！！ もっと使いやすくせねば！

ではどうする？

世の中の他のスマホゲームはどうやっているのか？ と、考えて、いくつかのゲームをダウンロードして遊んでみた研究してみた。 すると、ほとんどのゲームは、単純に画面タッチでアイテムを選択したり、ドラッグしたりするので、 今回のようなRPGのようなゲームでどうやっているかまだ、分からない・・・ とそんな時、とある、クォータービューのRPGっぽいゲームがあり、 そこで、タッチのみで対応しているシステムを見つけました。 このシステムでは、タッチした箇所にはeffectを残像として残していて、 どこをタッチしたのかが分かりやすい。 キャラクターの移動も、キャラクターから見てどの方向をタップしたかを計算で判定してやっていて、 まあまあ、操作感は悪くない。 この方式を採用するとしよう。

タップ箇所のポインター表示

画像を残像イメージとして表示してFadeOutさせればいいかと考えたのだが、 ここはブラウザゲームとして、cssのみで対応してみることにした。 そして、jsのタッチイベントと、cssアニメーションを組み合わせて、 このような感じで、タッチ感を出すことができた。 静止画ではわかりにくいが、１秒ぐらいでFadeOutアニメーションをさせていて、 非常にタッチ感覚が得られる。 あとついでに、スマホの時の画面表示は、余白部分は不要と判断して、margin,paddingもすべて無くしました。 htmlとbodyのwidthとheightも、100%固定ですね。 とりあえず、タッチ感を出すことができたので、今回はこれぐらいにして、次回に、キャラクターを動かしてみたいと思う。