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:
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.
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.
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?