teachinTech


Layout, Layers, and Viewport

Some setup work is needed as you start a new game. In this activity we are going to create several new games with some initial setup work.

Turn In: Five capx files representing the five games initially setup in this activity.

This activity will create the initial layout of six different games and focus on the layout, layers, and viewport (window size).

Start Construct2 and create a new empty project and save the project as Driving1.

Zooming In/Out and Looking Around

Click on the View menu option then click on Zoom Out. Continue the View then Zoom Out until you can use your scroll bars and see the entire white box.

If you have a number pad on your keyboard press the - key on the number pad to zoom out and the + on the number key pad to zoom in. Some laptop keyboards have number pads. Some laptop keyboards have the number pad on the right side of the keyboard such that you hold the function key and press the letter with that key.

The other way to zoom in and out is to hold your Ctrl key down then roll your mouse wheel forward (zoom in) or backward (zoom out).

The View menu has an option to Zoom to 100% and you can also hold the Ctrl key and press the number 0 to zoom to 100%.

When zoomed out so that you can see the entire white area, you will notice there is a dotted line in the upper left corner of the white area. That dotted area is called the viewport or is the window size of the game. When the game is started, that dotted area is what the person playing the game will see. If they move down or to the right, eventually that dotted area can move down and to the right of the white area.

If this case, the layout of the game is larger than the viewport so some of the layout will be visible to the person playing it and some of it will not.

There are instances where we want the layout to be larger than the viewport and there are instances where we want the viewport and the layout to be the same size.

Notice that around the white area is a gray area which is called the margin. This is area off of the layout that you can place objects. The person playing the game will never see the margin. If you zoom out enough, you will see right angle lines in each of the corners showing where the margin is.

Layout

Left click once anywhere on the white area of Layout 1. On the left side, you will see the layout properties. Notice that there is a Layout Size and Margins. Click the + in front of Layout Size to see that the first number is the Width and the second number is the height.

For the Driving1 game, change the width to 1440 and the height to 2560. We want our driving game to be longer than it is wide.

Note: Layout size will be determined by the type of game and what type of device(s) will be playing your game. This determination will take research along with some trial and error.

Viewport (window size)

The window size (the dotted line visible to the person playing the game) is set on the Project Properties. From the Layout properties, click on the View link beside Project Properties. Alternatively, in the Projects window, click on the New project top level folder to see the project properties.

Window Size is also shown as width then length. Put in 720 for the width and 1280 for the length. This will make the visible playing area the top fourth of the layout. Initially, the person playing the game will see the left hand half of the layout and will see the top half of the layout.

Layers

Layers let the game developer separate different things in the game that should be grouped together. Doing this allows the game developer to hide some of the game items will working on other things or change the look and behavior of the items based on the layer they exist on.

For our initial games, we are going to change the current layer called Layer 0 to the name Background. Then we are going to add a Character layout. More layers may be added at a layer time when and as needed.

Find the Layer Bar which is usually on the upper right hand side of Construct2. There are tabs for Projects and Layers, click on Layers. If you do not see this, click on the View menu then make sure that Project Bar is checked.

Click on Layer 0 then click on the rename layer button (it looks like a crayon). Type in Background for the name. Then click on the "add layer at top" button which looks like a plus sign. The new layer will probably be named Layer 0 ... change the name to Characters.

Save your changes then pick Close project from the file menu.

Create 4 More Games

We are going to create 4 more games and configure the layout, viewport, and layers for each of those projects.

Create Maze1.capx with both the layout and the viewport (window size) of 320 by 480. The width is given first then the length. The Maze1 game will not involve any scrolling, rather the entire maze will be visible at all times. Rename the existing layer to Background and create a new layer called Foreground. Save your file and close the project.

Physics1.capx will have a viewport of 1024 by 768 and the layout dimensions of 1280 by 768. This will have some of the area to the right of the viewport available for game play. Rename the existing layer to Background and add a new layer named Characters. Save your file and close the project.

Platform1.capx's layout should be 1600 by 480 and the the window size should be 640 by 480. Rename the existing layer to Background then add an Obstacles layer and then add a Character layer. Save your file and close the project.

Create a MyGame1.capx file and use the dimension of your choosing for a game that you might want to create. Be sure to have at least two layers for your game. Save your file and close the project.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.