世の中スマホだよね・・・という声に賛同する、弓削田です。
そうです、もはや、パソコンよりも、スマホの使用率が多いんです。
パソコン専用のゲームなんて、ゲーミングPCで遊んでいる人しかいなくて、
簡単なスマホ専用ゲームで遊んでいる人の方が圧倒的に多い世の中です。
というわけで、このゲームもスマホ対応を真剣に考えてみたいと思います。
これまでは、コントローラーカーソルもどきみたいなものを、表示していたんですが、
実際にやっていて、これは使いづらい！！！
もっと使いやすくせねば！
ではどうする？
世の中の他のスマホゲームはどうやっているのか？
と、考えて、いくつかのゲームをダウンロードして
遊んでみた研究してみた。
すると、ほとんどのゲームは、単純に画面タッチでアイテムを選択したり、ドラッグしたりするので、
今回のようなRPGのようなゲームでどうやっているかまだ、分からない・・・
とそんな時、とある、クォータービューのRPGっぽいゲームがあり、
そこで、タッチのみで対応しているシステムを見つけました。
このシステムでは、タッチした箇所にはeffectを残像として残していて、
どこをタッチしたのかが分かりやすい。
キャラクターの移動も、キャラクターから見てどの方向をタップしたかを計算で判定してやっていて、
まあまあ、操作感は悪くない。
この方式を採用するとしよう。
タップ箇所のポインター表示
画像を残像イメージとして表示してFadeOutさせればいいかと考えたのだが、
ここはブラウザゲームとして、cssのみで対応してみることにした。
そして、jsのタッチイベントと、cssアニメーションを組み合わせて、
このような感じで、タッチ感を出すことができた。
静止画ではわかりにくいが、１秒ぐらいでFadeOutアニメーションをさせていて、
非常にタッチ感覚が得られる。
あとついでに、スマホの時の画面表示は、余白部分は不要と判断して、margin,paddingもすべて無くしました。
htmlとbodyのwidthとheightも、100%固定ですね。
とりあえず、タッチ感を出すことができたので、今回はこれぐらいにして、次回に、キャラクターを動かしてみたいと思う。
