Timeline for How can I create 2D, sprite-based reflections in HTML5 Canvas?
Current License: CC BY-SA 3.0
6 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Jan 28, 2015 at 4:53 | vote | accept | Belohlavek | ||
| Jan 28, 2015 at 4:53 | comment | added | Belohlavek | 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 :) | |
| Jan 28, 2015 at 1:33 | comment | added | david van brink | 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. | |
| Jan 28, 2015 at 1:07 | comment | added | congusbongus | @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. | |
| Jan 28, 2015 at 0:58 | comment | added | Belohlavek | 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. | |
| Jan 28, 2015 at 0:19 | history | answered | congusbongus | CC BY-SA 3.0 |