Animated Sprites in MIT App Inventor

Hello friends,

Welcome to Obsidian Soft.


In this class, I will tell you how to make animated sprites in MIT app Inventor.


We can show animated gifs by using Webviewer as I showed in my Voice Assistant ChatGPT tutorial but how to show frame-by-frame animation in which we have different frames or costumes of the same image and using the frames, we want to show an animated sprite. I am using the word costumes as many of you must have done MIT Scratch before moving on to MIT App Inventor.

Let's begin by first downloading the different costumes of a zombie for walking animation. 


https://opengameart.org/content/mini-zombie


Download the zombie zip file. Open it up using any unzipping software. You will find the walk folder inside it. Rename all images in the correct order from 1-8. The first frame will be 1.png and so on.

Create a new project in MIT App Inventor. Call it AnimatedSprite.


Upload media i.e. the 8 png files. You can optionally upload a scary background.

Drag and drop a canvas onto screen1. Choose the background if you uploaded one as the canvas’s background. Make height 80% and width fill parent. Drag and drop an image sprite from Drawing and Animation to the canvas. Make height 144 pixels and width 166 pixels. Choose 1.png as the picture. Also very important, uncheck rotates.

Drag and drop a horizontal layout. Make height 15% and width fill parent.

Drag a button onto the layout from User Interface. Rename to leftBtn. Make font bold and font size 20. Make background color black. Change text to "Left" and text color to white. Select the leftBtn and duplicate. You can duplicate components in the designer view of MIT App Inventor by pressing Command + C and Command V for MacOS or Ctrl + C and Ctrl + V for Windows. Rename duplicated button to rightBtn. Change the text to "Right".

Drag and drop a clock from the Sensors. Uncheck timer always fires and timer enabled.  And make the timer interval 41 milliseconds. I will explain why I have made this 41 later.


Go to the blocks section. Make a global variable for the frames count as we need to keep a count of how many frames we have shown. Use a maths block to make it 1 because we are always showing the 1.png


Next, make a procedure for starting the animation. 

First, we make sure that our frame count is always reset to 1 at the beginning of the animation.

And our picture is also 1.png

Then, we set the speed to 2 pixels and interval to 41. This means that our sprite will move 2 pixels every 41 milliseconds.

Secondly, we enable the image sprite as this tells the image sprite to start using its speed and other properties to become animated. Now, what about our different costumes of zombie? We will enable our timer.  And remember that it will run every 41 milliseconds as this is the timer interval that we set for our clock. The industry standard for animated films is 24 frames per second (fps).

24 fps means 1 frame in 1/24 seconds which if converted into milliseconds is 1 frame in 41 ms.


So, we will change the frame of our image sprite every 41 ms. At the same time, it will move 2 pixels. So, we are achieving two things in those 41 ms: a change in costume and a movement of 2 pixels and this is how our zombie will be doing his clumsy walk.

In our timer event, we will check if we have shown all frames or not. We will update the frame counter and show the next frame by doing a join with frame count to make the image file name for the next frame to be shown.


If the frame count is not less than 8 i.e. it must be now 8. This means that we have shown all 8 frames and we should stop changing costumes and also stop our animation. So, disable the zombie image and disable the timer too.


Now, our right and left buttons will determine the direction of movement

So when the right button is clicked, we choose the heading as 0 and call our startAnimation procedure.

Duplicate, change to left btn click event. And change the heading to 180.

So we are done. I hope you have fun animating your sprites this way. This is very much needed while making games with a better user experience as game players would be more fascinated by a zombie actually doing that clumsy zombie walk instead of just sliding left and right. You just need different frames or costumes for your image and a clock sensor to shift between the different costumes.

Thank you for reading this tutorial.

You can download the aia file for this project.

Download project file




You can have a look at the video tutorial here:



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

https://www.youtube.com/c/obsidiansofteducation


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