[SOLVED]Discard the transparent color

Hello monkeys.

I have an interest on 2d game development. I use RPGMaker XP/VX and Wolf RPG to create desktop RPG. Last week I decide to make another RPG on Andriod, and I have an idea that why don’t try jme3 this time?

I know that libgdx maybe more suit this case than jme3, but I just want to have a try. It’s fun to try different things for me.

Then I did a search on our forum and read such threads:

:confused: It seems that we don’t support TMX assets for now.

Maybe I can write one, just modify the source of libtiled-java and change it into jme3.

So I start a TMXLoader project.

I have implements a few features of TiledMap, it looks like this:

The test file I use comes from bjorn/tiled’s test case.

It works fine for me until I’m play with the transparent color.

trans: Defines a specific color that is treated as transparent (example value: “#FF00FF” for magenta). Up until Tiled 0.12, this value is written out without a # but this is planned to change.

from TMX Map Format — Tiled 1.10.2 documentation

At first, I write a method like this:

/**
 * This method is used for filtering out a given "transparent" color from an
 * image. Sometimes known as magic pink.
 * 
 * @param tex
 * @param transColor
 */
private void trans(final Texture tex, final ColorRGBA transColor) {
	com.jme3.texture.Image img = tex.getImage();
	ImageRaster raster = ImageRaster.create(img);

	ColorRGBA store = new ColorRGBA();
	int width = img.getWidth();
	int height = img.getHeight();
	for (int y = 0; y < height; y++) {
		for (int x = 0; x < width; x++) {
			raster.getPixel(x, y, store);
			if (store.r == transColor.r && store.g == transColor.g
					&& store.b == transColor.b) {
				store.set(0, 0, 0, 0);
				raster.setPixel(x, y, store);
			}
		}
	}
}

No, it’s not what I want.

I checked the format of the “sewer_tiled.png”, it’s BGR8. This png file has no alpha channel. :joy:

Than I decide to write a shader. Set a transparent color and discard the fragColor if they have the same rgb.
the j3md

MaterialDef TransColor {

    MaterialParameters {
        Texture2D ColorMap
        Color Color (Color)

        // For instancing
        Boolean UseInstancing

        // Alpha threshold for fragment discarding
        Float AlphaDiscardThreshold (AlphaTestFallOff)
        
        Color TransColor
    }

    Technique {
        VertexShader GLSL150:   Shader/TransColor.vert
        FragmentShader GLSL150: Shader/TransColor.frag

        WorldParameters {
            WorldViewProjectionMatrix
            ViewProjectionMatrix
            ViewMatrix
        }

        Defines {
            INSTANCING : UseInstancing
            HAS_COLORMAP : ColorMap
            HAS_COLOR : Color
            DISCARD_ALPHA : AlphaDiscardThreshold
            TRANS_COLOR: TransColor
        }
    }

    Technique {
        VertexShader GLSL100:   Shader/TransColor.vert
        FragmentShader GLSL100: Shader/TransColor.frag

        WorldParameters {
            WorldViewProjectionMatrix
            ViewProjectionMatrix
            ViewMatrix
        }

        Defines {
            INSTANCING : UseInstancing
            HAS_COLORMAP : ColorMap
            HAS_COLOR : Color
            DISCARD_ALPHA : AlphaDiscardThreshold
            TRANS_COLOR: TransColor
        }
    }

}

the vert

#import "Common/ShaderLib/GLSLCompat.glsllib"
#import "Common/ShaderLib/Instancing.glsllib"

attribute vec3 inPosition;
attribute vec2 inTexCoord;
attribute vec4 inColor;

varying vec2 texCoord;

void main(){
    #ifdef HAS_COLORMAP
        texCoord = inTexCoord;
    #endif

    vec4 modelSpacePos = vec4(inPosition, 1.0);

    gl_Position = TransformWorldViewProjection(modelSpacePos);
}

the frag

#import "Common/ShaderLib/GLSLCompat.glsllib"

#if defined(DISCARD_ALPHA)
    uniform float m_AlphaDiscardThreshold;
#endif

#ifdef TRANS_COLOR
    uniform vec4 m_TransColor;
#endif

uniform vec4 m_Color;
uniform sampler2D m_ColorMap;

varying vec2 texCoord;

void main(){
    vec4 color = vec4(1.0);

    #ifdef HAS_COLORMAP
        color *= texture2D(m_ColorMap, texCoord);     
    #endif

    #ifdef TRANS_COLOR
        if(color.rgb == m_TransColor.rgb) {
            color.a = 0.;
        }
    #endif
    
    #ifdef HAS_COLOR
        color *= m_Color;
    #endif
    
    #if defined(DISCARD_ALPHA)
        if(color.a < m_AlphaDiscardThreshold){
           discard;
        }
    #endif
    
    gl_FragColor = color;
}

My question is: where dose the pink edge come from?

1 Like

You gotta add some threshold. I had same pink edge problem when trying to use a shader @MoffKalast made for me and is supposed to discard all pixels of defined color. Straight away by directly comparing pixel on image with defined color I got pink edges just like you. Then he added threshold option, I played with the values a little and now it works.

Thanks for your advice.

I tried it like this.

#ifdef TRANS_COLOR      
    float threshold = 0.1;
    if (abs(color.r - m_TransColor.r) <= threshold
     && abs(color.g - m_TransColor.g) <= threshold
     && abs(color.b - m_TransColor.b) <= threshold) {
        color.a = 0.;
    }
#endif

#if defined(DISCARD_ALPHA)
    if(color.a < m_AlphaDiscardThreshold){
       discard;
    }
#endif

set threshold = 0.5

I suppose that there are more than one bug here. not only the transparent color.

Maybe I have calculated the texCoord wrongly.

Well, your tile also looks very blurry… so maybe you just want to turn filtering off so you get the pixelated effect that is probably more desirable.

Just set the mag filter on the texture to “closest” or “nearest” or whatever.

Edit: the pink leaking in is because of the blurring… the pink pixel mixes with the neighbors. You’d have to set the threshold grossly high to get rid of it. Else, just turn off the blurring as above.

2 Likes

I love you @pspeed !! I set the MagFilter to Nearest and it’s perfect.
:relaxed:

in jme3

in Tiled Map Editer

yet another test case.

8 Likes

Add limit HexagonalRender/IsometricRender support.

Hexagonal tmx test case

Isometric tmx test case

Orthogonal tmx test case

6 Likes

@yan, you are doing great work here.

Well done and keep it up. I have my eye on this project.

And you have my eye.

Thanks for your watching.

I found more tmx files and trying to support Orthogonal, Isometric, Hexagonal and Staggered. I still working on it.

It’s easy to support most orhogonal tiled map, but a little wild for isometric, hexagonal and staggered.

should be

but I have:

should be

I have

should be

I have

EDIT: I’m going to do some math before coding.:slight_smile:
EDIT2: It seems that I need a gamma correction to produce right image.

3 Likes