5
\$\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\$
1
  • \$\begingroup\$ Hmmm... Maybe flipping the sprite over and distorting it in someway? The Game Boy truly was amazing... :) \$\endgroup\$
    – user59493
    Commented Jan 27, 2015 at 21:56

1 Answer 1

Reset to default
4
\$\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\$
4
  • \$\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
    Commented Jan 28, 2015 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
    Commented Jan 28, 2015 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
    Commented Jan 28, 2015 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
    Commented Jan 28, 2015 at 4:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .