Construct originally started out as a 2D game engine. However over time it has gained a range of 3D features. This tutorial covers the available 3D features and how they work together.
Setting the Z co-ordinate
The simplest 3D feature in Construct is changing an object's Z co-ordinate. This lets you move otherwise 2D objects like Sprites up and down on the Z axis. Increasing the Z will move the object towards the camera, so it appears bigger. Decreasing the Z will move the object away from the camera, so it appears smaller. As the view scrolls around the layout, you'll notice that objects moved on the Z axis also move differently to reflect their 3D position. It's a quick and easy way to move objects around in 3D. The On-rails shooter example is a good demonstration of the creative possibilities of using Z co-ordinates.
Some Piggy sprites using Z co-ordinates to show perspectiveYou can also change the Z elevation of entire layers. This moves all the objects on the layer up and down on the Z axis. This provides an interesting alternative to parallax, using real depth rather than changing the scroll speed. Placing a series of layers at different Z elevations is a quick way to get an overall 3D appearance in an otherwise 2D game.
The camera
In a 2D context, Construct normally refers to scrolling and scale when describing which part of the layout is visible and how big it appears. However the view is actually rendered as a 3D world, with a camera position that determines what is visible.
In Construct, scrolling to a position moves both the camera and the position it looks at to the given X and Y co-ordinates. So scrolling is in fact moving the camera around in 2D.
The camera points down to look at a Z position of 0. All the normal 2D content of a layout has a Z position of 0 (unless it sets a different Z co-ordinate). Construct calculates where to place the camera on the Z axis so 2D content appears at 100% scale, as expected for a 2D game. This Z co-ordinate for the camera to show 2D content at 100% scale is called the default camera Z. This actually depends on the project viewport size and field of view properties, so it can vary. You can see what the default camera Z is for your project by adding the 3D camera object and looking at its Default camera Z property.
Visualization of the camera looking down at a layout with 2D content at a Z position of 0Moving a sprite to a Z co-ordinate that is half the default camera Z means it is placed half-way towards the camera, and so appears twice as big. Similarly moving a sprite to a Z co-ordinate of the negative default camera Z means it is placed twice as far from the camera, and so appears half as big.
Scale/zoom
In Construct, adjusting the layout or layer scale (or in the editor, zooming in and out) actually moves the camera on the Z axis. For example at 2x scale (or 200% zoom), the camera is actually moved half-way to the 2D content on the Z axis. Since the camera is closer to the content by a factor of 2, it appears bigger by a factor of 2. In 2D this does exactly what you expect, and everything scales accordingly. However there is an additional 3D side-effect to this: since the camera is moving on the Z axis, the perspective of 3D features changes accordingly. For example you'll notice sprites with adjusted Z positions moving in the view to reflect their position relative to the camera. This means scale/zoom is a true 3D effect in Construct, rather than just stretching everything bigger.
View distance
Due to the way 3D rendering works, the camera has both a minimum and a maximum distance inside which content is visible. These are also referred to as the Near distance and Far distance. If content is either too close to the camera or too far away, it will disappear.
In Construct the default near distance is 1, and the default far distance is 10000. Therefore with these settings, anything closer than 1 unit away or further away than 10000 units away will not be visible. For example with a default camera Z of 600, the highest a Sprite will be visible is at a Z co-ordinate of 599. It won't be visible at 599.5, even though that is still in front of the camera (and naturally content behind the camera is not visible). Similarly a Sprite at a Z co-ordinate of -9400 (which is the camera Z position minus the far distance) will be only just visible, but will completely disappear if any further away.
Vanishing point
The vanishing point determines how the perspective appears for 3D features. By default the vanishing point is in the middle of the viewport, meaning as objects move in to the distance, they also appear to move towards the middle of the screen. The vanishing point can be altered via the Vanishing point layout property and the Set layout vanishing point system action. The given position is relative to the viewport, with (0%, 0%) being the top-left corner of the viewport, and (100%, 100%) being the bottom-right corner of the viewport.
Changing the vanishing point can be useful to adapt the 3D perspective to match the style of your game. For example in a 3D platformer, it's useful to move the vanishing point up a little, so the tops of 3D shapes are visible when the player is standing on them (as demonstrated in the 3D platforms example). Alternatively moving the vanishing point to the bottom of the viewport might be useful for providing a more isometric style view, such as to view the faces of buildings if walking around a town made from 3D shape objects.
3D Camera
Instead of being limited to the 2D features described previously, the 3D Camera object allows complete control over the camera, allowing it to be positioned anywhere in 3D, and pointed to look at another 3D position. For an example of this, see the First-person shooter example. The Mouse object also supports pointer lock, which is useful for controlling the camera angle by mouse, a.k.a. "mouse look". See the First-person platformer example for an example of that.
Projection
The Projection layout property can change between the default perspective projection, where things get smaller as they get further away from the camera, and orthographic projection, where things stay the same size regardless of their distance to the camera, creating a flat appearance. For an interactive example of both, see the Orthographic projection example.
Note that only the perspective projection takes in to account the vanishing point, as the orthographic projection has no perspective. The vanishing point also affects perspective when using 3D views with 3D Camera.
Collisions
All 3D features in Construct are cosmetic only - they don't affect how collisions work. Collisions still continue to work as if the object has a Z co-ordinate of 0, i.e. as if it's still 2D. This is just something to bear in mind as you develop games using 3D features. In some cases you might want to disable collisions for objects using 3D features, such as if you want the player to be able to run underneath them.
Draw order
Construct uses a back-to-front renderer, which means it starts drawing things furthest away from the camera first, and then draws closer content on top. Since the last thing drawn is top of the Z order, it appears on top.
In Construct, Z co-ordinates take precedence over Z order. In other words, you can't use Bring to front to make something appear on top of something else with a higher Z co-ordinate. The sort order is based on Z co-ordinates first, and then the Z order is only used where multiple objects have the same Z co-ordinate. Another way to think about this is Z order is a 2D feature. In a purely 2D game everything is at the same Z co-ordinate of 0, and so Z ordering solely decides the appearance.
The draw order has an impact on transparency in some circumstances, and for 3D layers can be changed to a Camera distance draw order instead. For more details see the dedicated section on transparency below.
3D shape
The 3D Shape plugin provides an easy way to add further elements of 3D to your project. You can choose from a range of pre-defined shapes, such as a box, and draw images for each face of the shape. For more comprehensive coverage, refer to the linked manual entry. You can also try out the 3D shape tour example in Construct for an interactive tour.
Example of some 3D shape objects using the 'Box' shapeAs with 2D objects, you can use the same Z co-ordinate property to move 3D shapes up and down on the Z axis. The 3D shape object also has a depth value in its size property that determines how tall it is.
Transparency
Due to the way 3D rendering works, transparency may not always work as expected with 3D shape objects, especially when using 3D Camera. To correctly render 3D features, Construct must use a depth buffer. However this only supports fully opaque or fully transparent pixels. 3D shape objects generally work best with fully opaque images (not using any opacity).
Making individual faces invisible works as expected, as this means the face skips drawing entirely. Fully transparent pixels (with opacity 0) also work as expected, as these pixels do not fill in the depth buffer. However using semitransparent pixels, with an opacity in between fully opaque and fully transparent, is more difficult. Semitransparency also frequently occurs when using linear sampling, as semitransparent pixels may be drawn in between fully opaque and fully transparent pixels.
Semitransparency in 3D Shape's images may work in some circumstances, but it depends on Construct's draw order. So long as a 3D shape object using semitransparency is drawn after the content visible behind it, the result will appear correct. This is because the semitransparent content will be drawn on top of the content behind it. However if the 3D shape is drawn before content visible behind it, then the semitransparent portions of its faces will block rendering of the content drawn afterwards. This is because the semitransparent parts of its images are filled in to the depth buffer as if they are opaque, and then content meant to appear behind it is assumed to be invisible, and so is not rendered. As noted in the section on Draw order above, Construct's default draw order is back-to-front, starting with the furthest away Z co-ordinate and moving forwards, and using Z order where the Z co-ordinates are the same. Therefore adjusting Z co-ordinate or Z order may be able to work around semitransparency related issues with 3D shapes.
Illustration of unexpected results with semitransparency on a side face of a 3D shape object. Left: the Piggy sprite is placed on the Z axis just below the 3D shape, and semitransparency works as expected as the piggy is drawn first. Right: the Piggy sprite is placed on the Z axis just above the 3D shape, and semitransparency does not work as expected as the piggy is drawn last.Note that the draw order ignores the depth of the 3D shape: the draw order is based only on its lowest Z co-ordinate. This is the position of the back face of the object, and note that may not be the same as the Z co-ordinate depending on the Origin Z property. Only when the Z co-ordinate is the same as another object does the Z order come in to play. Problems with semitransparency usually occur when the depth of a 3D shape extends above content that comes after it in the draw order, i.e. at a higher Z co-ordinate or Z order.
Semitransparency issues are limited to only 3D shape objects or when using a 3D camera. Z positions with things like 2D sprites never has any issues with semitransparency, as the back-to-front draw order always works correctly. It is only with 3D objects that you should consider using only opaque images.
Semitransparency and draw order
Another tool to help with rendering semitransparency in 3D is the Draw order layer property. The default draw order is based on Z order as described above. However 3D layers can be changed to use a Camera distance draw order. This ignores the Z order of objects on the layer and instead draws things based on how far away from the camera they are, from furthest away to nearest. This is helpful for semitransparency as it ensures semitransparent content is always drawn after anything behind it. A useful technique is to arrange layers like this:
- All opaque 3D scenery is on its own layer.
- All objects with semitransparency are on a separate layer above the scenery, with the Camera distance draw order.
This ensures the semitransparent content is always rendered correctly, as it is drawn after opaque scenery, in back-to-front order relative to the camera view, with each semitransparent object correctly overdrawing content behind it.
Transparency and fog
Even with the setup described above that renders semitransparency correctly, adding fog to the layer with semitransparent content may not appear correctly. The reason for this is once again that semitransparent pixels still fill in the depth buffer, and the fog effect fades to a color based on depth. So after rendering the whole layer, semitransparent parts of images will have a level of fog applied depending on how near the semitransparent content is to the camera, which will be less than the content further away behind it. In other words this means semitransparent content can still appear to have boxes around them where there is less fog than there ought to be.
The solution is to remove the fog effect from the layer, and instead apply the fog effect to the objects on the layer. Since the layer will be using the camera distance draw order to render transparency correctly, each individual object will be drawn in back-to-front order relative to the camera. Then the fog effect will be drawn with each individual object before anything else is drawn on top, ensuring it gets a level of fog appropriate for that object, rather than a potentially different level of fog based on something in front of it.
Best approaches
A few good approaches for dealing with transparency in 3D content are listed below, starting with the simplest options first:
- Use opaque images for 3D shapes. This completely avoids transparency-related problems.
- Use only images which are either fully opaque or fully transparent, avoiding any semitransparency. Then set the object's Sampling property to Nearest. This avoids any linear filtering introducing semitransparent pixels in between opaque and transparent pixels. This is often suitable for retro/pixel art style 3D content. As Construct lets you change the sampling per object, you can make sure only 3D shapes with semitransparent images use Nearest sampling while still allowing the rest of the project to use a better-quality Trilinear sampling.
- Use semitransparency, but carefully manage the layers and draw orders to ensure everything is drawn in the correct order, as explained above. This needs particularly careful management if fog is also used.
Mesh Z co-ordinates
Construct's mesh distortion feature allows you to deform objects by splitting them in to a grid of mesh points that can be independently moved around. You can see this in action in the Mesh distortion example.
In both the mesh editor and at runtime, mesh points can also individually be moved on the Z axis with a Z property. This provides another way to make customized 3D appearances in your project, and could even be used as a limited kind of 3D modelling. For an example of how dynamic mesh Z positioning looks, see the Mesh Z elevation example.
Using 2D layers
Layers are another form of Z ordering. Content on a higher layer normally appears above content on a lower layer. However 3D features can override this. For example a tall 3D shape object can still overlap and cover up content on a higher layer.
In some cases this is unwanted. For example you may want a 2D backdrop image at a Z co-ordinate of 0 to still display behind 3D features that have a lower Z co-ordinate. Alternatively you may wish for the HUD or other user interface controls to appear in front of 3D features that have a higher Z co-ordinate, or on top of a 3D view using the 3D Camera object.
In both cases you can solve this by changing the Rendering mode layer property to 2D. This ensures its content is drawn flat in 2D again ignoring the depth of any 3D features, and with Construct's standard 2D view instead of the 3D Camera view. You can see this in action in the example Combining 2D & 3D layers.
Demonstration of the effect of a 2D layer, with text objects on both 2D and 3D layers, illustrating how each overlaps 3D contentAdvanced project properties
There are several additional project properties in the Advanced group that can also affect 3D features. These include:
- Rendering mode
- Anisotropic filtering
- Near distance
- Far distance
Normally you don't need to change these, as the defaults generally should do what you want. However advanced users may wish to adjust them. For example if you only use 3D features at runtime, such as by adjusting a mesh to use Z position during the game, you may wish to force the rendering mode to be 3D. For more information refer to the manual entry covering project properties.
Conclusion
Construct started as a 2D game engine, but provides a range of features that can add some exciting 3D elements to your games. These range from a simple Z co-ordinate property through to 3D models. Most of them preview in the Layout View, allowing quick experimentation and feedback. Try it out and see what you can do! You can also browse the Start Page for examples tagged 3D for more examples.