問題タブ [isometric]

HTML5 ゲーム エンジン LimeJS を使用しており、アイソメ マップ用の jQuery プラグインを統合したいと考えています。簡単な LimeJS プログラムにチュートリアル スクリプトを追加しましたが、LimeJS と jQuery の間に競合があるようです。どちらもページ上では問題なく表示されますが、jQuery がヘッダーに含まれていると、Lime スクリプトはすべての対話性を失います。

Iso マップ プラグインのチュートリアル: http://www.pixel2life.com/publish/tutorials/1298/browsergames_creating_a_basic_isometric_map/page-1/

私のファイルのディレクトリ (HTML ファイルのソースを見てください - ライムはサーバーにインストールされていないので機能していません): http://notlaura.com/limefiles/

前もって感謝します

私は HTML5 Canvas と JavaScript の初心者ですが、HTML5 Canvas 要素で等角投影を行う簡単な方法はありますか?

私は真の等角投影を意味しています - http://en.wikipedia.org/wiki/Isometric_projection

返信ありがとうございます。

glacialflame.comのチュートリアルを試しています (HTML5 Canvas でアイソメトリック グラフィックスを作成する方法についての素晴らしいチュートリアルです!)

今私はこれを持っています：http://jsfiddle.net/fUm6n/3/

この例は、オブジェクトを含むアイソメ マップです。タイルの幅は 50、高さは 25、オブジェクトはタイルと同じサイズです (オブジェクトは 1 つのタイルにのみ描画できます)。幅 200、高さ 100、4 タイルで描画する別のタイプのオブジェクトを作成するにはどうすればよいでしょうか? 別のオブジェクトを作成Arrayしてこの配列のサイズを設定しますか、それともこれを行うためのより良い方法はありますか?

わかりました、私のウィットエンドでイム。マウスをドラッグして変更できる視点を持つ画面よりも大きい小さな等角タイルマップを作成しようとしています。描画が正しく行われ（私は思う）、ドラッグが機能しましたが、マウスの選択が正しく行われていないようです。これまでのところ、タイルはほぼ正しく表示されていますが、タイルのサイズが約半分ずれているため、そのオフセットを補う方法が見つかりません。

コードは次のとおりです。

クリックメソッドにいくつかの数式がコメントアウトされていますが、それらは機能しません（x軸とy軸がそのように反転しているため、理由を理解しようとはしていません）。誰かが私が犯している間違いを指摘してくれたら本当にありがたいです。

HTML5 Canvas で Isometric を作成しようとしていますが、HTML5 Canvas Screen 座標を Isometric 座標に変換する方法がわかりません。私のコードは次のとおりです。

そしてキャンバス座標を取得します。しかし、この座標を等角座標に変換する方法は? 私が16x16のタイルを使用するようなものなら。

この質問に返信してくれてありがとう。私の英語で申し訳ありません。

私は座標がグリッドの左隅（上の画像に示されている隅）の[0,0]から始まり、xが画像の下に向かって増加し、yが上に向かって増加する等角グリッドシステムを持っています（したがって[ 0, 高さ] が上隅、[幅, 0] が下隅になり、幅と高さがグリッドのサイズ (つまり 200 x 200 正方形) のひし形になります。

とにかく、私が助けを必要としているのは、画像に示されている青いボックス内に含まれるアイソメトリック グリッド位置の配列を取得することです。すべての x、y スクリーン位置を反復処理して、対応するグリッド位置を取得することはできません (スクリーン位置からグリッド位置に変換する方法について、以前に提起したこの質問を参照してください。アイソメトリック グリッドで行/列を取得します。 )方法がわからないこれを効率的に達成するために。

私が以前に見つけた質問がありましたが、これはここのリンクとほぼ同じです。答えは、グリッドの正方形ごとに異なる色の画像にグリッドをレンダリングし、正方形の下に存在する色を検出することでした。私はこのソリューションを実装しましたが、非常に遅いです! 選択ボックス内の各ピクセルのグリッド位置を確認する方が速いとほとんど考えています。なぜああ、なぜ JavaScript のループがこんなに遅いのか!

私は自分の座標系に基づいてこの問題の数学的解決策を本当に必要としていますが、機能するものを思い付くことができないようです(グリッドから外れた選択ボックスも処理します)

さらに情報が必要な場合はお知らせください。

編集:残念ながら、提供された回答はこれまでのところ機能していません。選択は、正方形のグリッド上でダイヤモンドが選択された領域を持つようなものであるため、回答のポイントを逃さない限り、反復する左上隅、右下隅は実際にはありませんか? レンダリング アプローチを最適化しましたが、大きな選択範囲では、すべてのピクセル チェック カラーをループして対応する正方形を取得するため、フレームの顕著な低下が追加されます。

HTML5 Canvas（）に例があります<canvas id="canvas" width="640" height="480"></canvas>。JavaScriptコード（JSFiddleリンク）は次のとおりです。

この例では、アイソメタイルとアイソメオブジェクトをレンダリングできますが、オブジェクトを描画できるのは1つのタイルのみです（たとえば、4つのタイルでオブジェクトを描画することはできません）。複数のタイルにアイソメオブジェクトを描画するにはどうすればよいですか？このオブジェクトのようなもの（私のコードでは、tableという名前の変数に格納されています）：

この場合、画像は言葉よりも雄弁だと思います。

私はこの効果を得たい：

しかし、CSS3 でできる最善のことは次のとおりです。

そして、これのコードは絶対にひどいです:

純粋な CSS3 でこのような効果を作成する方法はありますか? 3Dでもかまいませんが、等角図が望ましいでしょう。

ボックスの側面にコンテンツを配置する必要はなく、前面だけに配置する必要があるため、1 つの<div>要素だけを使用しています。

これが私がこれまでに持っているものです: http://jsfiddle.net/X7xSf/3/

どんな助けでも大歓迎です！

Christian Weberが作成したようなアイソメ マップを作成しています。

私は彼とほぼ同じコードを持っていますが、マップを作成する JS 関数が呼び出されることはありません。彼がデモのソースコードで行っているのと同じように私が持っているので、そうあるべきです。$('div#map').gameMap({map:[[{"tile":"grass_0","object":""},...$(document).ready(function() {}

これが私の試みを示す JSFiddle です: http://jsfiddle.net/briz/RWgge/6/

必要なマップは 1 つだけで、コードで指定されたものほど大きくする必要はありませんが、マップを機能させる目的で、彼が提供するものと同じ大きなマップのままにしています。

私のgameMap関数が呼び出されていない理由を誰かが理解できますか?

Java でゲームのアイソメマップを作成しようとしていますが、これを行う方法が見つかりません。各位置JLabelに使用できるように、アイソメ マップのポリゴンごとに を追加する必要があります。描画するポリゴンごとpaint()に を追加するにはどうすればよいですか? JLabelわかりません。次のような等角図の各位置を描画するアルゴリズムが既にあります。

よろしくお願いします