Search results for

All search results
Best daily deals

Affiliate links on Android Authority may earn us a commission. Learn more.

How to create an Android game with Stencyl

There are many ways to develop for Android, but Stencyl offers a free, easy to use experience. In this guide, we will be making a basic Android game.
By

Published onApril 6, 2016

StencylScene
There are many ways to develop for Android, especially if you want to make games. Here at Android Authority we have covered the Corona SDK, Unity3D for 2D stuff and GameMaker: Studio. All of these programs are great, but they are either have a high learning curve, like Unity, or are just plain expensive, as is the case with GameMaker: Studio. I wanted to make a very simple (and free) guide on how to make games for Android, and the best solution to this is Stencyl. Stencyl offers almost everything GameMaker: Studio offers while being free and just as easy. Android game development does not have to be hard or cost money. Let’s get started.

The User Interface

StencylBreakdown
The first thing is to download Stencyl here. Next is the Crash Course Kit from Stencyl, we will be using this direct download link. This includes everything needed to get started to make the game in this guide.

The user interface is split into three main parts, which are colored for demonstration purposes. Starting with the blue panel on the top, this is where some quick shortcuts are spread out. This includes the ability to create a new resource, save the game, change platform and test the game. Next is the green section, this is where all of the options will appear when working with a particular resource. In the picture above this space is being used to display all of the actor types in the game. Finally, there is the red panel, this is a lot more complicated than the other panels. This is where all of the resources and their respective options are held, as well as logic pieces like code. Here is a breakdown of each part:

  • Actor Types – Anything that can move or be interacted with is considered an Actor. This page includes the sprites, name, and any animations that are included with that particular instance. There are also options for collision boxes on a per sprite basis as well as physics control.
  • Backgrounds – Just like the name suggests, this is where any background images would go.
  • Fonts – This is a really nice feature. This option allows you to make a certain font, including type, size and color, that way you can just import a given font preset into a scene without having to configuring it over and over again.
  • Scenes – This is where you can make levels or “scenes” in this case. Here you can add any tiles, enemies, players and anything else to make the game run. You will need to name the scene and also define it’s size. Note: the size does not need to be the same as the dimensions defined for the game, with a fixed camera the scene can easily be bigger making a scrolling effect.
  • Sounds – This is where you can import sounds, supported formats are MP3 (for Flash) and OGG (for everything else). There is the option to pay the sound as well as edit the sound in an external editor of your choice, like Adobe Audition.
  • Tilesets – This is a collection of tiles that can be used in the scenes screen. Here you can figure notes for each tile as well as its collision configuration.
  • Actor Behaviors – If you click on this in Stencyl and click on any of the listed behaviors, you will see a bunch of options that can be set. This includes everything necessary to make the game work. Most are self explanatory and with some messing around you will quickly understand the ins and outs of the drag and drop system.
  • Scene Behaviors – These can include ways to spawn enemies, coins or the like. These are configured the same way as actor behaviors.
  • Code – This includes any scripts that may be needed. Scripts can do almost anything to the game and can prove to be quite helpful. This tutorial does not use scripts, however.

Drag and drop

StencylDragNDrop
Stencyl uses a drag and drop interface to make the logic in games. If you click on any actor behavior in this example you will see a big block of conditions and pseudo code that powers that behavior. This looks pretty intimidating but have no fear, all of this goes with your intuition. Everything is also color coded that corresponds to what part of the right-most toolbar that line came from. Speaking of that toolbar there are 13 different menu items you can click on with sub-menus and blocks that can be placed. A fantastic guide on all of this can be found on Stencyl’s site here. Stencyl also has the functionality to be used with straight code if you’re into that, and even if you aren’t, you can still look at the code (but not edit it) if you want to try and better understand what is happening. The programming language is a basic object-oriented programming language very similar to Java and offers infinite possibilities.

Creating a simple game

StencylGame
Open Stencyl and click “Click here to create a new game” then click “Crash Course Kit” and ”next”. If the “Crash Course Kit” does not show up go to File>Import Game and then import the kit. Type in a name and the game size, I used 1280×720 in a landscape orientation. Once the game is created you will be placed in the dashboard, where all of the magic happens, like we discussed earlier. Let’s move on to the next step.

Now you need to make groups, this will allow for collisions. The first thing to do is to open up the settings pane. This is in the blue panel labeled in the first picture. Then click on “Groups” on the left side. Click on “Create New” to make a new group, name it “Enemies” and make sure it collides with “Players” and “Tiles” (they will turn green if they are selected). Click OK.

stencyl-enemies-group-16x9

 

Now it is time to give the actors some behaviors. This will bring more life into the game and add some animations as well. What you need to do is go into the specific actor screen for “Noni” and “Clown” then select “Behaviors” on the top middle of the screen. Click in the middle of the screen and add the walking animation for Noni. Once added a screen will be presented that is asking for some animations. They are self explanatory and clicking them will enable you add the corresponding animations. Repeat this step (by clicking on “Add Behavior” on the bottom left) but now with jumping, make sure to add the key as “action1” to make the player jump and to add the jump sound from the drop down as well. We are not quite done yet as there are a few more behaviors we need to add, namely “Die in pit and reload” and “Stomp on enemies”. For “Stomp on enemies” choose the stompable group to “enemies” and the jump key to “action1”. The last one is “Die in pit and reload”, but there is nothing to configure.

Now moving on to the “Clown”. To find the “Clown” click on the Dashboard tab and make sure that “Actor Types” is selected.

StencylClown

The “Clown” is a lot easier to configure, with just two steps. Go to the “properties” tab in the “Clown” tab and change the group to “Enemies”. Next, go to the “Behaviors” tab and add the “stompable” behavior. From here, add the “Stomped” animation and add the “Stomp” sound. That’s it for the player and enemies!

The last Actors that need to be created are the buttons that will enable the player the be controlled by touch. These can be any design, but I opted for two arrow buttons and jump button. If you don’t want to design your own images then go to the StencylForge and download the “Virtual Mobile Button” pack under the “Actor Types” section.

The first thing to do is set up three new actors, “LeftButton”, “RightButton” and “JumpButton”. Go to the Dashboard tab, then “Actor Types” and finally click on the dotted box to “create a new Actor Type.”

Go to the “Virtual Mobile Button” click on the “Left” arrow and then click “Copy Frame” in the grey toolbar towards the bottom of the “Frames” section. Now go to the “LeftButton” tab, click the dotted box to “add an animation” and click “Paste Frame.” Staying on the “LeftButton” tab go to the “Physics” section and click the radio button that says “Cannot move”. This will make the button immune to the effects of the scene gravity. Repeat these steps for the right and jump buttons.

StencylLeftButton
The next few steps may get a little hairy, so read carefully and make sure you take your time… Next up is to go to the “Events” tab in the “LeftButton” screen. Click on “Add Event” an hover over “Input” and click on “On Actor”, this will place a little block on the right middle of the screen. Change the condition to “is pressed on” by clicking on the drop down menu just after “when the mouse” on the brownish block.

Go to “Attributes” on the upper right of the screen (near Flow, Scene, Numbers & Text) and click on “Game Attributes” just below that. Once there create a new game attribute. We actually need to make three, name them “move_left”, “move_right” and “jump”. Click on boolean for all three and set them to false by default.

You will see that there are three “Boolean Setter”. These are actions blocks that can be added to events to make things happen. The set move_left setter is used to set the flag (boolean) move_left to either true or false. What we want to do is set the appropriate boolean when once of the arrow icons is touched.

For the “LeftButton” take the two boolean setters for “set move_left to…” and “set move_right to…” and drag them into the brownish block and make a sandwich with the purple setters in between. Set “move_left” to true and the other to false. This means that when the left arrow is touched the flag move_left is set to true.

Make one more event and to the exact same thing as last time except this time make it when the mouse is released on and make both “move_left” and “move_right” false. This is the opposite of the event we create above. This time when the button is no longer being touched the move_left flag will be set to false. With these two events the flag move_left will be depending on whether the left arrow button is being touched.

stencyl-leftbutton-events

Now do the same thing for “RightButton” except make “move_right” true and “move_left” false for the mouse click. For “JumpButton” you will need to repeat these steps but you just need one variable, “jump”, set it equal to true when the mouse is clicked and “false” when the mouse is released.

That’s it as far as the button are concerned, now we need to modify the existing “Walking” and “Jumping” actor behaviors.

Open “Walking” under “Actor Behaviors” and click on the “Updated” event. This may seem a little overwhelming, but we only need to change part of two lines. The good news is that there are comments to help us out. Just under the comment “Walk Right” you will see an if statement. Just drag the condition (the green section) out of the if statement and delete it by right clicking and clicking “remove”.

Go under “flow” on the right side and look towards the bottom for “anything = anything” and drag that back into where the part you just deleted came from. Make sure you align it perfectly, it will snap into place f in correctly. Once in the correct spot, click the drop down and navigate to Boolean>Game Attributes>move_right click it. Next, move to the other drop down and navigate to Boolean>Comparison>true and click it. Do the same for “move_left” under the comment “move left” doing the exact same method.

Writing your first Android game using the Corona SDK
News

Once all of this is done move into the “Jumping” actor behavior. This one is much easier. Right under the comment “Jump” remove the FIRST condition in the if statement, do not remove the whole thing, remove everything just before “and”. Then drag the “anything = anything” block into that spot and set it to “jump = true”. That’s it! You will be able to make sure these work in the next step.

Next up, create a new scene by clicking “Scenes” under the “Dashboard” tab. You can name it whatever you want, something like “Level1” will do nicely. You can define the bounds of the room. You have the option to define the bounds by pixels or by tiles. This will depend on the use case of course, but for this example, I made the scene 1280×720. The last option is the ability to add a background color, I opted for a blue sky gradient. Hit “ok” when done.

Once the scene is loaded up you will see the scene and to right of it you will see everything that can be placed in the scene. Click on the grass tile and make a platform and then add the player (Noni) and then add some enemies (Clowns). Here you can also add all of the buttons in any configuration that you want. The last step is to add gravity so the actors fall back to ground if they are in the air. Go to the “Physics” tab in the scene and change the vertical gravity to “1000”.

Now the scene is completely set up! Click “Test Game” in the upper right to test the game on any platform that you’d like, although remember, you must have your Android device plugged in to test the game on the Android platform. You will also need the Java JDK 1.6 or higher, and the Android SDK is automatically downloaded when you try to run a game on Android for the first time.

Wrap up

There are many ways to make games on Android, but I have found that, for free options, Stencyl works the best. It is not too difficult to learn and making games with it is a breeze. The user interface is very easy to understand and with a little practice the events and pseudo code blocks are pretty easy to understand. If you have any questions feel free to leave a comment, let us know how you develop games on Android!

You might like