First, download these workshop assets.
Intro to Stencyl
Stencyl is a free, visual game-making tool where you’re literally snapping logic blocks together. There’s no need to learn how to code but it makes things easier if you understand at a high level what the concept of an “if” or “loop” is. We’ll go over the concepts briefly in this tutorial. Whenever you get stuck don’t hesitate to check Stencyl’s active community for suggestions and answers to questions. There are also lots of super useful resources in the StencylForge to download for free!
Create a New Game
Today, we’ll be creating a micro-platformer from scratch! This time, it’s Peach that’s going to save Mario! In case you didn’t know: a platformer is a game where the player has to typically jump over obstacles to advance forwards.
- Create a new game by clicking the dashed border box or by going to File > Create New > Game
- Choose “blank game” from the web tab at the bottom of the list.
- Name it “Rescue Mario”
- Set the size to custom: 800 x 600
Setting the Scene
After creating a new game, you’ll be taken to essentially an empty screen. It’s particularly a good idea to set up your game’s environment before diving into the good stuff. In Stencyl, the level or world is called a scene. Much like a movie you have one scene per area of action or level. So your title screen counts as one screen. Each level has their own scenes and so forth.
- Let’s start with our first and only level (you can add more later). Click on the dotted box in the center of your screen to create a new scene.
- Name it “Level 1”
- Choose any color background. We’ll be replacing it with an image later on.
Your screen should look like a blank canvas. Everything you’ll need to populate and adjust your level is located here. It’s best to work through it and discover where everything is by usage. We’ll start by adding in the background.
- Select “background” from the option bar located just above your canvas.
- Add a new background image pressing the “create new background” button at the bottom of the screen.
- Name your new background “dungeon”
- Import an image from our asset folder by clicking the dashed box. Press the add button when you’re finished.
- Finally, we can assign this new background to the scene via the green “attach to scene” button at the top right.
- Navigate back to the canvas by clicking “scene” from the option bar.
By default, background images are hidden. We can enable them by pressing the show background button next to the camera button. Sometimes the background image doesn’t show and we need to give Stencyl a little kick by closing the scene and re-opening it from the Dashboard. If that doesn’t work, double check to be sure you’ve attached the background to this scene. Adding floors This is a platformer so let’s add some platforms! To do this, we’ll need to import a tileset. Tilesets are images arranged on a uniform grid much like tiles in a bathroom floor. Floors and scenery is often grouped together into one big tileset image to reduce the amount of processing a game has to do. If you look to the right, you’ll see an empty box called your “palette”. Tiles and actors are located here. We’ll start by importing our floor tiles.
- Click the small plus to the right of the tileset box
- Name it “floor”
- Import the tileset from our asset folder by clicking the “choose image” button. Choose “tiles.png”.
- As you can see, our image is broken up into repeatable tiles. We have to make some adjustments to line up the blue lines with the black lines. Each of our boxes has a dimension of 32×32. Horizontal spacing: 2px / Vertical spacing: 2px / X Border: 2px / Y Border: 2px. When you’re done adding those values press “done”.
- We don’t want the blue color to show in our game. Set it as the color to be transparent by pressing the dark box at the top right and then clicking any blue spot in the image.
All our tiles have a solid square shape. If you click on any one of the you’ll see options to change this. So if, in the future, you import a tileset with some slopes you can easily set the solid area to a triangle! Save and close the “floor” tab. Now for the easy part! In our scene, the palette area is stocked up with our tiles. Drag and drop pieces of flooring into the canvas. You can see that each piece is totally separate from the other allowing you to essentially draw corners and fill in spaces with tiles. Add in the first row of tiles. There’s no need to fill in the rest one piece at a time. Use the fill bucket to quickly fill in an area with one tile.
It’s time to bring in our heroine! In your palette, select actors. An actor is anything that’s interact-able (ex: hero, bullets, item boxes, enemies elevators, etc).
- Click the dashed box to add a new actor
- Name it “Princess”
- Characters can have multiple animations. They walk left, they walk right, they jump up… Each of those has an animation. You can add them here in this screen. It’s almost the same steps as adding a background or tileset. Add a frame via the + button at the bottom left of the screen.
- Choose the “peach-left.png” image. You can either animated pictures as a gif or as an image strip (or sprite) like we have here. There are 5 walk frames to this animation so we specify 5 columns with 1 pixel of horizontal spacing between them.
- Don’t forget to choose the teal color as the transparent color! We don’t want that showing up in the game.
- Repeat these steps for the “Walk Right” animation using “peach-right.png”.
- We don’t walk Peach to walk forever so let’s add give her a sitting still state. Duplicate the Walk Left animation via the two overlapping squares button at the bottom of the screen. Rename it to “Idle Left” and delete all frames except for one of them. Repeat this for “Idle Right” with the “Walk Right” animation.
- We’re done with Peach’s animations for now. Switch back to the Save Mario tab. If you look under “actors” in the palette you’ll find Peach there! Let’s put her onto the scene!
Test out the scene! Do you see Peach walking in place?
Gravity & Physics
Peach is kind of just floating there which isn’t realistic of a platformer at all! Our game needs some gravity! Click the “physics” option button at the top. We want to add some vertical forces that push down on us forcing us to stay on the floor. Stencyl recommends 85.0 as a real world simulation. Enter in 85 and re-test your scene! Much better, no?
If you still have the Princess tab still open switch to it otherwise go to the dashboard > actor types > princess. You’ll find everything related to your game in the dashboard. Press the “behaviors” option button at the top. Behaviors are abilities you give to actors or scenes. That could be jumping, walking, running, keeping score, shooting bullets, etc. We’re going to give our Princess Peach the ability to walk and jump so she can leap up those platforms and save her beloved Mario!
- Press the “add behavior” button at the bottom left. You’ll see a window pop up with a bunch of predefined behaviors populating the “From Your Library” section. Stencyl is neat and comes with useful behaviors so you don’t have to code them.
- Select “Run & Jump” from the controls category.
- Set the controls to: Left as left. Right as right. And Jump as up. These will correspond to your arrow keys.
- Change the jumping force from 25 to 40.
- Change the max run speed to 20.
- Scroll down and assign each animation to the right action. Idle Left with idle left image, Run Left with Walk Left image, etc We don’t have any jumping animations so we can leave them blank.
While we’re adding behaviors. Let’s add another one so Peach doesn’t disappear off teh sides of the screen. Choose “Can Not Exit Screen” from the Motion category. Test it out!
Winning the Game
What’s a game without some form of winning? In this game, it’s when Princess Peach rescues Mario!
- Start by putting a Mario actor into the game like we did with Peach. Dashboard > Create New Actor > “Mario”. Add in the one Mario image.
- Open up (or switch to) the Rescue Mario scene. Let’s make it a little challenging by placing Mario at the top of a platform. Add in tilesets to form a stair arrangement of platforms.
- Grab Mario from your actors’ palette and put him at the very top.
For this next part, we’re going to get our hands dirty with a little Stencyl-style programming. This involves literally snapping logic blocks together.
- In the dashboard, navigate to “scene behaviors”. Click the dashed box to add a create one.
- Name it “Win Condition”
- In this screen, you can see all the logic blocks on the right categorized by functionality. It’s a little daunting but with some experience and understanding of high level logic you’ll be snapping blocks together in no time!
- In order to win our game, Peach has to reach Mario. This means she has to touch or collide into him. We can check for this by creating a new event: Add an event > Collision > Type – Type We’re checking specifically if an actor of type Peach collides into an actor of type Mario. Nothing else, hence why we choose type – type specifically.