Lesson 1 - Make Your First Game with Stencyl http://www.stencyl.com/learn/act1/

In this activity, you’ll create a simple jump and run game using Stencyl.

1 Get Started

● After launching Stencyl, open up Project 1.

(Can’t find Project 1? Visit http://www.stencyl.com/learn/downloads/ to get it)

● Click Test Game (in the top toolbar) to run the game. ● After the game appears, move the Hero around using the left/right arrow keys. ● After you’re done, close the game.

2 Build the Stage

● Open up the scene called Level 1. ● Now, you’ll see the level you just played. Doesn’t it look a bit empty? ● Play around with the editor by adding some blocks. ● After you’re done, run the game again and play through your level.

You may realize that the game isn’t fun because the Hero can’t jump. Let’s give him that ability.

3 Make the Hero Jump

● Open up the actor type called Hero. ● Flip to its Behaviors page. ● Click Add Behavior. (It’s at the bottom left as shown below)

 

● On the screen that pops up, pick FROM THIS GAME > All > Jumping. Then, click the Choose button. ● The behavior’s now added. You’ll now see a form with some customizable fields. Configure them as

follows...

Jump Key Jump

Jump Force 25

Jump Sound Jump

Jump Right Animation Walk (R)

Jump Left Animation Walk (L)

● Now, run the game again. ● Notice that the Hero can now jump! (Press the Spacebar) ● Hero can’t jump high enough? Experiment with the Jump Force field.

What did you do? You added a Jump behavior to the Hero. Behaviors grant new abilities to Actors, letting them do more than before.

4 Stomping Enemies

You may notice that jumping on top of the enemy does not kill it. Instead, our Hero just lands on top, and nothing happens. Let’s give our Hero the ability to stomp an enemy.

● Add the Stomp on Enemies behavior to our Hero. ● Configure the Stompable Group field to Enemies. ● Now, run the game and jump on top of the enemy. You can now kill him.

What exactly is happening here? Under the hood, the behavior is “listening” for collisions between the player and any actors that are considered enemies. When this happens, the enemy is killed.

Optional Activity - Draw the Score This optional activity will introduce you to drawing data to the game screen.

● Open up Level 1. Flip to its Events page. ● Use the Draw Text block under the Drawing category to draw the Score to the screen. What

does into those number fields? Experiment and see what happens!

● The “Score” block can be obtained from the Game Attributes page under the Attributes

category. It is called “Enemies Killed”

_______________________________

Congrats! You’ve made your first game. In the next lesson, you’ll learn how computers and games actually work. You’ll then write the code for a game entirely from scratch.

 

Lesson 2 - Logical Thinking http://www.stencyl.com/learn/act2/

In this activity, you’ll write a behavior that tells our hero to move in all 4 directions.

1 Get Started

● After launching Stencyl, open up Project 2.

(Can’t find Project 2? Visit http://www.stencyl.com/learn/downloads/ to get it)

● Run the game. You’ll see our Hero again, but he can’t do anything yet. Time to bring him to life! ● Close the game.

2 Constant Motion

● Open up the Actor Type called Hero. ● Flip to its Events page. ● Now, you’ll see a colorful page with blocks. This is where you’ll write your program that tells the Hero

what to do. ● First, let’s make the Hero constantly move towards the right.

Use [set x-speed] under Actor > Motion to set his speed to 10.

● Run the game. The Hero will move towards the right without stopping.

3 Press a Key to Move

● Now, let’s make the actor only move if the “right” arrow key is pressed down.

Use [control is down] under User Input. ● Run the game. Press the right arrow key to move the Hero. ● Oops! The actor doesn’t stop after you lift the key. What do you need to do?

Hint: Use the otherwise block.

● After fixing this problem, run the game once more.

 

4 Moving Left & Right

● Now make it so that the actor moves left if the “left” key is pressed down. ● Run the game. ● Does it work correctly, or is it not quite right?

Hint: Does the actor stop moving after you lift the left and right arrow keys?

5 Moving in all 4 Directions

● Finally, make it so that the actor can move up and down in addition to left and right. ● Run the game.

_______________________________

Congrats! You’ve written your first game from scratch. If you’ve finished early, try some of the extra activities. (http://www.stencyl.com/learn/extra2/) 

 

Lesson 2 - Logical Thinking - Extra Activities http://www.stencyl.com/learn/extra2/

I’m Trapped! ✭✭✭✭

Right now, the Hero can walk off the screen. Make it so that he’s not allowed to do that. Pretend that there is an invisible wall on all 4 sides of the stage.

Tip: Use the [set x/y] and [width/height of self] blocks.

Wrap Around ✭✭✭✭

In a retro space shooter game such as Asteroids, ships that go off one side of the screen appear on the other side. Change your Hero to behave like this.

Tip: It’s a similar solution to I’m Trapped! You do not need to make it so that if the Hero is half-way off the screen, he also appears halfway on the other side.

Ice ✭✭✭✭

In jump and run games such as Super Mario Bros, some surfaces are slippery. Even if you let go of the controls, the Hero will continue moving for a while before coming to a stop. Change the Hero to behave like this.

Tip: It has something to do with setting the Hero’s speed.

 

 

Lesson 3 - Events http://www.stencyl.com/learn/act3/

In this activity, you’ll add “coins” to the game and draw the score (number of coins collected) to the screen.

1 Get Started

● After launching Stencyl, open up Project 3.

(Can’t find Project 3? Visit http://www.stencyl.com/learn/downloads/ to get it)

● Run the game. ● Move the Hero around using the arrow keys. Close the game when you’re done.

2 Create a Coin

● Open up the Actor Type called Coin. ● Flip to its Events page. ● Add a collision event.

Can’t find it? It’s under Add Event > Collisions > Something Else

● Make the coin disappear when the Hero bumps into it. Then, play a sound.

Hint: Use the [kill] block under Actor > Properties.

● Run the game.

Does it work? If not, check over your work and see where you went wrong.

3 Make a Game Attribute

Game Attributes are variables that can keep track of values, such as the score. We’ll now create a game attribute to keep track of the game’s score.

● Go to Attributes > Game Attributes under the Palette. Then click Create New Game Attribute.

● Call it Score and click OK, leaving all the other fields as-is. Click OK again to dismiss the window. ● You’ll now see a pair of purple blocks appear in the Palette. These blocks let you get and set the

value of the Score attribute you just made.

4 Draw a Score

Next, we’ll draw the score to the screen using the Game Attribute you just created.

● Open up the scene called Level 1. ● Flip to its Events page. ● Add a drawing event. (Add Event > Basics > When Drawing) ● Use the [draw text] block (under the Drawing Category) to draw the score. ● Run the Game. Does it work? If not, check over your work and see where you went wrong.

5 Coin Collecting

Why doesn’t the score go up when you collect a coin? Because we never hooked that up.

● Go back to the collision event you made earlier under the Coin actor during Step 2. ● Write the code necessary to make the score go up. ● Run the Game. Does it work? If not, check over your work and see where you went wrong.

_______________________________

Cool! Your game now has coins and displays the score. If you’ve finished early, take on some of our extra activities to make your game even more complete.

Lesson 3 - Events - Extra Activities http://www.stencyl.com/learn/extra3/

Use a Font ✭✭✭✭

Currently, the score is drawn as plain text to the screen. Use the Pixely font (included in Project 3) to draw a prettier version of the score.

It’s a trap! ✭✭✭✭

Duplicate the Coin actor from the main activity and call it Fake Coin. When touched, this actor will subtract coins from your score rather than add to it. If your score goes below 0, keep it at 0.

Bonus Activity: Use the tint block to change the Fake Coin’s appearance, so it looks “evil.”

Timer ✭✭✭✭

Add a timer to the game that ticks down once per second. Display it on the screen. When the timer reaches 0, reload the scene.

Bonus Activity: Make a more authentic timer, displayed in X:XX format (for example, 1:30 where that means 1 minute & 30 seconds remaining) and use the Pixely font.

Save the Game ✭✭✭✭

Stencyl treats Game Attributes in a special way and uses them to “save” a game by remembering their values for the future. If you save this game, it will remember the value of the Score for a future run.

Tip: Use the [save game] and [load game] blocks to make the game keep track of the total number of coins you’ve ever collected.

Lesson 4 - Variables http://www.stencyl.com/learn/act4/

In this activity, you’ll take the motion logic you made in the previous lesson and rework it into a behavior that you can reuse and configure.

1 Get Started

● After launching Stencyl, open up Project 4.

(Can’t find Project 4? Visit http://www.stencyl.com/learn/downloads/ to get it)

● Run the game. It’s our Hero, but he can’t move!

2 Walking

● Open the Actor Type called Hero. ● Flip to its Behaviors page. ● Click Add Behavior and pick out 4WayMovement. ● Now, run the game. Notice that the Hero can now walk around using the arrow keys.

3 Add a Variable for the Walking Speed

Now, we’re going to modify the behavior, so that the walking speed can be adjusted using an attribute.

● First, open the 4WayMovement behavior. ● Flip to the Attributes category. ● Click Create an Attribute. ● Name it Walking Speed and set the type to Number. Click OK. ● This will make a blue block appear. This block lets you use this attribute in your code.

● Now, stick the blue Walking Speed block into the behavior, so that it represents the speed at which the character moves. Where do you think it goes? (Hint: It goes into 4 places.)

● Run the game. Huh? The character isn’t moving at all now! We’ll find out why.

4 Configure the Walking Speed

What did we forget to do? We forgot to configure the Walking Speed attribute. That’s why the actor doesn’t move because his speed is 0. Let’s fix that.

● Close and then reopen the Hero actor. ● Flip back to the its Behaviors page. ● Now, you’ll see the configuration page for the 4WayMovement behavior. Notice that we never

provided a value for the Walking Speed attribute we just added, so it started at 0. ● Enter in a value (such as 15) into the Walking Speed field and then run the game. ● Then, enter in a different value and observe how that affects his walking speed.

Mini-Challenge Suppose that we wanted to make confuse the player by making 4WayMovement act in reverse. Up would move down, down would move up, and so forth. Without changing the code for the 4WayMovement behavior, how could you accomplish this?

_______________________________

Your Hero now has a flexible walking behavior you can use to make him walk faster or slower. Put together everything you’ve learned so far to complete the extra activities. 

Lesson 4 - Variables - Extra Activities http://www.stencyl.com/learn/extra4/

Powerup! ✭✭✭✭

Make a powerup that when collected, will make the player walk twice as fast for a limited time (such as 10 seconds). On top of making a new behavior, you’ll need to use the [set attribute] and [get attribute] blocks under the Behavior category. They look like this.

Once you drag them onto the canvas, click the little dropdown arrow for the first field. This reveals a menu.

If you go to the Attribute Names entry (shown above), you will find 4 Way Movement and the Walking Speed attribute for it. Selecting these menu items will automatically fill out the blocks for you.

Fake Powerup ✭✭✭✭

Using the same behavior you just made, make a fake powerup that slows the player down for a limited time (such as 10 seconds).

Intro Title ✭✭✭✭

In some games, starting a level will display the name of the level at the corner of the screen before it flies off. Create a Scene Behavior that displays the name of the level (that varies for each level) that disappears after some time. You’ll want to use [draw-text], [do after N seconds] and a Text attribute. 

Lesson 5 - Artificial Intelligence http://www.stencyl.com/learn/act5/

In this activity, you’ll write some AI (artificial intelligence) for some enemies.

1 Get Started

● After launching Stencyl, open up Project 5.

(Can’t find Project 5? Visit http://www.stencyl.com/learn/downloads/ to get it)

● Run the game. You’ll see our Hero (who can move) and an enemy that does nothing.

2 Add an Enemy

● Open up the Actor Type called Enemy. ● Make it so that he will kill the player upon contact. (Hint: Use a Collision event) ● Run the game.

3 Follow the Leader

Make it so that the Enemy will constantly follow the Hero.

Hints

● Use the “push towards xDir/yDir” block and tell it to push sharply at 5 force.

● What information do you need to calculate this? You need to know the Hero’s position and the Enemy’s position.

● How do you get the Hero’s position? The Enemy doesn’t know this. Given what you’ve learned, is there a way to get the position? (Answer: Use Game Attributes)

You’ll find that it’ll take multiple tries to get this right. As always, we recommend coding a little bit and then running the game rather than trying to get the entire script correct at once. At the end, you’ll have an enemy that blindly follows the Hero. But what happens if there’s a wall between the Hero and the enemy? This AI is not smart enough to walk around the wall. The final challenge in this session will help you make a smarter AI.

4 Avoid

● First, drag out the blocks you just wrote and set them aside. We’ll reuse them in Step 5. ● Let’s now do the opposite of what you did in Step 3. Make the enemy avoid the player.

Improving an AI Making a simple avoid script requires a few simple edits. However, upon testing, you’ll find that the enemy can get stuck in one of the corners fairly easily. Using basic math, can you think of a smarter avoid AI that doesn’t fall into this trap? This is the subject of one of the extra activities.

5 State Switching

Our enemy is a bit boring. Instead of doing just one thing, let’s have the enemy switch between Following and Avoiding every 10 seconds. You’ll want to use the [switch animation] block and then modify the code, so that it runs the follow / avoid AI’s when those animation states are active. You’ll also need an event to perform the animation switches.

Hint You’ll be using the following blocks in your solution. Type in the animation’s name into the anim attribute field for the switch animation block, which in this case will be either follow or avoid.

_______________________________ Now that you’ve created some simple AI’s, put together everything you’ve learned so far to complete the extra activities, which involve creating more complex AI’s.

Lesson 5 - Artificial Intelligence - Extra Activities http://www.stencyl.com/learn/extra5/

Mirror, Mirror On the Wall ✭✭✭✭

Add a new AI to the enemy that makes the enemy “mirror” every move the Hero makes. For example, if the Hero moves left, the enemy will move right.

Bug Repellent ✭✭✭✭

In the main activity, you wrote up a simple “avoid” AI and probably noticed that the enemy can get stuck in one of the corners. Your task is to improve this AI, so that the enemy will avoid getting stuck.

Hint: Have the enemy maintain a certain minimum distance from the Hero. If this minimum distance isn’tmaintained, and there isn’t anywhere else to go, move towards the player to get unstuck until that distanceis reached.

Smart Enemy ✭✭✭✭

In our Follow AI, the enemy will head straight for the Hero, even if there’s a wall standing in his way. Modify the AI, so that it will figure its way around. You don’t need something foolproof, just something that will work better than the existing AI.

Hint: If an enemy gets stuck, have him move in a different direction, so he becomes unstuck.

 

Lesson 6 - Objects http://www.stencyl.com/learn/act6/

In this activity, you’ll add the ability for the Hero to fire projectiles and kill enemies.

1 Get Started

● After launching Stencyl, open up Project 6.

(Can’t find Project 6? Visit http://www.stencyl.com/learn/downloads/ to get it)

● Run the game. You’ll see our Hero and some non-moving enemies.

2 Create a Shooting Behavior

● Click Create New... in the top toolbar. ● Create a new Behavior (Design Mode, Actor Behavior) and call it Shooting. ● Click Attach to Actor Type and attach it to the Hero.

Build It Now, complete the behavior by programming it to do the following.

● Add a Keyboard event that fires when [Action 1] is [pressed]. (Action 1 = Spacebar) ● Play a sound. ● Create a Bullet actor in front of the Hero. ● Assign the Bullet an x/y speed based on the direction that the Hero was facing. (Hint: Base this

on the Hero’s animation state)

Tip: Build this behavior a little bit at a time and continually test it until it works correctly.

At this point, the Hero can shoot bullets, but these bullets don’t do anything when they hit an enemy. We’ll work on that next.

3 Enemy Health

● Click Create New... in the top toolbar. ● Create a new Behavior (Design Mode, Actor Behavior) and call it Health. ● Add a Number attribute called Health Points. ● Click Attach to Actor Type and attach it to the Enemy.

Build It

Now, complete the behavior by programming it to do the following.

● Decrease the actor’s Health Points (HP) when it’s hit. (Hint: Use a Collision event) ● When the Health Points is less than or equal to 0, the actor gets killed.

_______________________________

Before you test the behavior, open up the Actor Type called Enemy. Then, flip to its Behaviors page and configure the Health behavior, so that the enemy’s Health Points value is 3.

_______________________________ Upon running the game, you’ll find that it doesn’t work quite as expected. The enemy dies almost instantly. Why? How would you fix this, so that the enemy doesn’t die instantly?

_______________________________

Now that you’ve got the basics of this game working, try out our extra activities to build it out into a real game. 

Lesson 6 - Objects - Extra Activities http://www.stencyl.com/learn/extra6/

Health Bar ✭✭✭✭

Using a Drawing event inside the Health behavior, have it draw a health bar like this.

Bullet Limit ✭✭✭✭

Restrict the player to only being able to shoot a certain number of bullets (let’s say 5) at a time. In other words, at any given time, there should not be more than 5 bullets on-screen.

Hint: Use a game attribute.

Second Weapon ✭✭✭✭

Add a secondary weapon that you can fire with a different key. Restrict this weapon to having just 1 bullet on screen at a time, but make it do more damage.

Strike Back! ✭✭✭✭

Have the enemy randomly fire projectiles back at the player. Make sure that the projectiles are fired towards the player.

Strike Back Again! ✭✭✭✭

Now, make the enemy’s bullets follow the player but disappear when they touch a wall.

Ammo ✭✭✭✭

Add the notion of “ammo” and display this on screen. Add powerups for replenishing this ammo.