RTSゲームの目的で等角マップでキャンバスまたはSVG(どちらか不明)の画像を作成する方法について、いくつかのチュートリアルを探しています。画像は表示されている部分でのみクリック可能にする必要があります。それ以外の場合、ユーザーは背景画像をクリックする必要があります。これは、PNG の透明領域を自動検出するか、カラー オーバーレイから行うことができます。どれが一番いいのかわからない。
ありがとう。
シーンのパースペクティブを変更しない場合は、SVG を使用します。なぜなら、それらは DOM 要素 (すぐにクリック可能) であり、クリック領域を要素の非透明部分に制限できるからです。 . 非常に優れた SVG ライブラリは RaphaelJS です。
キャンバスは別の種類の動物です。キャンバスに描画したベクター/ラスターは「保持」されません。つまり、SVG とは異なり、キャンバスに描画したばかりのボックスに移動を指示することはできません。代わりに、そのボックスを必要な場所に再描画する必要があります。キャンバスにすべてを描画すると、基本的に大きなビットマップになります。シーンのパースペクティブが変化する場合は、canvas が最も得意とする速度と柔軟性が必要になる場合があります。マトリックス変換を使用すると、2D の移動、回転、スケーリング、および傾斜を行うことができます。変換マトリックスを担当するので、3Dの動きもシュミレーションできます。ユーザーが IE 以外のブラウザーを使用している場合は、完全な 3D イメージング システムである WebGL も使用できます。この力には複雑さが伴うため、canvas で利用できる多くのゲーム開発プラットフォームをチェックすることになるでしょう。
両方の要素を使用すると、Websocket を使用して RTS を実行できます (もちろん、Websocket をサポートしていないブラウザーではロング ポーリングに低下します)。