web-dev-qa-db-ja.com

モバイルの2Dゲームでの方向制御のベストプラクティス

私はかなり長い間、HTML5でパックマンのクローンに取り組んできました。 ( http://pacman.platzh1rsch.ch

私にとって重要なことの1つは、常に応答性を維持することでした。そのため、あらゆるサイズのハンドヘルドで再生できました。つまり、モバイルデバイスでプレイするのが難しい方法です。

デスクトップまたはラップトップでは、キーボードの矢印キーまたはW-A-S-Dを使用してパックマンを制御できます。私の意見では、これは非常に簡単です。

タッチスクリーンデバイスの場合、ゲームにいくつかのボタンを追加し、スワイプジェスチャーのサポートも追加しました。とにかく、ほとんどのユーザーがプレイするのはまだ非常に難しいことがわかりました。

この問題を解決するためのより良いオプションを知っていますか?

enter image description here

編集:画面全体でスワイプジェスチャーを検出するようにゲームを調整しただけで、すでにかなり良い改善だと思います。すべてのヒントと提案をありがとう!

5
platzhersh

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

私はこのレイアウトを使用するゲームを好み、ジョイスティックをエミュレートして、タップしてドラッグできるようにします。また、加速をシミュレートすることもできます。

4
VoronoiPotato

キャラクターや車などを操作するのが難しいことが多いので、スマートフォンでゲームをしたくありません。しかし、私が最もよくプレイしたゲームでは、コントロールが左右に分割されていたため、親指でタップする方が簡単です。

games controls iPhone

リトルドングリはその良い例です:

Little Acorns

3
Gabin

入力のゲームボーイのようなタイプを使用してください-それは何年も働いていました-それがモバイルでうまくいかないはずの理由がわからない(私はこれを私の携帯電話のゲームボーイエミュレーターユーザーとしても勧めます).

方向キーを「下」に移動して、ユーザーが親指で押しやすいようにします。また、入力を少し増やして、どのキーが押されているかを簡単に確認できるようにします(すべての画面が同じタッチ精度を備えているわけではないため、入力が大きいほど優れています)。

画面の回転も考慮してください-水平画面では、方向キーを右に、アクションキー(ある場合)を左に移動します。

Gameboy interface

2
easwee

ここで誰も言及していない別のオプションがあります。同じように動きの範囲が限られているモバイルのNokia Snakeのようなゲームでよく見ます。

  • 直進します(アクションは必要ありません)
  • ヘビ/パックマンの観点から、を回し、
  • ヘビ/パックマンの視点から、に回します。

つまり、コントロールの数を2つに減らすことができます。左/右にスワイプするか、左/右ボタンをタップします。 (1人称のパックマンゲームの画像です。意味がわからない場合は迷路を通過します。)

これの問題は、最初は、一人称のコントロールを使用してトップダウンの表現を見ながら、ユーザーが左を押すか右を押すかを決定することが難しいことです。パックマンが画面を上に向かっている場合、左/右は現実と一致しますが、彼が下を向いている場合は、左/右が逆になり、他の2つの方向はさらに混乱する可能性があります。

2
user69458

ジョイスティックを使用すると、ニースの古い学校のアーケードのような外観になりますが、おそらく加速度計に基づいてゲームを行うこともできます。これは、モバイルデバイスを傾けることによって動きを制御することを意味します。こちらが2012年の記事です

http://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/

制限はありますが、調査する必要があるかもしれません。

1
Cliff N