Designing a 2D world

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.

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

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:

Blending should automatically work for 2D viewports, see blending for details. In short, you can use partial transparency in your images, and it will work correctly in 2D viewports.

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

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

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.

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

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.

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

You can use any supported model format.

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.

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.

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

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