5
マップタイリングアルゴリズム
地図 私は、perlinノイズハイトマップを使用してJavascriptでタイルベースのRPGを作成し、ノイズの高さに基づいてタイルタイプを割り当てています。 マップはこのように見えます（ミニマップビューで）。 画像の各ピクセルからカラー値を抽出し、タイル辞書のタイルに対応する（0〜255）の間の位置に応じて整数（0〜5）に変換するかなり単純なアルゴリズムがあります。次に、この200x200の配列がクライアントに渡されます。 次に、エンジンは配列の値からタイルを決定し、それらをキャンバスに描画します。つまり、山、海など、リアルな外観の特徴を持つ興味深い世界ができあがります。 次に、私がしたかったのは、隣人が同じタイプでない場合にタイルを隣人にシームレスに混ぜ合わせるようなある種のブレンドアルゴリズムを適用することでした。上記のサンプルマップは、プレーヤーがミニマップに表示するものです。画面上に、白い長方形でマークされたセクションのレンダリングバージョンが表示されます。タイルは、単色のピクセルとしてではなく、画像とともにレンダリングされます。 これは、ユーザーがマップに表示するものの例ですが、上記のビューポートが示す場所とは異なります！ この見方で、私は移行を起こしたいと思っています。 アルゴリズム 異なるタイプのタイルの隣にある場合、ビューポート内のマップをトラバースし、各タイルの上部に別の画像をレンダリングする単純なアルゴリズムを思いつきました。（マップは変更しません！いくつかの追加画像をレンダリングするだけです。）このアルゴリズムのアイデアは、現在のタイルの近傍をプロファイルすることでした： これは、エンジンがレンダリングする必要のあるシナリオの例です。現在のタイルはXでマークされたタイルです。 3x3配列が作成され、その周りの値が読み込まれます。この例では、配列は次のようになります。 [ [1,2,2] [1,2,2] [1,1,2] ]; 私のアイデアは、可能なタイル構成の一連のケースを考え出すことでした。非常に単純なレベルで： if(profile[0][1] != profile[1][1]){ //draw a tile which is half sand and half transparent //Over the current tile -> profile[1][1] ... } これはこの結果を与えます： そこから遷移として働く[0][1]の[1][1]ではなく、から[1][1]の[2][1]、どこのハードエッジが残ります。したがって、その場合はコーナータイルを使用する必要があると考えました。私は2つの3x3スプライトシートを作成し、必要なタイルのすべての可能な組み合わせを保持すると考えました。次に、ゲーム内にあるすべてのタイルについてこれを複製しました（白い領域は透明です）。これは、タイルのタイプごとに16タイルになります（各スプライトシートの中央のタイルは使用されません）。 理想的な結果 したがって、これらの新しいタイルと正しいアルゴリズムを使用すると、サンプルセクションは次のようになります。 私が行ったすべての試みは失敗しましたが、アルゴリズムには常にいくつかの欠陥があり、パターンは奇妙になってしまいます。私はすべてのケースを正しくすることができないようで、全体的にそれを行うには悪い方法のようです。 解決策？ したがって、この効果をどのように作成できるか、またはプロファイリングアルゴリズムを作成するための方向性に関する代替ソリューションを誰かが提供できるとしたら、私は非常に感謝します！