How do I create a mirrored reflection?

0 favourites
  • 8 posts
From the Asset Store
Fully commented source code/event sheet & sprites to create a space shooter game
  • Currently I have created a second layer where I show mirrored versions of all objects that are on layer 1, but this actually requires twice as many cycles and it's a mess to handle all of the stuff that is going on in the reflection (I basically have to add each event twice and there might be hundreds of sprites to reflect etc). There must be an easier way using some of the effects, seeing that the advanced pixel shader in the "Glass" effect can modify the background. I'd basically require an effect where I can capture a piece of the screen and negative scale it for a reflection, or similar. Any ideas for this?


  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Look at the canvas or paster plugins. A search will also give some examples of doing this.

  • Thank you R0J0hound,

    I installed paster and created a paster object, but I seem to fail to use it. I searched for a manual on how to use it, but failed there as well

    I appreciate the time and effort you took to answer though!

    Edit: Downloading a simple capx example you provided was enough to understand the underlying technique. Thanks!

  • The simplest way is to place the paster object where you want the water to be, then make an event like this:

    every tick

    --- paster: clear to rgba(0,0,0,0)

    --- paster: set height to -self.height

    --- paster: paste smileSprite

    --- paster: set height to -self.height

    and that's it. If you have multiple objects you want to reflect put more paste actions in there.

    A slightly more deluxe method that reflects an entire layer would be this:

  • Oh ok, I see. I need to paste for each element in my sprite list a copy onto the paster. I thought that this problem could've been solved with a simple shader like

    varying mediump vec2 vTex;
    uniform lowp sampler2D samplerBack;
    void main(void)
        gl_FragColor = texture2D(samplerBack, vec2(vTex.x, abs(1.0 - vTex.y)));
    But while this seemed to have some sort of effect in the ingame editor, it did nothing in the browser and I still wonder why :/
  • If it's not working in the browser then it's not using webgl. Your card is blacklisted or something.

  • Well if I add a simple sprite with a glass effect on the same layer, the effect suddenly works though, which is rather strange. All other effects work just fine.

  • 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:


Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)