Putting a changable label on a ball or sprite

[mlester1420]

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?

[ChrisWard]

Hi

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.

[SteveJG]

@ChrisWard

the only work around

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

[ABG]

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.

[Kevinkun]

@mlester1420

have randomly generated numbers

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

Base64 Tools - four little ones ;)

These three simple individual extensions are already rolled into Juan's Base64 extension, but I believe it may be useful to some to have access to individual functions for specific needs.... There is now a fourth little one, not included in Juan's extension, for the Canvas ImageSprite. Image To/From Base64 This extension has two functions, the first will convert whatever image is in an image component to a base64 string, the second will load a base64 string to an image component. There is an …

[Kevinkun]

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

aia:
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%.

[ABG]

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:

Drag and Swap Puzzles in JSON