AMC2013 #FirstGame WorkshopAMC2013 #FirstGame Workshop

Posted on June 20, 2013 by Pixelles Montreal

!!!! First, download these workshop assets. Pictures coming soon!

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.

Adding Characters

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 as a real world simulation. Enter in 85 and re-test your scene! Much better, no?

Movement

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. In the first dropdown “Actor Type” choose the actor type “Princess“. And in the second dropdown choose “Mario“.

Our game needs to keep track on whether Princess Peach has saved Mario or not. Stencyl uses attributes to save values and keep track of things in a game. In this case, we’d use an attribute of type boolean to say “yes, she saved Mario — true” or “no, she hasn’t saved him yet — false”. Attributes can come in many types from numbers, text, booleans, etc.

Click on the attribute category.
Create a new attribute called “RescueMario” of type boolean.
Click on the setters option button and drag out the block. A setter allows us to store our true or false value inside the attribute. You’ll see that it somewhat resembles a puzzle piece.
Now, choose “Flow” from the categories and drag out a green, diamond-shaped block labelled “true“. Place it in “Set RescuedMario“‘s empty spot. You’ll see that it snaps right in!
Lastly, drag the blue block with our filled value into the yellow container.

Reading it, you’ll see it says: “when a Princess hits a Mario set RescuedMario to true”! The game needs to be alerted that the attribute changed from false (not rescued Mario) to true. To do this, we make the game always be checking to see if we rescued Mario.

Add a new event > basics > always updating
Click “Flow” from the categories on the right side
Drag out a yellow, “if” block and place it inside the “always” yellow block. An if statement basically says “if something happens, do this” (ex: if the cat is hungry, feed it!). In our case, we’re asking “if Peach rescues Mario, change to the win screen” — which we’ll add in shortly.
Select “Attributes” from the categories list
From “Getters“, drag out the blue “RescueMario” attribute we just made. A getter essentially gets the information from our attribute. Drop the attribute inside the empty space in our “if” statement. It should snap right into place!
Since we want our game to switch to a new victory scene when Peach Rescues Mario, click “Scene” from the categories list. A bunch of pink & yellow blocks should show up.
Click “Game Flow” from the options bar and drag out “Switch to and crossfade for 0 secs“. Snap it into the big, empty space inside the “if” container.

At the moment, we don’t have a Victory scene set up. Make one the same way you created your Level 1. In case you need a refresher:

Dashboard > Scenes > click on the dashed box to create a new scene
Name it “Victory“
You can select the background color as black or add in the same dungeon background image from the first level.

There is a win graphic you can put into the scene. Create a new actor for it the same way you did Peach and Mario. Here’s another refresher:

Create a new actor via the dashed box in the palette on your right sidebar.
Name it “Victory Image“
Import the “win.png” image as the one and only animation.
Drag the newly created Victory Image actor onto the scene.

Almost done! Go back to where you were coding the win behavior. It should be in a tab still open. If not, then go to your dashboard and open it from the scene behaviors section.

In pink block, there’s a dropdown selector for choosing a scene. Pick the newly created Victory Scene.
Set the crossfade for 1 second.
Now here’s the important part: at the top right side there should be a green button called “attach to scene“. Choose Level 1. If you forget to do this step nothing will happen when you test your game.

Test it out! Rescue Mario and win!

Bonus: Click to Restart Game

Naturally you want to play again! :D Go to your Victory scene or open it from the dashboard. Stencyl comes with this handy behavior already created so we don’t need to do anymore coding.

Once your Victory scene is open, choose “Behaviors” from the option bar at the top.
Add a new behavior
Under the game section, select “Switch Scene on Click or Touch“
Next, choose which scene you want to go back to. In this game, we’ll just go back to Level 1 (aka restart the game) so go ahead and pick it!

You’re done! Play your game over and over!

First, download these workshop assets.

Intro to Stencyl

Create a New Game

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

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.

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.

Adding Characters

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?

Movement

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.

Posted in Workshops