4
\$\begingroup\$

I'm trying to create simple reflections in a 2D, sprite-based game using HTML5. I'm looking to recreate an effect like the one you'd often see in GBA games, such as Pokemon Emerald and Mother 3:

Mirror and Water reflections in Mother 3 and Pokemon Emerald

These days we don't really get to see many 2D games that pull off this kind of effects. How could I achieve this with HTML5 Canvas?

\$\endgroup\$
  • \$\begingroup\$ Hmmm... Maybe flipping the sprite over and distorting it in someway? The Game Boy truly was amazing... :) \$\endgroup\$ – user59493 Jan 27 '15 at 21:56
3
\$\begingroup\$
  1. Draw the water

water

  1. Draw your sprites, flipped upside-down about the water level, and with some effects

reflection

  1. Draw the ground (this covers the reflection and water)

ground

  1. Draw everything else normally

everything

http://jsfiddle.net/cgzrwhpn/

\$\endgroup\$
  • \$\begingroup\$ Thank you for answering. That is a good example but it uses Phaser (not pure Canvas/JS) and I'd also like some input on doing the Mother 3 reflection. \$\endgroup\$ – Belohlavek Jan 28 '15 at 0:58
  • 1
    \$\begingroup\$ @Belohlavek what trouble are you having with pure Canvas/JS? As you can see, the concept is very simple; operations such as flipping and draw order can be done as simply in JS as any framework. \$\endgroup\$ – congusbongus Jan 28 '15 at 1:07
  • 1
    \$\begingroup\$ The other reflection is done by essentially the same means: Draw the reflected sprite first, then the mirror frame around it, and then the rest of the scene. Except instead of reflecting on an X-axis, reflect on the Z-axis, so the other side of the pixels become visible. (Ok ok, just kidding, draw a different sprite.) The key in both cases is that it's done with multiple drawings, all under your control. There isn't any special "reflection" going on, just artistry. \$\endgroup\$ – david van brink Jan 28 '15 at 1:33
  • \$\begingroup\$ Thank you all for commenting. I just needed a full answer before marking it as accepted. Since they edited my original question to make it specific to one tech, I think is fair to only accept a complete answer! I'll take the logic explained here and ignore the Phaser part. Again thanks for the quick responses :) \$\endgroup\$ – Belohlavek Jan 28 '15 at 4:53

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.