4
\$\begingroup\$

I am currently working on an open world game similar to Pokemon using libgdx. I am currently stuck on this effect that I really want to be done before moving to other features of my game. How can I achieve the following water reflection effect?

enter image description here

I also want it to shimmer like in this video:

"Pokémon Sapphire | Reflections in the water | Episode 4" - 3:38

\$\endgroup\$
1
\$\begingroup\$

You can use the method sprite2.setAlpha(float) to make your sprite slightly tinted and sprite2.setFlip(boolean x, boolean y) Set the sprite's flip state regardless of current condition thus making it look like a reflection

\$\endgroup\$
0
\$\begingroup\$

I suggest to create a "CharacterReflection" object in your game that updates his sprite and position based on the character's current sprite and position, and is drawn only if character is above water. I mean, in every update() call of this new object, you set the sprite to be the copy of the character's sprite and then reflect it on Y axis. The reflection position coordinates will always be the same as the character for X axis and a fixed Y position below the character. Obviously, before drawing the reflection sprite you'll need to check if there is water below the character. Sorry for not putting examples of code but i'm at work at the moment.

\$\endgroup\$
0
\$\begingroup\$

To achieve the water reflection and shimmering effects, you need to work with two sprite properties only: alpha level, and width scale.

  • Alpha level: the reflection on the water surface shouldn't be opaque, like on a perfectly clean mirror. You can use sprite.setAlpha(float a) with a value between 0.5 and 0.8 (in my opinion) to get a semi-transparent reflected image;
  • Width scale: in the video you put a link to, the reflection is actually stretching horizontally slowly, over and over again. You can achieve this result updating your sprite with sprite.setScale(float scaleX, float scaleY), where scaleX is a value which changes, for example, between 0.9 and 1.1 over the time, whilst scaleY is equal to 1 because you don't want the height to change.
    Alternatively to setScale(), here comes setSize(float width, float height) which may give you more precision about sprite transformation: if your sprite is 64 pixels wide, you may want its reflection on the water to vary between 60 and 68 pixels over the time; so, you can call sprite.setSize(width+widthDelta,height); making sure widthDelta value is updated with a number between -4 and 4.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.