When you’re creating a new game, start by thinking about the pieces that you need to make up the game. For most games, that’s going to be a variety of Elements: background images, the Element your player controls (usually with multiple animations), and the objects that make up your world. Often, you’ll find one or more game kits available online that you’ll assemble to make up your game.
If you need ideas for where to find game kits, post in the medley creators lounge with some details on what you’re looking for, and we’ll be happy to share our favorite resources.
To make your first game creation experience go smoothly, we’ve created a game kit just for you. Before we get started, download that game kit below.
Because medley is a premium content marketplace, we aren’t able to approve games for publication that are made with this game kit – otherwise, we’d end up with dozens of games that all look and play the same. This game kit, and our sample game, is here to teach you how to use freestyle quickly.
Planning Our Game
We’re going to build a side-scrolling platform game, just like many classic arcade games. The player will navigate through each level, avoid obstacles, and collect coins (after they answer a question). To do that, we’ll need a few different Scenes:
- A Title Scene;
- At least one Gameplay Level;
- A Game Over scene, in case the player runs out of health;
- A You Won scene, for when the player completes the game.
Each of these scenes will require a few different Elements:
- Our Title Scene needs:
- A background image (which we’ll share with at least one of our Gameplay Levels);
- A logo for the game;
- A “Play Now” button;
- Our Gameplay Level needs:
- Our player (with multiple animations – one for walking, one for standing still, one for jumping, and one for when they’re hurt);
- Our “ground”;
- Platforms, for the player to jump on;
- An obstacle for the player to avoid;
- A finish line for the player to cross;
- Coins for the player to collect;
- Icons for us to use to display our player’s health;
- Our Game Over and You Won screens need:
- A background image (which we’ll borrow from one of our Gameplay Levels);
- A button to Try Again or Start Over.
We’re going to upload all of these Elements now, so we have them easily accessible when we begin to wire up our game.
Adding Our First Element: Our Player
Let’s begin by adding our player. Select the “Elements” item in freestyle’s left-hand sidebar. You’ll see a screen that tells you that we don’t have any elements (yet).
Click “New Element” in the upper right, and name your new Element “Player”.
Your Elements list will now show your new Player Element. Click on it to open the Element editor.
What’s a variant?
When you open the Element editor, you’ll notice the “Variant List” in the left-hand sidebar. Variants are a key part of the freestyle game building experience. Each variant represents a different version of the same Element. Some Elements, like our Player will have different Variants for each animation. Other Elements will use Variants to represent different “styles” of the same type of item: platforms have end and middle pieces, for instance. If you’re creating a game that includes enemies, you might use one Element to represent any enemy, and use different Variants to represent different art styles.
Variants empower you to use different art in your game, or even to change the art in your game, without needing to redo or repeat your game logic and behaviors.
Creating our Player Variants
Our player will have four variants:
- Idle, for when the player is standing still – their default state.
- Move, for when the player is moving. The behavior we’ll use to make the Player move in our game only requires us to upload a version of the player that’s facing to the right, and will automatically flip the image for us if we’re moving to the left.
- Dazed, for when the player is hurt.
- Die, for when the player runs out of health.
Let’s create them now.
Idle Variation
Under “Variant Settings” in the middle pane of the Element editor, change the “Variant Name” to “Idle”. Make sure that Set as default variant for element is set to Yes, and check Variant is Animated. You can leave the animation frame duration at its default value, 100 milliseconds (one tenth of a second): that’s a good default for most animations. Finally, since we want our Idle animation to repeat itself – it shows our Player blinking while it isn’t moving – check Loop animation. Your settings should look like this:
Now, we’re going to upload the animation frames for our “Idle” Variant. Within the assets you downloaded, those frames are in the Art/Player/Idle folder. Click the “Upload Frame” button to upload the images for the Idle animation.
To save time, you can upload all of the images in the Idle folder at once. To do that, navigate to the Art/Player/Idle folder, and then select all images by pressing Command + A on Macs and Ctrl + A on PCs.
Then, click “Open”, and your files will begin to upload. Don’t switch to another tab or program while images are uploading, or some uploads may fail. It’s not safe to leave while you see this screen:
After all of the Idle variant images are uploaded, the uploading screen will disappear, and you’ll see the Frames on the Variant page.
Though our images are already in the right order, you can delete or reorder frames by hovering over the frame if you need to.
Move, Die, and Dazed Variants
Now, you’re going to create the other 3 variants for the Player: Move, Die, and Dazed. Those images are in the Art/Player folder, too – each in their own subfolder – and you can upload them in the exact same way.
To add a new Variant to an Element, click “Add Variant” at the bottom of the Variant List sidebar in the Element editor. After you add a new variant, click on it in the sidebar (it will be named “New Variant” by default). Then, for each Variant:
- Change the Variant name;
- Check “Variant is animated”;
- For the Move Element, check “Loop Animation”. For the Die and Dazed Variants, do not check “Loop Animation”.
- Then upload the frames for that Variant.
Go ahead and repeat this process until the Move, Die, and Dazed Variants are uploaded. Your Element will then look like this:
Setting up Collisions for our Element
When we create a new Element, it’s treated like an image in our game. Nothing will happen when the Element touches another Element, nor will it be impacted by gravity.
For our Platformer, we want our Player to be able to collide with objects like coins, and to be impacted by gravity when we jump. Let’s set that up now.
Configuring our Player’s Hitboxes
freestyle uses “hitboxes” to determine where the edges of an Element are so it knows when it collides with something. We specifically define hitboxes in case the visible parts of an Element are smaller than the image that we uploaded, or in case we only want collisions to effect a smaller part of our Element.
To setup a hitbox for our Player Element, click on “Hitbox” at the top of our Player Element editor. Check “Enable Collisions for Element”. You’ll then see the hitbox editor:
In the case of our Player blob, the image we uploaded is considerably larger than the actual visible area for the Element, so we need to resize the hitbox. Click and drag on the squares in the corner of the blue hitbox outline to resize the Element’s hitbox.
Adjust the hitbox so that its outline is right on the edge of the blog.
Then, click “Apply to All Variants” in the lower right-hand corner of the editor. This copies this hitbox’s size to all of the other variants on this Element. This creates consistency between Variants, which avoids some weird gameplay issues, and also means that you don’t have to tediously adjust all four of them yourself.
When you’re creating your own game, you’ll need to enable collisions and setup hitboxes for every Element that expect to physically interact with another Element. In other words, if it matters if an Element touches another Element in the game, add a hitbox!
Collision and Physics Settings
Last, we need to configure the Collision and Physics settings for our Element.
Click on the “Collision” tab. We want the Player Element to be both Solid and Movable, so check both options.
- A Movable Element can be moved. When we play our game, we’ll move the Player with our keyboard or touch screen, so it needs to be Movable. An Element might also be Movable if the game needs to move it, like an enemy that wanders around or a ball that bounces if the Player hits it.
- A Solid Element can’t be passed through by another Element. Our Player shouldn’t move through any other Elements in the game – we want it to stand on the ground and on platforms, be hurt by water, and collect Coins – so mark it as Solid.
Finally, click on the “Physics” tab. Check This element is affected by gravity. Our Player can jump, and needs to fall after they jump – which gravity will take care of us.
We’re done creating our Player Element! Close the “Player” tab and return to the freestyle editor dashboard.
Adding Our Title Screen Elements
Next, let’s add the Elements we need for our title screen:
- Our game logo;
- Our play button.
These Elements are considerably simpler than our Player Element: each only has one Variant, and neither has a hitbox.
Game Logo
On the “Elements” page of the freestyle editor dashboard, click “New Element”, and name this Element “Game Logo”.
Open the Element, then upload the game logo image as a new frame. That image lives at Art/Title Screen/Platformer Logo.png. You can leave all of the other settings as they are, so when you’re done, your Element will be setup like this.
Game Play Button
Return to the “Elements” page of the freestyle editor dashboard, click “New Element”, and name this Element “Play Button”. Upload the image located at Art/Title Screen/Play Now.png, and leave the other setting as they are.
When you’re done, your game will have three elements all ready to use.
Creating World Elements
Now, we’re going to set up the Elements we need for our world:
- Our background image;
- Our “goal” flagpole, which represents the end of the level;
- Our decor: some grass and bushes, which we can use to decorate.
- Our coin, which our player will collect;
- Our ground;
- Our platforms;
- Our water, which the player will be hurt by when they touch.
Background Image
Create a new Element called “Background Image.” Upload the image located at Art/World/Background/background_example.png as the Element’s single frame. Leave the rest of the settings set to their defaults.
Goal Flagpole
Create a new Element called “Flagpole”. Upload the image located at Art/World/Flag/flag.png as the Element’s single frame. Go to the Element’s hitbox tab and enable Collisions, then configure the Flagpole’s hitbox. For this image, the default hitbox – based on the edges of the image we uploaded – are correct. Go to the “Collisions” tab, and enable “Element is Solid”.
Decor: Grass and Bushes
Though optional, these non-interactive elements will make our game look considerably nicer, and will give us a way to make each level in our game feel distinct. We’re going to use a single Element to hold all of our Decor. Each Decor item – our trees, grasses, and bushes – will each have their own variant containing one frame each.
Create a new Element called “Decor”. Upload each image in the Art/World/Decor directory to a unique Variant within the Element. Leave the rest of the Element’s settings as their defaults, since all of our Decor is just decorative: the player doesn’t interact with it. When you’re done, this Element will have 10 variants: 3 bushes, 4 flowers, and 3 trees, like in the screenshot below.
Coin
Create a new Element called “Coin”. Upload all of the images in the Art/World/Coin directory to the default Variant for our Coin Element. Mark the Variant as animated, and set the animation to loop. When you’re done, your coin will look like this:
Now, go to the “Hitbox” tab and enable Collisions. The default hitbox, which matches the edges of the image, is correct, so we don’t need to adjust it. Leave the other settings as default.
Ground
Create a new Element called “Ground”. We’re going to create three Variants of our Ground: Middle, our default Variant (rename the original Default Variant to “Middle”); Left, and Right. Upload the three images in the Art/World/Platforms/Ground to the Element: each Variant will have one frame. The file names match the Variant that each image should belong to.
On the “Hitboxes” tab, enable Collisions, and double check the default hitbox. It will match the edges of the image, which is also correct for the Ground images we’ve provided, so we don’t need to adjust it.
Finally, go to the “Collisions” tab and mark the Element as Solid. Leave the other settings as-is.
Platforms
Create a new Element called “Platform”. Our process here matches what we just did for the Ground Element. Create three Variants: Middle (our default), Left, and Right. Upload the three images in the Art/World/Platforms/Island directory to the Element: each Variant will have one frame. The file names match the Variant that each image should belong to.
On the “Hitboxes” tab, enable Collisions, and double check the default hitbox. It will match the edges of the image, which is also correct for the Ground images we’ve provided, so we don’t need to adjust it.
Finally, go to the “Collisions” tab and mark the Element as Solid. Leave the other settings as-is.
Water
Create a new Element called “Water”. On the default Variant, upload all of the images in the Art/World/Water directory as frames for that variant. Mark the Variant as Animated, and set the animation to loop.
On the “Hitboxes” tab, enable Collisions, and double check the default hitbox. It will match the edges of the image, which is also correct for the Ground images we’ve provided, so we don’t need to adjust it.
Finally, go to the “Collisions” tab and mark the Element as Solid. Leave the other settings as-is.
Hearts
Create a new Element called “Heart”. On the default Variant, upload the single image located in the Art/World/Hearts directory as a frame for the default variant. Leave the rest of the default settings as is. We’ll use this heart to show the player how many health they have left.
Adding Our Game Over and Game Won Elements
Now, try creating and uploading your own images to four new Elements:
- Game Over Text
- The text shown when a player “dies” and loses the game;
- Game Over Button
- The button that prompts the player to try again if they lose the game;
- Game Won Text
- The text shown when a player completes the game without dying;
- Game Won Button
- The button that prompts the player to play again if they win the game.
We recommend using Canva to create text and button elements for your game. If you’re not sure how to use Canva, post in the Creators Lounge – we’ll be happy to help!
Each freestyle game is 1920 pixels wide and 1080 pixels tall, so size your elements accordingly.
Up Next
Now we’ve created all of the Elements in our game. You should see all of them on the Elements pane of your freestyle editor dashboard:
Next, we’re going to add Sounds to our game – and then start wiring things up!