Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

Einrichten des Spielbereichs

In diesem ersten Teil werden wir den Spielbereich einrichten. Beginnen wir mit dem Importieren der Start-Assets und dem Einrichten der Spielszene.

Wir haben ein Godot-Projekt mit den 3D-Modellen und Sounds vorbereitet, die wir für dieses Tutorial verwenden werden, und das auf der Index-Seite verlinkt ist. Wenn Sie es noch nicht getan haben, können Sie das Archiv hier herunterladen: Squash the Creeps Assets.

Sobald Sie es heruntergeladen haben, extrahieren Sie das .zip-Archiv auf Ihrem Computer. Öffnen Sie den Godot Projektmanager und klicken Sie auf den Importieren-Button.

../../_images/01.import_button.webp

Geben Sie im Popup-Fenster "Import" den vollständigen Pfad zu dem neu erstellten Verzeichnis squash_the_creeps_start/ ein. Sie können auf den Durchsuchen-Button auf der rechten Seite klicken, um einen Dateibrowser zu öffnen und zu der Datei project.godot zu navigieren, die der Ordner enthält.

../../_images/02.browse_to_project_folder.png

Klicken Sie auf Importieren & Bearbeiten, um das Projekt im Editor zu öffnen.

../../_images/03.import_and_edit.png

Das Startprojekt enthält ein Icon und zwei Ordner: art/ und fonts/. Dort finden Sie die Grafik- und Musik-Assets, die wir im Spiel verwenden werden.

../../_images/04.start_assets.png

Es gibt zwei 3D-Modelle, player.glb und mob.glb, einige zu diesen Modellen gehörende Materialien, und einen Musik-Track.

Einrichten des spielbaren Bereichs

Wir werden unsere Hauptszene mit einem einfachen Node als Root erstellen. Im Szenen-Dock klicken Sie auf den Button Child-Node hinzufügen, der durch ein "+"-Icon oben links dargestellt wird, und doppelklicken Sie auf Node. Benennen Sie den Node Main. Eine alternative Methode zum Umbenennen des Nodes ist, mit der rechten Maustaste auf Node zu klicken und Umbenennen zu wählen (oder F2). Alternativ können Sie auch Strg + a (oder Cmd + a unter macOS) drücken, um einen Node zur Szene hinzuzufügen.

../../_images/05.main_node.png

Speichern Sie die Szene als main.tscn durch Drücken von Strg + s (Cmd + s unter macOS).

Wir beginnen mit dem Hinzufügen eines Bodens, der die Charaktere am Fallen hindert. Um statische Collider wie den Boden, Wände oder Decken zu erstellen, können Sie StaticBody3D-Nodes verwenden. Sie benötigen CollisionShape3D Child-Nodes, um den Kollisionsbereich zu definieren. Fügen Sie bei ausgewähltem Main-Node einen StaticBody3D-Node hinzu, dann einen CollisionShape3D. Benennen Sie den StaticBody3D in Floor um.

../../_images/adding_static_body3D.webp

Ihr Szenenbaum sollte wie folgt aussehen

../../_images/06.staticbody_node.png

Ein Warnzeichen neben dem CollisionShape3D erscheint, weil wir seine Shape nicht definiert haben. Wenn Sie auf das Icon klicken, erscheint ein Popup-Fenster, das weitere Informationen enthält.

../../_images/07.collision_shape_warning.png

Um eine Shape zu erstellen, wählen Sie den CollisionShape3D-Node, gehen zum Inspektor und klicken auf das Feld <leer> neben der Eigenschaft Shape. Erstellen Sie eine neue BoxShape3D.

../../_images/08.create_box_shape3D.jpg

Die Box-Shape ist perfekt für flache Böden und Wände. Dank ihrer Dicke blockiert sie sogar sich schnell bewegende Objekte zuverlässig.

Das Drahtgitter einer Box wird im Viewport mit drei orangefarbenen Punkten angezeigt. Sie können diese anklicken und ziehen, um die Ausmaße der Shape interaktiv zu bearbeiten. Wir können auch die Größe im Inspektor präzise einstellen. Klicken Sie auf die BoxShape3D, um die Ressource zu erweitern. Setzen Sie die Größe auf 60 für die X-Achse, 2 für die Y-Achse und 60 für die Z-Achse.

../../_images/09.box_size.webp

Kollisions-Shapes sind unsichtbar. Wir müssen einen passenden sichtbaren Boden hinzufügen. Wählen Sie den Floor-Node und fügen Sie ein MeshInstance3D als dessen Child hinzu.

../../_images/10.mesh_instance3d.png

Klicken Sie im Inspektor auf das Feld neben Mesh und erstellen Sie eine BoxMesh-Ressource, um eine sichtbare Box zu erstellen.

../../_images/11.box_mesh.webp

Auch hier ist die Default-Größe zu klein. Klicken Sie auf das Kästchen-Icon, um die Ressource zu erweitern und ihre Größe auf 60, 2 und 60 zu setzen.

../../_images/12.cube_resized.png

Sie sollten eine breite graue Platte sehen, die das Gitter und die blauen und roten Achsen im Viewport verdeckt.

Wir werden den Boden nach unten verschieben, damit wir das Bodengitter sehen können. Wählen Sie den Node Floor, halten Sie die Strg-Taste gedrückt, um das Einrasten des Gitters zu aktivieren, und klicken und ziehen Sie auf der Y-Achse nach unten. Das ist der grüne Pfeil im Verschiebe-Gizmo.

../../_images/move_gizmo_y_axis.webp

Bemerkung

Wenn Sie den 3D-Objektmanipulator nicht wie auf dem obrigen Bild sehen können, stellen Sie sicher dass der Auswahlmodus in der Toolbar über der Ansicht aktiv ist.

../../_images/14.select_mode_icon.png

Bewegen Sie den Boden 1 Meter nach unten, um ein sichtbares Editorgitter zu haben. Ein Label in der unteren linken Ecke des Viewports zeigt an, wie weit Sie den Node verschieben.

../../_images/15.translation_amount.png

Bemerkung

Wenn Sie den Floor-Node nach unten verschieben, werden beide Child-Nodes mit verschoben. Stellen Sie sicher, dass Sie den Floor-Node verschieben, nicht den MeshInstance3D oder den CollisionShape3D.

Letztendlich sollte die transform.position.y von Floor -1 sein

../../_images/ground_down1meter.webp

Fügen wir nun ein gerichtetes Licht hinzu, damit unsere Szene nicht komplett grau ist. Wählen Sie den Node Main und fügen Sie einen Child-Node DirectionalLight3D hinzu.

../../_images/create_directional_light3d.webp

Wir müssen den Node DirectionalLight3D verschieben und rotieren. Verschieben Sie ihn nach oben, indem Sie auf den grünen Pfeil des Manipulators klicken und ziehen, und klicken und ziehen Sie auf den roten Bogen, um ihn um die X-Achse zu drehen, bis der Boden beleuchtet ist.

Schalten Sie Schatten-> An im Inspektor ein, indem sie das Kontrollkästchen anklicken.

../../_images/16.turn_on_shadows.webp

Zu diesem Zeitpunkt sollte Ihr Projekt wie folgt aussehen.

../../_images/17.project_with_light.webp

Das ist unser Ausgangspunkt. Im nächsten Teil werden wir an unserer Spielerszene und grundsätzlicher Bewegung arbeiten.