Transparent shadows without separate layer? [SOLVED]

Following, as I'd love to know a solution to this as well. Personally I haven't found a situation where it doesn't work to have the shadows on their own layer (I do this frequently in my current project), but I can understand the requirement.

It is possible to do it with masks, but the results aren't pixel perfect, and you'd end up with issues where the shadow is masking out other sprites.

Besides a layer I suppose you could use a canvas instead.

Draw all the shadows to the canvas with full opacity and all the other objects with a “destination out” blend. Then you can set the canvas’ opacity.

I’m a bit iffy if the paste action be used like that in c3. You’d need to draw things in order.

Another idea that would work is a layer. All the shadows are there and clones of all the objects with “destination out” blends. May be a bit tedious to work with though.

What it comes down to is if we want multiple shadows to be equally transparent, even in the overlapping areas, we need to draw them full opacity together first and then make them transparent.

I’ll try to make an example tomorrow. Basically one layer would be just the objects, and the other layer would have objects and shadows, but the objects are subtracted away.

So here are some ideas. For an example I had a few solid green balls that are in front of and behind some blue clouds. The goal is for the clouds to be uniformly blended together. I went for the simple case of one object type, so you'd either have to use a family or do something more complex for multiple types.

The first basically clones the first layer onto a second. Then all the objects are given 100% opacity and the solid objects have destination out.

dropbox.com/s/vhegleb8dry4l15/shadow_blend_clones.capx

The second C2 example uses the third party paster plugin. All the objects are drawn to the paster, but the solid are erased.

dropbox.com/s/q893tdqvcaqmgu5/shadow_blend_paster.capx

The C3 version using the drawing canvas. Basically the same as the paster one.

dropbox.com/s/i7nl6hvrgdlkyhy/shadow_blend_c3_canvas.c3p

Wow thank you for those examples R0J0hound!

I tried with the cloning since I wouldn't know how to even start trying to transform the drawing canvas one with families and sorting. I have tried adjusting it as a family with sorting and after an hour I'm still getting a full white screen, so I sadly don't really understand how this can work with families.

I had tried having a separate shadow and ball object, and then a separate "Sprite2" for each and putting the ball and shadow inside a family (for sorting purposes), but it just either doesn't seem possible or my knowledge in that is way insufficient. Probably the latter. Still, thank you for the nice examples.

I think the drawingCanvas example would be the simplest one since it just uses the z order of the objects.

Do you have an example project of how you set up the objects? If the shadows and objects are in one family then that’s fairly simple. If instead it’s an assorted variety of objects then that is a bit less simple.

The verbose pseudo code of what we want to do is this:

For each object ordered by zorder
— is a shadow? Make visible and set opacity to 100
— is not a shadow? Set blend to destinationOut
— paste object
— set blend mode to normal
— is shadow? Make invisible

Sorry for the late reply. This would be an example matching the one in my project. It's pretty much what I'm trying to accomplish

https://drive.google.com/file/d/1IeVm846xSOU5uJEtvNOxCwwAj8AbqEjb/view?usp=sharing

I haven't yet used the drawing canvas so it might as well be the simplest, I don't know. But I also have a lot of effects on the layer, not sure if they work with the canvas? I assume canvas would be more efficient than having clones, especially if objects sine and have animations

Ah, I see. Yeah, doing what you want is much simpler than what I proposed. I'd say still use the drawingCanvas. You can even use it to make the shadows from the objects directly.

This clears the canvas, rotates the trees 221 degrees, pastes trees to canvas, return the trees to 0 degrees, then draws a black rectangle with the "source in" blend.

dropbox.com/s/3noo9ie08ckvx6r/shadow_blend_simple.c3p

Or instead of rotation, you could use distort meshes to make a skew.

dropbox.com/s/qczxy22l8tr936s/shadow_skew.c3p

I suspect the issue has to do with the size of the drawing canvas.

Don’t make it the size of the layout, just make it the size of the screen, and position it to the scroll position.

You could make the draw reactance still cover the layout, or just make it cover the visible view area.

Since it is visual effect you don’t need it to be bigger than the screen. Besides that will save video ram too.

Anyways the reason the size of the canvas is probably causing your issue is the canvas is using a texture and webgl has a maximum texture size per device which is smaller than that layout size.