Shinig Effect

[wagenheimer]

Please take a look of this video of Royal Envoy Game by Playrix!

http://www.youtube.com/watch?v=-5aSe9OdX3U

Please pay attention to the Crown and the Green Bar. There is a nice looking animated shine effect on it!

Anybody have any ideia of how they may have done this effect?

The game textures are all in a .tar file, I extracted it and I did not found any texture file that seems to have been used for this purpose. But I'm sure it's there! And I'm sure that this effect is not pre rendered, it's made on runtime.

Any suggestions?

Thanks!

[Andru]

Anybody have any ideia of how they may have done this effect?
I think this is just a progress bar texture and shine texture over it with some blend mode. Shine texture is rendering with some rotation angle and with moving up-forward(also there is glScissor is in use, I think), or something like that... if I wrote correctly my idea :)

[WILL]

Maybe they use some kind of shader effect that sweeps across the displayed green bar or the crown texture?

[wagenheimer]

Andru - Thanks, I will try to create some shine textures and simulate this on Photoshop! Maybe is just a simple texture with additive blending.... I will post here if I get any success!
Will - I think it does not use Shaders because the effect works even on old video cards which does not support shaders (I have tested on a old notebook).

[User137]

Most likely simply 2 textures on top of each other without even blend effect. The texture on top is the shining one and is drawn partially, changing the quad size.

[wagenheimer]

Well .. I had an explanation from the Royal Envoy Programmer Dmitry Yakovlev!

"Concerning the effect. The shining effect in the loading screen was made with the use of a mesh (or distortion). You make a mesh for the texture and change color of the vertices in a simple for loop. Also you need to use add blending mode, not the alpha.

For example, you have a mesh with 5 rows and 11 columns. At time 0.0f you set the alpha of the 0'th column to the set value (e.g. alphaValue = 50%). The other columns will have alpha 0%. As the time goes you change the color of the columns appropriately - set alpha 0 for vertices without shine and alphaValue for the vertices with shine. At time 0.5f you'll have your 5th column with alphaValue and at time 1.0f - the last column. Draw your texture first and then mesh. If you use this technique, you will have a vertical shine effect which goes from the left side of the texture to the right side. Change the order of nodes coloring and you'll get the effect you want.
"

[Traveler]

Hey, how nice is that. Thanks for letting know.

[wagenheimer]

Well... It seens easy, but it is not that easy at all! =P

Anyone here understood how it was done and could be kind enough to make an simple example in some known engine? Asphyre, ZenGL, Andorra or Phoenix? =)

[wagenheimer]

Well... I finally got a similar effect! It's simple at the end.

The easy way is to draw a cuted animated additive version of the texture itself over the original texture. It works like a charm! And I was thinking I would have to use a white gradient, but I was totally wrong!

I'm not using nodes yet, just a DrawArea function to the Additive, and I already got a "Vertical shine effect which goes from the left side of the texture to the right side".

I will try to improve it further to get the diagonal shine and will post an example here! =)

[WILL]

I will try to improve it further to get the diagonal shine and will post an example here! =)
Would you be interested in writing a simple article on the effect with code too?