{"id":5455,"date":"2024-12-28T16:47:04","date_gmt":"2024-12-28T16:47:04","guid":{"rendered":"https:\/\/obsidiansofteducation.com\/?page_id=5455"},"modified":"2025-04-27T15:54:13","modified_gmt":"2025-04-27T15:54:13","slug":"santa-run-game-in-mit-app-inventor-app-inventor-game-full-tutorial","status":"publish","type":"page","link":"https:\/\/obsidiansofteducation.com\/index.php\/santa-run-game-in-mit-app-inventor-app-inventor-game-full-tutorial\/","title":{"rendered":"Santa Run Game in MIT App Inventor | App Inventor Game Full Tutorial"},"content":{"rendered":"\n

Hello friends,<\/p>\n\n\n\n

Welcome to Obsidian Soft.<\/p>\n\n\n\n

Today, in this tutorial, I will teach you how to make a cool Santa Run game in MIT App Inventor.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/a><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

So, let\u2019s begin by downloading Santa Sprite from opengameart (same place from where I got the zombie for my animation tutorial)<\/p>\n\n\n\n

https:\/\/opengameart.org\/content\/santa-claus-free-sprites<\/a><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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\u2019t even touched the candies and the game is over so we need to crop the images and remove all space around them.<\/p>\n\n\n\n

You can use the following online tool for this:<\/p>\n\n\n\n

https:\/\/www.imageonlinetools.com\/trim-transparent-pixels<\/a><\/p>\n\n\n\n

Just open up each image one by one, remove transparent pixels, and save with a name without brackets. <\/p>\n\n\n\n

I also made a super simple background in Illustrator with just a basic snow landscape.<\/p>\n\n\n

\n
\"\"\/<\/figure>\n<\/div>\n\n\n

<\/a><\/p>\n\n\n\n

Don\u2019t 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. <\/p>\n\n\n\n

Create a new project in MIT App Inventor and name it SantaRun.<\/p>\n\n\n\n

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 \ud83d\ude00 in MIT App Inventor.<\/p>\n\n\n\n

Let\u2019s design our screen. For screen1, make align horizontal center, screen orientation portrait. Turn off title and status bar.<\/p>\n\n\n\n

Next, drag and drop a canvas<\/strong> from drawing and animation<\/strong>.<\/p>\n\n\n\n

Choose the uploaded background image as the canvas background. Make font size 40, height 85%, and width fill parent.<\/p>\n\n\n\n

Drag and drop a button<\/strong> fromthe User Interface<\/strong> 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%.<\/p>\n\n\n\n

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

Select this clock sensor and duplicate by pressing Ctrl + C and Ctrl + V <\/strong>for Windows and Command + C and Command + V<\/strong> for MacOS.<\/p>\n\n\n\n

Rename to jumpTimer and change the interval to 800 ms. Again duplicate and rename to scoreTimer and change the interval to 200 ms. <\/p>\n\n\n\n

Now, let\u2019s add the image sprites to our canvas. Drag and drop an image sprite<\/strong> from drawing and animation<\/strong> onto the canvas. Rename to santaSprite. Now, you have to follow me exactly to get your game to work.<\/p>\n\n\n\n

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<\/strong> and speed is 0.<\/p>\n\n\n\n

Duplicate santaSprite but rename to candySprite.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Our screen design is done so let\u2019s go to the blocks section:<\/p>\n\n\n\n

Make global variables:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

When the screen is initialized, let\u2019s give proper positions to our sprites depending on canvas width and height: santaSprite on left and candySprite on right of the canvas.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

First, let\u2019s focus on Santa\u2019s animation of running. Our Santa will run by standing in one place.<\/p>\n\n\n\n

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

\"\"\/<\/figure>\n\n\n\n

Now, get runTimer\u2019s timer event. The Santa has 11 costumes or images for running so we will shift between them after every 50 ms (we set runTimer\u2019s 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\u2019s image name using costumeCount and also increase the costumeCount by 1 for the next timer event.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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\u2019s speed to 0 to stop the jump animation, disable the jump timer, and also reset Santa\u2018s Y position.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, what about the score? So, let\u2019s work on that.<\/p>\n\n\n\n

First of all, reset the score to 0 and enable scoreTimer when startButton is clicked.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Disable scoreTimer in case of collision of santaSprite with candySprite.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Now, in case of the scoreTimer trigger event, add a 1 to the score and call the writeScore procedure.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Last is the game over message so add the writing of it and the final score in the collision event.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

So, this is done. I hope you have fun making this game and customizing it to your liking.<\/p>\n\n\n\n

If you like my tutorials, consider supporting me:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

<\/a>You can also watch the video tutorial here:<\/p>\n\n\n\n

\n