Dropshadow effect ported to C3 and C2->C3 effect conversion notes

1 favourites
  • 15 posts
From the Asset Store
Find pleasure in juggling balls with this basic HTML5 template
  • I ported chrisbrobs Dropshadow from C2 to C3, see example below. Also works with animation frames during runtime.

    Addon

    DropshadowColorSkew Addon

    General C2->C3 effect porting notes.

    • These notes mostly apply to effect distortions which modify the uv coordinates or sample the background not directly under the current pixel being rendered.
    • The c2 uniforms pixelHeight and pixelWidth have been replaced by vec2 pixelSize.
    • When converting, I remove the above uniforms and add 'float pixelWidth = pixelSize.x;' and 'float pixelHeight = pixelSize.y;' to the top of the new shader code.
    • C3 textures are usually placed in sprite-sheets, while in at least preview mode, C2 used one sprite-sheet per texture, so the UV coordinates for a particular C3 texture/image do not range from 0-1, like they do in C2. Instead the entire C3 sprite-sheet a texture is included in ranges from 0-1 and particular C3 texture is packed within that range with other textures.
    • To help with this, some new uniforms are added: srcStart, StartEnd srcOriginStart, srcOriginEnd.
    • Read the below SDK docs to for more details on these uniforms, but generally, they show the start and end UV coordinates of the current texture within the overall sprite-sheet it's contained in.
    • Be wary of converting hardcoded numbers like 0.0, 1.0, 0.5 which are meant to indicate the top of the texture, bottom of texture, middle of texture. If they are used to indicate these aspects of a texture, replace them with the new uniforms (or formulas using the new uniforms.)
    • The normalize formula can help with converting 0-1 ranges in C2 to similar ranges in C3 for uv coordinates.
    • For example to find the 0-1 range of the current UV, use: 'mediump vec2 n = (vTex - srcStart) / (srcEnd - srcStart)'
    • An example conversion just required adding srcOriginStart, srcOriginEnd uniforms, converting vTex to a normalized value: mediump vec2 vTexN = (vTex-srcOriginStart)/(srcOriginEnd-srcOriginStart); , replacing vTex with vTexN in the rest of the code and 'denormalizing' when samping the foreground using srcOriginStart and srcOriginEnd: lowp vec4 front = texture2D(samplerFront, mix(srcOriginStart, srcOriginEnd, frontUV));
    • Another example from Dropshadow, a parameter uniform 'Rescalefactor' was passed into the effect which indicated in the range from 0-1, when to start applying the Dropshadow on the sprite. However since the texture for the sprite was in a sprite-sheet, an absolute value is not appropriate, instead, the following formulas were used to calculate a normalized Rescalefactor based on the image's location in the sprite-sheet.
    • 'float srcHeight = srcOriginEnd.y - srcOriginStart.y;', 'float normalizedRescalefactor = Rescalefactor*srcHeight+srcOriginStart.y;'

    See uniforms and more hints for C3 in the SDK documentation:

    construct.net/en/make-games/manuals/addon-sdk/guide/configuring-effects

  • Thanks for this.

    Does it take a long time to carry an effect like this to C3?.

  • It probably should take only thirty minutes or so of changing and testing, but because I did not create the effect, I had to figure out what it was doing, so that took longer. It really depends on the effect complexity and assumptions.

  • Ported the color shadow version of chrisbrobs C2 effect, added a slight X skew to control shadow a little.

    DropshadowColorSkew Addon

  • Use note, when mirroring sprite, also mirror 'xkew' to match, otherwise perceived light source will incorrectly feel like it's switching from left to right or right to left as mirroring occurs.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Note that to handle larger xSkew values, you may need to increase the transparent areas around the sprite image, otherwise the shadow will clip. This _does_ have performance implications, it creates a larger sprite to render (even if the majority of the added area is transparent.)

  • Note that to handle larger xSkew values, you may need to increase the transparent areas around the sprite image, otherwise the shadow will clip. This _does_ have performance implications, it creates a larger sprite to render (even if the majority of the added area is transparent.)

    I tried to use it as a layer fx, but it doesn't seem to work that way.

  • That's right this is more meant for individual sprites, where the shadow starts from the feet at the bottom of the sprite. In a layer, it would only do shadows down at the bottom of the layer.

    I have an offset shadow effect that works on a layer, it's more like a very simple shadow cast on a wall behind objects, rather than cast on the floor and skewed.

    It's available here:

    kindeyegames.itch.io/effects-for-construct

  • Does it do colors?

  • Yes, you can pick the shadow color and opacity.

  • Got it.

    Works great. thanks!

  • You are welcome, would be nice to see what you do with it, if you can share.

  • Does anyone still have a Construct 2 version of this effect? The download link in the original topic is dead.

  • Mikal Hello! I heard that you have a similar effect, but for the text shadow, can you drop the link? If it's paid, I can buy it

  • Mikal I mean "Directional Shadow"

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