Introduction: Making a Mobile Game Without Coding

About: Appshed is an educational platform where students and teachers can learn App Building, Game Making and IoT/Robotics.

Game making can seem pretty daunting whether its using unity to create 3D games or hard coding games in languages like Java. Either way, you need a lot of experience behind you which isn't always fun for someone who's just starting off. So in this project, we are going to make a very simple platformer game (Like Mario) from start to finish.

Step 1: Getting Started

The platform we are going to be making our game in is called AppShed, this website has an App development environment made for easy use but also has the Phaser game engine built it which allows us to make apps that have games build it!

So to get started we are going to head over to AppShed and click on login (if you don't have an account you can register for free). At this point, you will be presented with two options, AppBuilder and IoTBuilder, because we want to make an app this time we are going to click on AppBuilder (check out our other projects to see how to use IoTBuilder to make an app that can control lights!)

Once you're in the AppBuilder you should be presented with a simulated phone, this is where we will be building our game. We start by clicking new app at the bottom of the screen which will then create a new, we can then give it the name "game".

Step 2: About the Game Engine

Now before we get too deep into the game making let's take a second to look at the underlying game engine that will help us make games easily. Its called Phaser and it runs on HTML 5 and Javascript, because of this it allows us to make and run games in our web browser.

Now if you know anything about Phaser you'll know that you still have to know how to code to use it. So for an absolute beginner, it really isn't ideal. This is where AppShed comes in, AppShed takes the Phaser engine and overlays a drag and drop, easy edit feature allowing us to make games without doing any coding

Step 3: Back to Making the App

So at this point, we have made our app and given it a name but our app is completely empty. To add our first game we need to click on modules and then search for "game" in the search bar. Youll then see a bunch of different options (these are all different games at different difficulty levels) we are going to click on Platform game (Phaser) as this is the easiest game to edit.

Once you click use you should see your app suddenly be filled with a bunch of images and names, these are all aspects of our game. Youll see there's a Pipe, character, platforms, and backgrounds which will later make up the world of the game. At the very top, you should see a big start game button, go ahead and double-click that to start the game.

Once the game is loaded you can use the arrow keys or click and drag with the mouse to move around. In the game, you should see the pipe, platforms and all the other aspects we saw in the previous screen.

Step 4: Editing the Game

So in the last step, we learned that all the images in the screen made up the world in the game so if we were to go edit these it would change things in our game.

So to edit these we left click on what we want to edit, so say for example we wanted to change the position of one of the platforms, we would do this by clicking on one of the platforms and then we click edit. Now we should see a text box with a bunch of values like X, Y, width and hight. If we wanted to change the position of the platform we would change the X and Y value and if we wanted to change the size we would change the width and height value.

So to move the platform we change the X value to 100 and the Y value to 70. Then we click save and try the game again, we should then see that the game looks different. We can change these values on all aspects of the game to make it more custom.

Step 5: Adding More

At this point, we have learned how to game engine works, how to get to these games and how to make the games more custom by resizing and moving things, now we are going to look at how to add more platforms and objects to our game.

The first thing we are going to do is go back to modules and search game again, in the file called "platform game Phaser" you should see the option to add another platform, we are going to click on this and then click use. Now you should see your game screen has 3 pipes but if we launch the game only 2 can be seen. This is because 2 of the pipes have the same x and y values which means they are overlapping, to fix this we just change one of the values and then all 3 can be seen.

Step 6: Getting It on Your Phone and Taking It Further

So now our game is ready to play, to get it onto our phones we click on publish followed by start, once this process is completed we click on share and then QR Code. This will present us with a QR Code we can scan with our phone that we put our game onto our phone. In a matter of seconds, the game is loaded and we can now play on our phone. To control the character you can either drag your finger across the screen or you can tilt your phone in the direction you want to move.

And just like that we've built a very simple game and put it on our phone. Now, this is one of the most simple games you can build but you can take it some much further than just a simple platformer game. Check out this space invaders game built it AppShed. Here

If you have any questions please feel free to leave a comment and we will get back to you