Putting a changable label on a ball or sprite

I need to have multiple sprites (or balls) that have randomly generated numbers. The user can then drag one ball to another and then add the two numbers together and create a third ball with the appropriate number. I could have 100 sprites that are pre-numbered but I would think there would be a more elegant method.

Any ideas?


You can change the sprite image on the fly, so use a Block List of images (list index = image number). That's the easy bit. However, there is a disappointing bit - App Inventor has a bug where a dragged sprite colliding with another will end up with either the two being stuck together or one of them disappearing. Currently the only work around is to have each sprite on it's own Z level. However you then have to define your own collision procedure.

this is sprite cannibalism Handling Sprite Cannibalism with AnyComponent . There are other ways too to handle sprite cannibbalism. :

1 Like

I would do this with only one ball,

  • A draggable Ball that appears at Canvas TouchDown and disappears at Canvas TouchUp.

I would keep lists of number locations and values on the Canvas, and draw the Disks first, then overlay them with numbers.

At TouchDown I would highlight the disk to seem to be dragged, or erase it with a redraw, or blink it with redraws under Clock Timer control between TouchDown and TouchUp, and start my Ball there.

At TouchUp I would run through my list of disks, to find which (if any) of them overlap with my Ball, using geometry. The winning disk gets to be redrawn and have its value reassigned, and the source disk gets to be erased with a redraw and gets removed from the table of numbers.

For user friendliness, the closest target disk could be highlighted with a blinking inactive Ball.

use another canvas, draw any text you want, get the base64 of the canvas, then set the image Sprite by Base64String.

to explain what I said in last post, here is a small demo:

imagesprite_with_number.aia (16.0 KB)

the helper canvas has to be set to visible, but I squeeze it out of screen by setting first canvas's width 100%.

1 Like

Sprite cannibalism can be avoided by keeping a global variable to identify which component had the last touch down event, and by having drag events compare their component against that global variable. Only move if you are the component that got the last touch down.

Here is an example: