Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

2D Einführung

Godots 2D-Spieleentwicklungswerkzeuge umfassen eine dedizierte 2D-Rendering-Engine, ein Physiksystem und speziell für die Erstellung von 2D-Erlebnissen entwickelte Funktionen. Mit dem TileMap-System lassen sich Level effizient gestalten, Charaktere mit 2D-Sprite- oder Cutout-Animationen animieren und die 2D-Beleuchtung für dynamische Szenenbeleuchtung nutzen. Das integrierte 2D-Partikelsystem ermöglicht die Erstellung komplexer visueller Effekte, und Godot unterstützt zudem benutzerdefinierte Shader zur Verbesserung der Grafik. Diese Funktionen, kombiniert mit Godots Zugänglichkeit und Flexibilität, bilden eine solide Grundlage für die Entwicklung fesselnder 2D-Spiele.

Demo des 2D-Plattformers in der Asset-Bibliothek verfügbar.

Auf dieser Seite wird Ihnen der 2D-Arbeitsbereich vorgestellt und erklärt.

Tipp

Wenn Sie mit Shadern nicht vertraut sind, lesen Sie zuerst 3D Einführung.

2D Arbeitsbereich

Im 2D-Arbeitsbereich bearbeiten Sie 2D-Szenen, entwerfen Level oder erstellen Benutzeroberflächen. Um zum 2D-Arbeitsbereich zu wechseln, wählen Sie entweder einen 2D-Node in der Szenenbaum aus oder verwenden Sie die Arbeitsbereichsauswahl am oberen Rand des Editors:

Ähnlich wie in 3D können Sie mithilfe der Registerkarten unterhalb der Arbeitsbereichsauswahl zwischen aktuell geöffneten Szenen wechseln oder mit dem Plus-Button (+) eine neue Szene erstellen. Die linke und rechte Dockleiste sollten Ihnen aus der Editor-Einführung bekannt sein.

Unterhalb der Szenenauswahl befindet sich die Hauptwerkzeugleiste, und unter der Hauptwerkzeugleiste der 2D-Viewport.

Sie können kompatible Nodes aus dem Dateisystem-Dock per Drag & Drop in den Ansichtsbereich einfügen. Der gezogene Node wird als gleichrangiger Node des ausgewählten Nodes hinzugefügt (wenn der Root-Node ausgewählt ist, als untergeordneter Node). Wenn Sie beim Ablegen die Shift gedrückt halten, wird der Node als untergeordneter Node des ausgewählten Nodes hinzugefügt. Halten Sie beim Ablegen Alt gedrückt, wird der Node als untergeordneter Node des Root-Nodes hinzugefügt. Wenn Sie beim Ablegen Alt + Shift gedrückt halten, können Sie gegebenenfalls den Node-Typ auswählen.

Hauptwerkzeugleiste

Einige Button in der Hauptwerkzeugleiste entsprechen denen im 3D-Arbeitsbereich. Eine kurze Erklärung der Tastenkürzel wird angezeigt, wenn der Mauszeiger eine Sekunde lang über einen Button bewegt wird. Manche Button bieten zusätzliche Funktionen, die durch einen weiteren Tastendruck ausgelöst werden. Eine Übersicht der Hauptfunktionen jedes ButtonsTastenkürzel mit ihrer Standard-Tastenkombination finden Sie unten (von links nach rechts):

• Auswahl-Modus (Q): Ermöglicht die Auswahl von Nodes im Viewport. Ein Linksklick auf einen Node im Viewport wählt diesen aus. Durch Klicken und Ziehen eines Rechtecks werden alle Nodes innerhalb der Rechteckgrenzen ausgewählt. Durch Gedrückthalten von Shift werden weitere Nodes zur Auswahl hinzugefügt. Ein Klick auf einen ausgewählten Node bei gedrückter Umschalttaste Shift hebt die Auswahl auf. In diesem Modus können Sie die ausgewählten Nodes verschieben, mit Ctrl vorübergehend in den Rotationsmodus wechseln oder sie mithilfe der roten Kreise skalieren. Sind mehrere Nodes ausgewählt, sind nur Verschieben und Drehen möglich. In diesem Modus werden die Einrastfunktionen beim Drehen und Skalieren nicht verwendet, sofern diese aktiviert sind.

• Verschieben-Modus (W): Aktiviert den Verschieben-Modus für die ausgewählten Nodes. Weitere Informationen finden Sie unter 2D Viewport.

• Rotation-Modus (E): Aktiviert den Rotation-Modus für die ausgewählten Nodes. Weitere Informationen finden Sie unter 2D Viewport.

• Skalierieren-Modus (S): Aktiviert die Skalierung und zeigt Skalierungs-Gizmos in beiden Achsen für die ausgewählten Nodes an. Weitere Informationen finden Sie unter 2D Viewport.

• Liste der auswählbaren Nodes an der angeklickten Position anzeigen: Wie die Beschreibung bereits andeutet, wird hiermit eine Liste der auswählbaren Nodes an der angeklickten Position als Kontextmenü angezeigt, sofern sich im angeklickten Bereich mehr als ein Node befindet.

• Rotations-Pivotpunkt: Legt den Rotations-Pivotpunkt fest, um den Nodes gedreht werden. Ein hinzugefügter Node hat standardmäßig den Pivotpunkt bei x: 0, y: 0, mit Ausnahmen. Beispielsweise ist der Standarddrehpunkt für ein Sprite2D dessen Mitte, wenn die Eigenschaft centered auf true gesetzt ist. Um den Pivotpunkt eines Nodes zu ändern, klicken Sie auf diesen Button und wählen Sie per Linksklick eine neue Position. Der Node dreht sich um diesen Punkt. Wenn mehrere Nodes ausgewählt sind, fügt dieses Symbol einen temporären Pivotpunkt hinzu, der von allen ausgewählten Nodes gemeinsam verwendet wird. Durch Drücken von Shift und Klicken auf diesen Button wird der Pivotpunkt in der Mitte der ausgewählten Nodes erstellt. Wenn eine der Einrastoptionen aktiviert ist, rastet der Pivotpunkt beim Ziehen automatisch an dieser ein.

• Schwenk-Modus (G): Ermöglicht die Navigation im Viewport, ohne versehentlich Nodes auszuwählen. In anderen Modi können Sie dies auch erreichen, indem Sie Space gedrückt halten und mit der linken Maustaste ziehen.

• Lineal-Modus: Nach der Aktivierung klicken Sie auf den Viewport, um die aktuellen globalen x- und y-Koordinaten anzuzeigen. Durch Ziehen von einer Position zur anderen wird die Entfernung in Pixeln gemessen. Bei diagonalem Ziehen wird ein Dreieck gezeichnet und die einzelnen Entfernungen in x- und y-Richtung sowie die Gesamtentfernung zum Ziel inklusive der Winkel zu den Achsen in Grad angezeigt. Die Taste R aktiviert das Lineal. Wenn die Einrastfunktion aktiviert ist, werden die Messwerte zusätzlich in Rasterpunkten angezeigt:

Verwendung eines Lineals mit aktivierter Einrastfunktion.

• Intelligentes Einrasten verwenden: Aktiviert/Deaktiviert das intelligente Einrasten für die Modi Verschieben, Drehen und Skalieren sowie den Pivotpunkt. Passen Sie die Einstellungen über das Dreipunkt-Menü neben den Einrastwerkzeugen an.

• Einrastraster verwenden: Aktiviert/Deaktiviert das Einrasten am Raster für die Modi Verschieben, Drehen und Skalieren sowie den Pivotpunkt. Passen Sie die Einstellungen über das Dreipunkt-Menü neben den Einrastwerkzeugen an.

Sie können die Rastereinstellungen so anpassen, dass Verschieben, Drehen, Skalieren, Lineal und Pivotpunkt per Einrastfunktion funktionieren. Verwenden Sie dazu das Drei-Punkte-Menü:

• Rotationsraster verwenden: Aktiviert/Deaktiviert das Einrasten anhand der konfigurierten Rotationseinstellung.

• Skalierungsraster verwenden: Aktiviert/Deaktiviert das Einrasten anhand der konfigurierten Skalierungsschrittweite.

• Relativ einrasten: Aktiviert/Deaktiviert das Einrasten basierend auf den aktuellen Transformationswerten des ausgewählten Nodes. Wenn beispielsweise die Raster auf 32x32 Pixel eingestellt sind und sich der ausgewählte Node bei x: 1, y: 1 befindet, werden die Raster durch Aktivieren dieser Option vorübergehend um x: 1, y: 1 verschoben.

• Pixel-Einrasten verwenden: Aktiviert/Deaktiviert die Verwendung von Subpixeln zum Einrasten. Ist diese Option aktiviert, werden die Positionswerte als ganze Zahlen angegeben; ist sie deaktiviert, werden Subpixel-Bewegungen als Dezimalwerte ermöglicht. Für die Laufzeit-Eigenschaft sollten Sie bei Node2D-Nodes die Option Projekteinstellungen > Rendern > 2D > Einrasten und bei Control-Nodes die Option Projekteinstellungen > GUI > Allgemein > Control-Vertices auf Pixeln einrasten überprüfen.

• Intelligentes Einrasten: Bietet eine Reihe von Optionen zum Einrasten an bestimmten Positionen, sofern diese aktiviert sind:

  • Am übergeordneten Element ausrichten: Richtet sich an den Kanten des übergeordneten Elements aus. Wenn Sie beispielsweise einen untergeordneten Control-Node skalieren, während diese Option aktiviert ist, richtet er sich an den Grenzen des übergeordneten Elements aus.

  • An Node-Anker ausrichten: Richtet den Node am Anker aus. Befinden sich die Anker eines Control-Nodes beispielsweise an unterschiedlichen Positionen, richtet sich die Ausrichtung durch Aktivieren dieser Option an den Seiten und Ecken des Ankers aus.

  • An Node-Seiten einrasten: Rastet an den Seiten des Nodes ein, z. B. für den Pivotpunkt oder die Ankerpositionierung.

  • Am Node-Mittelpunkt einrasten: Rastet am Mittelpunkt des Nodes ein, z. B. für den Pivotpunkt oder die Ankerpositionierung.

  • An anderen Nodes einrasten: Rastet Elemente beim Verschieben oder Skalieren an anderen Nodes ein. Nützlich zum Ausrichten von Nodes im Editor.

  • An Hilfslinien einrasten: Rastet an benutzerdefinierten Hilfslinien ein, die mit dem horizontalen oder vertikalen Lineal gezeichnet wurden. Mehr zum Lineal und den Hilfslinien weiter unten.

• Einrasten konfigurieren: Öffnet das oben gezeigte Fenster mit einer Reihe von Einrastparametern.

  • Grid Offset: Allows you to shift grids with respect to the origin. x and y can be adjusted separately.

  • Grid Step: The distance between each grid in pixels. x and y can be adjusted separately.

  • Primary Line Every: The number of grids in-between to draw infinite lines as indication of main lines.

  • Rotation Offset: Sets the offset to shift rotational snapping.

  • Rotation Step: Defines the snapping degree. E.g., 15 means the node will rotate and snap at multiples of 15 degrees if rotation snap is enabled and the rotate mode is used.

  • Scale Step: Determines the scaling increment factor. For example, if it is 0.1, it will change the scaling at 0.1 steps if scaling snap is enabled and the scaling mode is used.

• Lock selected nodes (Ctrl + L). Locks the selected nodes, preventing selection and movement in the viewport. Clicking the button again (or using Ctrl + Shift + L) unlocks the selected nodes. Locked nodes can only be selected in the scene tree. They can easily be identified by a padlock next to their node names in the scene tree. Clicking on this padlock also unlocks the nodes.

• Group selected nodes (Ctrl + G). This allows selection of the root node if any of the children are selected. Using Ctrl + G ungroups them. Additionally, clicking the ungroup button in the scene tree performs the same action.

• Skeleton Options: Provides options to work with Skeleton2D and Bone2D.

  • Show Bones: Toggles the visibility of bones for the selected node.

  • Make Bone2D Node(s) from Node(s): Converts selected node(s) into Bone2D.

Siehe auch

To learn more about Skeletons, see Cutout-Animation.

• View menu: Provides options to control the viewport view. Since its options depend heavily on the viewport, it is covered in the 2D Viewport section.

Next to the View menu, additional buttons may be visible. In the toolbar image at the beginning of this chapter, an additional Sprite2D button appears because a Sprite2D is selected. This menu provides some quick actions and tools to work on a specific node or selection. For example, while drawing a polygon, it provides buttons to add, modify, or remove points.

Koordinatensystem

In the 2D editor, unlike 3D, there are only two axes: x and y. Also, the viewing angle is fixed.

In the viewport, you will see two lines in two colors going across the screen infinitely: red for the x-axis, and green for the y-axis. In Godot, going right and down are positive directions. Where these two lines intersect is the origin: x: 0, y: 0.

A root node will have its origin at this position once added. Switching to the move or scale modes after selecting a node will display the gizmos at the node's offset position. The gizmos will point to the positive directions of the x and y axes. In the move mode, you can drag the green line to move only in the y axis. Similarly, you can hold the red line to move only in the x axis.

In the scale mode, the gizmos will have a square shape. You can hold and drag the green and red squares to scale the nodes in the y or x axes. Dragging in a negative direction flips the node horizontally or vertically.

2D Viewport

The viewport will be the area you spend the most time if you plan to design levels or user interfaces visually:

Middle-clicking and dragging the mouse will pan the view. The scrollbars on the right or bottom of the viewport also move the view. Alternatively, the G or Space keys can be used. If you enable Editor Settings > Editors > Panning > Simple Panning, you can activate panning directly with Space only, without requiring dragging.

The viewport has buttons on the top-left. Center View centers the selected node(s) in the screen. Useful if you have a large scene with many nodes, and want to see the node selected in the scene tree. Next to it are the zoom controls. - zooms out, + zooms in, and clicking on the number with percentage defaults to 100%. Alternatively, you can use middle-mouse scrolling to zoom in (scroll up) and out (scroll down).

The black bars at the viewport's left and top edges are the rulers. You can use them to orient yourself in the viewport. By default, the rulers will display the pixel coordinates of the viewport, numbered at 100 pixel steps. Changing the zoom factor will change the shown values. Enabling Grid Snap or changing the snapping options will update the ruler's scaling and the shown values.

You can also create multiple custom guides to help you make measurements or align nodes with them:

If you have at least one node in the scene, you can create guides by dragging from the horizontal or vertical ruler towards the viewport. A purple guide will appear, showing its position, and will remain there when you release the mouse. You can create both horizontal and vertical guides simultaneously by dragging from the gray square at the rulers' intersection. Guides can be repositioned by dragging them back to their respective rulers, and they can be removed by dragging them all the way back to the ruler.

You can also enable snapping to the created guides using the Smart Snap menu.

Bemerkung

If you cannot create a line, or do not see previously created guides, make sure that they are visible by checking the View menu of the viewport. Y toggles their visibility, by default. Also, make sure you have at least one node in the scene.

Depending on the tool chosen in the toolbar, left-clicking will have a primary action in the viewport. For example, the Select Mode will select the left-clicked node in the viewport. Sometimes, left-clicking can be combined with a modifier (e.g., Ctrl, or Shift) to perform secondary actions. For example, keeping Shift pressed while dragging a node in the Select or Move modes will try to snap the node in a single axis while moving.

Right clicking in the viewport provides two options to create a node or instantiate a scene at the chosen position. If at least one node is selected, right clicking also provides the option to move the selected node(s) to this position.

Viewport has a View menu which provides several options to change the look of the viewport:

• Grid: Allows you to show grids all the time, only when using snapping, or not at all. You can also toggle them with the provided option.

• Show Helpers: Toggles the temporary display of an outline of the node, with the previous transform properties (position, scaling, or rotation) if a transform operation has been initiated. For Control nodes, it also shows the sizing parameters. Useful to see the deltas.

• Show Rulers: Toggles the visibility of horizontal and vertical rulers. See 2D Viewport more on rulers.

• Show Guides: Toggles the visibility of created guides. See 2D Viewport for on how to create them.

• Show Origin: Toggles the display of the green and red origin lines drawn at x: 0, y: 0.

• Show Viewport: Toggles the visibility of the game's default viewport, indicated by an indigo-colored rectangle. It is also the default window size on desktop platforms, which can be changed by going to Project Settings > Display > Window > Size and setting Viewport Width and Viewport Height.

• Gizmos: Toggles the visibility of Position (shown with cross icon), Lock (shown with padlock), Groups (shown with two squares), and Transformation (shown with green and red lines) indicators.

• Center Selection: The same as the Center View button inside the viewport. Centers the selected node(s) in the view. F is the default shortcut.

• Frame to Selection: Similar to Center Selection, but also changes the zoom factor to fit the contents in the screen. Shift + F is the default shortcut.

• Clear Guides: Deletes all guides from the screen. You will need to recreate them if you plan to use them later.

• Preview Canvas Scale: Toggles the preview for scaling of canvas in the editor when the zoom factor or view of the viewport changes. Useful to see how the controls will look like after scaling and moving, without running the game.

• Preview Theme: Allows to choose from the available themes to change the look of control items in the editor, without requiring to run the game.

Node2D and Control node

CanvasItem is the base node for 2D. Node2D is the base node for 2D game objects, and Control is the base node for everything GUI. For 3D, Godot uses the Node3D node.

Displaying 3D nodes in 2D

It is possible to display 3D nodes in a 2D scene by using a SubViewport. You can see this in the demo 3D in 2D Viewport.