グリッドタイル:複数のタイルの混合

gamedevプログラマの多くは、便利なマップタイルを実装する方法について考えてきたと思います。 ミックスのあらゆる種類の組み合わせを想像することによってのみ、あなたはまともな頭脳を壊すことができます-私は、私がさまざまなタイルカードを表示できるようにするいくつかの使いやすいアルゴリズムを描写しようと何度も試みました。 そこから出てきたものを以下で見つけることができます-しかし、実装するのに十分な単純なものが判明しました。



グリッドフィールド上の2つのタイルのあらゆる種類の組み合わせを描画するために、テクスチャを何回混合する必要がありますか? さらに、タイルを追加すると、この数値は、考えるのがさらに怖い数値に増えます。 現時点ではこれらの困難をすべて忘れて、組み合わせの検討に飛び込んで、ミキシングの困難を克服するのに役立つパターンを特定してください。







2つのタイルを混合することから始めましょう。 図1に、最も単純なタイルレイアウトを「現状のまま」、図2に最終的に必要なものを示しました。







図3-4では、より複雑なレイアウトを見ることができます。 さまざまな組み合わせの数は非常に多く(新しいタイルが追加されることを覚えています)、タスクを単純化するのに役立つ規則性を見つける必要があります。



その過程で、私はこれらの同じ組み合わせを大量に描画し、最終的にこの決定に至りました-タイルを4つの部分に分割すると、その外観は隣接する3つのタイルだけで決定できます。 5つの異なる混合パターンを見てみましょう。











黄色のフレーム内の小さな正方形は、アウトラインを作成しようとしているタイルの一部です。 外観は、隣接するHVCタイルによって決まります。

H-隣接する水平

V-垂直方向に隣接(垂直)

C-コーナータイル(コーナー)

これらの表記法を使用すると、タイルの残りの3つの部分で同様のパターンに気付くことができます。つまり、1つの部分のアルゴリズムを考え出すと、タイル全体に簡単に拡張できます。



その結果、3つの隣接するタイルがあり、これは8つの異なる組み合わせのみを意味します。 なぜ5パターンしか描かなかったのですか? これらの組み合わせを見てみましょう。

HCV (検討中のタイルと同じタイプのすべての隣接タイル): テンプレート5 (タイルの一部を「現状のまま」描画します)

HV (HタイルとVタイルは同じ、コーナーのタイルは異なる): テンプレート4

--Vまたは-CVパターン3 (2つの組み合わせを1つのパターンに変更-これにより問題が簡素化されます。それらを描いて、1枚の画像で本当にうまくいくことがわかります)

H--またはHC-パターン2

---または-C-パターン1



最初の組み合わせの数は8個以上に減りました。タイルレイアウトに必要なテンプレートは5つだけです。 さらに、テンプレート番号5は非常に単純です-タイルの一部を混合せずに描画します。 各パートについて、パターン1〜4の4つの異なる混合マスクを取得する必要があることがわかります。 タイルを2倍にした場合、4x4マスクが必要になります。これにより、任意のバージョンで2つのタイルのマークアップを混在させることができます。







タイルの一部のマスク





4x4マスク



退屈ですよね。 当然、さらに美しいものを思いつくことができます。 何が起こっているかを示すために、このようなマスクを使用します。

最初の図は、少し前に調べたタイルのその部分のマスクであり、2番目の図は、4つの部分すべてのマスクの組み合わせです。

-左上部分(順序はパターン番号に対応:1-2-3-4)

-右上

-右下

-左下

マスクは、混合タイルをレンダリングするためのアルファチャネルです。 つまり、最初にベースタイルを描画し、次にマスクを使用して、2番目のタイルの対応する部分を上に配置します。







そして、ここに、抽象タイルレイアウト用に記述されたアルゴリズムの結果があります(提供されたマスクを使用)。 もちろん、単調な色のタイルを退屈にする代わりに、テクスチャを使用できます。また、マスクを少し操作すると、かなり美しい表面を得ることができます。



上記の要約-アルゴリズムは次のとおりです。

-タイル1を描く

-タイル2マスクで描画



したがって、2つのタイルが混在しているため、それがわかったと仮定します。 さらにいくつか追加してみませんか?



最初にシーケンスを決定します。 タイルの描画順序を入れ替える、つまり、タイル2から始めて、最初にマスクを配置するとどうなるか知りたいですか? 写真は次のとおりです。







まったく違いますよね。 つまり、順序が重要です。 最初のタイルを描画し、2番目のタイルをオーバーレイします。 3番目のアイデアはありますか? Elementary-先ほど受け取った画像の上に新しいレイヤーを追加するだけです。 確かに、考慮すべき点がいくつかあります。



最初に、最初に描画するタイルを決定する必要があります。 黄色の草の焦げた斑点があり、川の上を流れる特定の緑の野原を想像してください。 明らかに、最初に緑のフィールドを描画します。 次に、上に黄色い草の層を置き、同時に上に川を追加する必要があることを覚えておいてください。

黄色い草をマークするためのマスクを計算するとき、川のタイルを黄色と同じように考慮する必要があります(HCVテンプレートを覚えていますか?たとえば、これらのタイルがすべて川である場合、テンプレート番号5が適していると思います)。 そして、川の下のマスクを計算するために、以前に描画されたすべてのタイルを外国のものと見なします(同様のHCVの例では、テンプレート番号1が必要になります)。



アルゴリズムに従ってください。 緑のフィールドがタイル1(スタックの最初)、黄色の芝生がタイル2、川がタイル3であるとします。

-タイル1を使用してグリッド全体を描画します-2未満のすべてのタイルがマスクの黒(完全に透明)を表し、白以上のタイル(描画)で、タイルごとにマスクを生成します

-タイル2を描画します(この場合、タイル2のように、2番目からすべてのタイルが描画されます!)

-2番目のマスクを生成し、3未満のすべてのタイル-透明、3以上-を描画します

-タイル-3を描く

-...(タイルがなくなるまで続けます)



それは簡単に聞こえますか? 特に、タイルの各ペアを互いに組み合わせることの難しさと比較して。 説明が思ったほどシックではない場合-スクリーンショットでアルゴリズムの段階的な操作を見てください。これで状況が明確になります。









(交差する2つの川でごめんなさい。タイル張りのためです!)



これがそのような基本的な考え方です。 この場合、異なるレイヤーをレンダリングするときに異なるマスクを使用できます。 黄色い草と緑のフィールドの混合物は、1つのマスクで実行できます。きれいな川岸では、別のマスクを選択できます。 また、追加のテクスチャについて考えることもできます-同じきれいな海岸では、アルファだけでは十分ではないので、同様にマークされた特別なテクスチャをマスクに配置しないでください。 一般に、このアルゴリズムを使用するときは、すべてが鉄のファンタジーと可能性に適合する場合にのみ、検討の余地があります。 この方法がお役に立てば幸いです。そうでないと、少なくともあなた自身の面白いアイデアが出てくるでしょう!



*小さな追記:歴史的にそうだったので、私は最初にこの記事を英語で書きました。 おそらく、ロシア語版を書いているときにオリジナルをスパイしていなかったなら、言語はもっと人間的だったでしょう。 少なくとも試してみた! いずれにせよ、突然読みにくい勢いをおaびします。



All Articles