Scrolling backgrounds in 2.5D games

When making 2.5D games (3D characters against 2D backgrops), AC provides a convenient camera system when the backdrops fit the size of the screen - see the Making a 2.5D game tutorial.

However, things get a little more complicated when a larger backdrop is involved - since the camera must pan across it with the player.

Note: For the purposes of this tutorial, we assume you have already used the New Game Wizard to being a new 2.5D game, and have a 3D player character to make use of.

In this tutorial, we'll use this image as an example backdrop to work with:


(Photo credit: pexels.com).

Download the image, and then use the Scene Manager to create a new scene as normal. To get the camera scrolling, we'll use the GameCamera 2D prefab. This isn't available in the Scene Manager's list of prefabs, but can still be dragged into the scene from Assets/AdventureCreator/Prefabs/Camera/GameCamera2D:

Set it as the scene's Default camera in the Scene Manager, and enable its Camera component so that we can preview it in Edit mode. Also, be sure to set the Camera's Projection field to Perspective, so that character's depth is properly felt. In the Game Camera 2D Inspector, uncheck Lock? underneath Horizontal movement:

This will allow it to scroll sideways with its Target (by default, the Player).

While regular 2.5D Cameras allow images to live in Background Image prefabs, this cannot be the case with "scrollable" backgrounds - they must instead be placed inside the scene in 3D space. To do this, select the image in Unity's Inspector and set the Texture type to either Texture or Default (depending on your version of Unity):

Next, create a new Material in the Project window, setting its Shader to Unlit/Texture, and its Main Texture as the downloaded image:

To place this in the scene, we'll assign it to a Quad. Create a new Quad (GameObject -> 3D -> Quad) from the top toolbar, and assign it the new Material:

Then let's set the correct scale. Since the image has an aspect ratio of 4, set its scale to (4, 1, 1) so that it looks correct:

Position it a good distance from the camera, as we'll be placing the Navigation Mesh, as well as any interactive objects of characters, in between. Also note that we could end up with distortion when the camera scrolls to the side edges if it is too close. In this example, we've set the Quad to be 35 units away from the camera.

The camera's Field of view value should match that of the original photograph. For this example, we've set it to 30.

Next, scale the image up so that its top and bottom edges line up with those of the GameCamera 2D:

If you want to copy the exact values, here are the Transform components of both the Quad and the GameCamera2D:


Next, the ground / NavMesh can be placed down. Refer to the 3D tutorials for more on how to create a NavMesh, but since we are working in 2.5D, we must use either the Mesh Collider or Unity Navigation options.

In order to preview how the NavMesh - and other scene objects - look through the camera, the Horizontal Offset value can be tweaked in the Game Camera 2D Inspector in Edit mode.

Adventure Creator and this website are copyright Chris Burton, ICEBOX Studios

Go to top