問題タブ [isometric]

申し訳ありませんが、通常とは少し異なる質問があります。等尺性に見えるゲーム表示を作成したいので、すべてのセルは次のとおりです。

http://upload.wikimedia.org/wikipedia/commons/4/42/Rhombus_01.png

形で。現在2D配列を使用していますが、これを効果的に行う方法が少しわかりません

どの画像をどこに配置するか中継します。私の主な問題は、タイルが本来あるべき場所に収まるようにすることです。現在、私はそれらを高さ45px、幅60pxにしています。レベル画面が等尺性で表示されるように、誰かが設定を手伝ってくれるかどうか尋ねたいと思います。ありがとうございました:)

現在、XNA ゲームのプロトタイプに取り組んでいます。ゲームの世界の等角投影ビューを実現しようとしています (または正投影ですか?? この投影法に適切な用語がどれかはわかりません - 写真を参照してください)。世界は、立方体のタイルで作られたタイルベースの世界 (たとえば、Minecraft の世界に似ています) である必要があり、スプライトを使用して 2D でレンダリングしようとしています。

そのため、立方体の上面、前面、および側面 (目に見える側) の面を持つスプライト シートがあります。drawSprite への 3 つの個別の呼び出しを使用してタイルを描画します。1 つは上、もう 1 つは側面、もう 1 つは前面です。ソースの四角形を使用して描画する面を選択し、宛先の四角形を使用して画面上の位置を設定します。 3D ワールド座標からアイソメ (正投影) に変換する式に変換します。

(サンプルスプライト: )

これは、顔を描いている限りうまく機能しますが、(タイル グリッドに従って) 各ブロックの細かいエッジを描画しようとすると、いくつかの線が顔自体によって上書きされ、ランダムなレンダリング パターンが得られることがわかります。そうでないものもあります。

私の世界表現では、X は左から右、Y は画面の内側から画面の外側、Z は上から下にあることに注意してください。

この例では、上面エッジのみを使用しています。これが私が得るものです（写真）：

一部の行が表示され、一部の行が表示されない理由がわかりません。私が使用するレンダリング コードは次のとおりです (この例では、各次元の最上位レイヤーのみを描画していることに注意してください)。

最初のループの後に 2 つ目の 3 層のネストされた for ループを作成して、別のアプローチを試してみました。また、各タイルを描画するためにメソッドを呼び出すこともおそらく避けますが、今のところ機能させようとしています)。

結果はいくらか良くなりましたが、まだ期待どおりに動作していません。一番上の行がありません。画像を参照してください。

なぜ私がこの問題を抱えているのか分かりますか? 最初のアプローチでは、Z ファイティングのようなものかもしれませんが、スプライトを正確な順序で描画しているので、既にあるものを上書きしてはいけませんか?

みんな、ありがとう

私は C# / XNA Game Studio を使用してアイソメトリック マップの描画に取り組んできました。

マップを描画するためのコードは次のとおりです。

このメソッド内のコードは、ネストされた for ループ内にあるかのように動作し、左から右、上から下に描画します。y 値が奇数の場合、行は収まるようにシフトされますが、少しずれているように見えます。

これは、8x5 マップの生成された出力です。

ご覧のとおり、正しく表示されていません。コード内の数学の問題なのか、それともすべてが描画される順序に問題があるのか​​ どうかはわかりません。私は非常に新しいですC# に移行し、スプライトを操作するので、どんな助けでも大歓迎です。

役に立つかもしれないので、マップを描画するコードの他の関連部分を次に示します。

タイル クラス全体:

1 行のタイルを保持する TileRow クラス。

すべての行を保持する MapStruct クラス

この問題を修正する方法についてのヘルプと、コードを改善する方法についてのアドバイスをいただければ幸いです。

私は等尺性タイル ゲームを書いています。各タイルの幅は高さの 2 倍です (w:h = 2:1)。マップ内のすべてのタイルは同じサイズで、幅と高さがわかっています (TileWidth と TileHeight)。

列 (>0) と行 (>0) の数に制限はありません。

完全に描画されたマップの幅と高さを計算する式を考え出すのに苦労しています。これは、一番上から一番下まで、そして左端から右端までの距離である必要があります。列と行の数は変化する可能性があるため (したがって、マップは常に完璧な菱形であるとは限りません)、非常に難しいことがわかります!

私のタイルエンジンがやってくる。正方形、六角形、等尺性の千鳥状の視点を描くことができます。私が苦労しているのは、等角回転（またはダイアモンド）視点です。以下は、10x10のダイアモンドマップとそれを描画するために使用される（簡略化された）コードの写真です。タイルは128x64です。

http://garrypettet.com/images/forum_images/5%20col%20x%205%20rows.png

これにより、画面に表示されているものだけでなく、Tiles（）全体のコンテンツが描画されることはわかっていますが、最初に基本を理解しようとしています。

私が理解できないのは、マップ上のx、y座標をタイル列、行座標に変換する簡単な方法です。私は逆転しようとしました：

xとyを指定して列と行を計算し、これを思いついた場合：

しかし、それはうまくいかないようです。誰かがこれを行うためのより良い方法を考えることができますか？長方形のグリッドをひし形に変換して元に戻すためのより良い方法はありますか（行列についてほとんど知らない場合...）。

ありがとう、

タイルのアイソメ グリッド (ディアブロのようなものを考えてください) が与えられているとします。グリッドの高さ、グリッドの幅、タイルの高さ/幅など、グリッドにはいくつかの測定値があります。次の画像を検討してください。

グリッドの中央のセルは 0,0 で、等北 (+y)、等南 (-y)、等東 (+x)、等西 (-x) に拡張されます。

グリッド上の任意の位置に長方形を描くとしましょう。長方形のアイソメトリック位置はありませんが、左上隅が 0,0、南が y+、右が x+ であるグリッドの通常の描画座標があります。

問題の長方形の上、左、高さ、幅がある場合、長方形の下端と交差するアイソセルの配列をどのように計算できますか。

これを実証するために選択した任意の言語で十分です。

私は CSS で Isometric 3D を実行しようとしています。ここに私が今持っているものがあります: http://jsfiddle.net/AagGZ/1/ (テスト用の webkit のみ)

私は基本的に、1px x 1px のボックス シャドウを使用して 3D 効果を作成しています。アニメーション化するとき、1px の新しいレイヤーを追加しようとしているので、アニメーションは失敗します (あまり良くありません)。

それを実装するより良い方法はありますか？CSS コンテンツの前後に CSS マトリックスを考え、div を追加しました。

これは、基本的な機能ではなく、私のプロジェクトへの素晴らしい追加であるはずなので、IE9 未満で動作しなくても問題ありません。

ご協力いただきありがとうございます。

編集：無地の背景が必要であるという事実は少し問題があるため、質問を再開しました。フィルターの前後に大きな「見えない」白い矢印が作成され、異なる背景に異なる背景があると非常に速く苦痛になりますサイトの一部、または別の要素にカーソルを合わせると背景を変更したい場合。とりあえず自分のバージョンに戻り、アニメーションを無効にします。どんなアイデアでも大歓迎です！

配管ソフトウェアを設計していますが、現在は 2D で動作します。wx.paintDC() を使用して非常に単純なフレームを実装しました。基本的には次のようになります。

その結果がこれ[1]です。右側のボタンは、右側のフレームにセクション (パイプ、バルブなど) を追加するために使用されます。ボタンをクリックすると、プログラムが位置を計算して描画するため、フレームはインタラクティブではなく、パイプやバルブのセグメントをクリックしたり、サイズを変更したりできません。

これは非常に簡単でシンプルですが、新しいプログラマーとしては時間がかかりました (そしてかなり誇りに思っています)。今私はそれを改善したいと思っています。私が今やりたいことは、ユーザーが「マウスで」パイプ図を作成し、それらをクリックしてプロパティなどを変更できる、3D のようなインタラクティブなフレームを作成することです。

これらのようなものを目指している[2] [3]。このような等尺性背景[4]

それは簡単なことではないと思いますが（しかし、私が最初にしたことはどちらもそうではありませんでした）、それを実現するために努力し、勉強し続けることに決めました. 皆さんにお願いしたいのは道案内です..

どこから始めればいいのかわからないので、 「これはwxで可能ですか？」と思っています。、「openGLか何かを使うべきですか？」. 正しい方向を指し示す必要があります。

これは wx だけで実装できますか? または、pyopengl (何も知らない魔女)、またはそのようなものが必要ですか?

ありがとう！！！...

Silverlight で完璧なアイソメトリック パースペクティブを取得するにはどうすればよいですか?

Silverlight で 3D 環境を作成したいのですが、これはアイソメトリック パースペクティブでなければなりません。平面投影を使用すると、グリッドを等角図に似たものにすることができますが、グリッドセルが等しくないため、完全な等角図ではありません。

http://uwconcept.be/projects/uwconceptcity/grid_base_1.jpg

人々はグリッドに沿って「スクロール」できる必要があります。つまり、前後左右に移動します。グリッド上を飛んでいるように見えますが、常に正しいアイソメトリック パースペクティブを維持しています。回転は実装されません (最初のバージョンでは)。たとえそれが実装されたとしても、等角図を維持するために、回転は正確に 90 度になります。

編集： Silverlightで遠近法を再現しようとしたときに、「通常の」アイソメトリックx、y、z座標が適用されないことにも気付きました。「通常の」変換は、次のウィキペディアの記事に示されています: http://en.wikipedia.org/wiki/File:Wikipedia_isometric_cube_3.jpg

上の画像は、右下から左上に向かって地面を歩いているキャラクターの4つの画像です。3番目のパネルでは、描画順序が正しくないことがわかります。

ここには「正しい順序」がないようです。たとえば、小さな男の代わりに、ドアを通り抜けるlooooong猫のスプライトがあった場合、最初にドアを引くか、最初に猫を描くかに関係なく、それは間違っています。

他のゲームエンジンはこれをどのように処理しますか？この状況が発生するのを防ぐためのハックはありますか？手でZバッファを描画しますか？私には思いつかなかった他のオプションはありますか？