Rotating hover indicator - better way to do this?

[ProgrammerByDefault]

I am working on a map implementation with ~4-5 different areas that can be selected. When you hover over one of these areas, I would like to indicate to the user that the area is focused, and can be selected. My solution of choice is to have a rotating ring of particles (Didn't want to say sparkles) appear around an area when you hover it. Presently I have a potential solution, but I think it has pretty bad performance implications (I've noticed stuttering graphics and sound glitches while it was animating).

The solution was to create a transform that takes a start point and center point, then rotates around the center point indefinitely using repeat:

Code: Select all

transform circle(x, y, x0, y0):
    xpos x
    ypos y
    around(x0, y0)
    linear 3.0 xpos x clockwise circles 1#(x - r) clockwise
    repeat

To create the ring effect (rotating diamond really), I initialize four of the same image using this transform at four points, evenly spaced. To make this dynamic, I used a screen variable tuple for (center_x, center_y, radius) and based it all off of that. I hide the animation off screen while the map is running, and set the screen variable on hover to move it back into view and resize the orbit as appropriate.

(Sub a small image for ICON_Book.png and it should be good to go, I commented out the world map image for ease of use)

Code: Select all

screen world_map:
    default zoom_vars = (1, 0, 0) #(zoom, x, y)
    default sparkle = (-650, 150, 150)
    frame:
        xfill True
        yfill True
        #add "assets/world_map.jpg" xpos zoom_vars[1] ypos zoom_vars[2] zoom zoom_vars[0]
        button:
            background "#0000FF"
            hover_background  "#FF0000"
            xpos 620 ypos 200
            text "Castle" color "#FFFFFF"
            action SetScreenVariable("zoom_vars", (2, -1024, 0))
            hovered SetScreenVariable("sparkle", (650, 150, 150))
            unhovered SetScreenVariable("sparkle", (-650, 150, 150))
        add "assets/buttons/ICON_Book.png" at circle(sparkle[0] - sparkle[2],
                                                     sparkle[1], sparkle[0],
                                                     sparkle[1])

        add "assets/buttons/ICON_Book.png" at circle(sparkle[0] + sparkle[2],
                                                     sparkle[1], sparkle[0],
                                                     sparkle[1])

        add "assets/buttons/ICON_Book.png" at circle(sparkle[0],
                                                     sparkle[1] - sparkle[2],
                                                     sparkle[0], sparkle[1])

        add "assets/buttons/ICON_Book.png" at circle(sparkle[0],
                                                     sparkle[1] + sparkle[2],
                                                     sparkle[0], sparkle[1])

Any suggestions for a better way to approach this? I have considered maybe having individual images of the full ring with a transparent background sized for each map location, then showing/rotating those instead of multiple images, but I definitely prefer a generalized approach if the performance is similar.

Thanks in advance to all who contribute!

[ProgrammerByDefault]

Does anyone at least know of any existing games that use a similar feature?

[pucedragonlord]

Two things I can think of to optimize a bit:

First, instead of having four instances of the spinning image, make a single image out of the four and have that spin. It will mean one more image file (or larger sprite sheet, if you prefer that route), but as it is now your game has to track the movement of 4 objects, as opposed to one.

Second, and I'm not sure whether this will speed things up or not, I would have your spinning animation be its own little screen, as opposed to a perpetually present effect the computer has to think about. It can be super simple—just a single add statement to show the image—but you'd then be able to use the Show() and Hide() actions to show and hide it. You can even give your screen arguments like location and scaling:

Code: Select all

screen sparkelEffect(x, y, x0, y0, scalevar=1):
    add "singleImage" zoom scalevar at circle(x, y, x0, y0)

In this method you'd even be able to simplify your circle() transform, since you could leave the positioning in Screen language:

Code: Select all

screen sparkelEffect(x, y, x0, y0, scalevar=1):
    xpos x
    ypos y
    add "singleImage" zoom scalevar at circle(x0, y0) #you could probably even come up with another way to track your center point, 
                                                   #since now it will be calculating it relative to this tiny screen as opposed to your larger one.

Hope that helps a little.

[ProgrammerByDefault]

Wow thanks a ton for the insight, I like that a lot. If nothing else, that's a much cleaner way to organize it, and I will definitely be implementing it. Thanks again!