Tutorial 16: Create a room with a view and camera effect
A room with a view and camera, is when you create a large room but as a user plays the game, they only see a portion of the room at a time. This is useful when creating rooms for platform type games. Take for example games like Sonic the Hedgehog or Super Mario Brothers. These games have long rooms , however, as the player you are only seeing a portion of the room. You get to see more of the room as your move to the player to the right.
To setup a room with a view
- Duplicate your main game room to create a test room to see how a viewport and camera works.
- Change the width or height of this room to make it longer to allow your player object to move either up or sideways through a longer room environment. In my game, I’ll make it a multiple of 640 tall. I’ll make it 4 times taller, giving this new room a total height of 2560 pixels.
- In this new room’s properties area, open Viewports and Cameras, check the box Enable Viewports
- Open Viewport 0 and check Visible – you should now see a white bounding box over your room
- Change the width or height of your viewport and camera properties match the original width and height of your main game room. In my game it is 960 by 640. Ensure that the viewport window is within your room. See below the example below, I have made sure my Camera and Viewport height is the same as my room height. Also the Xpos and YPos on each has to be at the bottom of the screen so they need to be changed accordingly. see screenshot below
- Place your player object into the viewport.
- To get the camera to follow your player object, under the title Object Following, choose your player object.
- Set a Horizontal & Vertical Border at which the camera will start moving when you are near the edges of the viewport. The example below sets this to 100 pixels.
- Re-order your CameraRoom in the Rooms folder to be the home room and run your game to test it.
Make objects follow the camera
You might want objects such as the healthbar or score to follow along with the player object as you move through a room with a view.
Use the following code on a Step Step event for the object you want to make follow the camera:
x = camera_get_view_x(view_camera[0])+20; y = camera_get_view_y(view_camera[0])+20;
Change the +20 at the end of each one to adjust where in the room you want your object to appear
To make a Draw event follow the camera
If you need a draw event, such as that used in your score object, see the score tutorial, to follow a camera, you will need code like the following inside the draw event:
//set variable to track the current x and y co-ordinates of the viewport var vx = camera_get_view_x(view_camera[0]); var vy = camera_get_view_y(view_camera[0]); draw_set_color(c_red); //apply the variables to the draw event draw_text(vx + 40, vy + 60, "Score: " + string(global.pscore));