Pattern/Mask issue

Solar2D General Questions/Discussion
#1

Hi,

I’ve never used masks and I thought this was going to be easier than it is right now.

I’m trying to figure out how to use a pattern into a non-square image, lets say a body (actual body, not a physical one). So, for different bodies, i can change the pattern (let’s say 5-6 squares with repeated images).

I’ve tried with masks and this is what i think you need:

  1. The actual body

  2. A mask for the body (duplicated image) with a power of 4 width and height and a 3pixel black stroke.

  3. Patterns 

The problem i see here is that, first of all, having to change the mask(body image) some pixels to be a power of 4, changes the size of the image so there are some parts where the pattern is no applied. This is not big but for example in the arms, there could be a complete line without fill.

Also, the color of the pattern is mixed with the body (like if it had alpha) and i can’t seem to change either the alpha property or colour.

I’ve also tried with effects, using fill… or compositePaint trying to mix two images (pattern and body) and filling it into the body) without success.

I’ve searched and found some mask guides, but as far as I understand, they all talk about different scenarios and i don’t really see how can i apply them in my game and specially be able to do what i have in mind.

Do you guys have any idea? I can be more specific if you want but i think that if i keep writing i’ll just confuse you more.

Thanks in advance

#2

Well, this should be easier to understand:
 

djCnqzl.png

I wasn’t able to create that type of mask, do you guys have any advise?

Thanks

#3

Our idea of masking is to make part of the image transparent.  What you would do is have your oval image and your pattern rect and then create a mask that’s the shape of the oval. Apply the mask to the pattern and then just draw the masked pattern at the same position as the original oval.

#4

Hi Rob, thanks for the answer.

My problem with that method is that the mask oval needs to be a multiple of 4 and have a 3pixel black border, so when i put it on the oval picture, aligned in the center, the pictures dont match by a few pixels. I would also need a way to change the pattern’s color in real time, and this method doesn’t seem to allow it.

Since a need to do this with a lot of images, i was looking for a better approach.

#5

Maybe one of the Porter-Duff blend modes would work? That looks a lot like one of the “atop” ones, for example as shown on this page (toward the bottom).

#6

@StarCrunch, that looks like a really good idea.

“srcAtop” would be ideal, considering it works the way I want, use 2 images but limiting the 2nd one to the 1st area, without affecting it’s color.

Sadly i’m at work at the moment, as soon as I get to my home I’ll try.

Thanks!

 

#7

Mmm, Atop from this site: http://ssp.impulsetrain.com/porterduff.html should be perfect, but I fail to see how to use it for 2 images?

The examples here https://docs.coronalabs.com/api/type/Paint/blendMode.html are  for only 1 image :huh:

It also says that porter-duff effect will be used only for premultiplied alpha images. I’ve searched how to do it, and it seems like its a 2-layer TIFF imagen that can be done with photoshop. This sadly is useless for me since in that case i’d just merge both layers in photoshop. What I want to do is have several patterns (and being able to change their colors maybe) and apply them to even more several images as patterns inside the game, to have a lot of choices for customization.

This is driving me crazy…

#8

Wonder if this can be done mathematically… everything i’ve found about blendMode and effects like Porter-Duff, except some guides for especific programs like Photoshop or Unity, is explained in a mathematicall way.

Now i’m starting to get worried, I should’ve tested it before.

#9

Information on those modes seems to be thin on the ground, unfortunately. I putzed around with them a little last night–seeing if a composite paint with blend mode would “just work”–but where I did get something (two stacked arrows with “dstAtop”) the clipped part of the image goes black. (One of the arrows was basically part of the background, at that point.) Maybe if it were in a snapshot…

I wouldn’t worry too much. This doesn’t look like a hard custom effect to do; look into the shader playground, if you haven’t yet done so. I’ve got a pretty good guess about how it would work, then. I just fear I’m throwing that out as a solution too often. :slight_smile:

Pseudo-code, if you do go that route:

  • Sample the first texture, t1 (your egg)

  • Sample the second texture, t2 (the pattern)

  • Apply the fill color to sample t2

  • If t1’s alpha is almost (or exactly) 0, just return vec4(0.); (outside the egg -> clear)

  • If dot(t1.rgb, vec3(1.)) is close to 0, just return t1 (the egg’s black border)

  • If t2’s alpha is close to 0, do the same (pattern is clear)

  • Return t2 (draw the pattern)

#10

Hey Star, thanks a lot for your ideas and help.

I have 0 experience with shaders, it’s something that looks pretty cool and i’ve read some guides and even watched the corona geek video about it, but it’s hard as hell, i don’t know where to start.

#11

Well, to put those steps I described in a closer-to-code form, it would be:

P\_COLOR vec4 t1 = texture2D(CoronaSampler0, texCoord); P\_COLOR vec4 t2 = texture2D(CoronaSampler1, texCoord); t2 = CoronaColorScale(t2); if (t1.a \< .01) return vec4(0.); // Choose some small epsilon if (dot(t1.rgb, vec3(1.)) \< .01) return vec4(0.); // Ditto; dot() = the dot product if (t2.a \< .01) return t1; return t2;

It’s all off the cuff, but that’s the gist of it. The dot product is just to consolidate all three color components into one check, since checking them individually isn’t good enough: if the red part is 0, green could still be 1, for example.

By all means, pick away with questions.

I’m the same guy doing the shaders segments on Corona Geek, so if you have any (courteous!) criticism, I’d be glad to hear it, here or via PM. (This is an open call, actually.) There’s a decent chance I’ll follow these up with some written material, so it would be great to know where I’ve fallen short (if the honest answer is “everywhere”, that’s fine, but please explain!), or what would be more interesting to elaborate on. (Unfortunately, I’m not sure there’s any easy way to cover the first point I want to tackle on Monday!)

#12

Well, this should be easier to understand:
 

djCnqzl.png

I wasn’t able to create that type of mask, do you guys have any advise?

Thanks

#13

Our idea of masking is to make part of the image transparent.  What you would do is have your oval image and your pattern rect and then create a mask that’s the shape of the oval. Apply the mask to the pattern and then just draw the masked pattern at the same position as the original oval.

#14

Hi Rob, thanks for the answer.

My problem with that method is that the mask oval needs to be a multiple of 4 and have a 3pixel black border, so when i put it on the oval picture, aligned in the center, the pictures dont match by a few pixels. I would also need a way to change the pattern’s color in real time, and this method doesn’t seem to allow it.

Since a need to do this with a lot of images, i was looking for a better approach.

#15

Maybe one of the Porter-Duff blend modes would work? That looks a lot like one of the “atop” ones, for example as shown on this page (toward the bottom).

#16

@StarCrunch, that looks like a really good idea.

“srcAtop” would be ideal, considering it works the way I want, use 2 images but limiting the 2nd one to the 1st area, without affecting it’s color.

Sadly i’m at work at the moment, as soon as I get to my home I’ll try.

Thanks!

 

#17

Mmm, Atop from this site: http://ssp.impulsetrain.com/porterduff.html should be perfect, but I fail to see how to use it for 2 images?

The examples here https://docs.coronalabs.com/api/type/Paint/blendMode.html are  for only 1 image :huh:

It also says that porter-duff effect will be used only for premultiplied alpha images. I’ve searched how to do it, and it seems like its a 2-layer TIFF imagen that can be done with photoshop. This sadly is useless for me since in that case i’d just merge both layers in photoshop. What I want to do is have several patterns (and being able to change their colors maybe) and apply them to even more several images as patterns inside the game, to have a lot of choices for customization.

This is driving me crazy…

#18

Wonder if this can be done mathematically… everything i’ve found about blendMode and effects like Porter-Duff, except some guides for especific programs like Photoshop or Unity, is explained in a mathematicall way.

Now i’m starting to get worried, I should’ve tested it before.

#19

Information on those modes seems to be thin on the ground, unfortunately. I putzed around with them a little last night–seeing if a composite paint with blend mode would “just work”–but where I did get something (two stacked arrows with “dstAtop”) the clipped part of the image goes black. (One of the arrows was basically part of the background, at that point.) Maybe if it were in a snapshot…

I wouldn’t worry too much. This doesn’t look like a hard custom effect to do; look into the shader playground, if you haven’t yet done so. I’ve got a pretty good guess about how it would work, then. I just fear I’m throwing that out as a solution too often. :slight_smile:

Pseudo-code, if you do go that route:

  • Sample the first texture, t1 (your egg)

  • Sample the second texture, t2 (the pattern)

  • Apply the fill color to sample t2

  • If t1’s alpha is almost (or exactly) 0, just return vec4(0.); (outside the egg -> clear)

  • If dot(t1.rgb, vec3(1.)) is close to 0, just return t1 (the egg’s black border)

  • If t2’s alpha is close to 0, do the same (pattern is clear)

  • Return t2 (draw the pattern)

#20

Hey Star, thanks a lot for your ideas and help.

I have 0 experience with shaders, it’s something that looks pretty cool and i’ve read some guides and even watched the corona geek video about it, but it’s hard as hell, i don’t know where to start.