{"id":990,"date":"2010-11-15T23:13:50","date_gmt":"2010-11-15T22:13:50","guid":{"rendered":"http:\/\/clonkspot.org\/blog\/?p=990"},"modified":"2025-05-15T11:40:19","modified_gmt":"2025-05-15T09:40:19","slug":"openclonk-parallaxes-scrollen-und-zoom","status":"publish","type":"post","link":"https:\/\/clonkspot.org\/blog\/2010\/11\/15\/openclonk-parallaxes-scrollen-und-zoom\/","title":{"rendered":"OpenClonk: Parallaxes Scrollen und Zoom"},"content":{"rendered":"<p>Clonk unterst\u00fctzt parallaxe Objekte und Hintergr\u00fcnde schon eine Weile. Parallaxes Scrollen ist eine Methode, um einen 3D-Effekt allein mit 2D-Methoden zu imitieren, indem Objekte langsamer oder schneller bewegt werden wenn die imagin\u00e4re Kamera \u00fcber die Landschaft bewegt wird. Dieser Ansatz funktioniert allgemein gut, aber bei ge\u00e4nderter Zoom-Stufe sahen seine Auswirkungen etwas ung\u00fcnstig aus. Anstatt bei Zoom parallaxe Objekte und Hintergr\u00fcnde einfach genauso aussehen zu lassen wie die anderen Objekte, haben Clonk-Karl und ich ausget\u00fcftelt wie sie sich verhalten w\u00fcrden, w\u00e4ren sie tats\u00e4chlich vor oder hinter der Landschaft. Die erste Frage, die es zu beantworten galt war, was verschiedene Zoom-Stufen in der virtuellen Welt darstellen: \u00c4ndert sich der Abstand zwischen Kamera und Landschaft, oder verstellt sich die Kameraoptik wie bei einem Zoom-Objektiv? Letztendlich kamen wir zu dem Schluss, dass wir beides ben\u00f6tigten: Das Zoom-Objektiv, damit jeder Spieler ungef\u00e4hr das selbe Bild sieht, unabh\u00e4ngig von der Pixelzahl seines Monitors, und die Distanz\u00e4nderung um Zoom darzustellen. W\u00e4hrend Zoom im echten Leben ein Zoom-Objektiv nutzt, ist dies bei echten, unmodifizierten Menschen nicht der Fall, demnach m\u00fcsste sich die Distanz\u00e4nderung nat\u00fcrlicher anf\u00fchlen.<\/p>\n<p>Danach war es ganz einfach, mit Hilfe eines Diagramms herzuleiten wie die Objekte dargestellt werden sollen. Man setze einen Punkt f\u00fcr die Kamera, eine Linie f\u00fcr die Landschaft und den Bildschirm (denn sie ist immer auf der selben Ebene wie der Bildschirm. Der Bildschirm sorgt daf\u00fcr, dass Himmelsinseln nicht abst\u00fcrzen), und noch eine Linie f\u00fcr das Objekt. Dann zeichne man Linien von den Ecken des Objektes zur Kamera. Das Objekt sollte dann dort angezeigt werden, wo diese Linien den Bildschirm schneiden. Allerdings brauchten wir mehrere Durchg\u00e4nge daf\u00fcr, dies in die Formeln zu fassen die in der Engine verwendet werden, weil wir noch nicht v\u00f6llig verinnerlicht hatten was die gegebenen Werte bedeuten. So bezeichnet die Position eines Objektes nicht den Punkt, an dem sich das Objekt in der virtuellen Welt befindet, sondern wo es in der Landschaft angezeigt wird wenn sich die Kamera an Position 0\/0 befindet und der Zoomfaktor 1 ist. Und die Kamera ist an dieser Position wenn die linke obere Ecke des Bildschirms dort ist. Das ist so, als ob nur das rechte untere Viertel der Kamerasicht angezeigt w\u00fcrde. Der Grund ist, dass die Parallax-Berechnungen dadurch recht nett rauskommen: Beim umsetzen von Landschafts- auf Bildschirm-Koordinaten, wird einfach die Position der oberen linken Bildschirm-Ecke mit dem Parallax-Faktor multipliziert, und von der Objektposition abgezogen. Unsere ersten Diagramme hatten aber noch die Kameraposition in der Mitte des Bildschirms, was etwas verwirrend war, da dadurch die Bildschirmgr\u00f6\u00dfe in den Formeln auftaucht. Wir wussten aber, dass dies im Engine-Code nicht der Fall war.<\/p>\n<p>Schlie\u00dflich gelangten wir zu Formeln, die wir f\u00fcr korrekt hielten, und bauten sie in die Engine ein. Das Ergebnis war gr\u00f6\u00dftenteils zufriedenstellend, besonders der Himmel verhielt sich nett. Aber manche Objekte bewegten sich auf dem Bildschirm umher, wenn man den Zoomfaktor \u00e4nderte, w\u00e4hrend sie sich wie erwartet bewegten wenn man nur die Kamera umher bewegte. Ich entdeckte schlie\u00dflich den Grund daf\u00fcr, als ich folgendes Diagramm ein paar Tage sp\u00e4ter konstruierte:<\/p>\n<p><a rel=\"attachment wp-att-1019\" href=\"https:\/\/clonkspot.org\/blog\/2010\/11\/15\/openclonk-parallaxes-scrollen-und-zoom\/zoomparallax\/\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1019 alignnone\" title=\"ZoomParallax\" src=\"https:\/\/clonkspot.org\/blog\/wp-content\/uploads\/2010\/11\/ZoomParallax.png\" alt=\"Diagramm zur Parallaxe\" width=\"475\" height=\"341\" srcset=\"https:\/\/clonkspot.org\/blog\/wp-content\/uploads\/2010\/11\/ZoomParallax.png 475w, https:\/\/clonkspot.org\/blog\/wp-content\/uploads\/2010\/11\/ZoomParallax-300x215.png 300w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/p>\n<p>Das Diagramm zeigt eine Seitenansicht von Kamera, Landschaft, und einem Objekt. Da die Formeln f\u00fcr X und Y unabh\u00e4ngig voneinander und identisch sind, wird hier nur eine Dimension dargestellt.<\/p>\n<p>Die schwarzen Abst\u00e4nde sind gegeben, die roten sind die, die wir berechnen wollen. Die gr\u00fcnen sind Zwischenergebnisse. Die gestrichelten Linien sind die Sichtlinien zwischen Kamera und Objekt.<\/p>\n<p>In der oberen linken Ecke des Diagrammes befindet sich die Kamera, die die internen Objekt-Positionen definiert: Die Position eines Objektes ist dort, wo diese Kamera das Objekt in der Landschaft sehen w\u00fcrde. Etwas weiter rechts ist eine Kamera an Position 0\/0, aber mit einem anderen Zoomfaktor (genannt &#8222;Zoom&#8220;). Unsere erste Version verwechselte diese Kamera mit der erstgenannten. F\u00fcr Objekte an Position 0\/0 macht das keinen Unterschied, was auch erkl\u00e4rt warum der Himmel richtig funktionierte: Wir testeten nur in einem Szenario, in dem sich der Himmel nicht mit dem Wind mitbewegte.<\/p>\n<p>Unterhalb der zweiten Kamera ist die dritte, die, f\u00fcr die die Berechnungen gemacht werden sollen. Sie hat einen Abstand &#8222;TargetX&#8220; vom Ursprung, und einen Zoomfaktor &#8222;Zoom&#8220;, wie die zweite Kamera.<\/p>\n<p>Rechts ist das Objekt, das dargestellt werden soll. Es ist hinter der Landschaft, aber gl\u00fccklicherweise funktionieren die Formeln genauso gut f\u00fcr Objekte vor der Landschaft. Sein Abstand zur ersten Kamera auf der Z-Achse ist &#8222;1\/Par&#8220;, wobei &#8222;Par&#8220; der Parallax-Faktor ist. Folglich ist der Abstand zur Landschaft &#8222;1\/Par-1&#8220;, weil die erste Kamera den Abstand &#8222;1&#8220; zur Landschaft hat. Die Position in der virtuellen Welt auf der X-Achse ist &#8222;VX&#8220;.<\/p>\n<p>Sobald ich dieses Diagramm hatte, war die Berechnung des Ergebnisses eine simple Anwendung des <a href=\"http:\/\/de.wikipedia.org\/wiki\/Strahlensatz\">Strahlensatzes<\/a>. Diejenigen, die am Ergebnis interessiert sind, k\u00f6nnen einen Blick auf die Funktion <a href=\"http:\/\/hg.openclonk.org\/openclonk\/file\/cfe95538a9dd\/src\/game\/object\/C4Object.cpp#l5136\">C4Object::GetDrawPosition()<\/a> in der Engine werfen.<\/p>\n<p><em><a href=\"http:\/\/blog.openclonk.org\/2010\/10\/parallax-scrolling-and-zoom\/\">Urspr\u00fcnglicher Artikel<\/a><\/em><em> von G\u00fcnther, Stand: <em>12. Oktober 2010<\/em><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Clonk unterst\u00fctzt parallaxe Objekte und Hintergr\u00fcnde schon eine Weile. Parallaxes Scrollen ist eine Methode, um einen 3D-Effekt allein mit 2D-Methoden zu imitieren, indem Objekte langsamer oder schneller bewegt werden wenn die imagin\u00e4re Kamera \u00fcber die Landschaft bewegt wird. Dieser Ansatz funktioniert allgemein gut, aber bei ge\u00e4nderter Zoom-Stufe sahen seine Auswirkungen etwas ung\u00fcnstig aus. Anstatt bei [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[110],"class_list":["post-990","post","type-post","status-publish","format-standard","hentry","category-openclonk","tag-openclonk"],"_links":{"self":[{"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/posts\/990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/comments?post=990"}],"version-history":[{"count":37,"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/posts\/990\/revisions"}],"predecessor-version":[{"id":3529,"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/posts\/990\/revisions\/3529"}],"wp:attachment":[{"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/media?parent=990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/categories?post=990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clonkspot.org\/blog\/wp-json\/wp\/v2\/tags?post=990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}