Backgrounds, ganz ohne 3D

[Shaggy Vinci]

Heyo Leute,

habs ja schon mehr oder weniger angeteasert, dass ich mal nen kleines Tutorial zu Hintergründen und Landschaften machen wollte, die ganz ohne den 3D Glitch auskommen.

Vorweg: Ne Allzweck-Alternative für den 3D Glitch hab ich auch nicht. Aber ich seh oft, wie 3D Glitch eingesetzt wird, wo eigentlich garkeiner nötig gewesen wäre. Ich mach daraus gar niemandem nen Vorwurf, zumal jeder so seinen eigenen Geschmack in der Level-Optik gerne in seine Werke einbringen darf. Manchmal hab ich aber das Gefühl, dass überhaupt nicht in Betracht gezogen wird, Gebirgsketten, Metropolen-Skylines, o.Ä. in den 3 spielbaren Layers umzusetzen und dann einfach provisorisch auf den Glitch zurückgegriffen wird.

Bei klassischen Sidescrollern, Levels mit nur einer Kameraeinstellung (Minigames, Shooter, etc) oder denen, die komplett ohne Sackboy auskommen, ist es eigentlich total einfach mit den 3 normalen Layers nen coolen Background zu zaubern.


Extremely basic stuff

Obwohl ich hier niemanden für dumm verkaufen will, fang ich einfach mal bei den very basics an und erklär erstmal die Grundregeln von Fluchtpunktdarstellungen, bevor ich auf die eigentlichen Hintergründe eingeh. Schaden kann das ja nicht.

Dass Objekte kleiner erscheinen, die weiter entfernt sind, dürfte wohl für keinen neu sein. Eher seh ich die Schwierigkeit darin, festzustellen, wo sich der Fluchtpunkt in meinem Level befindet und dann die Objekte ordentlich danach auszurichten.

http://id.lbp.me/img/ft/a0d875fb43c888c33b368a4ab7e9646a91e0d288.jpg
Oft befindet der sich nicht in der Mitte des Bildschirms, sondern weiter unten, weil man in vielen Levels mehr vom Himmel sehen möchte, statt auf den Fußboden zu starren. Aus den Ecken des Bildschirms zieht man Linien zum Fluchtpunkt, um Hilfslinien zu erhalten. Auf Höhe des Fluchpunkts befindet sich der Horizont. Alles, was sich nicht unterhalb der Kamera befindet, gehört also selbsterklärend überhalb des Fluchtpunktes. Kurz: Fußboden unten, Wolken oben.

http://i0.lbp.me/img/ft/9e079cb1da7ce08bf15873f4a40a8c24fa2d70eb.jpg
Weil man sich als Betrachter in aller Regel überhalb des Bodens befindet, werden Objekte höher platziert, die weiter entfernt sind. Klaro.

http://i6.lbp.me/img/ft/d26ee1bcfeebb171d9a462b79f3dafeb7ef83f5c.jpg
Wenn man den Horizont ausgeschmückt hat, kann man sich dran machen, Objekte im Bild zu platzieren. Hilfslinien helfen hier, um sich besser im Raum zu orientieren.

http://i2.lbp.me/img/ft/8a2d7a11b14f076b062dd3bb023d458360ceef39.jpg
Selbes gilt bei mehreren Objekten. Evtl ist es ne Hilfe, sich Schachbretter vorzustellen, die kleiner und filigraner werden, je weiter sie vom Betrachter entfernt sind.

http://ia.lbp.me/img/ft/23ae3a79d4eb4886c857898e16c584ab0eb34aa4.jpg
Der Schritt zu dreidimensionalen Formen ist dann auch nichtmehr weit: Einfach die Ecken aller sichtbaren Kanten jeweils miteinander verbinden und man erhält die sichtbaren Flächen der Form.


1-Screen Backgrounds

Jetzt zum eigentlichen Grund des Threads, den Hintergründen.

http://i6.lbp.me/img/ft/b56c4999f1b8b95337f1bd77238902383e607291.jpg
Bei stillstehenden Kameras kann man recht einfach nen coolen Background zaubern. Um die Tiefe möglichst echt wirken zu lassen und (wortwörtlich) Atmosphäre zu erzeugen, kann man weiter entfernte Objekte in der Transparenz reduzieren, oder (falls sich Objekte überlappen) zumindest farblich an den Himmel anpassen.


Sidescroller Backgrounds (mit Spielerbewegung)

Okay, genug von den Basics, jetzt gibts Bisschen Technik. Nix großes, aber zumindest hab ichs bisher leider erst selten in anderen Levels gesehen: Backgrounds, die sich mit dem Spieler bewegen. Funktioniert am besten bei gleichmäßiger Scrollgeschwindigkeit, mit den richtigen Einstellungen bekommt man aber auch nen akzeptables Ergebnis für Sackboy-Levels.

http://i4.lbp.me/img/ft/494a8c75ad56422227d5e7e693d073fad5876ac9.jpg
Zu Aller erst brauchs nen Objekt, das dem Spieler, dem Raumschiff oder dem Was-Auch-Immer folgt und die Geschwidigkeit misst, mit der man sich bewegt. Ausgegeben wird die gemessene Geschwidigkeit dann durch zwei Marker; "Links" und "Rechts" hab ich die genannt.

http://ia.lbp.me/img/ft/27aced9e51f93523add858d9c2fcc984f5000d98.jpg
Auf dem Hintergrund platziert man dann nen Chip, der die beiden Markersignale wieder in Bewegung umwandelt. Wichtig: Der Maximalwert des Geschwindigkeitssensors muss natürlich höher sein, als die Geschwidigkeit, die der Spieler erreichen kann. Die Maximalgeschwindigkeit des Hintergrunds muss dagegen niedriger sein, als der maximale Messwert.

Bewegt sich der Hintergrund schneller, als der Vordergrund (sprich: Spieler) wirkt es, als würde man im Kreis rennen.

http://i4.lbp.me/img/ft/514b313ee7b4360cc93e7b3d0dad583a696f409b.jpg
Den Chip kopiert man dann auf alle Hintergrundobjekte. Je weiter vorne, desto langsamer sollte der Beweger eingestellt sein. Das Mapping der Geschwidigkeit sollte auch in etwa der Entfernung zum Hintergrundobjekt entsprechen.

Beispiel: "Hügel" ist 1 Kilometer entfernt und bewegt sich mit 1. "Berg" ist 5 Kilometer entfernt und bewegt sich deshalb mit der 5-fachen Geschwindigkeit von "Hügel". Das erweckt den Anschein, die Gebirgskette würde fast stillstehen, während die Hügel und Dünen im Vordergrund schneller vorbeiziehen.

http://ib.lbp.me/img/ft/9eb3f609077029ab221b40807f952f7efcdab3a9.jpg

Wenn alles funktioniert, sollte sich der Hintergrund folgendermaßen verschieben:
http://id.lbp.me/img/ft/3adb7dbca3e8e920c7ecc21bbcebe53bf041d53a.jpg
Um den Tiefen-Effekt zu verstärken, kann man im Vordergrund noch den schicken Cross-Control-Nebel einbauen. Der macht sich fast immer gut bei sowas.


Der Vollständigkeit halber:

Steht der Spieler still und nur der Hintergrund bewegt sich, kehrt man das Prinzip ganz einfach um und bekommt den selben Bewegungs-Effekt: Berge, die langsam im Hintergrund vorbeiziehen und Dünen, die schnell an einem vorbeizischen, lassen den Spieler ultra schnell aussehen.


- - - - - - - - - -

So, viel mehr finde ich zu dem Thema nichtmehr zu sagen und ich denke das is auch gut so^^ Auch, wenn ich hier und da auch mal ziemlich offensichtliche Sachen wiedergekäut hab, hoff ich doch, dass ihr auch nützliche Infos oder neue Denkanstöße aus dem Artikel ziehen konntet.

Gern geschrieben,
shaggy

[CuriousSack]

Bravooo! Das ist doch mal ein wirklich klasse Tutorial! :) Werd ich beim nächsten mal gleich mal versuchen und damit ein bißerl experimentieren! :)
Vielen Dank und liebe Grüße, Jürgen^^

[Lumina]

Tolles Tutorial mit Dingen die man gerne mal vergisst - danke Shaggy! ^^
Bei meinen Plattform-Levels bleibe ich jedoch sicher mal bei 3D. ^^
Ausserdem können diese in LBP3 ja auch endlich spielerisch genutzt werden = YAY! ^^

Lediglich bei Stickerobjekten / Monstern auf einer Ebene
muss der Tiefeneffekt natürlich nachwievor "zeichnerisch" erzeugt werden.
Wobei LBP beim kopieren überlappender Stickerplatten ja gerne die Reihenfolge durcheinander bringt. -.-
Hoffe, dass man sich da das mühsame zurechtschneiden in LBP3 auch gleich sparen kann.

[Schnupsi]

Super geschrieben, danke Shaggy! :love:

[Shaggy Vinci]

Hoffe, dass man sich da das mühsame zurechtschneiden in LBP3 auch gleich sparen kann.
Wird sich zeigen, aber ich wäre da mal ganz optimistisch^^

Hab mir überlegt, evtl noch 2- bzw 3-Punkt-perspektive dazu zu editieren. Wäre kein großer Aufwand für mich und zumindest in meinem persönlichen Umfeld seh ich, dass Leute oft Schwierigkeiten damit haben.

[avundcv]

Perfekt! Sehr gutes Tutorial!

[Karrades]

Gutes tutorial, auch wenn ich mir das mit den Fluchtpunkten da schon dachte. Ich stelle es mir in LBP allerdings ziemlich umständlich vor die richtig auszuloten.


Beispiel: "Hügel" ist 1 Kilometer entfernt und bewegt sich mit 1. "Berg" ist 5 Kilometer entfernt und bewegt sich deshalb mit der 5-fachen Geschwindigkeit von "Hügel". Das erweckt den Anschein, die Gebirgskette würde fast stillstehen, während die Hügel und Dünen im Vordergrund schneller vorbeiziehen.
In deinem Beispiel würde das Hintere schneller vorbeiziehen, als das vordere. Sollte das nicht eigentlich umgekehrt sein?^^

Ps: Beitrag 100 auf LBPC.

[Shaggy Vinci]

auch wenn ich mir das mit den Fluchtpunkten da schon dachte.

Auch, wenn ich hier und da auch mal ziemlich offensichtliche Sachen wiedergekäut hab, hoff ich doch, dass ihr auch nützliche Infos oder neue Denkanstöße aus dem Artikel ziehen konntet.



In deinem Beispiel würde das Hintere schneller vorbeiziehen, als das vordere. Sollte das nicht eigentlich umgekehrt sein?^^

Du vergisst, dass sich der Spieler, also die Kamera, immer schneller bewegt, als der Hintergrund^^ Aus Sicht des Spielers bewegt sich der Hügel also durchaus schneller, als der Berg. (In dem Beispiel nehm ich an, dass sich der Spieler schneller als 5 bewegt)

[Karrades]

Ich weis, aber du hast oben geschrieben, dass der Berg, der 5mal so weit weg sein soll auch 5mal so schnell vorbeizieht wie der Hügel.

[Shaggy Vinci]

Hmm, tut mir leid, aber das hab ich nirgens geschrieben.

Du meinst wahrscheinlich den Teil hier:



Beispiel: "Hügel" ist 1 Kilometer entfernt und bewegt sich mit 1. "Berg" ist 5 Kilometer entfernt und bewegt sich deshalb mit der 5-fachen Geschwindigkeit von "Hügel". Das erweckt den Anschein, die Gebirgskette würde fast stillstehen, während die Hügel und Dünen im Vordergrund schneller vorbeiziehen.

[CuriousSack]

Yep, Karrades, Shaggy hat völlig recht! Wenn Du im Auto fährst, dann ziehen die Bäume am Straßenrand verdammt schnell an Dir vorbei, d.h., Du läßt sie hinter Dir zurück, was vom Fenster aussieht, als würden sie sich schnell bewegen, weil sie sich deutlich langsamer als das Auto bewegen, wohingegen die Gebirgskette im Hintergrund fast stillzustehen scheint! Da das Fenster vom Auto sich beim Fahren selbst schnell bewegt, kommt der Stillstandeffekt der Gebirgskette nur zustande, wenn sich die Gebirgskette ebenfalls schnell bewegt! Wohingegen die schnell vorbeiziehneden Bäume vom Eindruck her entstehen, wenn sie sich deutlich langsamer als das Auto bewegen^^
Hat entfernt was mit Einsteins Relativitätstheorie zu tun! :P

Liebe Grüße, Jürgen^^

[Karrades]

Genau das ist doch das, was ich hier meinte. So wie es oben steht wäre es so, dass die Hügel im Vordergrund langsam an der Kamera vorbeiziehen und das Gebirge im Hintergrund 5mal so schnell. Er hat geschrieben (kurz gefasst): 1km Entfernung = Gschwindigkeit 1; 5km Entfernung = Geschwindigkeit 5. Es müsste aber umgekehrt sein: 1km Entfernung = Geschwindigkeit 5; 5km Entferung = Geschwindigkeit 1. Wenn man bei den weiter entfernten objekten auch die Geschwindikeit erhöht würde dieser effekt, als ob man sich im Kreis bewegt zustande kommen.

[Shaggy Vinci]

tut mir ja wirklich leid, aber es stimmt so, wie ich es gschrieben hatte^^

Wenn sich das Gebirge mit der absoluten Geschwidigkeit 5 und der Hügel mit der absoluten geschwidigkeit 1 bewegt und die Kamera beispielsweise mit der absoluten Geschwindigkeit 6, dann bewegen sich Gebirge relativ mit 1 und die Hügel relativ mit 5 zur Kamera.

Obwohl das Gebirge sich global gesehen schneller bewegt, wirkt es langsamer, weil die Differenz zur Spielergeschwindigkeit geringer ist, als die des Hügels zum Spieler.

[CuriousSack]

Hahahaha,

nochmal ein anderes Beispiel: Wenn Du mit jemandem joggen gehst, und Du die Geschwindigkeit 5 hast, und ein Freund neben Dir herläuft, und der auch die Geschwindigkeit 5 hat, dann bleibt der mit Dir auf gleicher Höhe, was für Dich so aussieht, als würde er sich relativ zu Dir nicht bewegen! Weswegen Du mit ihm auch nebenher ratschen kannst! Stell Dir dann vor, vor Euch joggt ein Dritter, der aber recht langsam (Tempo 1) daherkriecht! So dass Du und Dein Freund schnell aufholt und schließlich überholt! Und eigentlich willst Du dem langsamen Kriecher noch ein paar aufmunternde Worte zurufen, aber wuuusch! schon seid ihr an ihm vorbei, weil ihr Euch relativ zu ihm rasant schnell wegbewegt! Von Euch aus gesehen schauts so aus, als würde sich der Kriecher rasant schnell nach hinten bewegen!
Zurück zur Natur! Im realen Leben haben wir den Eindruck, als würden Dinge, die weiter entfernt sind, sich relativ zu uns langsamer langsamer bzw. kaum bewegen, was dem Joggingpartner entspricht (womit bewiesen wäre, dass Berge unsere Freunde sind! :p),, d.h. beweg ich mich mit Tempo 5, dann bewegt sich das Gebirge im Hintergrund auch mit 5, so dass der Eindruck entsteht, dass ich mit dem Gebirge ratschen könnte, wohingegen nähere Dinge sich im Vergleich zu uns schnell bewegen (nach hinten), weil sie langsamer sind als wir! Also der Baum am Wegesrand entspricht damit unserem joggenden Kriecher, der von uns schnell überholt wird, so dass jeder Zuruf vergebens wäre, eben weil er eine langsame Geschwindigkeit hat (beim Baum geht die Geschwindigkeit gegen 0, aber für unser Beispiel geben wir ihm die Geschwindigkeit 1) Je näher das Objekt, desto langsamer die Geschwindikeit, damit dieser realistische Eindruck entsteht, je ferner das Objekt, desto schneller dess Geschwindigkleit, damit dieser Eindruck entsteht! So, Karrades, wenn ich Dich jetzt total verwirrt hab, dann tuts mir leid, aber ich find das eigentlich ganz einleuchtend! :p

Liebe Grüße, Jürgen^^

[Snake-Eater Tom]

Boa, schwere Kost am Morgen - also ich übernehm die Rolle des dritten Joggers mit Geschwindigkeit 1

Also wenn ichs richtig verstanden hab:

Wenn sich die Kamera auf dem Sackbot befindet:
1km Entfernung = Geschwindigkeit 1;
5km Entfernung = Geschwindigkeit 5.

Im Falle eines Sidescroll-Shooters z.B. wo die Kamera und das Raumschiff fix an ner Stelle sind
und der Hintergrund an einem vorbeizieht müsste es dann so funktionieren, wie Karrades beschrieb:
1km Entfernung = Geschwindigkeit 5;
5km Entfernung = Geschwindigkeit 1.

[CuriousSack]

Hahaha,

macht mir den armen Karrades nur fertig, jetzt beginnt langsam auch mir der Kopf zu schwirren, aber Tom, wo Du Recht hast, hast Du Recht! :)

[Karrades]

Achso, ihr wart da von einer Kamera ausgegangen, die sich bewegt. Ich hatte da die ganze Zeit nur eine statische Kamera, wo die Kulisse dann vorbeizieht im Sinn. Danke für die Aufklärung Snake-Eater Tom.