Designing a 2D world

Platformer game

1. Introduction

In this chapter we show how you can design 2D world using Castle Game Engine editor. We assume you have already read the overview of the viewport and scenes.

Warning

This page is a work in progress.

We plan to write here a detailed tutorial, similar to Tutorial: Designing a 3D world, but designed specifically for 2D games (using static images for a background, using sprite sheets for hero and some enemies).

But it is not ready yet.

For now, we advise to follow Tutorial: Designing a 3D world, and then read this page about important things that are different for 2D games.

2. Examples

Consult the engine examples, like examples/platformer, for a fully-working game following this approach.

3. Create a viewport for 2D

Create a viewport in the editor by right-clicking in the hierarchy and using "Add User Interface → Viewport (2D)" menu item.

This creates a viewport with 2D navigation, 2D orthographic camera, and adds a default white plane in the middle. By default in 2D:

  • X axis goes to the right,

  • Y goes up,

  • Z axis is "depth". Camera looks in the -Z direction. Larger Z means that object is closer to the camera (in front of other objects), smaller Z means that it is further from the camera (behind other objects). Is it OK to use negative Z values.

    Note
    For 2D objects will blending, you may (for now) need to sort the hierarchy after setting their Z, using "Viewport → Sort Items For Correct 2D Blending".

4. Navigation in 2D

In a viewport created using the "Add User Interface → Viewport (2D)" menu item we use, by default, a special 2D navigation method.

  • Drag with right mouse button to pan the view,

  • Use mouse scroll wheel to zoom in / out.

This makes it easy to move a 2D scene, without accidentally making a rotation that would reveal it is 3D.

Note
If you want to allow user to easily pan/zoom the view, add the TCastle2DNavigation component as a child of the TCastleViewport.
Note
You can still use a different navigation, like 3D Fly navigation. Use the "Viewport" menu item commands to toggle between different navigation methods.

5. Orthographic projection

A viewport created using the "Add User Interface → Viewport (2D)" menu item will use an orthographic projection by default.

In such projection, the distance to the object doesn’t change its perceived size. Constrast this with the perspective projection, default in 3D, in which the objects further away are perceived as smaller.

You can always change the camera projection manually using the TCastleCamera.ProjectionType property. This sets the projection used at runtime (when you run the game). You can also change the projection used at design-time (in the editor) using the "Viewport → Toggle Perspective / Orthogonal" menu item.

6. Field of view in orthographic projection

"Field of view" is a term meaning "how much of the world do you see at a given moment". The concept makes sense for both orthographic and perspective projections, but it is set using different properties in each case. For orthographic projection, this is determined by Viewport.Camera.Orthographic.Width and Viewport.Camera.Orthographic.Height.

A viewport created using the "Add User Interface → Viewport (2D)" menu item has, by default,

This means that, regardless of the window size, and even regardless of the simulated (for UI scaling) window size, in your viewport you will always see exactly an object that has height (Y) equal to 1000. For example, if you add a TCastleScene, TCastleImageTransform or TCastlePlane with height (Y) equal to 1000, then their height will match perfectly the vertical field of view of the viewport. The horizontal field of view follows the aspect ratio of the viewport control.

There are other ways to control the field of view, see the Viewport.Camera.Orthographic.Width and Viewport.Camera.Orthographic.Height docs.

For example: You can set Viewport.Camera.Orthographic.Width and Viewport.Camera.Orthographic.Height to both be zero. In this case, the viewport control size (after UI scaling) determines this field of view. With the default UI scaling to 1600 x 900, this likely means that you will see an area 1600 x 900 in your viewport (it may be a bit taller or wider, if user resizes the window).

7. Origin in orthographic projection

A viewport created using the "Add User Interface → Viewport (2D)" menu item has, by default, Viewport.Camera.Orthographic.Origin set as (0.5,0.5). This means that the camera position determines what is visible in the middle of the viewport. In effect, when Camera.Translation is (0, 0, 0), the middle of the viewport will show the things at position (0, 0, 0) in your world. This is most comfortable if you place your assets around the (0, 0, 0) point.

As an example, you can add a TCastleScene with an image or a sprite sheet. By default their pivot is in the middle of the asset. So if Viewport.Camera.Orthographic.Origin is (0.5,0.5) you will see them in the middle of the viewport.

You can change Viewport.Camera.Orthographic.Origin to whatever makes sense for your game. For example, Viewport.Camera.Orthographic.Origin equal to (0, 0) means that the camera position determines what is visible at the left-bottom viewport corner. So when camera position is (0, 0, 0) the left-bottom viewport corner will show the things at position (0, 0, 0) in your world.

8. 2D assets

Simply add TCastleScene instances to your 2D world, just like you would in 3D.

You can use any supported model format.

  • You can use sprite sheets.

  • You can use images.

  • You can use Spine with smooth skeletal 2D animations.

  • It is perfectly reasonable to use glTF (e.g. exported from Blender) to do 2D art as well.

  • Primitives like TCastleText and TCastlePlane (make sure to set axis to 2, meaning "Z") are also useful in 2D.

9. Blending

Blending (partial transparency) should work in 2D games automatically.

Shapes using blending will be sorted following TCastleViewport.BlendingSort rules. This is by default sortAuto, which means it detects typical 2D camera setup and then behaves like sort2D.

See blending for more details about blending, and see alpha bleeding for details about how to prepare your images to behave correctly with blending.

10. Advanced: Turning any viewport (like 3D) into 2D

There is really no strict distinction between 3D and 2D viewports in Castle Game Engine. In both cases you have TCastleViewport, just some sensible defaults are different. In "Viewport (2D)" the camera projection is orthographic and design-time navigation method is 2D.

You can always turn a "regular" viewport (with defaults for 3D) into 2D.

  • Use the "Viewport → 2D Camera And Projection At Runtime". See the TCastleViewport.Setup2D method reference for details what it does. You can also manually change Viewport.Camera.ProjectionType and adjust other Viewport.Camera.Orthographic properties.

  • Use the "Viewport → Toggle Perspective / Orthogonal" to change design-time camera to orthographic

  • Use the "Viewport → Front" and then zoom out with mouse wheel to view a useful piece of 2D world

  • Use the "Viewport → 2D" to activate 2D-specific navigation

You can also just place 2D (flat) items in a 3D viewport. It is really your choice

  • whether you use flat or not objects,

  • whether you use orthographic or perspective projection,

  • what design-time navigation you use (2D, Fly…​) etc.

And all these choices are in fact independent of each other. You can mix 2D and 3D stuff freely in CGE.


To improve this documentation just edit this page and create a pull request to cge-www repository.