Combine Blend modes?

Let me prefix this post by explaining that I don’t know much about graphics programming, so maybe what I’m going to ask is just plain silly.

Basically we want a flashlight effect using a circular image that has been created in Photoshop. When in Photoshop we can apply the Overlay blend mode to it over one of our pre-rendered scenes as a test and it works awesomely, however this blend mode isn’t available to us in Corona it seems.

As far as I can tell Android ( and I presume OpenGL es ) supports this as it has a porter duff mode called Overlay - which I can only presume is the same mode that photoshop uses.

From my research it seems that the Overlay mode combines both Multiply and Screen to darken and lighten respectively.

My long winded questions is; can we get Overlay blend mode supported, or could we somehow combine multiple blend modes?

I know we can do custom blend modes, but going back to early pre-fix, that is all crazy stuff to me  :slight_smile:

I am not a graphics programmer per se, but your question sounds to me like the existing Flashlight sample project that comes with Corona. What is the difference, visually, between what you want and this sample project?

https://www.youtube.com/watch?v=WjKsRyHAlo0

Or perhaps you are looking for something a bit like the SnapshotEraser sample app? It uses a snapshot and the following fill/blend mode:

 

blendMode = { srcColor = “zero”, dstColor=“oneMinusSrcAlpha” }

 

https://docs.coronalabs.com/api/type/Paint/blendMode.html

I looked at the flashlight sample but that’s not quite what we’re after. In regards to the SnapshotEraser effect, that’s not what we want for this but weirdly that effect will work for another part of the game which I still had to figure out how to implement so thanks for that!  :smiley:

Below are two images, one is a work in progress scene without the torch added and the second is the same scene but with the torch added with Overlay blend mode. Again this is all in photoshop, that mode doesn’t seem to be supported yet for corona. 

We had thought of using masks however that would just hide part of an image, what this does is lighten some parts of the background and darken others.

noTorch.jpg

torch.jpg

We support Overlay but its with a Composite paint. See: https://docs.coronalabs.com/guide/graphics/effects.html#composite.overlay

Rob

I had seen the composite paint mode however wasn’t sure if that would be the same result that photoshop had.

Sadly the way our engine is setup using the mode like that for this torch wouldn’t be best. I’ve just given it a go though and the result doesn’t seem to be the same as I’d have hoped.

Have you played around with normal maps?

I’ve been using Sprite Illuminator:

https://www.codeandweb.com/spriteilluminator

You can use composite paint “normalMapWith1PointLight”

object.fill = compositePaint

object.fill.effect = “composite.normalMapWith1PointLight”

Try adjusting the position of the light source so it is in front of the image like a shining flashlight.  Also adjust the brightness parameters.  I’m thinking your normal map could be very shallow since light and not depth is the effect you desire.  You could probably also play around with 2 images and their normal maps each set to 50% alpha to get a secondary ring of light (as I see in your image).

I am not a graphics programmer per se, but your question sounds to me like the existing Flashlight sample project that comes with Corona. What is the difference, visually, between what you want and this sample project?

https://www.youtube.com/watch?v=WjKsRyHAlo0

Or perhaps you are looking for something a bit like the SnapshotEraser sample app? It uses a snapshot and the following fill/blend mode:

 

blendMode = { srcColor = “zero”, dstColor=“oneMinusSrcAlpha” }

 

https://docs.coronalabs.com/api/type/Paint/blendMode.html

I looked at the flashlight sample but that’s not quite what we’re after. In regards to the SnapshotEraser effect, that’s not what we want for this but weirdly that effect will work for another part of the game which I still had to figure out how to implement so thanks for that!  :smiley:

Below are two images, one is a work in progress scene without the torch added and the second is the same scene but with the torch added with Overlay blend mode. Again this is all in photoshop, that mode doesn’t seem to be supported yet for corona. 

We had thought of using masks however that would just hide part of an image, what this does is lighten some parts of the background and darken others.

noTorch.jpg

torch.jpg

We support Overlay but its with a Composite paint. See: https://docs.coronalabs.com/guide/graphics/effects.html#composite.overlay

Rob

I had seen the composite paint mode however wasn’t sure if that would be the same result that photoshop had.

Sadly the way our engine is setup using the mode like that for this torch wouldn’t be best. I’ve just given it a go though and the result doesn’t seem to be the same as I’d have hoped.

Have you played around with normal maps?

I’ve been using Sprite Illuminator:

https://www.codeandweb.com/spriteilluminator

You can use composite paint “normalMapWith1PointLight”

object.fill = compositePaint

object.fill.effect = “composite.normalMapWith1PointLight”

Try adjusting the position of the light source so it is in front of the image like a shining flashlight.  Also adjust the brightness parameters.  I’m thinking your normal map could be very shallow since light and not depth is the effect you desire.  You could probably also play around with 2 images and their normal maps each set to 50% alpha to get a secondary ring of light (as I see in your image).