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.
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.
Consult the engine examples, like examples/platformer, for a fully-working game following this approach.
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).
TCastleViewport.Setup2D method reference for details.
You don’t really have to use any particular setup to display 2D things. The changes done by
You may as well change
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.
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.
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:
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).
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.
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.
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
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.
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
bs2D, to make blending always correct. This matters in case of 2D models with multiple layers, like typical Spine or glTF 2D assets.
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.
Copyright Michalis Kamburelis and Castle Game Engine Contributors.