目立たない方法で繰り返す大きな空間の背景を作成するにはどうすればよいですか


14

rtsゲームで繰り返される大きなスペースの背景を作成するにはどうすればよいですか。複雑な星雲とほこりの場も持ちたいのですが、ユニットには探索するスペースがたくさんあるので、120000px x 1200000pxのjpegは持てないので、セグメント間の変更線は持たずに画像を繰り返したいです。

これをMicrosoftのBabylonフレームワークでWeb GLキャンバスに使用しています


8
画像の代わりに手続き型シェーダーを使用することを検討しましたか?単純なWebは種類が非常に印象的なのに見えており、これを持ち出す検索:casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve

@LeFauve実際、私はこのアイデアが大好きです。ゲームは、過去に生成されたものに戻ったときに記憶していますか?ブラウザのメモリでこれを管理するにはどうすればよいですか?
SuperUberDuper

@SuperUberDuper:決定論的でローカルな方法で生成される限り、何かを「記憶」する必要はありません。必要なときにデータを再生成するだけです。
R .. GitHub停止氷の停止

@LeFauve:それは本当に答えになるはずです。与えられた答えよりもはるかに優れています。
R .. GitHubのSTOP手助けICE

@R ..同意します。webGLにいくつかのコードがあればいいと思います;)
SuperUberDuper

回答:


19
  1. 視差スクロールを使用します。メインビューポイントの速度の異なる割合でスクロールする複数の背景レイヤーがあります。レイヤーが低いほど、スクロールが遅くなります。これは奥行きの錯覚を提供する素晴らしい方法ではありません。また、レイヤーが同期していないため、異なるレイヤー上のオブジェクトが異なるコンポジションで表示されるため、背景の繰り返しを少なくします。

  2. 背景を手続き的に作成します。1つの大きな背景グラフィックの代わりに、複数の異なる小さな要素を用意し、それらをすべてゲーム世界全体にランダムに複数回配置します。

ちなみに、JPEGを避けられる場合は使用しないでください。これは、変更して保存するたびに品質が低下する損失の多い形式であり、写真用に最適化されており、透明度をサポートしていません。PNGのようなアルファチャネルでロスレス形式を使用します。唯一の正当な理由は、ソース画像がJPEGでのみ利用可能で(NASAがすべてパブリックドメインにある多くの素敵な天文学の写真を公開した)、それらに一切変更を加えない場合です。


7

2Dゲームの無限の背景を構築する方法は次のとおりです。

  1. グラフィックエディタソフトウェア(Mac用iDrawなど)を使用して、背景の一部を表す画像Aを作成します。この画像のサイズには制限があります。
  2. Aを複製し、Y軸にミラーリングします。これはBです
  3. 次に、AとBを(水平方向に)貼り付けます。これはABです。
  4. 最後に、画像ABをゲームにインポートし、コードを使用して必要な回数だけ水平方向に繰り返します。

お役に立てれば。


2
サイズは制限されていますが、制限はありませ。タイルが小さいほど、繰り返しが一般的に明確になります。
チャオ

1
または、ミラーリングの代わりに、Photoshopのオフセットフィルターを使用して境界線にスタンプを複製するか、GIMPの「Make Seamless」フィルターを使用します(Filter→Map→Make Seamless)。
wchargin

5

レイヤーはうまく機能します。

ここにいくつかの数学があります:

線路__ __の隙間に気づくほどの粗末な鉄道線路があるとします。ホイールがそれらの上を転がると、小さなノッチ(小さなノッチ)ができます。

トラックの長さがある場合にはl、車輪半径を持ってr、その後2pi r、車輪の円周であるration=l/(2pi r)割合が、それは長い乗り物のようにホイールがそれに四半期ごとにノッチを取得します10.25を言っている場合。

これは、カバースペースを説明する最も簡単な方法です。

したがって、2つの画像があるとします。1つにこの4分の1の比率がある場合、4相のパターンが得られ、4タイル後に繰り返されます。1つのメイン背景と2つのオーバーレイがあり、mフェーズとnフェーズがあるとします。その後、m * nタイルの後にパターンが繰り返されます。

数値が互いに素である場合、パターンは最適に見えますが、最大公約数は1です。たとえば、フェーズ6のフェーズとフェーズ4のフェーズがあると仮定します。 " ある意味で。

この手法を(特にパーティクルやもので)使用すると、非常に少ない労力で多くの「ユニークな」ものを作成できます。

列車の車輪に戻って、比率が無理であれば、ノッチが車輪を覆います!しかし、これは実際には問題ではありません。


5

ここに欠けていると思われる別のアイデアがあります:

スカイボックスのような長距離背景の場合、Parallaxレイヤーはあまり気分が良くありません。たとえば、星を考えてみてください。地球上を歩いているとき、または夜通しでさえすれば、すべての星は一緒に動きますが、それらは互いに数百光年離れていることを知っています。問題は、距離が遠すぎて、私たちが距離に気付かないことです。それでも、非常に大きなテクスチャ(120k * 120kなど)を、限られた計算能力(最大で8k * 8kで処理できる)で描画したいということです。複数の視差レイヤーを使用するように、それぞれ異なる種類の詳細を持つ異なるテクスチャを作成する必要があります。たとえば、1つは銀河を表し、もう1つは星の束などを表します。しかし、今回は、異なる速度でそれらを移動するのではなく、サイズが異なるはずです。次に例を示します。3つのテクスチャの使用を検討してください。1つは2048 * 2048、もう1つは729 * 729、3つ目は625 * 625です。これらの数字は互いに素であるため、これらの3つのテクスチャを3つのレイヤーに組み合わせる場合、原点からlcm(2048,729,625)= 764Mピクセル移動して、同じものが描画されているのを見る必要があります。実際、他のレイヤーを追加したり、各テクスチャのサイズを変更したりすると、常に最大の結果が得られますテクスチャサイズの最小公倍数


2
これと@AlecTealの答えは、Cicada Principleと呼ばれる手法について説明しています。これは、非常に少ないリソースで、非ランダムで非常に大きな非繰り返し背景を作成する簡単な方法です。
ライライアン

4

これは、手続き型ピクセルシェーダーの仕事のようです。

イメージを使用することの利点は次のとおりです。

  • 巨大なビットマップを提供する必要はありません
  • 手続き型であるため、固定イメージを繰り返す必要はありません(無限に変化する可能性があります)
  • パララックス効果が必要な場合は、数千の平面をシミュレートできますが、画像を使用するのは現実的ではありません
  • ダイナミックライティングなどの非常に高度な効果を実行できます。
  • ほとんどの処理はGPUによって行われ、ゲームの他の部分のためにCPUを解放します

単純なWeb検索により、このシェーダーがhttp://casual-effects.blogspot.com.au/2013/08/starfield-shader.htmlに表示されます。これは、探しているもののように見えます。

私はWebGLの専門家ではありませんが、このページによると、通常のGLS​​L言語を使用しているようです(これは、シェーダーをプログラムするためにグラフィックカードで使用されるC-Like言語です)。これは、おそらくそれを機能させるために行う変更がほとんどないかまったくないことを意味します。

ただし、どのように機能するかを理解するために、より基本的なシェーダーから始めようとするかもしれません。

このブログページには、WebGLでシェーダーを実装するためのすべての手順がリストされています。始めるのに良い場所のようです。

素晴らしいシェーダーの例を見つけるのに適した別の場所はhttps://www.shadertoy.com/です


ありがとうございます!!! 答えを選ぶのに苦労しています!
SuperUberDuper

2
まあ、シェーダーを試してみる機会があれば、見栄えの良いゲームをしたいなら、長期的には間違いなく役に立つでしょう。最初のステップは少し高いですが(最初のシェーダーが思い通りに見えるようになるまでに2週間かかりました)、長期的には価値があります。
ルフォーブ

2

大きなjpegを小さなセグメントに分割して配置(可視部分)することができ、常にメモリに保存する必要さえありません。

古いゲームのように、いくつかの「タイル」を繰り返すことができます。これはNESコンソールの一般的なソリューションであり、ハードウェアでもサポートされていました。


1
JPEGを小さなJPEGにカットすることは、不可能ではないにしても、非常に困難です。圧縮により損失が発生するため、視覚的な不具合が発生することはありません。タイルを使用する場合は、PNGなどの可逆圧縮ファイル形式を使用する必要があります。
ルフォーブ

1
PNGは優れているかもしれませんが、3DグラフィックスではJPEGテクスチャが一般的であり、より重要なJPEGは16x16ブロックを使用してen.wikipedia.org/wiki/Macroblockの右カットをコーディングします。割合。
アレクセイ・シェスタコフ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.