Santa Run Game in MIT App Inventor | App Inventor Game Full Tutorial

Hello friends,

Welcome to Obsidian Soft.

Today, in this tutorial, I will teach you how to make a cool Santa Run game in MIT App Inventor.

The game logic is inspired by the famous Google Chrome Dino Run game so you can easily convert this into that game by just changing the images. Our Santa has to avoid eating the candies by jumping over them.

So, let’s begin by downloading Santa Sprite from opengameart (same place from where I got the zombie for my animation tutorial)

https://opengameart.org/content/santa-claus-free-sprites

Unzip and choose the idle 1 and all run images and copy and paste them to some folder. We need to rename them to remove the brackets as such filenames are not allowed in Android.

We also need to edit them. The actual animation is beautiful but the images have a lot of transparent pixels around them and this gives a problem as it seems that the Santa hasn’t even touched the candies and the game is over so we need to crop the images and remove all space around them.

You can use the following online tool for this:

https://www.imageonlinetools.com/trim-transparent-pixels

Just open up each image one by one, remove transparent pixels, and save with a name without brackets. 

I also made a super simple background in Illustrator with just a basic snow landscape.

Don’t add any objects to this image as we will not scroll this image. Our Santa will just move his legs while standing in one place and our candies will move and this will give this amazing illusion of Santa running. 

Create a new project in MIT App Inventor and name it SantaRun.

Upload background, Santa images, and a candy image by selecting them all and dragging and dropping them in the media section. Yes, I have figured out how to add multiple images at the same time 😀 in MIT App Inventor.

Let’s design our screen. For screen1, make align horizontal center, screen orientation portrait. Turn off title and status bar.

Next, drag and drop a canvas from drawing and animation.

Choose the uploaded background image as the canvas background. Make font size 40, height 85%, and width fill parent.

Drag and drop a button from the User Interface below this canvas. Rename it to startBtn. Change the title on it to Start. I will edit it to a black background, font white, font size 22 and bold, shape rounded and width of button 30%.

From sensors, drag and drop a clock. Rename to runTimer. Turn off the timer enabled and the timer always fires checkboxes. Change interval to 50 ms. This is for running animation.

Select this clock sensor and duplicate by pressing Ctrl + C and Ctrl + V for Windows and Command + C and Command + V for MacOS.

Rename to jumpTimer and change the interval to 800 ms. Again duplicate and rename to scoreTimer and change the interval to 200 ms. 

Now, let’s add the image sprites to our canvas. Drag and drop an image sprite from drawing and animation onto the canvas. Rename to santaSprite. Now, you have to follow me exactly to get your game to work.

For santaSprite, make height=114 pixels and width=80 pixels. Choose the uploaded idle image as the picture for this santaSprite. Make sure that it is enabled. Interval is 70, rotate is turned off and speed is 0.

Duplicate santaSprite but rename to candySprite.

Make height and width both 30 pixels. Choose the uploaded candy image as the picture. Change the Heading to 180 as we want it to move left and change the interval to 100.

Our screen design is done so let’s go to the blocks section:

Make global variables:

When the screen is initialized, let’s give proper positions to our sprites depending on canvas width and height: santaSprite on left and candySprite on right of the canvas.

First, let’s focus on Santa's animation of running. Our Santa will run by standing in one place.

He will start running when the start button is pressed. So, get its click event and reset Santa’s y position in case the game stopped while he was in the middle of a jump. Also, start the run timer by enabling it.

Now, get runTimer’s timer event. The Santa has 11 costumes or images for running so we will shift between them after every 50 ms (we set runTimer's timer interval to 50ms). First, check if the costumeCount is greater than 11. If it is then this means all costumes have been shown so set the costumCount to 1. In all cases, construct the costume’s image name using costumeCount and also increase the costumeCount by 1 for the next timer event.

Next is our candy animation which should also start when the start button is pressed so just make the speed of candy=18 in the start button click event code. This will make the candy start moving towards the left.

But what happens when it reaches the left edge of the screen? We will bring it back to its starting position by first checking if it was the left edge which should be -3.

So, now our candy should move infinitely and our Santa should be running infinitely while standing in one place when the start button is pressed. You can test your code using emulator or companion app.

We will make Santa jump when the canvas is touched. So get canvas.touched event. Make a procedure named jump and call it on canvas touch event.

In the jump procedure, we make the speed of santaSprite= 20 and heading 90 so that it goes up. We set our jumpUp variable to be true. And we enable our jumpTimer (remember that it will trigger or fire after 800 ms). Before this time is up, our Santa will keep on going up.

When the jump timer goes off, we will check if Santa was going up and change its heading to 270 to make it start coming down now. And we will make jump up false. So, the next time the jump timer goes off, we will reset Santa's speed to 0 to stop the jump animation, disable the jump timer, and also reset Santa‘s Y position.

Now, the most important part of code is when Santa collides with something. Get collided with event for santaSprite. Check if colliding with candy and stop everything i.e. make the speed of candySprite=0 and disable the runTimer.

Now, what about the score? So, let’s work on that.

First of all, reset the score to 0 and enable scoreTimer when startButton is clicked.

Disable scoreTimer in case of collision of santaSprite with candySprite.

Next, make a procedure for writing the score. Clear the canvas first and drawText in the middle of the canvas and write the current value of score.

Now, in case of the scoreTimer trigger event, add a 1 to the score and call the writeScore procedure.

Last is the game over message so add the writing of it and the final score in the collision event.

So, this is done. I hope you have fun making this game and customizing it to your liking.

If you like my classes, consider supporting me by buying me a cup of coffee.


You can also watch the video tutorial here:

Please like my videos and share them with your friends and family. Also, subscribe to my channel and press the bell icon so you don't miss any of the great projects I have planned for you.

Please like my social media pages for more educational resources and tips.
Pinterest:
https://www.pinterest.co.uk/obsidiansoft/_created/
For links to free educational apps, have a look at the educational apps page

Comments

Post a Comment

Popular posts from this blog

Jolly Phonics Group 1

Image
Free Jolly Phonics Group 1 worksheets (s, a, t, i, p, n) According to Oxford Dictionary, phonics is a "method of teaching people to read by correlating sounds with symbols in an alphabetic writing system". In simple words, each letter of the alphabet has a sound. Instead of teaching young children the names of these alphabets, the sounds are taught. For example "a" makes the sound /a/...this is exactly the sound that comes from your mouth in the beginning when you say the word " apple " or " ant ". The letter "a" makes a different sound in words like " arm " and " ate " but these rules are taught later.  Jolly Phonics is a synthetic phonics system where all the letters of the alphabet have been split into seven groups. Each group contains 6 letters or their combinations so a total of 42 sounds are taught. What do I mean by a combination of letters? Remember that the combination of letters "s" and "h...
Read more

Jolly Phonics Group 2

Image
Free Jolly Phonics Group 2 worksheets (c/k, e, h, r, m, d) Hello Friends, I am back with another set of worksheets for helping children learn their phonics sounds. As you might already know, I am a strong proponent of the Jolly Phonics system of synthetic phonics sounds. Jolly Phonics system follows a particular order of teaching alphabet sounds in which there are seven groups. The following image shows the seven groups of Jolly Phonics along with an extra group taught by my Phonics app on Google Play Store. My app called  Phonics Fun  is 100% Free so you can download it and use it on all your Android devices.  It teaches all the letter sounds and different phonics rules and follows the pattern of Jolly Phonics but it is available for free. It is the perfect way to master phonics as you can hear phonics sounds and also test learning by playing many matching games. Coming back to printable Jolly phonics worksheets, I have already published worksheets for practicing...
Read more

Jolly Phonics Flash Cards

Image
Gone are the days of A for apple, B for Ball...this is the time of synthetic phonics where each alphabet has a sound. Now, you don't teach children the name of the letter but the sound made by the letter. A has the sound that comes when we say the word apple, b has the sound that comes when we say bed, and so on and so forth. There are different systems of synthetic phonics but I have felt that Jolly Phonics is the best system. In fact, I made my first mobile app for my son based on the Jolly Phonics style of teaching. However, I know that many people want to limit screen exposure for their children so I decided to make these flashcards.  You can use these flashcards independently or you can use them along with my app called Phonics Fun , available on the Google Play Store. You can hear the sounds from my app. Practice using these flashcards and then, test learning using my app too...a win-win situation :) The Jolly Phonics flash cards are double-sided. I have told you in my previ...
Read more