Using a texture as a mask

Troubleshooting graphics
1

I downloaded the icon pack from here: http://game-icons.net/ and turned all of the black backgrounds to transparent. Now, I want to mask those all-white icons with a few striped, colored textures. This will give the icons some style without requiring me to color in every icon by hand and import tens of thousands of them.

I have attempted to achieve this by attaching the striped, colored texture on top of an icon and then changing its BlendMode, but that doesn’t do anything useful. The pixels in the icon remain completely white, while the area surrounding the icon now has the stripe texture. I want the stripe texture to actually subtract from the icon, and not subtract from the GUI behind the icon. Unfortunately, I don’t even see a BlendMode for subtraction. Is there an easy way to do this or do I need to use a crazy shader?

Thanks,
Andy

2
@admazzola said: I downloaded the icon pack from here: http://game-icons.net/ and turned all of the black backgrounds to transparent. Now, I want to mask those all-white icons with a few striped, colored textures. This will give the icons some style without requiring me to color in every icon by hand and import tens of thousands of them.

I have attempted to achieve this by attaching the striped, colored texture on top of an icon and then changing its BlendMode, but that doesn’t do anything useful. The pixels in the icon remain completely white, while the area surrounding the icon now has the stripe texture. I want the stripe texture to actually subtract from the icon, and not subtract from the GUI behind the icon. Unfortunately, I don’t even see a BlendMode for subtraction. Is there an easy way to do this or do I need to use a crazy shader?

Thanks,
Andy

This depends on the shader…

What are you using to display the icons?

In most cases, a greyscale image is used to define alpha maps. color.a *= alphamap.r or some such thing which makes solid black transparent, solid white fully opaque and shades of grey somewhere in between.

3

Yes it is indeed a grayscale texture and it is going to be used for an alphamap. So would it be something like this: https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:jme3_shaders ?

The only issue is that the icons are a spritemap, not a single image. That adds a level to complexity to the shader, does it not ?

Andy

4
@admazzola said: Yes it is indeed a grayscale texture and it is going to be used for an alphamap. So would it be something like this: https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:jme3_shaders ?

The only issue is that the icons are a spritemap, not a single image. That adds a level to complexity to the shader, does it not ?

Andy

Not trying to force my gui library on you by any means… but the reason I bring it up is, this is all provided for you. I can only assume that Nifty and Lemur provide similar solutions.

So, I guess the next (and probably obvious answered) questions would be:

  1. This is for ui components, yes?
  2. What gui library are you using? Or are you rolling your own?
  3. If you are using someone else’s gui library, have you asked about specific solutions provided for you?

In the case of tonegodGUI, you simply pass the Element the alpha map as a string path… if you enable texture atlasing, you pass the a string that is parsed into texCoords to use the portion of the sprite map you need (this also allows you to use other portions of the same sprite map for pulse type effects that fade in/fade out between the two alpha maps, color maps, etc).

I’d venture a guess that both the other libraries do something very similar.

EDIT: Oh! Also… both tonegodGUI and Lemur have source code available. So if you like, you can feel free to canablize them for how-to’s, etc.

EDIT 2: Um… I mean you can feel free to canablize tonegodGUI. You’ll have to ask @pspeed about Lemur, as I don’t really have the right to say what I did (it wasn’t intentional! I swear!!)

5
@t0neg0d said: EDIT 2: Um... I mean you can feel free to canablize tonegodGUI. You'll have to ask @pspeed about Lemur, as I don't really have the right to say what I did (it wasn't intentional! I swear!!)

LOL. It’s the JME BSD license or whatever. Let’s you do pretty much anything with it… it was designed to be cannibalized, in fact. The jar is small enough that you don’t really even need to break it up… but copying source files is allowed, too.

6
@admazzola said: Yes it is indeed a grayscale texture and it is going to be used for an alphamap. So would it be something like this: https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:jme3_shaders ?

The only issue is that the icons are a spritemap, not a single image. That adds a level to complexity to the shader, does it not ?

Andy


Not trying to discount any juicy talk about shaders, but have you considered simply inverting the colors on your sprite atlas so the icons are black (hence transparent)?

Edit: re-read OP :-/ Using gimp to modify your sprite map doesn’t answer your questions about applying a colored pattern to a portion of your image, does it? :stuck_out_tongue:
I’ll just sit over there and listen quietly…

7

Hmm. I guess what I am hoping for is more advanced material blending functions with node-groups or a specific rendering order. This sort of this might be possible in base OpenGL, I remember doing some of it when I made a game in LWJGL. Some sort of push-blend-pop stuff. Then, when I do a blend, it won’t affect the other stuff. Like this: 18. OpenGL Popping and Pushing Matrices – Swiftless Tutorials - OpenGL, GLSL & WebGL Tutorials for the computer graphics beginner

Do we get access to that low level graphics control in JME3? I thought it was built upon LWJGL. I have no problem getting my hands dirty in Java, but I am uncomfortable in .frags and .verts.

Other then that, where is the best literature to learn about coding in .frags and .verts? I know so many programming languages but its so nasty in there since it doesn’t offer good debugging capabilities.

Thanks,

Andy

8
@admazzola said: Hmm. I guess what I am hoping for is more advanced material blending functions with node-groups or a specific rendering order. This sort of this might be possible in base OpenGL, I remember doing some of it when I made a game in LWJGL. Some sort of push-blend-pop stuff. Then, when I do a blend, it won't affect the other stuff. Like this: http://www.swiftless.com/tutorials/opengl/pop_and_push_matrices.html

Do we get access to that low level graphics control in JME3? I thought it was built upon LWJGL. I have no problem getting my hands dirty in Java, but I am uncomfortable in .frags and .verts.

Thanks,

Andy

You would probably have to explain exactly what you want to do. The linked article is kind of “old school”… I haven’t considered doing anything like that since before shaders existed.

9

Okay I found this: http://www.eng.utah.edu/~cs5610/lectures/GLSL-ATI-Intro.pdf

I guess that will provide me with a good start. Now that I look at it, shaders look strangely familiar to that old way of doing things. I’m going to try this at a later time and just animate my icons in a simpler way, it just isn’t worth it right now. My idea is too far-fetched.

10
@admazzola said: Okay I found this: http://www.eng.utah.edu/~cs5610/lectures/GLSL-ATI-Intro.pdf

I guess that will provide me with a good start. Now that I look at it, shaders look strangely familiar to that old way of doing things. I’m going to try this at a later time and just animate my icons in a simpler way, it just isn’t worth it right now. My idea is too far-fetched.

I’m still not clear on what you are trying to achieve because from your first post it seemed like a texture + alpha map was all you needed with any of the standard JME shaders.

Edit: actually, it seems only Lighting supports alpha maps.

11

I’m trying to add an alpha map to the icons. This would be easy enough to do with a shader, just multiply the 'a’s and do a draw. However, my alpha map is animated. This means that I would probably have to add spritesheet-reading capabilities into a shader, like… indexing through each tile.

12
@pspeed said: ...

Edit: actually, it seems only Lighting supports alpha maps.


!?
I am really hoping to do things like:
Alpha-mapped mesh

We can’t alpha map materials? Please tell me I’m misunderstanding! At least lack of comprehension is familiar and comforting to me… :slight_smile:

13

We can definitely alpha map materials, and do it with animations. The ‘dissolve’ shader in shaderblow does it. I was just hoping there was an easier way but there isn’t :smiley: Shaders aren’t THAT hard anyways, I am just being a baby about it.

1 Like
14
@foxhavendesigns said: !? I am really hoping to do things like:

We can’t alpha map materials? Please tell me I’m misunderstanding! At least lack of comprehension is familiar and comforting to me… :slight_smile:

Either I don’t understand your question or you didn’t understand what I said. The lighting shader supports alpha maps.

15

The latter, thank you. :slight_smile: (I panicked)
So… what did you mean by “…only Lighting supports alpha maps.”?
Is that to differentiate vs unshaded (like GUI elements)?

16
@foxhavendesigns said: The latter, thank you. :-) (I panicked) So... what did you mean by "...only Lighting supports alpha maps."? Is that to differentiate vs unshaded (like GUI elements)?

Lighting supports alpha maps. Unshaded doesn’t.

17

I am guessing this is what he means… from this: https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:beginner:hello_material

Material sphereMat = new Material(assetManager,
“Common/MatDefs/Light/Lighting.j3md”); <— use this shader
sphereMat.setTexture(“DiffuseMap”,
assetManager.loadTexture(“Textures/Terrain/Pond/Pond.jpg”));
sphereMat.setTexture(“NormalMap”,
assetManager.loadTexture(“Textures/Terrain/Pond/Pond_normal.png”));
sphereMat.setBoolean(“UseMaterialColors”,true);

sphereMat.setTexture(“AlphaMap”,
assetManager.loadTexture(“Textures/Terrain/Pond/Pond_alpha.png”)); ← here is your alpha map, this won’t crash because the Lighting.j3md has a variable “AlphaMap” unlike unshaded.j3md

1 Like
18

I got there… went a little off-road (and over a cliff or two), but I got there :stuck_out_tongue:

My confusion was in not realizing Lighting ==Lighting.j3md, and in jumping to the conclusion he was talking about a whole class, er, category of illumination objects, rather than a material def. I was picturing in my mind some glaring hole in jME that somehow got by everyone and I was the only usecase that noticed. Quite egocentric of me, I’m sure…

So, between my last post and your posts, I re-read all of that stuff you just linked to :slight_smile: That never hurts… except for the time lost :-/

Sorry for the interruption. :stuck_out_tongue:
Carry on.