Designing a 2D world

Platformer game

1. Introduction

In this chaper 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

For 2D games, you usually create a viewport in the editor by right-clicking in the hierarchy, and using "Add User Interface → Viewport (Configured for 2D) (TCastleViewport)" menu item.

Equivalently, you can also just add a "regular" viewport (with most defaults for 3D) using the menu item "Add User Interface → Viewport (TCastleViewport)" and then use the "Camera Setup (Initial and Current) for 2D View and Projection" command (from the "hamburger" menu with viewport commands).

The "Camera Setup (Initial and Current) for 2D View and Projection" command:

  • Sets projection to orthographic. In an orthographic projection, the distance to the object doesn’t change its perceived size (constrast this with the default perspective projection, in which the objects further away are smaller).

  • Sets the initial and current camera such that X axis goes to the right, Y goes up, and Z is "depth" (camera looks along the -Z direction).

  • See the TCastleViewport.Setup2D method reference for details.

Note

You don’t really have to use any particular setup to display 2D things. The changes done by TCastleViewport.Setup2D reflect the typical "setup of 2D games", but they are absolutely not the only way to make a game that could be considered "2D game".

You may as well change Viewport.Camera.ProjectionType manually and adjust any other camera parameters as you want. We don’t really have any definite notion in CGE "this is a 2D viewport" or "this is a 3D viewport". We don’t have such property, because we don’t need it. Both 2D and 3D are actually the same things, just with a different world set up, and a different camera being used.

This also means that you can implement a game that switches between showing the same world in 3D or 2D. Just switch the projection and camera view whenever you want during the game.

4. Orthographic projection field of view

Inside the viewport, we have a "field of view", which is a fancy way of saying "we determine how much of the world we see at a given moment".

By default, for orthographic projection, the viewport size (after UI scaling) determines this field of view. E.g. if the viewport width and height (after UI scaling) are 1000 x 1000, then a TCastleScene with size 1000 x 1000 will fit precisely within such viewport.

You can also set the desired field of view explicitly. This is usually a good idea — this way the visible area remains the same, regardless of your viewport size, and even regardless of whether you use UI scaling (and with what reference size UI scaling works). To do this, just set Viewport.Camera.Orthographic.Width to a constant value, like 1600. You can also set Viewport.Camera.Orthographic.Height, but you don’t have to — the other viewport size (left as 0) will be calculated automatically based on current viewport control aspect ratio.

5. Orthographic camera position origin

By default, in orthographic projection, the camera position determines what is visible at the left-bottom viewport corner. So when camera position is (0,0) the left-bottom viewport corner will show the things at position (0,0) in your world. Sometimes this is what you want, sometimes this is not comfortable.

To make the camera position determine what is visible in the middle of the viewport, set Viewport.Camera.Orthographic.Origin to (0.5,0.5). In effect, when camera position is (0,0), the middle of the viewport will show the things at position (0,0) in your world. This is more comfortable if you place your assets around the (0,0) point.

As an example, imagine you 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,0) you will see only a part of your asset loaded, in the left-bottom viewport corner.

To make the new asset visible:

  1. You can move the scene, by adjusting scene Translation. To make the image of size 600x300 visible fully, you would move it by 300x150. It would be visible fully, but still in the viewport left-bottom corner. To move it to the middle of the screen, you should instead move it by (Viewport.Camera.Orthographic.EffectiveWidth / 2, Viewport.Camera.Orthographic.EffectiveHeight / 2).

  2. Another solution is to move the camera. You can adjust Viewport.Camera.Position. If you move the camera by (-Viewport.Camera.Orthographic.EffectiveWidth / 2, -Viewport.Camera.Orthographic.EffectiveHeight / 2) then the asset will be in the middle of the viewport.

  3. The best and reliable way is to set Viewport.Camera.Orthographic.Origin to (0.5,0.5). This means that the middle of the viewport will show the things at the (0,0) translation in your world, when the camera position is also (0,0). Effectvely, it moves your camera automatically such that things placed at the (0,0) position in the world are exactly in the middle of the viewport, regardless of the viewport size.

6. Navigation

There is a special 2D navigation mode available, that you can use at design-time and/or allow user to use it during the game. This makes it easy to move a 2D scene, without accidentally making a rotation that would reveal it is 3D.

Many 2D games have a custom navigation, and thus leave the Viewport.Navigation as default nil.

7. 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.

8. Blending

The editor contains a menu item Add Transform → Scene (Optimal Blending for 2D Models) (TCastleScene). This just adds a regular TCastleScene and sets on it RenderOptions.BlendingSort to bs2D, to make blending always correct. This matters in case of 2D models with multiple layers, like typical Spine or glTF 2D assets.

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


To improve this documentation just edit the source of this page in AsciiDoctor (simple wiki-like syntax) and create a pull request to Castle Game Engine WWW (cge-www) repository.