I described the basics of creating a bouncing ball animation earlier and mentioned that “image sprites” are similar to the bouncing ball graphic, but provide a way to specify your own image for the ball. To introduce a bit about images in App Inventor, we took a quick look at using the phone’s camera.
This tutorial starts with the original bouncing ball program and then modifies it to use an Image Sprite instead of a ball. Be sure to read the bouncing ball and camera tutorials first!
Previous:
The ImageSprite component is almost identical to the ball component!
If you have created the bouncing ball animation, save a copy of that app under a new name, such as “ImageSpriteDemo” – after saving, the new “ImageSpriteDemo” will be open in the App Inventor designer. If you do not already have the bouncing ball animation app, then go ahead and enter it now, and save a copy as the original ball program and save a new copy for conversion to an image sprite.
Drag an ImageSprite component to the Viewer and drop it on the Canvas. Find the ImageSprite component in the Drawing and Animation section of the Palette:
Select the ImageSprite by clicking on it, and then look over at the Properties. Click in the Picture text box on the Properties sheet to upload an image file (jpg or gif or png) to the component:
You can use any picture file that you wish. You can use your own drawings created in a drawing or paint program, or photographs, or clip art graphics that are often available for free from many clip art graphics libraries and web sites. I chose a diamond shaped graphic from Free-Graphics.com:
The User Interface
Here is how the image sprite animation demo appears on the phone’s screen:
Programming the Animation
Now, switch to the Blocks editor. In the Blocks editor we need change references to the original Ball1 object to the ImageSprite1 object.
Set Up the EdgeReached Event
Click on the ImageSprite1 item in the Palette’s list and select the .EdgeReached event. Set this up just like was done with the ball, except reference the ImageSprite1‘s events, methods and properties:
Remove the Original Ball1 Object
Delete the original ball from the Designer and the Blocks (deleting it from the Designer window will delete it from the Blocks editor too). But be aware – this removes all references to the original Ball1 component from the Blocks program! This means you need to replace the original references to the ball’s speed or heading with the image sprite name.
For example, the original ball start and stop blocks looked like this:
When the Ball1 object is deleted, the set blocks simply vanish as there is no longer a Ball1 object!
All of those Ball1 references need to be replaced with ImageSprite1 instead as shown here:
The set heading blocks code also needs to be updated to reference ImageSprite1:
Load your updated program into your Android phone or tablet and test it out.
Where did the name “Sprite” come from?
Sprite is an old word referring to an elf, fairy or goblin, according to Dictionary.com, sometimes referring to a “nimble” case as in a nimble goblin. Hence, a sprite is something that readily moves about a screen. I do not know precisely when “sprite” became associated with moving computer graphic elements, but I do know that in the early 1980s, there was an 8-bit graphics-oriented computer for home gaming known as the Commodore-64 which used the term “sprite” to describe the method of supporting move-able graphic elements on the screen, particularly those used for gaming, and which could support detection of collisions with other objects.