First of all to create a mobile app/game you need to decide what your game is going to be.
ZooomBlock is about a square hero (Zooom) who is trying to avoid as many obstacles as possible. While you avoid them, these obstacles get faster and start moving making it harder to keep playing.
So before you start programming you need to sit back and think:
- Who is your hero? Who is your main character? Is it a bird? A square? A balloon?
- What is his purpose? Does it have a goal? Is the goal to make a highscore? Is it to save a princess?
- How can your hero lose? By fire? Obstacles? Ice? Lazer?
- Why will your game be good? What makes your game addictive? You have to think of a way to keep your users hooked and make them want to play more and more of your game. Give them a reason to return.
ZooomBlock was not only created to give people the experience of a fun game but it was also built on a philosophy which is simplicity and that's what the game is based on. It's as simple as possible. You either go up... or down... You avoid the obstacles and *bling* you got a score, you don't avoid them and you lose! That way, ZooomBlock is light for the device (it doesn't take up more than 5 mb) and it gives you the sensation that you have to play a little more to make a better score!
Now let's get to the technical stuff!
I created ZooomBlock using the Android Studio and a game centered library called LibGDX (links bellow the article). I will explain the techniques I used to create ZooomBlock and not how to program in Java and use libGDX if you want to learn how to program there are amazing tutorials on YouTube.
First of all you need to know that a 2D game's graphics is nothing more than a bunch of images... It doesn't matter if it's a PC game, an iPhone app or an Android app, if it's 2D.... it's just images... These images are called Textures (if you follow any game programming tutorials that's what Textures are)
For example in ZooomBlock our square hero is a PNG image of a white square... The obstacles are a single 25 x 1000 px PNG image of white color. Up and Down buttons are images.
Even the themes are just different images on the same gameplay.
So before you start programming you need to create your graphics.
I created ZooomBlock's graphics using the free photo editing software called GIMP. If you are interested, there are also amazing tutorials on YouTube for GIMP, too.
THE MAP
The map of the game is the first thing you should plan and program.
EVERY game has at least one map. That "map" is called the Game World. The Game World is the entire map of the game. Your screen and the part of the Game World you see is just a window of that entire map. So you need to set something called an Orthographic Camera to specify which part of the Game World you want your players to see and later you can program the camera to follow your hero inside this Game World if that's the type of game you want to create. That window is called viewport.
THE HERO
Now you need to generate your amazing hero on this Game World. Of course libGDX allows you to configure the X and Y coordinates that you will place your hero on and also the size of your image.
TIP: It is wise to create your graphics the same size that you will program them so that the quallity will stay the best.
For the next steps I will mention the hero's X and Y coordinates a lot so we will assign the following variables so that you understand when I mention them.
HeroX = X
HeroY = Y
CONTROLLING YOUR HERO
It's time to give life to your awesome hero and also give your player the full control. There is something in game-programming called Input Processor which helps you detect whether there was a user event like a key being pressed or a touch on the mobile phone's screen. You can manipulate and program your Processor so that you create buttons like an up button to make your hero move up, or down button to make your hero go down.
But how can I do it?
It's actually pretty simple. All you have to do is create a variable speed which will move the player each time you press a button! That's it!
What I mean: Let's think of a variable called SpeedY (we will move our hero up or down)
this SpeedY will be continously added to our HeroY. So if our HeroY gets bigger, our hero will go higher! (example: if the up-button is pressed then SpeedY = +50 or if the down-button is pressed then SpeedY = -50)
in Programming:
HeroY = HeroY + SpeedY
Look at the image for a better understanding:
OBSTACLES
the obstacles are actualy pretty simple!
in ZooomBlock there is only 1 obstacle which is the top tube, the bottom tube and the in-between gap so the hero can pass through and get +1 on the score!
That obstacle is placed out of the viewport each time you press "Play" and then it's X location is continously reduced every millisecond until it goes out of the viewport again on the left side. When it does that it gets relocated back to it's starting point. When the player gets a bigger score the X location is reduced faster (bigger number). Also each time the tube is being relocated the position of the gap changes!
But... but how?
Again... it's really simple!
TUBE PLACEMENT
First we have to place the tubes in the right positions so that we create this gap.
To do that we need to create a RANDOM integer variable (there are modules in Java AND libGDX that can give you a random number). Then:
- The top tube's Y placement will be: The RandInt (random number variable) + our gap (example: 100px)
- The bot tube's Y placement will be: top tube's Y position - our gap (100px) - our tube's height!
Aaaand of course there is an image for you to fully understand it:
COLLISION DETECTION
Now let's talk about Collision Detection.
What's that?
We got our hero, we can move our hero, we got our obstacles, they also move. Then what? How can I get score? How can I lose?
Collision Detection is a programming way to Detect if any of these images are Colliding. If we didn't have collision detection, our hero would pass through our obstacles without losing or would pass through our gap without any price... and Mario would NEVER get his mushrooms!
There are many ways to create collision detection but I will present to you a classic way: simple logic.
We basically have to check (if - else statements) IF any of our hero's sides are greater than any of our obstacle's sides.
The following image will explain how we can refer to our hero or our obstacle's sides:
HERO - CORNERS
top-left = (x, y + HeroHeight)
top-right = (x + HeroWidth, y + HeroHeight)
bottom-left = (x,y)
bottom-right = (x + width, y)
same logic applies with the tubes.
So now we have to check IF heroX >= toptubeX AND heroX <= toptubeX + tubeWidth THEN LOST
Simple Version: If our hero's X is on the Top Tube then we LOST.
then we check IF heroX >= bottubeX AND heroX <= bottubeX + tubeWidth THEN LOST
Simple Version: If our hero's X is on the Bottom Tube then we LOST.
and finally IF heroX >= tubeX AND heroY <= toptubeY AND heroY >= toptubeY + tubeHeight THEN POINT
Simple Version: If our hero is BETWEEN the tubes (in the gap) then Score + 1!
(NOTE: When we check if our HERO collides with the TUBES the Y positions are irellevant in ZooomBlock because if you think about it if the Y positions are colliding then so are the X. So we don't need to make it complicated.)
That's it!!!! You now know the basic tecniques that were used to create ZooomBlock. Of course those are not enouch to create ANY game but it's a very good start. To do more all you have is to think how to do it! You now know:
- What Textures are.
- How to place AND move a hero on the screen
- How to create obstacles, enemies, NPCs (Non-Player Characters) and move then automatically
- About Cameras and Viewports
- About Collision Detection
If you want to start creating your own games all you have to do is learn how to use the libGDX library (I will post a link bellow) and apply those tecniques you just learned!
Thank you very much for reading this guide, I hope I really helped those who were wondering how can a bunch of numbers and symbols create an entire game and I hope I inspired a few new programmers. Don't forget to share this article and ask any questions you may have bellow!
LINKS
ZooomBlock (Android) : Click here!
LibGDX : Click here!
LibGDX tutorials: Click here!
Android Studio: Click here!
Thank you very much!
