WebGL Effects change while scrolling

0 favourites
From the Asset Store
Beat'em Up / 2D Scrolling
$12.60 USD
30% off
Classic style beat'em up template. Punch & Kick foes across the screen.
  • Problem Description

    When objects with applied WebGL effects are on a layout that scrolls they change their look / behavior depending on where the layout is.

    Description of Capx

    The .capx is made up of simple objects with behaviors, there are no events in the eventsheet

    Notice how the waterfall changes it's color / style completely when the layout scrolls also notice how the warp effect on the pink rectangle changes when the layout scrolls...

    Steps to Reproduce Bug

    • Add object (sprite, tiledbg etc.)
    • Apply a distortion WebGL-Effect
    • Scroll the layout

    Observed Result

    WebGL Effects change their look / behavior

    Expected Result

    WebGL Effects stay how they were designed at 0-layout position no matter where the layout is scrolled / scrolling to

    Affected Browsers

    • Chrome: (YES)
    • FireFox: (YES)
    • Internet Explorer: (YES)

    Operating System and Service Pack

    Windows 7 Pro, latest SP

    Windows 8.1 Pro, latest SP

    Construct 2 Version ID

    180 (happened before too)

    At work i have an integrated intel graphics card and at home i have a Radeon 290X with latest drivers, it also happens on a friends pc with nvidia graphicscard

    EDIT: Forgot CAPX: [attachment=0:2piyyftf][/attachment:2piyyftf]

  • Could anyone confirm this please?

    Here is how it looks in chrome: http://youtu.be/Q9hsV3h7M7U

  • It's working correctly, it's just running the shader in screen space instead of layout co-ordinates. Also looks like a duplicate of https://www.scirra.com/forum/effects-scrolling-scaling_t74041.

    The shaders need to be updated, or most likely new ones added to process in layout co-ordinates instead and avoid breaking the old shaders.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Can i edit the shaders myself and add / change a line or two to fix this?

    If so, what would i need to change to make it work?


  • BUMP after ~3 Weeks... i really REALLY need this fixed.

    I'd do it myself but i have no idea how the shaders work.

  • One month later, any update on this issue?

  • It's not a current priority, and it has been reported a couple of times before (I think there are some duplicate issues going back in the bugs forum). It's a bit tricky really because it's not just scrolling, it's also getting it to display the same when layer scaling and rotation are applied, which significantly complicates the calculations used in some of the shaders, and that's not necessarily a simple problem to solve.

  • Hey Ize, <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

    The color change effect you're seeing in the waterfall is coming from the "Lens" effect on the WaterfallTintParticle object. The Lens zooms the background, but it does so relative to the center of the window area, no matter where the effected object is. As far as I know that is the intended behavior for the Lens shader. It gives you a consistent 3D zoom kind of effect across multiple objects regardless of where they are on the screen.

    To your other question, yes, you could modify the shaders yourself to get the behavior your looking for. As Ashley mentioned this can get a little complicated. If you want to counteract layout translation, rotation, and scaling, you'll need to have parameters that allow you to feed the current translation, rotation, and scale info to the shader. Since rotation and scale will have a center point that they are rotating or scaling around, you'll have to have parameters that allow you to feed in those cords as well. But it is doable.

    What complicates things is that C2 will sometimes automatically account for the translation, rotation, and scaling of an object when rendering shaders, and other times it won't.

    To easily see an example of this,

    1. Create a new project.

    2. Create a red square, and add the "Scan lines" effect to it.

    3. If you rotate the square, you'll notice that the lines rotate with it.

    4. Leave the square rotated to a diagonal angle.

    5. Now add a "Multiply" effect, and place it *above* the "Scan lines" effect, in the effect list.

    6. By being the 2nd item in the effect chain, the "Scan lines" effect no longer rotates or translates with the object.

    What you can't see with the "Scan lines" effect is that scale is also no longer driven by the object.

    If you want to modify an effect to make it completely immune to those issues, you'll have to account for this sometimes-on sometimes-off behavior in your modification as well, and provide a parameter that allows you to disable some of your translation, rotation, and scaling parameters, so that you don't *double* account for those transformations in cases where C2 is already doing it automatically. Also the Y axis is upside down for effects from slot 2 onwards, so you may need to handle that as well, depending on what kind of directional aspects the effect has.

    If you just want to try adding in a pair of translation parameters, which might be enough to solve the translation issue you're seeing in the ripples, parameters are set up in an effect's .xml file. The parameters can then be used as variables in the shader code of the effect's .fx file.

    This website http://shdr.bkcore.com/ is an in-browser GLSL editor, and a handy way to test proper compilation of shader code, before trying to open the shader in a project.

    One really important thing to know when working in GLSL code, is that, unless you explicitly want a number to be an integer, you must add a decimal point and decimal digit to it, even if the digit is zero. (e.g. Use "27.0" NOT "27") It's weird, but it's one of my most common bugs when I'm coding shaders.

    The Construct 2 SDK has a template effect that describes how the various parts of the two effect files work. https://www.scirra.com/manual/15/sdk

  • Ashley & fisholith i appreciate your replies, thanks for answering

    i hoped it would be a simple fix that could be done in a short time... i'm no programmer so after checking out the shader example and the website i know that i can't fix the shaders myself

    i guess i'll just have to wait till someone picks this up or ashley has the time to do it.

    it's really annoying for me because i rely on shaders alot.

    here is another small part of my game spellbook (foliage) that looks pretty awesome


  • Ize , the effect doesn't look as bad as you describe it. It breaks down when you continuously alternate the player's direction from left to right and so forth. Otherwise, if the direction is constant the effect works (a least in my eyes) as well as it does when the player stays still.

    I think that if you reduce the amount of the effect (less wind) the effect will look even better and the problem will be even more subtle.

  • i've "fixed" it a bit by reducing the Y-intensity, can be seen here:

    however i would still prefer if the shaders would work how i expect them to

  • Ize , It looks very nice! Bravo!

  • Thanks

  • Hello everyone,

    I'm sorry to bump an old thread without a solution, however, I've recently also run into this very issue.

    Did anyone ever take a look at some of these shaders (such as warp or water)?

    It would be greatly appreciated if any shader veteran out there could ascertain exactly what part of these calculations affect scrolling/zooming as well as a solution to the issue.

    Thank you!

  • Ashley

    "it's just running the shader in screen space instead of layout co-ordinates."

    I am running into this problem each time i am creating a game with scrolling following the character.

    There are so much great effects which could be applied if this was solved.

    For instance: I wanted to create clouds using effects for a top down game, and the clouds look great.

    But they are as u say in screen space which makes no sense to the player.

    So now i cant use effects in such games.

    At this state it is a real limitation to what we can do with effects.

    Please have someone put effort into solving this.

    I know u said it is not easy to solve this, but well... yeah, im never doubtfull in the skillset of scirra.

    Kind regards.


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