Wie kann ich einen großen Raumhintergrund erstellen, der sich unbemerkt wiederholt?

Wie kann ich einen großen Hintergrund erstellen, der sich für ein RTS-Spiel wiederholt? Ich möchte auch komplexe Nebel- und Staubfelder haben, aber da die Einheiten viel Platz zum Erkunden haben, kann ich kein 120000 x 1200000 JPEG haben, also möchte ich das Bild wiederholen, aber keine Änderungslinien zwischen den Segmenten haben.

Ich verwende dies mit Babylon Framework von Microsoft für Web GL Canvas

1. Verwenden Sie das Parallaxen-Scrollen. Haben Sie mehrere Hintergrundebenen, die mit unterschiedlichen Bruchteilen der Geschwindigkeit des Hauptansichtspunkts scrollen. Je niedriger die Ebene, desto langsamer wird gescrollt. Dies ist nicht nur eine großartige Möglichkeit, eine Illusion von Tiefe zu erzeugen, es lässt auch die Hintergründe weniger repetitiv erscheinen, da die Objekte auf den verschiedenen Ebenen in unterschiedlichen Kompositionen angezeigt werden, da die Ebenen nicht synchron sind.

2. Erstellen Sie Ihre Hintergründe prozedural. Verwenden Sie anstelle einer großen Hintergrundgrafik mehrere verschiedene kleinere Elemente, und platzieren Sie sie alle mehrmals zufällig in der gesamten Spielwelt.

Übrigens: Verwenden Sie JPEG nicht, wenn Sie es vermeiden können. Es ist ein verlustbehaftetes Format, das bei jeder Änderung und Speicherung an Qualität verliert. Es ist stark für die Fotografie optimiert und unterstützt keine Transparenz. Verwenden Sie ein verlustfreies Format mit Alphakanal wie PNG. Der einzige gute Grund wäre, wenn Ihr Quellbild nur in JPEG verfügbar ist (die NASA hat viele nette Astronomiebilder veröffentlicht, die alle gemeinfrei sind) und Sie keinerlei Änderungen daran vornehmen möchten.

Eine Möglichkeit, einen unendlichen Hintergrund für ein 2D-Spiel zu erstellen, ist die folgende:

1. Erstellen Sie mit einem Grafikeditor (wie iDraw für Mac) ein Bild A , das einen Teil Ihres Hintergrunds darstellt. Dieses Bild sollte eine begrenzte Größe haben.
2. Duplizieren Sie A und spiegeln Sie es auf der Y-Achse, dies ist B
3. Fügen Sie nun (horizontal) zusammen A und B ein, dies ist AB .
4. Zum Schluss importiere das Bild AB in dein Spiel und wiederhole es horizontal per Code so oft du willst.

Hoffe das hilft.

Schichten funktionieren gut.

Hier ist ein paar Mathe:

Angenommen, Sie haben eine Eisenbahnstrecke, die schlecht gebaut ist, so dass dergleichen __ __die Lücke zwischen ihnen bemerkt. Wenn das Rad darüber rollt, macht es eine kleine Kerbe (winzige Kerbe).

Wenn die Spurlänge ist lund das Rad einen Radius hat, rdann 2pi rist der Umfang des Rades, ration=l/(2pi r)wenn das Verhältnis 10,25 ist, dann wird das Rad jedes Viertel eine Kerbe bekommen , wenn es lange fährt.

Dies ist der einfachste Weg, den ich mir vorstellen kann, um das Abdecken von Räumen zu erklären.

Angenommen, Sie haben zwei Bilder. Wenn eines dieses Viertelverhältnis aufweist, erhalten Sie ein 4-Phasen-Muster, das sich nach 4 Kacheln wiederholt. Angenommen, Sie haben 1 Haupthintergrund und 2 Überlagerungen mit m und n Phasen. Dann wiederholt sich das Muster nach m * n Kacheln.

Auch wenn es nicht wichtig ist, wird das Muster am besten aussehen, wenn die Zahlen Co-Primzahlen sind, das ist der größte gemeinsame Teiler 1. Nehmen wir zum Beispiel an, wir haben etwas von Phase 6 und etwas von Phase 4, jede zweite Phase wird "aufgereiht" " in einem Sinn.

Sie können diese Technik (insbesondere bei Partikeln und Material) verwenden, um mit sehr wenig Aufwand eine Menge "einzigartiger" Materialien zu erstellen.

Zurück zum Zugrad, wenn das Verhältnis irrational ist, bedecken die Kerben das Rad! Aber das ist eigentlich egal.

Hier ist eine andere Idee, die zu fehlen scheint:

Bei Hintergründen mit großer Entfernung, wie z. B. Sky-Boxen, fühlen sich Parallax-Ebenen nicht wirklich gut an. Denken Sie zum Beispiel an die Sterne, wenn Sie auf der Erde wandeln oder noch besser die ganze Nacht über, alle Sterne bewegen sich zusammen, obwohl wir wissen, dass sie Hunderte oder Gedanken haben, die ein Lichtjahr voneinander entfernt sind. Die Sache ist, dass sie viel zu weit weg sind, als dass wir ihre Entfernungen bemerken könnten. Trotzdem möchten wir immer noch eine sehr große Textur (sagen wir 120k * 120k), die mit unserer begrenzten Rechenleistung (die maximal 8k * 8k verarbeiten kann) gezeichnet werden kann. Wie bei der Verwendung mehrerer Parallaxenebenen sollten Sie unterschiedliche Texturen mit jeweils unterschiedlichen Details erstellen. Zum Beispiel stellt eine Galaxie dar, eine andere besteht aus einer Reihe von Sternen usw. Aber diesmal sollten sie sich in ihrer Größe unterscheiden, anstatt sie mit unterschiedlicher Geschwindigkeit zu bewegen. Hier ist ein Beispiel: Betrachten Sie die Verwendung von 3 Texturen, eine ist 2048 * 2048, eine andere ist 729 * 729 und die dritte ist 625 * 625. Da diese Zahlen miteinander in Konflikt stehen, sollte man beim Kombinieren dieser 3 Texturen in 3 Ebenen 1 cm (2048,729,625) = 764 M Pixel vom Ursprung entfernen, um zu sehen, dass dasselbe gezeichnet wird, was sich irgendwie wie unendlich anfühlt. Tatsächlich können Sie andere Ebenen hinzufügen oder die Größe jeder Textur ändern, und Sie erhalten immer ein Ergebnis von so groß wieam wenigsten häufiges Vielfaches der Texturgrößen.

Dies scheint eine Aufgabe für einen prozeduralen Pixel-Shader zu sein.

Die Vorteile gegenüber der Verwendung eines Bildes sind:

• Sie müssen keine großen Bitmaps bereitstellen
• Es ist prozedural, so dass es kein festes Bild wiederholen muss (es kann unendlich variieren)
• Wenn Sie einen Paralax-Effekt wünschen, können Sie Tausende von Ebenen simulieren, was mit Bildern unpraktisch wäre
• Sie können sehr fortschrittliche Effekte wie dynamisches Licht erzielen
• Der Großteil der Verarbeitung wird von Ihrer GPU vorgenommen, sodass die CPU für andere Teile Ihres Spiels frei bleibt

Eine einfache Websuche bringt diesen Shader auf http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html, der so aussieht, wie Sie es suchen.

Ich bin kein Experte für WebGL, aber dieser Seite zufolge wird die reguläre GLSL-Sprache verwendet (dies ist die C-ähnliche Sprache, die Grafikkarten zum Programmieren von Shadern verwenden). Dies bedeutet, dass Sie wahrscheinlich kaum oder gar keine Änderungen vornehmen müssen, damit es funktioniert.

Sie können jedoch versuchen, mit einem einfacheren Shader zu beginnen, um zu verstehen, wie es funktioniert.

Diese Blog-Seite listet alle Schritte zur Implementierung eines Shaders in WebGL auf. Das scheint ein guter Anfang zu sein.

Ein weiterer guter Ort, um wundervolle Shader-Beispiele zu finden, ist https://www.shadertoy.com/

Sie können Ihr großes JPEG in kleine Segmente schneiden und diese platzieren (sichtbarer Teil). Sie müssen es nicht einmal die ganze Zeit in einem Speicher ablegen.

Und wie bei einem alten Spiel können sich manche 'Kacheln' wiederholen. Das war eine gängige Lösung für die NES-Konsole, die sogar von der Hardware unterstützt wurde.