If you have gone through Advanced Components tutorial, you already know that now we can manipulate a component via reference. Here we will create a simple app with one canvas and 10 image sprites.

Our goal is when an image sprite is tapped/touched, we will change its picture. If current picture is cat, we’ll change it to dog and vice versa. Also we want all of our image sprites to move on the screen with different speed in different directions.

Just drag a Canvas to Screen1 and then drag as many ImageSprite components you like on top of Canvas component. We also used two images, one named cat.png and the other one is dog.png. You can get two pictures of your choice or download the source SpriteMagic of this app and extract it. For sprite movement, specify different Heading, Interval, and Speed properties for all of your image sprites. If you are not sure what each property means, take a look at this reference.

This is how our app would look like-

Don’t worry. If you have downloaded the source file as mentioned above and got it into an emulator or on a device, you should see they look like they are having fun while moving like crazy.

Now let’s look at the magic behind the app-

We have two procedures – ChangeImage and BounceOffEdge. In the ChangeImage procedure, we take two arguments. One is sprite which tells us which image sprite to manipulate and the other is currentPicture that tells us what image currently that sprite has.

Next, we have an if-else block that checks if the current picture of the given sprite is cat; if so, we drag ImageSprite.Picture block from the Any component drawer and set its for component socket to the sprite that we got as the first argument. We set dog.png as the value for to socket. For else part, we simply set it to cat as we know its current picture is not cat.

For each ImageSprite’s Touched event, we simply call the ChangeImage procedure and pass the sprite component itself with its current picture.

As for the BounceOffEdge procedure, we also accept two arguments – an image sprite and the edge an image sprite reached in a given time. If you remember, our image sprites are constantly moving. Eventually they will hit an edge. What do we do then? Well, we make them bounce off the edge they reach. For each image sprite, there’s an event block called EdgeReached. That event gets fired when an image sprite bumps on an edge. That event provides us with the edge information that tell us which edge a sprite bumped on.

For each ImageSprite’s EdgeReached event, we call our BounceOffEdge procedure with the edge data we got from the EdgeReached event and the image sprite component itself so that our procedure can bounce them off the edge. Our procedure simply uses the ImageSprite.Bounce block from Any component drawer and sets the sprite and edge it was provided with. App Inventor does rest of the magic for us.

Wasn’t it amazing?

Download the source file SpriteMagic for this app and try modifying and adding some more cool stuff. Enjoy!