Prototyping levels with CSG

CSG steht für Constructive Solid Geometry (konstruktive Festkörpergeometrie), und ist ein Werkzeug zum Kombinieren von Grundformen oder benutzerdefinierten Meshes, um komplexere Formen zu erstellen. In 3D-Modellierungssoftware wird CSG hauptsächlich als "Boolesche Operatoren" bezeichnet.

Level-Prototyping ist eine der Hauptanwendungen von CSG in Godot. Mit dieser Technik können Benutzer einfache Versionen der gängigsten Formen erstellen, indem sie Grundelemente kombinieren. Innenumgebungen können mithilfe invertierter Grundelemente erstellt werden.

Bemerkung

Die CSG-Nodes in Godot sind hauptsächlich für das Prototyping vorgesehen. Es gibt keine integrierte Unterstützung für UV-Mapping oder das Bearbeiten von 3D-Polygonen (obwohl extrudierte 2D-Polygone mit dem CSGPolygon-Node verwendet werden können).

If you're looking for an easy to use level design tool for a project, you may want to use Qodot instead. It lets you design levels using TrenchBroom and import them in Godot.

../../_images/csg.gif

Einführung in CSG nodes

Wie andere Funktionen von Godot wird CSG in Form von Nodes unterstützt. Dies sind die CSG-Nodes:

../../_images/csg_nodes.png ../../_images/csg_mesh.png

Eigenschaften der CSG-Tools

Jeder CSG-Node unterstützt drei Arten von Booleschen Operationen:

  • Vereinigung: Die Geometrie beider Grundelemente wird zusammengeführt, die sich überschneidende Geometrie wird entfernt.
  • Schnittpunkt: Es bleibt nur die Schnittgeometrie übrig, der Rest wird entfernt.
  • Subtraktion: Die zweite Form wird von der ersten subtrahiert, wobei eine Delle mit ihrer Form zurückbleibt.
../../_images/csg_operation_menu.png ../../_images/csg_operation.png

CSGPolygon

Der Node CSGPolygon wird entlang eines in 2D gezeichneten Polygons (in X, Y Koordinaten) auf folgende Weise extrudiert:

  • Tiefe: Extrudierte einen bestimmten Betrag zurück.
  • Schleudern: Extrudiert beim Drehen um seinen Ursprung.
  • Pfad: Extrudiert entlang eines Pfad-Nodes. Diese Operation wird üblicherweise als Lofting bezeichnet.
../../_images/csg_poly_mode.png ../../_images/csg_poly.png

Bemerkung

The Path mode must be provided with a Path node to work. In the Path node, draw the path and the polygon in CSGPolygon will extrude along the given path.

Benutzerdefinierte Meshes

Any mesh can be used for CSGMesh; the mesh can be modelled in other software and imported into Godot. Multiple materials are supported. There are some restrictions for geometry:

  • es muss geschlossen sein,
  • es darf sich nicht selbst überschneiden,
  • es darf keine inneren Flächen enthalten,
  • Jede Kante darf nur mit zwei anderen Flächen verbunden werden.
../../_images/csg_custom_mesh.png

CSGCombiner

The CSGCombiner node is an empty shape used for organization. It will only combine children nodes.

Ablaufsteuerung

Every CSG node will first process its children nodes and their operations: union, intersection or subtraction, in tree order, and apply them to itself one after the other.

Bemerkung

In the interest of performance, make sure CSG geometry remains relatively simple, as complex meshes can take a while to process. If adding objects together (such as table and room objects), create them as separate CSG trees. Forcing too many objects in a single tree will eventually start affecting performance. Only use binary operations where you actually need them.

Prototyping a level

We will prototype a room to practice the use of CSG tools.

Tipp

Working in Orthogonal projection gives a better view when combining the CSG shapes.

Our level will contain these objects:

  • a room,
  • a bed,
  • a lamp,
  • a desk,
  • a bookshelf.

Create a scene with a Spatial node as root node.

Tipp

The default lighting of the environment doesn't provide clear shading at some angles. Change the display mode using Display Overdraw in the 3D viewport menu, or add a DirectionalLight node to help you see clearly.

../../_images/csg_overdraw.png

Create a CSGBox and name it room, enable Invert Faces and change the dimensions of your room.

../../_images/csg_room.png ../../_images/csg_room_invert.png

Next, create a CSGCombiner and name it desk.

A desk has one surface and 4 legs:

  • Create 1 CSGBox children node in Union mode for the surface and adjust the dimensions.
  • Create 4 CSGBox children nodes in Union mode for the legs and adjust the dimensions.

Adjust their placement to resemble a desk.

../../_images/csg_desk.png

Bemerkung

CSG nodes inside a CSGCombiner will only process their operation within the combiner. Therefore, CSGCombiners are used to organize CSG nodes.

Create a CSGCombiner and name it bed.

Our bed consists of 3 parts: the bed, the mattress and a pillow. Create a CSGBox and adjust its dimension for the bed. Create another CSGBox and adjust its dimension for the mattress.

../../_images/csg_bed_mat.png

We will create another CSGCombiner named pillow as the child of bed. The scene tree should look like this:

../../_images/csg_bed_tree.png

We will combine 3 CSGSphere nodes in Union mode to form a pillow. Scale the Y axis of the spheres and enable Smooth Faces.

../../_images/csg_pillow_smooth.png

Select the pillow node and switch the mode to Subtraction; the combined spheres will cut a hole into the mattress.

../../_images/csg_pillow_hole.png

Try to re-parent the pillow node to the root Spatial node; the hole will disappear.

Bemerkung

This is to illustrate the effect of CSG processing order. Since the root node is not a CSG node, the CSGCombiner nodes are the end of the operations; this shows the use of CSGCombiner to organize the CSG scene.

Das fertig gebaute Bett sollte so aussehen:

../../_images/csg_bed.png

Create a CSGCombiner and name it lamp.

A lamp consists of 3 parts: the stand, the pole and the lampshade. Create a CSGCylinder, enable the Cone option and make it the stand. Create another CSGCylinder and adjust the dimensions to use it as a pole.

../../_images/csg_lamp_pole_stand.png

We will use a CSGPolygon for the lampshade. Use the Spin mode for the CSGPolygon and draw a trapezoid while in Front View (numeric keypad 1); this shape will extrude around the origin and form the lampshade.

../../_images/csg_lamp_spin.png ../../_images/csg_lamp_polygon.png ../../_images/csg_lamp_extrude.png

Adjust the placement of the 3 parts to make it look like a lamp.

../../_images/csg_lamp.png

Create a CSGCombiner and name it bookshelf.

We will use 3 CSGBox nodes for the bookshelf. Create a CSGBox and adjust its dimensions; this will be the size of the bookshelf.

../../_images/csg_shelf_big.png

Duplicate the CSGBox and shorten the dimensions of each axis and change the mode to Subtraction.

../../_images/csg_shelf_subtract.png ../../_images/csg_shelf_subtract_menu.png

You've almost built a shelf. Create one more CSGBox for dividing the shelf into two levels.

../../_images/csg_shelf.png

Positioniere deine Möbel im Raum wie du möchtest und deine Szene sollte so aussehen:

../../_images/csg_room_result.png

You've successfully prototyped a room level with the CSG tools in Godot. CSG tools can be used for designing all kinds of levels, such as a maze or a city; explore its limitations when designing your game.

Using prototype textures

Godot's räumliches Material supports triplanar mapping, which can be used to automatically apply a texture to arbitrary objects without distortion. This is handy when using CSG as Godot doesn't support editing UV maps on CSG nodes yet. Triplanar mapping is relatively slow, which usually restricts its usage to organic surfaces like terrain. Still, when prototyping, it can be used to quickly apply textures to CSG-based levels.

Bemerkung

If you need some textures for prototyping, Kenney made a set of CC0-licensed prototype textures.

Es gibt zwei Möglichkeiten, ein Material auf einen CSG-Node anzuwenden:

  • Applying it to a CSGCombiner node as a material override (Geometry > Material Override in the Inspector). This will affect its children automatically, but will make it impossible to change the material in individual children.
  • Applying a material to individual nodes (Material in the Inspector). This way, each CSG node can have its own appearance. Subtractive CSG nodes will apply their material to the nodes they're "digging" into.

To apply triplanar mapping to a CSG node, select it, go to the Inspector, click the [empty] text next to Material Override (or Material for individual CSG nodes). Choose New SpatialMaterial. Click the newly created material's icon to edit it. Unfold the Albedo section and load a texture into the Texture property. Now, unfold the Uv1 section and check Triplanar. You can change the texture offset and scale on each axis by playing with the Scale and Offset properties just above. Higher values in the Scale property will cause the texture to repeat more often.

Tipp

You can copy a SpatialMaterial to reuse it across CSG nodes. To do so, click the dropdown arrow next to a material property in the Inspector and choose Copy. To paste it, select the node you'd like to apply the material onto, click the dropdown arrow next to its material property then choose Paste.