Die Target Camera

Alexander Sander

Problemstellung

Das Movement ist nun abgeschlossen, jetzt heißt es unsere Bewegung mit der Kamera auf dem Bildschirm einzufangen. Dafür sollte als erstes entschieden werden welche Kamera nun die Kriterien erfüllt, die unser Spiel benötigt und die Kriterien, die es möglichst gut in Szene setzen. Da wir mit Three.js arbeiten, war der erste Ansatz die "Perspective Cam". Diese hat ihren Zweck als Kamera zwar erfüllt aber stellte die Szene nicht so cinematisch dar wie man sie gerne haben würde. Damit der Blickwinkel nicht so steif und anstrengend für das Auge wirkt, haben wir uns für die THREE.TargetCamera entschieden. Bei den Perspektiven haben wir uns für den dynamischen weg entschieden und sowohl Third- als auch First-Person Blickwinkel implementiert. Zusätzlich wurden auch Perspektiven für bestimmte Bewegungen und den Pausebildschirm implementiert.

Was kann die Target Cam ?

Bevor unsere Kamera etwas 'kann' sollte sie zunächst initialisiert werden:

camera = new THREE.TargetCamera(75, window.innerWidth / window.innerHeight, 1, biggerSphereRadius);

Wir geben der Kamera ein Field of View(FOV), ein Seitenverhältnis, eine Front und eine Backplane mit. Damit haben wir schonmal ein brauchbares Sichtfeld geschaffen. Jetzt geht es darum, der Kamera die entsprechende Dynamik beizubringen. Die "Target Cam" hat im Vergleich zur hauseigenen Three.js "Perspective Cam" einen entscheidenen Vorteil: die Kamerafahrt. Während die Perspective Cam eher einen versteiften Blickwinkel (der eher für First Person geeignet ist) hat, besitzt die Target Cam diverse Parameter, welche eine dynamische Kamerafahrt ermöglichen. Dabei hängt unsere Kamera an einem Ziel (unser Objekt) , welches durch die gesetzten Parameter verzögert verfolgt wird. Die Hauptfunktion der Kamera ist jedoch der Targetwechsel. Dieser erlaubt uns unseren Spieler oder bestimmte Events aus verschiedenen Blickwinkeln zu betrachten. Dafür werden sogenannte Targets initialisiert, die völlig unabhängig voneinander bestehen. In unserem Fall haben wir drei "Main-Targets" zwischen welchen, unter bestimmten Bedingungen, gewechselt wird: die Third-Person bzw. First-Person Perspektive und die "fixed" Perspektive für unsere Shift-Animation.

camera.addTarget({
     name: 'animation',
     targetObject: ship,
     cameraPosition: targetPosition ,
     fixed: false,
     stiffness: 0.001,
     matchRotation: false
});

Um ein Target zu initialisieren müssen wir diesem einige Parameter in Form von Tags mitgeben. Wir geben ihm einen Namen mit welchem er angesprochen (gewechselt) werden kann, ein Objekt an dem es hängen soll (dies wird in unserem Fall immer das Schiff bleiben), dann die Position der Kamera als Vector3 und ob die Kamera an diesem Vektor bleibt. Als nächstes unsere "Stiffness" welche den Delay zwischen Objektbewegung und Kamerabewegung bestimmt und ob die Rotation unserem Objekt angepasst werden soll. Hinterher kann ein Target dann beim Eintreten eines bestimmten Events gewechselt werden:

camera.setTarget('Target');

Ein Beispiel für einen solchen Aufruf wäre wohl die Funktion changeCam(), bei welcher durch das drücken der Taste C die Perspektiven First- und Third-Person gewechselt werden. Außerdem können simpel immer wieder neue Targets hinzugefügt und von fast überall angesprochen werden, z.B. könnte ein Blick hinter das Schiff ermöglicht werden, um Gegner zu orten. Vor- und Nachteil stellt dabei die Stiffness dar, denn der wechsel der Targets erfolgt in den meisten Fällen gleitend, jedoch beim wechsel zwischen Third- und First-Person eher wie "Teleportiert".

Animation Target

Wie im Movement bereits erwähnt, wurde noch eine spezielle Ausweichbewegung für den Spieler implementiert, um nicht in den Salven der Gegner unterzugehen. Um hier die Animation möglichst gut in Szene zu setzen hat diese ein eigenes Target erhalten, um eine übersichtlichere Perspektive für diesen kurzen Moment einzufangen (Initialisierung oben). Man könnte vermuten es wäre sinnvoll fixed auf true zu setzen, jedoch würde die Kamera dort auch für die nächsten Ausweichmanöver verweilen. So wäre die Kamera im nächsten Moment unsinnig weit entfernt. Um dieses Problem zu lösen kann man am besten die Stiffness sehr niedrig einstellen und auf den fixed Tag verzichten. So haben wir nun eine Kamera die auf der Stelle stehen bleibt, jedoch perspektivisch unser Schiff verfolgt.

Pausen Kamera

Um dem Pausenmenu etwas Leben einzuhauchen, haben wir beschlossen eine extra Kamerafahrt mit einem orbitalen Verlauf einzubauen. Dieses Feature ist eher kosmetisch, doch trotzdem wesentlich angenehmer anzuschauen als einen eingefrorenen Bildschirm. Dabei werden der Kamera vier Positionen rund um das Schiff angehängt, zwischen welchen diese einen orbitalen Flug ausführt. Um diesen Orbit zu simulieren wird eine Kombination aus 5 sekündigen Timeout-Intervallen und der geringen Stiffness der Kamera genutzt. Sobald die Animation nach 20 Sekunden ein Mal durchlaufen ist, steht die Kamera wieder an ihrer Ursprungsposition, was bedeutet, dass die Kamera erneut ihre Animation ausführt. Falls der Pausebildschirm wieder verlassen wird, werden alle aktuellen Timeouts abgebrochen und Target wechselt wieder auf die Third-Person perspektive.

doOrbit: function () {
            if (Pause) {
                crosses[pos].visible = false;
                orbit();
                ploop = setTimeout(function () {
                    Camera().doOrbit();
                }, 20000);
            } else {
                clearTimeout(ploop);
                clearTimeout(p1);
                clearTimeout(p2);
                clearTimeout(p3);
                clearTimeout(p4);
                crosses[pos].visible = true;
                camera.setTarget('Target');
            }
        }