Canvas Reflections

There's a fantastic example of using the Canvas plugin to create real time reflections in this thread: https://www.scirra.com/forum/viewtopic.php?f=147&t=71912&hilit=reflection

It's also insanely expensive (performance-wise) in my game, so I was wondering if it's possible to just use one canvas object? Like a single big plane, mirroring the environment above it, without all the fancy water wobbling that the above solution has. I'll try and use a blur filter and some particle effects to create the illusion of water afterwards.

Is that possible? I'm rubbish with numbers. I can replicate the effect above in my own game by recreating all the events, but individually I have absolutely no idea what those events are doing. So I also have no idea what tweaking them will do, or how to achieve a reflection on a single big plane instead of 20 of them. I hereby humbly request the aid of someone who doesn't involuntarily shudder at the sight of numbers and algebra

You can use just one canvas object, or even better a paster object. The paster object is about the same as canvas, but is much faster with webgl on.

Basically to do the reflection you set the origin of the object to be at the top, and position it where you want it in the editor.

Then with events you'd do this every tick:

1. clear the texture

2. set the height to -self.height to flip it

3. paste anything you want to reflect

4. set the height to -self.height to flip it back

The gradient could be done with another object on top, and the wave effect is simple with one of C2's shaders.

Thanks for the reply

I can't get it working though, which is weird, because your original method in the thread I linked worked perfectly, just very intensive.

It might be the origin part that's giving me issues? Is that the same thing as a hotspot? Because the origin option (when I double click the canvas object) is greyed out and won't let me edit it. I can edit the hotspot from the attribute panel on the left, but trying various different positions doesn't help. I've tried adding a "fill canvas with colour" event too, just to check it's appearing in the right place, and that works fine. Just no reflections.

I also tried using the Paster plugin you created, but I can only see a "paste object" option, and no "paste layer" option like the canvas has.

Yeah, I meant the one you can set from the property on the left.

Here's a dual example for canvas and paster:

/examples30/mirror_paster_canvas.capx

https://www.dropbox.com/s/e19zxibiaehbb ... .capx?dl=1

Paster doesn't have a paste layer action currently because making it work with C2's webgl is a mess right now. I can't really tweak it to work without major changes.

Even if you have to loop over the instances and paste them individually you'll still get better performance with paster. With webgl on the canvas object has to copy itself to a webgl texture every frame it changes. That is the main performance hit you were getting from the first example. Using one canvas should help, but it's still inefficient.

So! Pasting objects works perfectly for both of them! Thanks for that, R0J0 ^_^

Before I pursue this rather than try to solve the issue of layer pasting instead, will I run into Z order and/or transparency issues with pasted objects? I'm looking for a real-time reflection solution because it's a city-building game, so the layout changes and evolves constantly. There are also large objects on top of all the buildings that can be created that are at 100% transparency when the player is zoomed in and building, and 0% transparency when zoomed out.

So if I can create an event that loops to paste every object on that layer into a canvas/paster, will it also retain the Z order and transparency?

Many thanks for all your help so far. I really appreciate it

There will be no transparency issues, but zorder can be a bit tricky.

If everything you want to paste is only one object type you can do this:

for each sprite ordered by sprite.zindex ascending

paste sprite

For multiple different object pasted in the correct order here's a capx with a function that can do it.

https://www.dropbox.com/s/3teztza6jcood ... .capx?dl=1

/examples30/paster_pasteLayer_solution.capx

You'll have two duplicate a few events in it for every object type you want to be able to paste, but hopefully it's straightforward to see which ones.

Basically what it does is find the highest zindex out of all the objects on a layer, then loops over the zindexes and pastes the object with that zindex.

EDIT:

And just to be clear this doesn't consider the transparency of the layer.

Thanks, you've been awesome

Transparency works perfectly, and I've just scripted it in a way that z-order won't be an issue. That took quite a while, but it's now a performance-friendly real-time reflection solution (using Paster by the way).

R0J0hound can you re upload those .capx?

Bobbyneal100

fixed links

R0J0hound

Thanx!

delet this please

new technique

Using just an event + paster plugin, I figured out a way to make a mirror effect, dynamic reflection that runs smoothly (reflection for the entire layout)

without duplicate sprite

without individual sprite paster

Demo Online: http://construct2.96.lt/7/

Tutorial: https://www.scirra.com/tutorials/9633/reflection-plugin-paster-only-1-event