Building Mobile Games with Stencyl

Developing a cool game generally requires advanced programming skills. Stencyl provides a platform for creating games on iOS, Android, Flash, Windows, Mac or Linux without writing a line of code. It provides a simple drag and drop interface that will get you creating ideas faster. In this tutorial, we’ll take a sneak peak into what Stencyl is all about. During this tutorial, we’ll see how to add characters and scenes to a game and how to define their behaviours.

Stencyl’s engine is developed using Haxe and based on OpenFL which explains its multi-platform support. Stencyl is free for flash publishing and requires a license to publish on other platforms. Although games can be created without coding, you can still write code if you want or need.

Getting started

We’ll be using Linux for this tutorial. You can download Stencyl from the official download page. Once the download is complete, navigate to the extracted folder and start stencyl:

cd Stencyl
./Stencyl

If all works well then you should see something like the below:

Stencyl screenshot

When we develop a game, it will have a scene where things happens and actors who act their characters behaviours. Let’s start by creating our first actor and defining it’s behaviour.

You can download the final tutorial game from GitHub here.

Creating actors

To create a game either click in the middle of the screen or on the green Create a New Game button in the top right hand side of the screen. You will be asked what kind of game to create, select Blank game. Type a name for your game, for example HelloStencyl, leave the screen as default and click Create.

You will now be prompted to create a scene for your game. Name it MyScene and select a background color. Now, you can see two tabs, a dashboard tab and a MyScene tab. Click on the dashboard tab. In the left hand side menu, under Resources you can see Actor Types. Click on the create button to create a new Actor Type. Name it Popeye. An actor type has an animation, click to create one. Name this animation Popeye_Right. Here is an image you can use to add the animation frame:

Popeye

Here is how your screen should now look.

Stencyl stage

Save your work and switch to the MyScene tab. Towards the right side of the screen, you should see the Palette tab. Click it and you should see the Tiles and Actor tab. Click the Actor tab, select the Popeye image and place it on MyScene by clicking on the screen. Save your work and click on the Test Game button in the right upper corner of the screen. If all goes well, you should be able to see the game scene as shown below:

Popeye on the stage

Adding Events

Next, we’ll add some behaviours to our actor. With the actor selected, press the right arrow key, it should move forward and on pressing left it should move backward. Click on the actors’ object tab and select the Events tab. On the left hand side, there is a button to add an event. Clicking on Add Event will display a menu. From the menu select Input and from Input select Keyboard. Here is how the code block should look:

Code block

Click on Control, which will show Choose Control, clicking on that will ask you to select a control. Select right from the list of controls. Next, from the right side palette select the motion tab, select a second code block and drag it into the existing code block. Here is how it should look now:

06

Next we need to set the speed of motion to zero when the right key is released. So add a new keyboard event and set the code block as shown below:

07

Now, test the game by clicking on the test game link. On pressing and releasing the right arrow key the actor should move forward. Next we need to set the left arrow key press to make the actor move backward. So, add another keyboard event as shown below:

08

You will notice that it’s the same as the right key press event. The only difference is negate which helps the actor move backward on the x-axis. Also add the left key release event to stop motion on a key release as shown below:

09

Until now, we’ve created an actor for our game which moves backward and forward on left and right arrow key press.
Now, let’s create one more actor in our game and name it Bluto. Here is the image that I used:

10

After you have created the actor and set the above image as animation frame, switch to the MyScene tab and add Bluto into the scene as we added Popeye. Here is how your scene should look:

11

Now, try running the game. You can see that when Popeye collides with Bluto, Bluto moves out of the screen. That’s due to zero gravity.

Next, we need to create a real world scenario, lets add some gravity.

From the dashboard tab, click on scene, select MyScene and select the Physics tab. Set vertical gravity as 85 and test the game. This time both the actors fall down.

Let’s add a surface to our scene to prevent the actors from falling down.

Adding Tiles to a Scene

From the dashboard tab, select Tiles and click to create one. Name the tile and import an image for it. Here is the image that I have used:

12

Now switch to the MyScene tab. From the right side of the screen, select the Tiles menu, select a tile and click on the scene to create a wall. Here is how it should look:

13

Click the test game link and try running the game. While trying to move Popeye forward and backward you need to press the right/left arrows multiple times. This is because gravity is now set to emulate the real world. To make forward and backward movement happen without multiple clicks we need to disable and enable gravity when a key is pressed and released respectively. Here is how the code block should look after modification:

15

16

Now modify the code block for backward movement.

Conclusion

In this tutorial, we saw how to create a character, how to define character behaviours and how to create a scene. This tutorial shows how to get started with Stencyl and what we covered is just the tip of the iceberg. Stencyl is an wonderful tool to create great looking 2d games.

Stencyl is backed by an awesome community and you can find answers to many of your questions in their wiki.

Some of the images used in this tutorial are obtained from google image search.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.techillumination.in Jay

    Thanks for the feedback @Killhipsters:disqus . I haven’t tried Construct 2 …but will give it a try :)