Serie
Ein First-Person-Controller in Babylon.js
Bau in TypeScript mit Babylon.js, Havok und Vite einen First-Person-Controller, der geht, rennt, springt, sich duckt und Leitern, Kanten und Wände hochklettert, mit einer Kamera, die sich richtig anfühlt.
Elf Teile, vom leeren Vite-Projekt zu einem First-Person-Controller, den du in ein Spiel einbauen würdest. Du beginnst mit Mausblick und Gehen auf dem Havok-Character-Controller von Babylon.js, kümmerst dich um Schrägen und Treppen, ergänzt Rennen, Springen und Ducken und dann vier Arten zu klettern: Leitern, Kanten, auf die du dich hochziehst, Kanten, an denen du hängst, und Wände, an denen du überall kletterst. Im letzten Teil bekommt die Kamera die kleinen Bewegungen, durch die sie lebendig wirkt. Jeder Teil endet mit einer Demo, die du direkt auf der Seite spielen kannst, gebaut aus genau dem Code, den er zeigt.
Questreihe
- Teil 1: Babylon.js, Havok und ViteRichte ein Vite-Projekt mit TypeScript, Babylon.js 9 und der Physik-Engine Havok ein und baue den Testparcours, durch den die Spielfigur in dieser Serie geht, springt und klettert.20 Min.
- Teil 2: Mausblick mit Pointer LockFange die Maus mit der Pointer Lock API ein, mach aus ihrer Bewegung die Winkel des Blicks und setze sie auf eine eigene Kamera, ohne Verzögerung und ohne dass sich das Bild überschlägt.15 Min.
- Teil 3: Gehen mit einem Character-ControllerGib der Kamera einen Körper: eine Kapsel auf dem Havok-Character-Controller von Babylon.js, die dorthin geht, wohin du schaust, weich beschleunigt und bremst, fällt und landet.25 Min.
- Teil 4: Schrägen, Treppen und StufenGeh an Schrägen entlang, statt von ihnen abzuheben, lege fest, was zu steil ist, geh Treppen auf einer unsichtbaren Rampe hoch, wie es die meisten Spiele machen, und bleib über einer Kuppe am Boden.25 Min.
- Teil 5: Rennen und SpringenRenne mit Shift, springe genau so hoch, wie du willst, behalte deinen Schwung in der Luft und mach Sprünge mit Coyote Time und einem Sprungpuffer fair.20 Min.
- Teil 6: DuckenTausche die Kapsel gegen eine kürzere, ohne die Füße zu bewegen, prüfe mit einem Shape-Cast auf eine Decke, bevor du wieder aufstehst, und senke den Blick weich ab.15 Min.
- Teil 7: Leitern und ein ZustandsautomatMach aus Gehen und Luft einen Zustandsautomaten, setze Leitern als Zonen ins Level und klettere daran: hinauf, hinunter, oben darüber und mit einem Sprung wieder ab.20 Min.
- Teil 8: Auf Kanten kletternFinde mit zwei Strahlen eine Kante vor der Spielfigur, prüfe mit Shape-Casts, dass die Kapsel auf dem Weg hinauf passt, und klettere auf einem festen Weg über die Kante, vom Boden und aus einem Sprung.25 Min.
- Teil 9: An Kanten hängenGreif Kanten, die zu hoch sind, um gleich hinaufzuklettern, häng knapp unter der Kante, hangel dich an ihr entlang, so weit sie reicht, und zieh dich hoch oder lass los.20 Min.
- Teil 10: Wände hochkletternMarkiere Wände mit einer Kollisionsebene als kletterbar, beginne das Klettern mit einem Sprung, beweg dich an der Wand hinauf, hinunter und seitwärts, halte an ihren Rändern an, klettere oben darüber und spring ab.20 Min.
- Teil 11: KameragefühlGib der Kamera die kleinen Bewegungen, die aus einem schwebenden Auge einen Körper machen: ein Wippen, das den Schritten folgt, ein Einfedern bei der Landung, ein Neigen bei Seitwärtsbewegungen und ein weiterer Blick beim Rennen.15 Min.