1300 CODE CAMP

#infinitepossibilities

Create your own ‘Flappy Birds’ with Code Camp Leap in just 12 steps!

This tutorial steps you through making your very first game using Code Camp Leap. You will use visual (i.e. drag and drop) coding to create a simple version of the classic ‘Flappy Birds’ game (click here to see an example game we built)


Step 1

Download All Files

(if you haven't already)


 

Step 2

Create a New Game

Open Leap and select New Game to open a pop up that allows you to name your game and alter other options.

Make sure the Code type is Block coding (drag and drop)

Keep the Grid size at 32 and 32


 

Step 3

Our First Scene

To begin making our game, we first need to create a Scene.
A Scene is like a level so for this game we want to make an Obstacle Course for our Leapy Bird to fly through.

Click the  +  next to Scenes and in the pop up, name the scene Obstacle Course. 
Make sure Cells Across is 100 and Cells Down is 15. 

Click Save and your scene will appear!

 

 

Background colour

Now is a good time to add some colour. Click the background colour button and pick your favourite colour for your obstacle course.

That's all for now, but we'll add more to our scene in the next steps.

 
 
 


 

Step 4

We Need a Hero!

Now that we have a scene, we need to make a hero to use it. In Leap, we call any character we make an Actor.
To create our main character, click the  +  next to Actors and in the pop up, name the new actor Hero.

Next we can choose what we want our character to look like by selecting click here to add an animation.
In the popup, find the Code Camp Leap game graphics folder on your computer (if you haven't dowloaded it yet, you can get it now by clicking here). Select an image you like – we'll be using this one of a dragon.

Since the image we picked has 4 dragons in it, we're going to make sure that columns is 4 and rows is 1. The lines that appear between each dragon let's us split the image into frames so that we can make an animation of the dragon flying once we click import.

 

The last step is to select each frame in the Choose animation frames section by clicking on the dragons in order from left to right. The animation that displays will be what your Hero will look like when you play your awesome Leapy Bird game!

 

 

Step 5

Adding Obstacles

Now let's turn the scene we already made into a real level! In the left sidebar click Obstacle Course and make sure you are in the Scene Design tab.

On the right side of the screen, select Tiles and click the  +  to add a tilesheet. In the popup, find the Code Camp Leap game graphics folder on your computer and select a tilesheet – we'll be using Cave. Select Import and now you'll be able to design your obstacle course.

Click on a tile you like and in the scene area click or drag your mouse to add it to the scene. Add tiles to the top and bottom of the scene to create an obstacle course for our Hero to fly through.

HINT: To delete tiles, click the hand icon and select the tiles you want to remove, then press backspace on your keyboard. To keep drawing, make sure you select the brush icon.
 
 

Remember to scroll to the right to make sure you add obstacles your entire level. Just use your imagination and be as creative as you like!

 

 

Step 6

Making Our Hero Move

Since we've made a cool obstacle course for our Hero to fly through, we need to add our hero to the scene. On the right side where your tiles are, select Actor and click and drag your Hero into the scene into some empty space before the start of the first obstacle.

 
 

Now we're going to start adding our code! 

Click on Hero in the left panel under Actors and make sure you're in the Actor Code tab. Next, select click here to add a code block. In the pop up choose When this actor is updated for Type and make sure the Name is Move. Click Add.

 


In the Code Deck on the right hand side, make sure Actor is selected and scroll down to Simple Movement, then click and drag Set x speed into the middle area. 

Where it says Speed, type in 200. This makes our Hero move at a speed of 200 to the right (can you guess which direction our Hero will move if we typed -200 instead?)

next.png
 

 

Step 7

Adding Gravity

In the left panel under Scenes, click on Obstacle Course and make sure you're in the Settings tab.
Type in 800 next to Gravity (Y)

Once you've completed this, if you haven't already, this would be a great time to save your game. Do this by clicking Save in the top right of the screen.

Screen+Shot+2017-03-17+at+4.39.40+PM.png

 

Step 8

Making Our Hero Flap

Click Hero in the left panel and return to the Actor Code tab.

Click on Add next to Code Blocks and in the pop up, make sure Type is When the scene is clicked and the Name is Flap. Click Add.

Similar to when we made our Hero move, we're going into the Actor section of the Code Deck and scrolling to Simple movement. This time, we are dragging Set y speed into the middle area and typing -200 where it says speed (note this is a NEGATIVE number). This code means that when you click your game (or tap on a touchscreen device) your Hero will move up at a speed of 200.

next.png

 

Step 9

Making the Camera Follow Our Hero

Remaining in the Actor Code tab, again we are going to click Add next to Code Blocks and in the popup select When this actor is created for Type and make sure the Name is Setup.

Next, in the Code Deck go to Actor (Basics) and drag Make camera follow to the middle area. This code means that when we move our Hero, the scene moves along with it.


 

Step 10

Crashing into Obstacles

Since this is a Flappy Bird style game, when our Hero hits an obstacle, they will have to restart the level.
To achieve this we are adding another Code Block for our Hero. Make sure Type is When this actor hits a tile and Name is Crash.

Now, in the Code Deck select Scene and drag Restart current scene into the middle area.


 

Step 11

Falling Off the Bottom of the Level

Our Hero also has to restart if they fall off the bottom of the level. This code is a little more complex than what we have added so far.

We start by adding another Code Block for our Hero. Type is When this actor is updated and Name is Fall off. In the Code Deck go to Logic (Conditionals) and drag If into the middle area. Scrolling to the Signs section of Logic, drag is greater than into the space between "If" and "then do the following". 

hero2.png

Now in the Code Deck move to the Actor (Position) section and drag Get y position into the space between "If" and " > ".

Next, select Scene and drag Get scene height into the space between " >" and "then do the following". In the dropdown, select pixels. Staying in Scene, drag Restart current scene into the space at the bottom of the If block.


 

Step 12

Play Your Game!

Select Launch in the top right of the screen and play your awesome new Leapy Bird game that you coded on your own!.