I'm trying to create something like a VU-meter with an animated needle. But whenever I rotate the needle it jumps to a higher location in the canvas and doesn't align with the meter image.
The meter canvas is 450x240 pixels, showing a typical VU-meter quantrant display, arranged from 135 to 45 degrees per the AI2 coordinates. I then place a needle (just an ImageSprite of a red line on a transparent background) to align with the zero point on the meter.
Note that the rotation point is outside the canvas boundary, though even resizing the canvas to include it didn't help.
Try drawing (and redrawing) a line, perhaps with a clock timer for many values, start x,y will always be the same, end x,y your point on the scale (calculated to work on the canvas)
Hmm, think I've got it. I needed to make the ImageSprite the same width as the canvas image. To have the correct rotation point it also need to be square, so the same height as the width. The canvas image can them be shorter so as to look more like a typical meter. e.g. 500x200 for the canvas, and 500x500 for the ImageSprite.
Good luck. When you get a perfect solution, please post it. You may have to squash the meter a bit (a square probably not needed) and lower the Sprite1 Y coordinate. Experiment.
I think I've got it almost perfect. I still needed to keep the imagesprite the same width as the canvas image, and it needs to be high enough to align the point of rotation with the (off canvas) axis of the meter's arc.
I say almost perfect since though it works great in landscape mode, or on a tablet with sufficient horizontal resolution in portrait mode, it gets a bit funky on a phone in portrait mode.
I also changed the canvas image, but that was just for ascetics and shouldn't affect the function (though it's now about 110 degrees of arc instead of 90). The aia also converts the 0-255 scale that I get from the radio to the angle scale for the needle.
