AppInventor – Sprite Collision

This is the second of my tutorials created as part of my contribution to mentoring teams of school children in an IT challenge here in New Zealand – see earlier article for details of that.

These notes were prepared in answer to a question from a student “How do you make something happen when a sprite collides with a barrier”. The following describes one way you can detect when one sprite hits a barrier.

There are in fact two types of collision detection:

  • Colliding with other sprites
  • Colliding with the edge of the screen (or, more accurately, the edge of the canvas that the sprite moves across).

These notes describe the first case – the second one is really easy.

By the way, “collision detection” is fundamental to pretty much any computer game, and understanding the basics of it is really useful.

Let’s assume the following:

  • You have a canvas, and on that canvas you have a sprite that you move around somehow.
  • Let’s call that sprite “MovingThing”, just for the sake of this tutorial.
  • You have one or more shapes (barriers) on your screen, and you want to know when the sprite hits them.

The first thing is to represent your barrier as one or more sprites. They don’t have to move, but making them a sprite is what tells the program that it is something that might be collided with.

For this tutorial, we will have a single barrier, called “Barrier”. We will also have a sprite – MovingThing – in the shape of a star. When MovingThing hits Barrier, we will change the shape of MovingThing to a blue circle.

A good way to make a barrier sprite is to use an image to paint the sprite with. In my example, I found a picture of bricks on the internet and uploaded it to AppInventor.

This is what it looks like in AppInventor:

aisprite1

Look at the highlighted values in the properties for Barrier:

  • Set the height and width you need the obstacle to be,
  • Set the picture to show the barrier – in this case the bricks image.
  • Set speed to zero – otherwise your barrier will move!

The star shape (MovingThing) was set by loading in another image of a star. This is just an example for this tutorial. Its speed and heading are set so that it moves upwards towards the barrier. What we want to do next is respond when the star hits the bricks.

The code block to implement this logic is simply:

aisprite2

It is pretty self self explanatory. The key thing is the “when MovingThing.CollidedWith” block, which gets activated whenever the MovingThing collides with some other sprite in the scene.

On responding to this event, we check that the MovingThing collided with the Barrier object, and not another object. If so, we set its shape to be a different image (called blue circle), and also stop it moving.

If there was more than one object to possibly collide with, then we would just add more if..then blocks checking against all the possibilities,

Most of the sub-blocks are found in the list of code snippets in the MovingThing object. The “if then” block can be found in the Controls section. The green “Barrier” block attached to the purple bit can be found at the bottom of the list of blocks shown when you select the Barrier object.

When you run in the emulator, you will see this to start with:

aisprite3

And when the star hits the wall:

aisprite4

It turns into a blue circle.

Setting the shape to a blue circle and its speed to zero are simply what I chose for demonstration. The actual action that happens when MovingThing has hit Barrier could be anything, and not do either of these things.

Note – ignore the red dot – that is a separate sprite bouncing around as part of a different demo

Leave a Reply