Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a WoW-like cooldown effect?
    primarykey
    data
    text
    <p>I am currently trying to make a cooldown effect similar to <a href="http://media.curse.com/Curse.Projects.ProjectImages/16814/11758/cooldowns1.jpg" rel="nofollow">the ones you can see in World of Warcraft</a>. (See the square with the 2m text on it? The idea is to have the square ''lighten'' in a circular manner, also illustrated in <a href="http://www.youtube.com/watch?v=R51QXmkyelQ" rel="nofollow">http://www.youtube.com/watch?v=R51QXmkyelQ</a> at 0:23.). I am using GWT, so I am mainly looking for a means to do this using pure CSS and/or javascript.</p> <p>To achieve this, I only need to be able to create a square image similar to the dark area in <a href="http://media.curse.com/Curse.Projects.ProjectImages/16814/11758/cooldowns1.jpg" rel="nofollow">1</a>. I could then apply this image in overlay to my main image, and use a timer to make the illusion of mouvement.</p> <p>However I am at a loss as to how to create such an image. It seems possible to <a href="http://css-tricks.com/examples/ShapesOfCSS/" rel="nofollow">create shapes using CSS only</a>, but I could not understand if, and how, creating what I needed was possible.</p> <p>I also <a href="http://unknownerror.net/2011-05/silverlight-game-development-tip-skills-cooling-1-cooldown-28460" rel="nofollow">found something</a> that uses Silverlight, but it is not an option for me.</p> <p>I am not sure I have expressed my need clearly enough. If that were the case, I'd be more than happy to add clarifications. </p> <p>Thanks in advance for any hint,<br> Sébastien Tromp</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload