Animated Shine Effect

[GoogleCodeExporter]

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!

I'm trying to reproduce this effect in Phoenix. I know now how it was made.

"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.
"

Original issue reported on code.google.com by wagenhei...@gmail.com on 8 Feb 2011 at 9:55

[GoogleCodeExporter]

Well... I get the effect changing DrawArea to support 4 Colors and Additive 
Blending, and a Draw it this way :

Two Images :
Desired image with Gradient from Color4f(ClrBlack,0) to Color4f(ClrWhite,1);
Desired image with Gradient from  Color4f(ClrWhite,1) to Color4f(ClrBlack,0;

And I animate the position of area.... it works very nice, but this only works 
to make the effect vertically or horizontally. It is a nice effect, If you 
need, I can make a Demo for you!

But the problem is, how to make the effect works diagonally like in the video? 
I don't think that DrawAre will works, I think it will need the grid, But with 
the Grid, I could not make the alpha gradient works diagonally. Do you have 
some ideia of how this could works?

Original comment by wagenhei...@gmail.com on 12 Feb 2011 at 1:40

[GoogleCodeExporter]

Code :

        FPiece := Recti(Round(FPosition - FSize), 0, Round(FPosition), Pattern.Height);
          DrawArea(X, Y, Round(X + FPosition - FSize), Round(Y), FImage, FPatternIndex, FPedaco, Color4f(clrBlack, 0*Color.Alpha), Color4f(ClrWhite, 0.5*Color.Alpha),
            Color4f(ClrWhite, 0.5*Color.Alpha), Color4f(clrBlack, 0*Color.Alpha), PHX_BLENDMODE_ADDITIVE);

          FPiece := Recti(Round(FPosition), 0, Round(FPosition + FSize), Pattern.Height);

          DrawArea(X, Y, Round(X + FPosition), Round(Y), FImage, FPatternIndex, FPedaco, Color4f(ClrWhite, 0.5*Color.Alpha), Color4f(clrBlack, 0*Color.Alpha), Color4f(clrBlack, 0*Color.Alpha),
            Color4f(ClrWhite, 0.5*Color.Alpha), PHX_BLENDMODE_ADDITIVE);

I do animate FPosition from 0 to Image.Width and I get the desired effect! =)
FSize is 10% of Image Width.

procedure TShineSprite.DrawArea(AXMin, AYMin, AX, AY: Single; AImage: 
TPHXImage; APatternIndex: Integer; APedaco: TRecti;
  AColor1, AColor2, AColor3, AColor4: TColor4f; AMode: TPHXBlendMode);
var
  FX, FY: Integer;
  FPedaco: TRecti;
begin
if APatternIndex>=0 then
begin

  FX := Round(AX);
  FY := Round(AY);
  FPedaco := APedaco;

  StencilMask.StartDefine;
  Engine.Device.SetTexture(nil);
  Engine.Canvas.Brush.Color := Color4f(clrBlack, 1);
  Engine.Canvas.Rectangle(Boundsf(X, Y, Pattern.Width, Pattern.Height));
  Engine.Canvas.Flush;
  StencilMask.StopDefine;

  StencilMask.StartMask;
  AImage.DrawArea(FX, FY, FPedaco, APatternIndex, AColor1, AColor2, AColor3, AColor4, AMode);
  StencilMask.StopMask;
end;
end;

Original comment by wagenhei...@gmail.com on 12 Feb 2011 at 1:43

[GoogleCodeExporter]

FPedaco = FPiece

Original comment by wagenhei...@gmail.com on 12 Feb 2011 at 1:43

[GoogleCodeExporter]

I do use the Stencil Mask because the DrawArea repeat the texture if X<0 or 
X>Width. It is possible to avoid this changing the DrawArea Function? and avoid 
using the StencilMask?

Original comment by wagenhei...@gmail.com on 12 Feb 2011 at 1:45

[GoogleCodeExporter]

Actually, according to the description above this is done very similar to the 
surface grid example, but instead of animating the verticies positions he is 
animating the colors instead.

Original comment by andreas....@gmail.com on 17 Feb 2011 at 6:50

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Original comment by andreas....@gmail.com on 8 Aug 2013 at 2:11

• Changed state: Done