So, what would be the best method to create a similar effect?
For those not aware, the World of Warcraft style cooldown timers starts by making the spell icon gray out and then it forms a “pie-slice” of full transparency where the full color of the spell icon is visible, and the “pie-slice” grows in size in correlation to the amount of time to which it has cooled down.
TL;DR simulating the effect of a transparent cutoff shader, how? [import]uid: 143007 topic_id: 25514 reply_id: 325514[/import]
Off the top of my head I would say to make a series of images with a circle or square (depending on your spell icon shape) where you progressively erase a larger part of the pie with each image.
Then combine those images into a sprite animation. Set the animation speed so that it lasts for the amount of time it should take for the spell to be active again. Set the alpha on the sprite to 0.25 or 0.5 and put it on top of your spell icon. After the time has expired, remove the sprite.
Mark [import]uid: 117098 topic_id: 25514 reply_id: 103122[/import]
Won’t that look where though. So let’s say you have the cooldown effect that last one second so the animation would be 30 frames all good and dandy; but if I want the same effect and slow it down for a minute long cooldown, wouldn’t it look choppy? [import]uid: 143008 topic_id: 25514 reply_id: 103132[/import]
Make a one degree image (a fan of the circle) - I don’t think we have native code for this.
pseudocode:
image = {}
cooldownGroup = group
each second(or other time) do:
image[#image+1] = display.newimage(the one degree image)
cooldownGroup.rotation = cooldownGroup.rotation + 1
cooldownGroup:insert(image[#image)
end
This code will create an image, rotate the group, then add the image to the group (to be rotated next time) [import]uid: 79135 topic_id: 25514 reply_id: 103147[/import]
This is easy to do using movieclip animations. Lets say you have 8 pie wedges: you would have 8 images/frames. (This could be done with sprites)
pieSlices = movieclip.newAnim({“pie1.png”, “pie2.png”, “pie3.png”, … “pie8.png”})
picSlices:play({startFrame=1, endFrame=1})
later when you need to go to the next level:
pieSclices:play({startFrame=2, endFrame=2})
[import]uid: 19626 topic_id: 25514 reply_id: 103183[/import]
Well if you were to take that approach you’d have chunks of the circle disappearing, where the effect we’re trying to emulate is a very smooth one. If you wanted that to be smooth, like the one in WoW is, you’d need to have ~30 frames of the animation per second that you wanted it to go for, and that would be extremely inefficient use of space. [import]uid: 143007 topic_id: 25514 reply_id: 103404[/import]