1
1. Smartphone game App development In the Off-line environment Let’s make a simple game app. It is a game of shooting balls from a rocket aiming the UFO. Let’s develop and check everything in the off-line environment. I expect you to remember the first step of AI2 on the off-line mode.
Double click the ‘WinStartAIServer’ file which is in the ‘Ai2LiveComplete’ folder. As we experienced before, you can find the URL of the virtual server on a DOS screen.
Then open the Chrome browser and type in http://localhost:8888 which is the URL of the virtual server. When a small window appears, click the ‘Log In’ button. Select ‘Import project from my computer’ from the ‘Project’ menu on the top of the AI2 screen and search for the “AI2_Game_1.aia” file which have been downloaded to your NUC from the home page.
2
Our fist app came out. Using the ‘Components’ section, change the name of 4 buttons. I changed to ‘Score_Name’, ‘Score_Value’, ‘Level_Name’ and ‘Reset_Button’ respectively. In the Properties’ section, I changed the ‘Text’ of each button to ‘Score:’, ‘0’, ‘Your level’ and ‘Reset’ accordingly. Bring a ‘Button’ from the ‘Palette’ section and leave it in the right side of the ‘Your level;’ button.
From the ‘Palette’ section, bring ‘Ball’ and ‘ImageSprite’ and leave it in the Canvas component of the ‘Viewer’ section.
3
If you don’t have right image files of Rocket and UFO, down load them from the home page. I uploaded the Rocket image in the Properties’ section and named it as ‘R’. Change the Ball’s color and set the value of Y-axis of the rocket image to 230. No setting is needed for X-axis because you will move it freely during the game.
4
2. Coding for shooting balls from a rocket and increasing score Select the ‘Import project from my computer’ from the ‘Project menu’, and try to find the “AI2_Game_2.aia” file which have been downloaded to your NUC from the home page. Compare it with the one your own. To start coding, go to the ‘Blocks’ screen and move the all existing blocks into the trash. Let’s make a story in advance to the actual coding. The rocket can shoot a ball up and as it reaches to the celling of the Canvas the score will increase by 1. When it reaches to a certain score, do the coding so the Grade level will change. We can program the speed of the ball which starts to appear only when you touch the rocket. You can move the rocket along with x coordinates.
Bring the ‘when Screen1.Initlize’ and make the ball not seen.
Bring the ‘when R.Touched’ block and decide the speed and the direction where the ball will go when you touch the rocket. 90 degrees mean that the ball will shoot upward.
Bring the ‘when R.Dragged’ block and make it move the rocket with the x coordinates in the smart phone.
5
After you bring the ‘when B.EdgeReached’ block, make the ball not seen when it hits the celling of the Canvas, and the score increasing by one.
6
3. Trouble shooting - Debugging Let’s check the result of the coding by using the Emulator. Click the ‘aiStarter’ icon and choose the ‘emulator’, which is in the ‘Connect’ menu. Click the rocket and move it along with the x coordinates. There are two problems occurring.
First is that the ball is disappearing in the middle of the Canvas celling irrespective to the rocket’s position. The second problem is that the score keep increasing irrespective to the clicks of the rocket. To solve the second problem, in the ‘when B.EdgeReached’ block, add a block that changes the ball’s speed to zero.
Next, being the ‘when Reset_Button.Click’ block and set the score to zero. Find the ‘AI2_ Game_3.aia’ file which we downloaded in the homepage, and compare it to the one you did.
7
Now, let’s solve the first problem. Bring the ‘call B.MoveTo’ block into the ‘when R.Touched’ block.
Then program the x socket to the middle of the rocket and the y socket to the rocket’s top.
Actually, there left important thing we need to do. In the ‘Designer’ screen, bring an ‘ImageSprite’ from the ‘Palette’ section and name it as UFO. Make the y coordinate’s value to zero for the downloaded UFO image. In the ‘Blocks’ screen fix the program so the score can go up when the ball that the rocket shot hits the UFO.
8
4. My first Smartphone game App Our game app is completed when we program the ‘Your level’ portion. Bring the ‘to procedure’ block and change the subroutine name to ‘Grade’. Program to call the subroutine from the ‘when UFO.CollidedWith other’ block.
To make conditions for each grade A, B, C and D you need some ‘if-then-else’ commands consecutively. In AI2, there is only the ‘if-then’ command. So, let’s use the ‘mutator’ of ‘if-then’ block.
9
Let’s do the game for one minute. So, set the timer as the score and grade will change during the time. In the ‘Designer’ screen bring a ‘Clock’ component. You can find the default value of the ‘TimerInterval’ is 1000ms which is 1 second. For the exact game start time, program the timer to enable in the beginning of the App and Reset.
Because the ‘TimerInterval’ is 1 second, you can play the game for one minute when the ‘when Clock1.Timer’ is called or expired 60 times. You can show the ‘Game Over!!’ message and make the rocket disappear, after the game ends. To prevent the scores to go up even if the game ended, change the ball speed to zero. Make sure that the screen of the game app is initialized when you click the ‘Reset’ button. Now, our smartphone game app is finally completed.
10