ペイントをレベルエディターとして使用する

私のすべての意識的なプログラミング活動は、ゲームを作るのが好きで、エディターや他のユーティリティを作るのが好きではありませんでした。 私の主な編集者はほとんどいつもペイントでした。 しかし、レベルが静的で、タイル（マリオのようなタンク）で構成されるゲームの場合、これは多かれ少なかれ正当化されます。 ペイントで作成されたレベルファイルの1ピクセルは、ゲームのタイルに対応します。 しかし、タイルがなく、ゲームの場所が不均一な岩の多い洞窟で構成されるゲームを作成する場合はどうでしょう。 または、多くの可動要素（フライングプラットフォーム、エレベータ、円状に回転する丸鋸）があるゲーム。



私はまだそのような目的のためにエディタを作成したくありませんでした。 この記事では、これをペイントでどのように解決したかを説明します。



これはゲームのデモンストレーションや広告ではなく、ゲームで使用される方法の説明なので、ゲームの名前とリンクを提供しません。

凹凸マップ

最初のゲームは、さまざまなゲームプレイでは輝きません。ジェットエンジンの助けを借りて移動する特定の潜水艦でプレイし、岩や他の敵をかわします：



電話で撮影されたビデオの品質をおpoびします



ビデオは、場所が地球（触れてはならない）、背景、水、回転するハリネズミ（敵）、およびこれらのハリネズミを放出するエミッターで構成されることを示しています。 はい、そこには魚と藻がありますが、それらはランダムに生成され、レベルファイルとは関係ありません。



ビデオのレベルは左側に表示されます（4回増加）：



左上隅に緑のピクセルが表示されているため、開始位置がマークされています。この場所を覚えておく必要があります。 それ以降のすべての図はそれを示します。



レベルファイルは3つの層で構成されます。

• プレイヤーがやり取りするオブジェクトのレイヤー：アース、エミッター、ハリネズミ、開始位置と終了。 エミッターの方向（4方向のいずれかで撮影可能）は設定されず、起動時に、隣接する「グラウンド」ピクセルに基づいて計算されます
• 水の層（これはアーケードであるため、通信船の法則はここでは適用されません）
• 背景レイヤー

水は地球と交差し、背景は地球と水と交差するため、3つの層に分割されます。 文字サイズは、マップファイル内のピクセルのサイズの半分です。



今のようにレンダリングして（タイル単位で）表示すると、場所は巨大な正方形で構成されます。 そして、そのようなタイルの数は非常に多い（このカードでは61x69）。 そのため、別のレンダリング方法（タイル以外）が適用され、1回の呼び出しでマップを表示できます（実際には、3つの別々の水、背景、最終接着）。 これは、レベル全体が1つのテクスチャに配置されているためです。これをtex_levelと呼びましょう。 そして、彼女はフルスクリーンクワッド（ポリゴン、スクリーンのサイズ）を引っ張ります。 この前に、テクスチャ座標は、キャラクターにアタッチされている仮想カメラに応じて設定されます。



左-これは、tex_levelテクスチャと仮想カメラカバレッジの外観です。 右側には、フルスクリーンクワッドに割り当てられたテクスチャ座標があります。 tex_levelテクスチャの一部が画面に当たります。



まず、tex_levelテクスチャを準備する必要があります。 これを行うには、このテクスチャのピクセルの配列を作成します。

unsigned int pix[w*h];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、wはレベルのあるファイルの幅、hは3で割った高さです（3つのレイヤーがあるため）。



ループでは、各レイヤーからソースマップのすべてのピクセルを読み取り、色（タイルの種類）に応じて、ピクセルpix内の対応するカラーチャンネルを埋めます。つまり、

 for(int i=0;i<w*h;i++) //    { int c=GetPixel(i%w,i/w); //   1-  if(c==RGB(0,0,0)) pix[i]=0xff; //   –   (R ) c=GetPixel(i%w,i/w+h); //   2-  if(c==RGB(0,0,255)) pix[i]|=0xff0000; //  –  (B ) c=GetPixel(i%w,i/w+h+h); //   3-  if(c==RGB(127,127,127)) pix[i]|=0xff00; //  –  (G ) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

技術的特徴：実際には、wとhは、マップの幅と高さの最も近い上向きの2の累乗に等しく、欠落しているピクセルは赤コード（グラウンド）され、このサイクルは擬似コードと見なすことができます。



配列内の同じピクセルに土地、水、背景を含めることができることがわかります。 pix配列に基づいて、tex_levelテクスチャが作成されます。pix配列自体は依然として有用です。



左側には完成したtex_levelテクスチャがあり、右側にはゲーム内にあります。 カメラは開始位置にあります。



移動をより便利にするために、tex_levelからRチャネルのみを出力します。 地球だけ。



最初に、これらの巨大な正方形を取り除く必要があります。 これを行うには、tex_levelテクスチャに転送する前に、ピクセル配列をGaussに従ってウォッシュアウトする必要があります（ぼかし半径は経験的に選択されました）。 これで、同じ場所がより良く見えます：



左側はぼかし前の地面、右側はぼかし後です。

技術的な詳細：ぼかしの前に、元のピクセルが既にストレッチされた配列の2x2ピクセルを占めるように、pix配列を2回ストレッチする必要があります。



しかし、ここでは地球の境界が非常にぼやけています。 ぼやけた境界線を明確な境界線に変えるプロセスを理解するために（このプロセスを明確な境界線フィルターと呼びましょう）、1次元の場合を考えます。 彼は似ています。 すると、地球のぼやけた境界線は次のようになります。







このグラフから0.5を引き、いくつかの大きな数（このプロジェクトでは50）を掛け、境界[0;に沿って切り取ります（クランプ操作）。 1]、つまり 0未満のすべてが0になり、1を超えるすべてが1になります。



その結果、白がすぐに黒に変わることはありません（これは重要です）。



次に、これらすべての操作をtex_levelテクスチャで行います。 このテクスチャからの選択をlevel_colorに保存すると、フィルターは次のようになりますclamp((level_color.r – 0.5) * 50.0, 0.0, 1.0)











はるかに優れており、よく見ると、2つの環境間のインターフェースにエイリアシングがないことがわかります。 しかし、このような境界線は滑らかすぎて滑らかなので、少しノイズを追加しましょう。 これを行うために、 Perlinノイズを含むテクスチャが生成されました（ノイズパラメータは経験的に選択されました）。それをノイズと呼びましょう。 ノイズテクスチャからサンプリングするためのテクスチャ座標は、tex_levelのテクスチャ座標よりも何倍も大きいです。 これは、ゲームでtex_levelテクスチャの一部のみを見ている間に、ノイズテクスチャが画面内で数回繰り返されることを意味します。 ノイズテクスチャとtex_levelからサンプルを追加してから、クリアボーダーフィルターを適用します。







tex_level + noiseの左側、右側に明確な境界フィルター。



技術的詳細：ノイズテクスチャの値の範囲は0〜1です。したがって、（noise-0.5）* kをtex_levelサンプルに追加します。ここで、kは境界摂動係数です（プロジェクトでは0.3）。



これで、テクスチャを強制するだけになります。 地球のテクスチャは既に存在します（これは単なる普通のテクスチャです）が、まだ水がないため、最初に準備する必要があります。



アルゴリズムは地面とまったく同じですが、Rチャンネルからサンプリングする代わりに、Bチャンネルからサンプルを作成する必要があります。 水が含まれているのはそこです。 もう1つの違いは、通常のノイズの代わりに、アニメーション化されたノイズ（時間とともに滑らかに変化する）を使用して、水と空気の境界で波を作成することです。 アニメーションノイズの作成は、この記事の範囲外です。 この段階では、空のテクスチャを適用し、水の役割は青い色（実験的に選択）によって果たされます。 水の層を取得するステップのすべてのステップを以下に示します。







左から右：ぼやけた水の境界線、アニメーション化されたノイズとフィルター、青から空のテクスチャへの補間。



次のステップは、背景レンダリングです。 今回は、Gチャネルのtex_levelから選択します。 この段階で根本的に新しいものはありません。背景マスクを取得し、前の段階の石のテクスチャ（この場合）と水のテクスチャを補間します。 もちろん、微妙な点もあります。背景の水中部分に追加のフィルターが重ねられます。これは、水自体が水の厚さの影響を与えるのと同じですが、これは記事の範囲外です。 同じ段階で、魚や藻などの装飾的な要素がレンダリングされます。 最後に、背景レイヤーは次のようになります。







技術的な詳細：水中の流れによる「藻の移動」の効果を与えるために、藻でスプライトをレンダリングするときにテクスチャ座標のxコンポーネントの変位を使用しました。 このオフセットの大きさは、アニメーション化されたノイズのある同じテクスチャからすべて読み取られました。



そして最後のステップは接着です。 記事の冒頭でアースマスクを受け取ったので、それを使用して、アースのテクスチャと背景レイヤーを補間します。 最終結果は次のようになります。



アイデアの開発。 地面に複数のテクスチャを適用したい場合は、別のレイヤーを追加します。このレイヤーでは、地球のピクセルが4つの異なる色（より少なく、しかしそれ以上ではない）でペイントされます。 このレイヤーから別のマスクテクスチャが作成されます（レイヤーの4色-マスクの4つのカラーチャネル）。ただし、1つ（マスクの1つと対応する4つのグラウンドテクスチャ）ではなく、追加の5つのテクスチャサンプルを作成する必要があります。

衝突検知

タイルゲームで衝突が非常に単純に定義されている場合：タイルの配列から選択を行い、不可解なタイルにヒットするかどうかを確認します。 それからここでそれはあまりにも失礼になります、なぜなら 視覚的にはタイルはありませんが、さまざまな角度の表面があります。 ちなみに、アースコードはシステムコードでは使用できません（ビデオカードの計算段階の1つにすぎません）。 しかし、Gaussによってぼやけたpix配列があります。 この配列の要素では、下位バイトのみが興味深いです。なぜなら、 ここが土地の保管場所です。 視覚的には、この配列は次のようになります（カメラに該当する配列のフラグメントのみが示されています。実際、マップ全体が配列に含まれています）。







これは、 バイリニアフィルタリングがそこで使用され、ぼかし後の配列の生の値のみが使用されるため、ぼかした境界線のある画像とは異なります。



この配列の値は高さマップに似ています;地球の視覚的な境界とほぼ一致する高さの値を選択できます（経験的に選択します）。 高さをより正確に決定するには、 双線形補間を使用する必要があります。 また、特定のポイントの近くで3つの高さを計算すると、このポイントの勾配を非常に正確に決定でき、それは地球の視覚面の法線と一致します。 このゲームの法線は1か所でのみ使用されました-ジェットで地球の表面を曲がるために：

ダイナミックマップ

したがって、記事の冒頭で提起された最初の問題は解決されました。タイルは見えず、不均一な岩の多い風景のみです。 しかし、要素の移動はどうですか？ これは2番目のゲームを示します- スーパーミートボーイのアナログ：



多くの可動要素があります：直線で動くまたは中心の周りを回転する丸のこ、スパイクとのこぎりの動くプラットフォーム、ドア、散乱タイル。 そして、のこぎりはまだサイズが異なります。



レンダリングプロセスは最初のゲームに完全に類似しているため、マップの形式の検討に限定しています。 ビデオの地図は次のようになります（5倍に拡大）。



このマップは6つの（！）レイヤーで構成されています（ゲームには5つの異なるタイプのレイヤーがあり、すべてここに表示されています）。 前のゲームとは異なり、ここでのレイヤーの数は任意です。 左上隅にピクセルのセットがあります（レイヤーとまったく同じ数があります）。 レイヤーのタイプを指定するだけです（これにより、レイヤーの順序と数を気にする必要がなくなります）。 最初の2つのレイヤーは明らかです。オブジェクトレイヤー-プレイヤーと相互作用する要素（地面、スパイク、のこぎり、開始、終了、タイルの散乱）および背景レイヤー。 4番目のレイヤーは、最初のレイヤーと同様に、オブジェクトのレイヤーです（左上隅の4番目のピクセルも黒です）。 オブジェクトが他のオブジェクトと交差するため、いくつかのオブジェクトをこのレイヤーに移動する必要がありました（理論的には、同じレイヤーは任意の数になります）。



技術的な特性： tex_levelテクスチャは地面と背景にのみ配置され（このゲームには水はありません）、他のすべてのオブジェクトはレベルファイルから配列に読み込まれます。



3番目のレイヤーを検討してください。 以下は、赤と青のドアと対応するキーです。 したがって、ドアもオブジェクトですが、オブジェクトレイヤーに配置することはできません。このレイヤーの赤と青の色は、それぞれスパイクと回転の中心（下について）ですでに占められているためです。 一般に、タイルのグループはこのレイヤーでマークされます。 同じグループのタイルは同じ色で、すべて互いに隣接しています。 グループには2つのタイプがあります。

• 移動グループ。 このグループのすべてのタイルは同期して移動します（緑）。 グループには1つのメインタイル（青緑色）が含まれており、別のレイヤーでパスと速度が割り当てられています。 このマップには、スパイクとのこぎりで地球（カートのようなものになります）を含む1つの大きなグループがあります。 そして、4つのシングル-それぞれに1つのソーのみが動きます。
• 回転グループ（灰色）

オブジェクトのレイヤー（この場合、4番目）では、回転グループの回転中心は青でマークされています（ここでは、3つ目のレイヤーから実際に回転グループに落ちたのは1つの中心のみであり、残りもレンダリングされるため、装飾的な要素の役割を果たします）。 回転グループにはまだ2つののこぎりがありました（第4層の黄色）。 それらは回転中心の周りを回転します。



5番目のレイヤーは、鋸の寸法を赤のグラデーションで示します。 のこぎりにこのレイヤーからの赤いピクセルがない場合、デフォルトでそのサイズが使用されます。 また、6番目のレイヤーには、灰色のグラデーションでグループを移動するための軌跡と速度、および鋸を回転させるための速度と方向があります。 一部のレイヤーには、このレイヤーに関係のない余分な色があります。マップを読み込むとき、それらは単に無視されます（たとえば、ほとんどすべてのレイヤーは地球の黒いピクセルを持ち、それらに関連してナビゲートするマップを作成するときにのみ必要でした）。



アイデアの開発。 理論的には、ペイントを使用して3Dシューティングゲームのマップを作成できます。マップファイルはレイヤーのマトリックスで構成されます。 このマトリックスの行はゲーム内のレイヤーの高さに対応し、列には同じタイプのレイヤーが含まれます。 たとえば、1列目にはマップジオメトリ（1つのレイヤーは特定の高さのマップのセクション）があり、2列目にはパイントのキーカラーを使用してテクスチャを割り当てることができます。



おそらくそれだけです。 「ペイントのマップエディター」というトピックが明らかになることを願っています。