Creating Rooms In GameMaker Studio 2

Room Basics

A Room in GameMaker Studio is what you might consider as a level, town, dungeon or screen. For example, you might have a room that contains a title screen with options for "New Game", "Continue", etc. and then another room that contains that actual play area where your game takes place. In most cases your game is going to contain multiple rooms depending on what type of game you're creating. A game in GameMaker Studio is required to have at least one room.

Creating a Room

To create a room, find the node labeled "Rooms" in the resource tree, right click and select "Create Room". If you start typing immediately you can enter a name for your room. You'll notice that by default GameMaker Studio will create a room for you called room0. That's because in order for your game to be valid it must contain at least one room. You can rename room0 and use it as your starting point, adding rooms as you go.
Creating a Room with GameMaker Studio
Creating a Room with GameMaker Studio from the workspace
You can also create a room by right clicking in the workspace and selecting "Resources -> Create Room", or by pressing the keys "ALT + R" on your keyboard.

Room Properties

You can change the name of a room by slowly double clicking on the room in the Resource tree. By default rooms will be named room0, room1, etc. It is a good idea to use descriptive names for rooms, and most resources in your game, that include a prefix to identiy what type of resource they are. For example, if we were creating a dungeon we would use the name "rm_dungeon".
Naming a Room with GameMaker Studio

Layers and Layer Properties

The Room Editor in GameMaker Studio
If you double click on a room in the resource tree, GameMaker Studio will open the room editor for that room. It opens as a tab towards the top of the screen so you can switch back and forth between your workspace and various rooms.
By default, on the left hand side of the screen you'll see a few panels that allow you to manage various aspects of your room. I will note that you can actually drag these panels around to reposition them around the screen to match your workflow, but I'll talk about where they are by default. The top most panel is the "Layers" panel. You'll notice that by default each room starts with two layers, "Background" and "Instances". At the bottom of this panel is a series of buttons that allow you to create and manage your layers.
The layers panel for the Room Editor in GameMaker Studio
Adding a Background Layer to a Room in GameMaker Studio
The first button from the left allows you to create a new background layer. By default your background layer will be named "Background", but you can change their names by slowly double clicking on them in the layers panel. As with our other resources, it's importantly to be descriptive with your names. For example, if your background draws grass you might call your layer "lay_grass", or maybe "bg_grass". The reason why will be more obvious as you start writing GML to create your game, but you'll see that having a value named "lay_grass" or "bg_grass" makes it more obvious what your dealing with rather than just "Background" or "grass". As for prefixing all layers with "lay_" or "bg_", "in_", etc., one style isn't nessecarily better than the other, but it is probably best to pick a style and stick to it. Background layers are designed to display a default color or Sprite as the base of the room. Typically your background layer will be the bottom-most layer in the room, but you can actually arrange them in any order by dragging the layers up and down in the layers panel, or even have more than one background layer. Keep in mind that Rooms draw their layers bottom to top in the order they're displayed in the layers panel.
We're going to hop back and forth between the Layers panel and the Properties panel below it as I explain the different layer types. The properties panel will change based on the type of layer you have selected. If you select the background layer you'll see a number of properties that are specific to background layers. At the top you'll see a button that says "No Sprite". If you click this and select a sprite you can make the background layer do some interesting things with the sprite. Below this is an option labeled "Colour". If you select the box next to that you'll be given a color picker that you can select a color from. This will default the entire background layer to a specific color. If you select a sprite and a color, GameMaker Studio will apply the color to your sprite, which will kind of tint it to the color you select.
A tinted background layer in GameMaker Studio
Creating a tiled, animated background layer in GameMaker Studio
Below the sprite and color options are options for "Horizontal Tile", "Vertical Tile" and "Stretch". Horizontal Tile will force the sprite to repeat in a horizontal direction, where Vertical Tile will force it to repeat in a vertical direction. Using the combination together will tile the same sprite repeatedly across your background, so if you had a special grass sprite you could use these options to just draw grass across your entire background. The third option, Stretch, will take any sprite you select and stretch it to fill the entire layer. Below that are options for X Offset and Y Offset. This will allow you to position any sprite you selected relative to the top left corner of the screen. The next three options relate to creating an animated background. "Horizontal Speed" will move the sprite a certain number of characters left or right depending on if the value is positive or negative. "Vertical Speed" does the same thing in the vertical direction. By default the next option, "Animation Speed" will be locked to 15 frames per second. You can adjust this by clicking on the lock icon to unlock it, but I've found that typically you can leave it at it's default and then modify the horizontal and vertical speeds in conjunction with the animation speed of the sprite itself. As en example, the screenshot to the left shows you how you can quickly make an army march across the screen using just a few settings.
Back in the layers panel, the second button from the left is the "Create New Instance Layer" button. Instance layers are the layers where you'll be able to create instances of objects, such as the character your player controls or a group of enemies. You do this by selecting the instance layer in the layers panel, and then dragging an object from the resource tree over to the room editor. When you select a layer in the layers panel, the properties panel below it will switch to listing our all the instances in the layer. Instances on an instance layer are drawn in order from bottom to top in the order they are listed in the properties panel, meaning instances towards the top of the list will be drawn on top of instances below it. You can change the order by dragging instances up and down in the list.
Creating an instance layer in the Room Editor in GameMaker Studio
Creating a tile layer in the Room Editor in GameMaker Studio
Back in the layers panel, the third option from the left is is the button to create a new Tile layer. Tile layers use an assigned tileset to draw specific tiles on the layer. We'll talk more about tilesets in the tutorial on "TileSets". When you select a tiles layer, the properties panel will switch to display options relating to which tileset is being used to draw on that specific layer. For example, if you drew grass as the background layer, you might use a tile layer to draw a mountain range.
The fourth button from the left will create a new Path layer. We'll talk more about paths in tutorial on Paths, but the idea is that paths give us a route that we can make an object follow over time, so for instance, we might use a path layer to define a route for an enemy to follow. When we select a path layer the properties panel will switch to options relating to drawing paths. At the top there is a button for "Select Path" that will allow you to select a predefined path. You can also select a color for the path which will help you differentiate between different paths in the same room. The option for "Connection Kind" will determine if that path is used drawing straight lines or curves. Below that, the check box for "Closed" will determine weather the path's start and end point are automatically connected.
Creating a Path layer in the Room Editor in GameMaker Studio
Creating an Asset layer in the Room Editor in GameMaker Studio
Back in the layers panel, the fourth option from the left is is the button to create a new Asset layer. An asset layer is similar to a background layer in that it allows you to show a sprite in a room without creating an object. These sprites will have no events, they're just simple images. You can add assets to an asset layer by dragging an item from Sprites in the resources panel onto the asset layer in the Room Editor. The Properties panel for an asset layer will display all instances of assets that have been created in the layer. Just like on an instances layer you can drag intances up and down on the list to change the order in which they're drawn.
The fifth button from the left will create a new folder. You can use folders to organize layers into related categories. For example, you might keep all your instance layers inside a folder. To place a layer in a folder just click and drag a layer onto the folder. To rename the folder you can slowly double click on the folder just like with layers.
Creating a folder for layers in the Room Editor in GameMaker Studio

Room Properties

Persistent, Width and Height properties and Creation Code for a Room in GameMaker Studio
Below the Layers and Properties panel is the Room Properties panel. This contains options that will impact both the size of the room and the view that the player will see. The first option in the list, "Persistent" is important for certain types of games. What this means is that the room will retain it's state even after you leave the room, and the only time the room will reset automatically is when the game is restarted. This can be important for an RPG where you want treasure chests that have been opened to stay open when a player comes back, or a boss enemy that has been defeated to stay defeated. Below that are options for "Width" and "Height". This is the physical size of the room. If you don't set a viewpot as described below, adjusting the width and height of the room will change what the player sees, but we can constrain that using Viewports and Cameras. The last item in this section we'll talk about is the "Creation Code" button. This will open a code editor where you can perform specific actions each time the room is created, either when a room is launched at the beginning of a game or when we perform an action in code such as "room_goto_next();".
The next section relates to what are called Viewports and Cameras. This can be a little confusing, but a little demonstration will help us. The general idea is that Viewports and Cameras define what and how the player sees your game, so for example, if you have a room that's 4000x4000 you can use Viewports and Cameras to limit the area the player sees at one time to only an area of the room measuring 1280x720. To use Viewports and Cameras click on the heading labeled "Viewports and Cameras" to expand the settings, and then check the box for "Enable Viewports".
Enable Viewports for a Room in GameMaker Studio
Setting properties for Cameras and Viewports for a Room in GameMaker Studio
Below the "Enable Viewports" checkbox, youll see a label for "Viewport 0" You can technically use any of the viewports, but I find it easiest to start at 0 and use 1, 2, 3, etc. as we find a need for them. That majority of the time you'll use just one viewport, but you can use multiple viewports to do things like split screen gaming, cut scenes, or to display a distant location in the same screen as the primary view. Under viewport 0, you would check the box of "Visible" to enable that viewport. You'll see that this puts a white box around the visible area inside your room. Below that we have a options for "Camera Properties". The X and Y positions will be the default position in the room for the camera. The Width and Height control how much of the room the camera will display. Next we have "Viewport Properties". The X and Y positions for the Viewport should pretty much always be 0. YoYo Games says that anything other than this can cause strange results, and I haven't found a need to change them to find out. The Width and Height on the other hand can be very handy. In most situations I keep these values the same as the width and height of the camera because I intend to run most games a full screen at release. So if my game is intended to run at 1280x720 I'll set both the Camera and Viewport width and height to 1280 and 720 respectively. But when running in a windowed mode setting the viewport to something larger will actually change the size of the window that's displayed when you run the game, so you might change the height and width of the Viewport to 2560 and 1440 do effectively double the size of everything displayed in your game. Keep in mind this will stretch and skew things based on the ratio of Camera dimensions to Viewport dimensions, and having uneven ratios between the heights and widths can cause strange results.
The section below the Camera and Viewport properties relates to how the Camera / Viewport stays positioned. Under the heading "Object Following" you can select an object to force the camera to automatically follow. If your room is larger than the viewport, most of the time you'll have the camera follow the character object. Below that we have an options for Horizontal and Vertical borders. This is how many pixels there should be between the edge of the viewport and the object we're following. By default these are set to 32, but you can adjust them to get the camera to perform how you need. For example, in an RPG most of the time we want to keep the character centered on the screen, so you can set the horizontal and vertical borders to half the width and height of your room which will attempt to keep the camera centered on screen. The horizontal and verital speed options can be used to make the camera move in increments of a certain number of pixels. The default values of -1 will make the camera movement match the movement speed of the following object. Setting them to 0 will make the camera not move at all, but setting it to higher positive values can have some interesting effects. On example might be if you think back to the original Legend of Zelda, where you were dropped in the middle of a screen and then as you transitioned to other screens the camera would scroll in increments equal to the size of the room in the direction you were moving. You can create a similar effect to that using the horzontal and veritcal speed options as well as the setting low values for the border. Making it work exactly like the Legened of Zelda is a little more complicated, but that's the idea here.
Setting options for the Object Following in a Viewport in GameMaker Studio
Setting up multiple Viewports for a Room in GameMaker Studio
One other interesting example we'll look at is a use case for multiple viewports. As described above there are a number of reasons you might want to do this, one of which is split screen gaming. So as en example we might setup a room wth dimensions of 4000x4000. We'd place player 1 in the top left corner of the room, and player 2 in the bottom right corner of the room. Now let's say we want the display resolution that the players see to be 1280x720, but we want the left half to be player 1's view and the right half to be player 2's. For viewport 0 we'd set the width and height of both the Camera and the Viewport to 640x720 respectively and set the Object Following to the object for player 1. For Viewport 1 we'd check "Visible", and then again set the width and height to 640x720. For this one we'd set the Object Following property to player 2. If you run a game like this you'll see that you have two independently moving screens inside of the main screen.

Excercise

Download the resource file below, and using the provided resources complete the following steps.
  • - Extract the resources pack and open the provided GameMaker Studio project file.
  • - Rename the default room to "rm_demo_1" by slowly double clicking on the room in the resources panel. Open the room in the room editor by double clicking.
  • - Select "Background" from the layers menu. In the Layer Properties panel, click the area that says "No Sprite" and select "spr_fuzzy_right".
  • - Below that, next to "Colour", click the box and select a color, maybe a yellow or a red to simulate sun or fire.
  • - Check the boxes for "Horizontal Tile" and "Vertical Tile". Set the "Horizontal Speed" and "Vertical Speed" both to 5.
  • - Run the game by pressing F5 or clicking the run button in the toolbar. Verify that it looks like we have an army of "Fuzzy's" marching diagonally across the screen.
  • - Close the game. From the resource tree, right click on "rm_demo_1" and select "Delete" and click "Yes" to the confirmation box to delete the room.
  • - Create a new Room by right clicking on the "Rooms" node in the resource tree and select "Create Room". Rename the room "rm_demo_2".
  • - Rename the background layer to "bk_grass" by slowly double clicking the layer in the Layer panel.
  • - Rename the instances layer to "in_character_1".
  • - Add another instances layer by clicking the "Create new Instances Layer" button. Name the layer "in_character_2".
  • - Add a folder to the Layers panel by clicking the "Create New Folder" button. Name the folder "Instances".
  • - Move both instances layers into the "Instances" folder by dragging them and dropping them on the folder.
  • - Reorder the layers so that from top to bottom they are in the order "Instances", inside the "Instances" folder the layers are ordered "in_character_1" then "in_character_2", and then below the "Instances folder is "bk_grass".
  • - Select "bk_grass" from the layers panel. In the Layer Properties panel, click "No Sprite" and select "spr_grass". Check the boxes for "Horizontal Tile" and "Vertical Tile".
  • - Select "in_character_1" from the Layers panel. Drag an instance of "obj_player_1" from the Resources panel to the top left quadrant of the room.
  • - In the Room Properties panel, adjust the width and height to both be 2000.
  • - Under "Viewports and Cameras" check the box for "Enable Viewports". Under "Viewport 0" check the box for "Visible" and adjust the width and height for both the "Camera Properties" and "Viewport Properties" to be 1280 and 720 respectively.
  • - Under "Object Following", click "No Object" and select "obj_character_1". Set the "Horizontal Border" to 640 and the "Vertical Border" to 360.
  • - Run the game and verify that the background is populated and that you have a character that stays centered on the screen and appears to walk when you press the arrow keys.
  • - Exit the game. Select "in_character_2" from the Layers panel. Create a new instance of "obj_player_2" in another area of the screen, maybe the top right corner outside the box for the current viewport.
  • - In the Room Properties panel, find and expand "Viewport 1". Check the box for "Visible", set the width and height of both the camera and viewport to 640 and 720 respectively. Under "Viewport Properties" and "Camera Properties" change the "X Pos" of both to 641.
  • - Still under "Viewport 1", under "Object Following" select "obj_player_2". Set the horizontal border to 320 and the vertical border to 360.
  • - Back up under "Viewport 0", change the camera and viewport width's to 640. Leave the height set to 720. Change the "Horizontal Border" to 320.
  • - Run the game again. Verify that you have two separate viewports that follow two different characters. You can move the second character with the "A", "S", "D" and "W" keys. Try moving the two characters towards eachother so you can see how the viewports will overlap eachother and who both characters when they're next to eachother.

Further Research

  • - Try adding a third character to the game. Hint: Duplicate one of the player objects and select "Duplicate". In the step event of for your new character you'll need to change the keyboard_check() event to something like "keyboard_check(ord("J")). You'll also need a third viewpoint centered on this new character on a new instance layer.
  • - See the tutorial on Creating Sprites
  • - See the tutorial on Creating Objects