What's the deal with (no) Drop Shadow?

0 favourites
From the Asset Store
professionally animations with Brashmonkey Spriter !
  • There appears to never have been a good solution for this. I can't imagine I'm the only one regularly looking to drop a simple shadow with offset/blur/intensity on a UI element or sprite in one game or another.

    Shadow Caster doesn't count 1. it's way overkill for simple shadows 2. no good blur effect available.

    Drawing sprites with shadows already on them also doesn't count because it's super inflexible and doesn't work with scaling, rotation etc.

    I remember Ashley (?) explaining a few years back that shadows, or maybe this was specifically blurs, are problematic but can't remember the reason. Heavy performance-wise?

    On the other hand it's such a common feature in all kinds of software; so is there really no good solution to have soft shadows or at least a good blur effect?

  • make a copy of your ui behind your UI, paint it black or grey, make it 50% opacity, put it a few pixels down and a few pixels right, badabing-badaboom

  • 1drv.ms/u/s!AkmrWgxeuxlKhIdtK-WtIlVlBvH2pQ

    Here you go. But yeah, could easily be an effect.

  • make a copy of your ui behind your UI, paint it black or grey, make it 50% opacity, put it a few pixels down and a few pixels right, badabing-badaboom

    Yes, the key word though is "blur". 😉 (and no, none of the currently available blur effects give a good gaussian blur, including combining horizontal and vertical)

  • construct.net/en/make-games/addons/255/dropshadow

    This is an effect, but maybe not what you want.. not offset.

    I guess someone could quite easily re-write this to be an offset instead of this

  • 1drv.ms/u/s!AkmrWgxeuxlKhIdtK-WtIlVlBvH2pQ

    Here you go. But yeah, could easily be an effect.

    Thanks - but then again, blur. Even a darkened sprite copy effect like this would be convenient to have, though. But still, what I meant was a soft shadow with blur, which I think is the most problematic part.

  • construct.net/en/make-games/addons/255/dropshadow

    This is an effect, but maybe not what you want.. not offset.

    I guess someone could quite easily re-write this to be an offset instead of this

    Thanks. I already have and use this here and there but this is more of a perspective shadow with very limited blur. I meant more like the simplest drop shadow effect that any graphics related software has, also CSS, Unity, Powerpoint, MS Paint ... (well not really MS Paint)

  • > construct.net/en/make-games/addons/255/dropshadow

    >

    > This is an effect, but maybe not what you want.. not offset.

    >

    > I guess someone could quite easily re-write this to be an offset instead of this

    Thanks. I already have and use this here and there but this is more of a perspective shadow with very limited blur. I meant more like the simplest drop shadow effect that any graphics related software has, also CSS, Unity, Powerpoint, MS Paint ... (well not really MS Paint)

    Yea I know, but as said I believe you can amend the effect.fx file and change the blur values and the distance/offset on the shadow.

  • kindeyegames.itch.io/effects-for-construct

    Shadow offset.

    Don't know why but blurs are exceptionally expensive, process speaking that is.

  • kindeyegames.itch.io/effects-for-construct

    Shadow offset.

    Don't know why but blurs are exceptionally expensive, process speaking that is.

    Thanks. Looks like it has everything apart from the blur though... Yes I think the reason is live uniform blurs are somehow too intensive to handle casually. I'm still surprised that there seems not to be a single working solution.

    Found on the forum that an approximation of a good looking blur can be achieved by stacking 4 directional blurs (2xV + 2xH), which indeed doesn't look bad. However not sure about performance implications of doing four blur passes of any kind. Will need to test on mobile.

  • this is what I do for UI element shadows - use a seamless 9patch shadow png (so it can be scaled to any width/height without distortion).

    since it is pre-rendered, there is no blur performance hit. Obviously this only works with rectangular objects. This demo creates 10 random shapes with a shadow - the shadow has a fixed offset but the opacity is random. The objects have drag and drop so you can move them around...

    In the top left corner I included a white version of the shadow png so that it can be coloured, but I normally only use black shadows.

    https://www.rieperts.com/games/forum/DropShadow.c3p

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • this is what I do for UI element shadows - use a seamless 9patch shadow png (so it can be scaled to any width/height without distortion).

    since it is pre-rendered, there is no blur performance hit. Obviously this only works with rectangular objects. This demo creates 10 random shapes with a shadow - the shadow has a fixed offset but the opacity is random. The objects have drag and drop so you can move them around...

    In the top left corner I included a white version of the shadow png so that it can be coloured, but I normally only use black shadows.

    https://www.rieperts.com/games/forum/DropShadow.c3p

    Brilliant!! For this specific project I need some irregular shapes so still need to do the blur stacking thing; but in general surely going to utilize this technique for some popups and other ui elements. Thanks!!

  • I love AllanR's solution, very nice!

    Here's an experiment I did with bigblur:

    construct.net/en/forum/construct-3/general-discussion-7/big-blur-effect-ported-c2-c3-149112

    Yes, it's expensive, many texture fetches per pixel.

  • Blurs (and related effects like glows) are extremely performance intensive effects, because for every pixel, it has to sample a whole patch of other pixels and combine them. Sampling multiple pixels per pixel rapidly multiplies the memory bandwidth requirement. It's so intensive that a large-radius blur could end up lagging even on reasonably high-end desktop graphics cards.

    The best way to deal with that is to downscale the image to a low-quality version, process the blur on a small image, then stretch that back up for display. (Typically downscaling alone will cause some blurring, but in the case of a blur effect, that's what you want and so it works out well with big performance savings.) However Construct's effect compositor is exceptionally complicated, and we don't currently have support for doing downscaling like that, so for the time being we're stuck with hard-coded blur radius which can't be increased efficiently. I think the effect compositor will be rewritten at some point in order to support WebGPU, at which point we'll look in to other upgrades like downscaling blurs.

    So in the mean time, the option with by far the best performance will be to just pre-render what you want in to a Sprite and add it as a child with an offset (or a 9-patch for rectangular things as in AllanR's project). If you don't need a blur, you could also use a cloned sprite with a black color filter and opacity, which is still efficient since the color filter and opacity effects don't go through the effect compositor.

  • Ashley

    Thank you for the explanation - makes sense.

    Come to think of it, I said lots of programs easily have blurs and soft shadows but most of them don't need to do it live.

    Well then, looking forward to this being possible one day. For now looking at the bright side, performance will thank us for being forced to pre-render.

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