Layer redraw FX

This forum is currently in read-only mode.
From the Asset Store
120 Epic Fire FX Animations + 2 Bonus Characters. Contains 3000+ frames and a lot of Pixel Art Sprites
  • Hello once again!

    You can skip to the next green line if you are a tl;dr kinda person.

    Time for more Ideas for more things about which people can say "But you can do it with events!" and label me a lazy bum in their heads (or maybe not)

    Anyhow - right now a layer (and everything I guess) gets redrawn every frame, replaced with the new stuff. Not like the old days of, say, a ZX Spectrum where you had to erase the screen by hand to create the illusion of motion. But if you didn't there was the nice side effect of seeing all the trajectories basically burned into the screen.

    I tried to achieve this effect using canvas (check it out here, but there's a certain limitation that you need to paste sprites into it and the result leaves a bit to be desired, since there seems to be no way to affect only the tint and opacity of what's inside canvas (actually a simple opacity option for Clear canvas would be real handy).

    So anyhow, right now when something moves in a layer each frame it does it like this:

    <img src="">

    What would be great would be a layer effect (so that there's no object pasting, no canvas, no events) which basically takes the previous frame, but instead of erasing it completely just lowers it's opacity, thus giving us this effect (here we could assume it lowers the opacity by 20% each frame):

    <img src="">

    Even better if it can be given a tint, like this:

    <img src="">

    I suspect it's not quite that simple - since the system probably handles the frame erasing process and you'd have to pretty much copy/paste the layer contents and adjust what's pasted.

    Still, it'd be a great effect - seen a lot in those Geometry Wars style shmups so popular a couple of years ago.

    As for parameters I think the best would be Time to a full fade out in ms - So if you enter 1000 then the effect will take one second to fully erase the trail. In an example of 60 fps that would be lowering each previous frame's opacity by 1.66% or so.

    So either this or additions to the Canvas object such as "Paste Layer to Canvas" and "Erase Canvas with opacity" would be very handy.

    Edit: Sort-of on topic - in the example wanted to give the ball a nice retro rainbow effect, but it seems there is no RGB(R,G,B) like command line command for HLS (or at least I couldn't find it). That would be a nice addition as well.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • This effect is called frame feedback and you can achieve it by placing a fullscreen canvas on top of everything, enabling 'Grab layout before drawing' (or after, I forget), and setting the canvas opacity to less than 100%, eg. 90%. This means it draws a semitransparent copy of the last frame on top of the current frame, with a cumulative effect. The lower the percentage the longer the trails will be. I don't like the effect much though, it looks like a bad motion blur.

  • But that only works for the entire screen, right? It would be nice to have it per-layer, say for background only.

  • Hmm... try putting the canvas on a layer and enable 'Force own texture' for that layer. The layer will be drawn on its own to a separate offscreen surface, and the canvas should then only process the frame feedback on that. Not sure if that'll work though.

  • Actually if I use any of the "Grab Layout" options the Canvas is just pure white. Weird...

    I put it on top of everything, on a new layer on top, tried the "Force own texture" for layers, still white.

    Will have to look into it. Also, since you are here, Ashley - is there a command for HLS, like there is for RGB(R,G,B) for setting colors?

  • No - I don't know anything about HLS, I'd have to look up the math. Can't you do it by hand? All you need to do is convert HLS to RGB and use the RGB() expression on the results.

  • That's the thing - the conversion is a little tricky:

       DWORD HLStoRGB(hue,lum,sat)
       WORD hue;
       WORD lum;
       WORD sat;
           WORD R,G,B;                /* RGB component values */ 
          WORD  Magic1,Magic2;       /* calculated magic numbers (really!) */ 
          if (sat == 0) {            /* achromatic case */ 
             if (hue != UNDEFINED) {
                /* ERROR */ 
          else  {                    /* chromatic case */ 
             /* set up magic numbers */ 
             if (lum <= (HLSMAX/2))
                Magic2 = (lum*(HLSMAX + sat) + (HLSMAX/2))/HLSMAX;
                Magic2 = lum + sat - ((lum*sat) + (HLSMAX/2))/HLSMAX;
             Magic1 = 2*lum-Magic2;
             /* get RGB, change units from HLSMAX to RGBMAX */ 
             R = (HueToRGB(Magic1,Magic2,hue+(HLSMAX/3))*RGBMAX +
             G = (HueToRGB(Magic1,Magic2,hue)*RGBMAX + (HLSMAX/2)) / HLSMAX;
             B = (HueToRGB(Magic1,Magic2,hue-(HLSMAX/3))*RGBMAX +
    Then again I always worry about a program doing something a lot, when, actually, that's why we have computers, they can do millions of math operations in the blink of an eye. Perhaps doing it with events isn't that big a deal.
    [b]Edit:[/b] yet more - it looks like (well, to me) the canvas object takes whatever it's actual size (instead of inner image) size when making the texture for the screen. Is there any way to override this? That would make for some easy blur effects I suspect. As in - grab the layout - resize to 1/4 or so, display at the same size as layout = (slightly ugly, but) blur!
  • Pretty slick newt

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