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?

  • \$\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
  1. Draw the water


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


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


  1. Draw everything else normally



  • \$\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\$ 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\$ 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.