Scenes define what the player sees on their screen. Generally, we create a new Scene for each new “world” the player sees. For our platformer game, we’ll have a few scenes:
- A simple title screen, shown to the player before the game is started;
- Three levels;
- A “Game Won” screen;
- A “Game Over” screen.
Title Scene
Let’s start with our simplest scene – our title scene.
Navigate to the “Scenes” sidebar item in the freestyle editor dashboard. Every new game contains a single, empty scene called “Default Scene”, just like you’ll see here.
The default scene (designated by the star in the upper right) is the scene that’s shown first when a game is played or previewed. It’s the jumping off point for the rest of the game.
For our platformer, we’ll repurpose this default empty scene to be our Title Scene. Click on the three vertical dots that appear next to the Default Scene, and click “Rename Scene”.
Enter “Title Screen” as the scene’s title. Now, click on the scene to open the editor. You’ll see an empty scene in Freestyle’s editor.
Background Image
Let’s add our background image to our title scene. Click the blue (+) button on the lower right to add a new object to our game. In the menu that opens, select “Element”.
A list of all of our game’s Elements will appear. Scroll in the popup, then click Background Image to select it, or start typing “background” into the search box and use your keyboard and the enter key to select the background image element.
Now, you’re in placement mode. When you click anywhere on the canvas, you’ll place an instance of the Background Image Element there. The blue rectangle around the white canvas represents the borders of the default game screen. We want to place our background image so that the blue rectangle is completely covered – and so the interesting design elements, like the mountains, are visible.
Tip: You can hold down the Shift key when you’re placing or moving an Element to switch to Snap to Grid mode, which will make sure the object aligns with the visible grid.
For our game, I used snap to grid to place the Background Image Element so that it’s top-left corner aligns with the game’s top-left corner.
Once you’ve placed on Background Image, you’re all set. Click on the red (x) – where the blue (+) used to be – to exit insert mode.
Title Text and Play Button
Now we need to add our title text and play button. To achieve that, we’ll create a new layer to keep things organized. To create a new layer, click the plus button next to any existing layer.
Layers help us maintain the visual hierarchy of our game. Our games are rendered layer by layer – so an item on a higher layer will appear on top of an element on our lower layer. We want to be certain that our title text and play button appear above our background image, hence placing them on a new layer.
After you’ve created a new layer, make sure to click on its name in the sidebar to select it. To confirm the layer is selected, double check that it’s highlighted blue in the sidebar.
Now, click the blue (+) button in the lower right of the editor to add a new Element, and select “Game Logo”. Place the game logo as you wish – I’ve placed it in the center of the player’s screen (identified by the rectangular blue border).
Then, repeat this process to add the Play Button element. When you’re done, your scene should look something like this.
Repositioning or Editing Elements
If you need to reposition one of your elements, you can do so by clicking on it and dragging. Selected Elements are highlighted blue in the sidebar and have an orange border around them in the game editor.
When an Element is selected in your game, you can edit its properties in the new pane that appears in the layer sidebar.
Using these menus, you can:
- Rename the element instance within the scene, so you can find it in the layer sidebar or in behaviors more easily;
- Change the variant of the element that’s initially shown;
- Change the position of the element;
- Anchor the element (so it doesn’t move if the camera moves);
- Resize the element by editing its scale;
- Flip the element on either axis;
- Set the element to be hidden when the scene initially starts.
We’ll use several of these options in our future scenes. For now, though, we can move onto our first level once you’re satisfied with your title screen’s layout.
Creating Our Other Scenes
Return to the freestyle editor dashboard’s Scenes tab, and create a new Scene. Name it “Level 1”.
Repeat this process to add the other scenes we’ll need for our game:
- Level 2
- Level 3
- Game Won
- Game Over
Our First Level
From the freestyle editor dashboard’s Scenes tab, Click on the “Level 1” Scene to open the scene editor–you’ll be greeted by an empty scene.
Building a Scrolling Level
Our levels are wider than a single screen, and require the camera to move as the player does. As a first step in making that happen, we’ll add multiple copies of our Background Image Element to a special layer in our game, the Background Layer. The Background Layer is always rendered first (so everything in the game is on top of it), and there are various Behaviors that use the Background Layer as a means to determine how much the user’s screen should scroll, for instance.
By default, the freestyle scene editor is zoomed in to the size of a single player screen. You can slide the blue bar at the bottom of the editor to zoom in and out.
Let’s zoom out so that we can place our background images for our side scrolling level. Zoom out until you can see another screen width.
To pan in the editor, you’ll need to switch to pan mode. Click the white hand in the lower left-hand corner of the editor to switch to pan mode. Your cursor will change to a hand, and the pan mode button will turn blue. When the editor is in pan mode, clicking anywhere in the editor no longer select the Element under your cursor. Instead, you can click and drag to move the editing window. Click on the blue pan mode button to exit pan mode – the button will turn white again, indicating that you’re no longer in pan mode.
Enabling Camera Movement
To enable camera movement, we need to turn on a setting for our scene. Click on the gear in the lower right hand corner of the scene editor to open the scene’s options. Click on “Enable camera movement” to turn on camera movement.
Adding Our Background Images
Let’s add our background images, which the game will use to determine how far the player and camera can move as they play our game.
First, make sure that our “Background Layer” layer is selected in our layer sidebar. “Background Layer” is a magic layer in freestyle which several behaviors and game engine features use.
Click the blue (+) button in the lower right and add a new Element. Select “Background Image”, and place three copies of our background image next to each other. You may need to use the pan mode button to switch to pan mode so that you can place all three. When you’re done, click the red (x) – where the add object (+) button was – to exit insert mode. Your level should look like this:
Adding Our Ground
Next, let’s add our ground. Create a new layer by clicking the plus button next to an existing layer.
Name our new layer “Ground”. Click on the Ground layer in the sidebar to select it – it should turn blue in the sidebar.
Now, click the blue add object (+) button and add a new Element. Select our “ground” element, and place the ground all along the bottom of our game. Leave some gaps for water, which the player will need to avoid. The ground elements should align with the bottom of the background images – that way, the camera doesn’t pan below our ground.
Tip: You can hold down the Shift key while you’re placing Elements, and they’ll snap to the grid–making it much easier to make sure all of our ground elements align.
Make a mistake? No problem. Select your incorrectly placed element by clicking on it in the editor (make sure you aren’t in pan mode or insert mode), or by clicking on it in the layer sidebar. Then, click on the three vertical dots next to the element in the layer sidebar, and choose Delete.
When you’re all done, you should have a ground layer spanning your level – with a few gaps for water.
Adding Our Water
Create a new layer and name it “Water”. Be sure to select it in the sidebar! Now, add another Element to your game. Select your water Element and place it in the gaps.
Adding Our Platforms
Create a new layer and name it “Platforms”. Select it in the sidebar. Then, add another Element to your game. Select your platform Element and place your platforms above the water, so the player can jump over the water.
Adding Our Coins
Create a new layer and name it “Coins”. Select it in the sidebar. Then, add the Coin Element to your game. Scatter a few coins around your level. Your player will be prompted with a question every time they collect a coin, so don’t overdo it.
You might notice that our coins are a little large:
To fix that, click on each coin in the layer sidebar. In the Object Properties box that opens at the bottom of the sidebar, scroll down to “Scale”, and adjust the scale to your liking.
I like 0.3 as my scale for my coins. After you re-scale the coins, you may need to click on them in the editor and drag them to a better position.
Adding our Goal
Now, add a new layer called Goal, and make sure to select it. Place our Flagpole Element at the end of our game level, and adjust its scale as you wish – I used 0.5.
Now, click the add object button (the blue (+)) and add a new Region. Regions are special areas in freestyle. They’re invisible to the player, but we can detect when an Element enters them and make the game react accordingly. We’re using a region for our goal area because our flagpole is so tall: we don’t want the game to advance levels until the player touches the bottom of the flagpole.
Draw your new region over the bottom of the flagpole. Edit it in the sidebar, and rename it to “Goal Region” so we can find it easily when we’re setting up our behaviors.
Adding Our Player
Create a new layer and name it “Player”. Be sure to select it. Then, add your player Element at the beginning of the level. Place the Player a little above the ground. That helps us avoid accidentally placing the Player inside the ground, where they’ll get stuck. Gravity will place them firmly on the ground when the game starts.
Our Player Element, the Blob, is a little oversized, so let’s adjust his scale. I used 0.5.
Extra Credit: Decor
All the essential parts of our game are now in place. For the overachievers, create a new layer named “Decor” and move it below the Player layer so that our player always appears on top of it. Using our Decor element, add a few flowers, trees, and bushes to our game. Adjust the scale and the selected variant for your additions until you’re satisfied.