HTML5ゲーム（キャンバス）-UIテクニック？

PhoneGapを使用してモバイル（Android / iPhone / WebOS）向けのJavaScript / HTML5ゲーム（Canvasを使用）を作成中です。現在、UIとプレイボードをどのように構築し、どのように相互作用させるかを設計しようとしていますが、最善のソリューションが何であるかはわかりません。ここに私が考えることができるものがあります-

drawImageやfillTextなどを使用して、キャンバスにUIを直接構築します。通常のDOMオブジェクトを使用して、キャンバスの外側にUIのパーツを構築し、UI要素がプレイボードキャンバスとオーバーラップする必要がある場合、divをキャンバス上にフロートします。私が考えていないゲームUIを構築するために使用できる他の可能なテクニックはありますか？また、これらのどれが「標準」の方法と考えられますか（HTML5ゲームはあまり人気がないので、おそらく「標準」の方法はまだないでしょう）。最後に、どの方法を推奨/使用しますか？

事前に感謝します！

どちらのソリューション（キャンバスに描画するか、従来のHTML / CSSを使用する）は完全に有効であり、正常に機能します。考慮すべき事項：

• すでにキャンバスベースのライブラリを使用している場合、UIに追加の（DOMベースの）メソッドを持たせる代わりにキャンバスを使用し続けることで、コードがよりきれい/整理されたものになる可能性があります。
• UIが非常にテキストを多く含む（ダイアログなどを含む）場合、HTML / CSSを介して実装する方が簡単な場合があります。たとえば、テキストがDOM要素（折り返しや段落間隔など）を流れるのは非常に簡単で、キャンバスに実装するのは比較的困難です。
• 使用しているライブラリに大きく依存しますが、キャンバス内よりもDOM要素にクリック処理を実装する方がはるかに簡単です。たとえば、「OK」ボタンのクリックを検出する場合、HTML / JSの世界では簡単なタスクです。ただし、キャンバスでは、別の要素のクリックを聞いて、その座標をチェックしてクリックが発生した場所を確認する必要があります。
• 一部のユーザーエージェント（特にモバイルデバイス）は、テキストを含むDOM要素を使用する場合に注意が必要です。たとえば、Mobile Safariは、コピー/貼り付けツールを使用してモーダルをポップアップ表示する場合があります。この動作を防止することは難しく、おそらくキャンバスランドでは簡単になります。

これのいくつかは主観的です。私が知っている開発者は、DOMがくて冗長であることに気付くので、常に canvasの使用を好みます。どちらのソリューションでもうまくいくので、アプリでシンプルな単一の画面を選択し、両方の方法を使用して個別に迅速に開発し、どちらが簡単/良いと感じるかを確認します。

幸運を祈ります！

キャンバスとのやり取りには、easeljsを使用しています。

それはかなり良いですし、堅牢な設計を容易にします。私が選んだ主な機能の1つは、キャンバスオブジェクトとdom要素の位置を同期する機能でした。

これにより、CSSのスピーチバブルと、hudフレームなどの静的UI要素を簡単に実行できます。

これがブラウザにもたらす利点は、リッチキャンバスを取得することです。しかし、パフォーマンスを抑えるために、小さく静的なものをDOMに持ち込むことができます。

Canvasは、モバイルプラットフォームでは遅く、少なくともモバイルサファリはとにかく遅いので、それらのオブジェクトのCSSベースのポジショニングを使用する必要があります。具体的には、オブジェクトのハードウェアアクセラレーションレンダリングを有効にする「translate3d」を使用します。

ただし、canvasのCAATライブラリを確認してください。高速であり、CSSをサポートする「アクター」を使用して、ゲームロジックを変更することはできません。

まだリンクを投稿できませんが、ここにいくつかの擬似リンクがあります http://labs.hyperandroid.com/animation

iPhone 4のキャンバスの速度低下について同意する必要があります。サファリキャンバスがGLに裏付けられていないことを確認してください。私の軽快なゲームは、iPhone 3GSとAndroidで高速に動作しますが、iPhone 4では、網膜ディスプレイのピクセルが多すぎると思います。キャンバス開発モデルが気に入っていますが、css translate3dオプションはまだ試していません。特に、GWTとgwt-g2dキャンバスラッパー（最適化/難読化）を使用しました。 http://www.photonjunky.com/shootout.html

私は、次のようなHTML要素として、あなたのコントロールを維持することをお勧めmenuし、commandアクセシビリティの理由から。少しのCSSを使用して、キャンバス上に要素を表示でき、HTMLの事前に構築された機能を失うことはありません。

これは古い質問ですが、今日（2013年3月）よりよく知っています。私がやったように他の誰かがここにつまずいた場合に答えることにしました。私は他のほとんどの答えに反対しなければなりません。これらはおそらくWebブラウザー開発には有効ですが、モバイルには有効ではありません。選択するパス（DOMまたはキャンバスアニメーション）に大きな違いがあります。AndroidのWebビューはそれ自体が完全に役に立たない（遅い、st音）ので、ハードウェアアクセラレーションを適用できない限り、PhonegapはAndroidゲーム開発に役に立たなくなります。詳細については、この返信を参照してください。

百万通りの方法で実行できます。しかし、あなたは最も快適に感じ、エンジニアは最も自信を持っています。

インスピレーションやコード例を探しているなら、私がそれをする一つの方法があります。ボタンが押されるまで繰り返しメニューを描画する機能があります。ボタンが押されると、ゲームがロードされ、古いメニュークリックイベントリスナーが削除され、新しいゲームクリックイベントリスナーが追加されます。また、メニューの古いドローループを終了し、新しいゲームドローループを開始します。以下に、選択方法を示すために選択したスニペットを示します。

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

このようにして、ゲーム描画とゲームイベントをメニュー描画とメニューイベントから分離することができます。また、メニューでゲーム/アニメーション要素を使用して、見栄えを良くしたい場合に使用する余裕があります。