I read all the million posts about the problem with black lines shown on screen when rendering tilemaps on libgdx. All the solutions talk about add padding to the tile sets. So I did it, but it didn't solved the problem.
I think maybe I didn't understand it well, so I will post here the process I'm doing, and I will be glad if someone can point out my mistake, if any:
This is an image of my initial tile set:
This is an image of my tile set after adding padding using GIMP plugin which was suggested from this post:
Then in Tiled, I add this tileset and set Margin to 1px and Spacing to 2px like written in this post.
Now as I understand the problem should be solved, but still when I run the program I get:
I can add code parts if you want, but there is really nothing special the way I render my map- just load it with TmxMapLoader and render with MapRenderer (using camera also, of course, otherwise the problem wouldn't appear).
I know this thread is very old, but it took me two hours to figure out the solution myself. So in case somebody has the same problem in the future:
I noticed that only some tiles behaved like this - for example, a grass tile would, a water tile wouldn't. Even if they were used on the exact same position in the map.
For me the problem was - apparently - that my PNG tile sheet's height was not a power of 2. A few days before, I added a line to an existing tilesheet and changed the height from 1024px to 1056px. After a lot of experimenting, I found out that after removing this line again, the black stripes would disappear.
Load your maps like this:
TmxMapLoader.Parameters() params = new TmxMapLoader.Parameters();
params.generateMipMaps = true;
TmxMapLoader mapLoader = new TmxMapLoader();
TiledMap map = mapLoader.load("pathToMap", params);
I had the same problem I fixed it by changing the size of my spritesheet to a power of two
example :
640*640 --> wrong
512*512 --> right
Related
I'm using LibGdx and Tiled and when moving around the screen, there are both horizontal and vertical lines appearing on the game. I can post any code you need, if necessary. How do I get these lines to stop?
Here's a gfycat gif of the lines:
http://gfycat.com/FastUnnaturalAmericanwirehair
Edit:
Here's a small bitbucket repository, as small as I could get it that has the same glitch in it:
https://bitbucket.org/Chemical_Studios/example-of-line-glitch/src/8eeb153ec02236d836763072611bd7aa55d38495/minimalExample/src/com/weebly/chemicalstudios/minEx/?at=master
This is because you need to add a padding to your tiles.
This is a pretty common problem and you are not the first to encounter it. Basically due to rounding errors when scaling and panning around, sometimes you will render the area "between" two tiles, which will result in nothing being rendered -> black background colour comes through.
You basically need to use some tools to add the padding to your tileset. In this forum thread I explained how to do it.
There is also one more questions regarding this topic on stackoverflow here.
When you have rounding errors you can always force the number to snap to the grid you want. In my case that looked like this:
gameCam.position.x = (float) Math.round(player.b2body.getPosition().x * 100f) / 100f;
Because I used a pixels-per-meter constant of 100f throughout the game, to scale everything
Im working with text recognition with Java and Tess4J. Im recognizing black and red images (separately), both with white background, very clear. With the black ones, it works perfectly, but with the red ones, tesseract just goes crazy. I tried adding the variable ("editor_image_text_color", "RED"), but it does not help at all.
Right now, what I do for the red ones is scan the whole image and set every red pixel to black, which I find very inefficient, because I need a few calculations for each pixel, due to the pictures have different intensity of red that I have to conserve.
Thanks a lot!
For instance:
http://imageshack.us/photo/my-images/593/3eu9.png/ does always give me a 9, but
http://imageshack.us/photo/my-images/818/efxf.png/ does not, is like if it were losing the number in the preprocessing, because the black ones work extremely well, but the red ones arent any better than a random number.
Try to convert the colored image to grayscale using ImageHelper.convertImageToGrayscale(BufferedImage image) method.
Thanks for the answer nguyenq, I tried that function and it didn't work very well, but after checking out that ImageHelper class, I used the method:
ImageHelper.convertImageToBinary(BufferedImage image)
and it works quite well, thanks!
I'm using LibGDX to make a platformer. I'm using square tiles for the platforms but when they are drawn some of them have gaps between them. When I zoom in/out or move the camera around the gaps move position.
More details:
Tiles are 32x32 and I have tried both 32x32 and 64x64.
Tiles are lined up 32 pixels apart (e.g. first tile would be x=0 y=0, second x=32 y=0, and so on in both x and y directions).
The gaps are not texture artifacts as I have checked this.
I use the TexturePacker with padding.
My best guess is that it is a problem when converting the textures to screen coords but have no idea how to fix this and I couldn't find any solution. I have checked and double-checked my precision with tile sizes and lining them up.
Has anyone had the same problem or know how it fix it?
I got it fixed by setting the duplicatePadding field of the TexturePacker.Settings class to true.
Example code:
import com.badlogic.gdx.tools.texturepacker.TexturePacker;
import com.badlogic.gdx.tools.texturepacker.TexturePacker.Settings;
Settings settings = new Settings();
settings.maxWidth = 1024;
settings.maxHeight = 1024;
settings.duplicatePadding = true;
TexturePacker.process(settings, "source", "destination", "name");
Well, I'm here to save your day!
The solution is called "Edge padding". Now if you are working with tilesets, I can assure you that this will work.
Personally I'm using Tiled which allows me to adjust margin and spacing in my tilesets. The only downside by this is that you'll have to use GIMP with this plugin: http://registry.gimp.org/node/26044
This plugin will let you apply edge padding to your tileset and voila! No more ugly artifacts.
Bleeding
Gaps
The short answer is that it may be your filter, which likely needs to be set to NEAREST.
Might also want to check out the working tutorials at Libgdx.
It's called "texture bleeding". You need to add padding to your tiles so that when the texture bleeds, it can collect the correct pixel data to fill the gap.
I know it's a bit late to answer on this post, but when I was looking for a solution I came here.
However, for me I found a much easier way to get rid of the flickering or gaps that appear randomly between the tiles.
I simply added a cast to the very long decimals I got for the player's position:
camera.position.set((int)robot.position.x, (int)robot.position.y, 0);
That made the player move very weirdly and to make him move smoothly again I added a cast to its render method aswell:
batcher.draw(robotSprite, (int)robot.position.x, (int)robot.position.y, 16, 16);
Et voilà! Working perfectly for me.
I would post my solution here and what I had tried for Libgdx about this problem.
--
T1. Make original spritesheet (no atlas file) that downloaded from somewhere to padding 2.
A1. This would be impossible for repacking the spritesheet that have no atlas, even if you find a slice/splitter tool, it should be a bunch of images that need to be repack properly for TiledMap(.tmx)
A1(Updated). Script that provided by #Nine Magics would be the best way to do this! (I use this as my final solution)
--
T2. Use TiledMapPacker that provided by libgdx-nighty or gdx-toolg, The batch code should be:
java -classpath "gdx.jar";"gdx-natives.jar";"gdx-backend-lwjgl.jar";"gdx-backend-lwjgl-natives.jar";"gdx-tiled-preprocessor.jar";"extensions/gdx-tools/gdx-tools.jar" com.badlogic.gdx.tiledmappacker.TiledMapPacker "PathToYourProject\android\assets\RawMap" "PathToYourProject\android\assets\Map" --strip-unused
A2. The output .tmx that could not be readable by Tiled If you are using complex folder path to category your .png files. And the output file could be possibly failed to load by AtlasTmxMapLoader.
--
T3. Camera position correction, make camera position to integer. The code liked #Julian or #strangecat from libgdx tiledmap flicker with Nearest filtering
A3. I use this solution for no problem, and also post my code that different from them.
float cameraX = (int)(mainCamera.position.x * Game.PPM_X) / Game.PPM_X;
float cameraY = (int)(mainCamera.position.y * Game.PPM_X) / Game.PPM_X;
float cameraZ = mainCamera.position.z;
mainCamera.position.set(cameraX, cameraY, cameraZ);
And also load it with TmxMapLoader.Parameters
TmxMapLoader.Parameters params = new TmxMapLoader.Parameters();
params.textureMinFilter = Texture.TextureFilter.Linear;
params.textureMagFilter = Texture.TextureFilter.Nearest;
params.generateMipMaps = true;
assetManager.load(TILED_MAP_SETS.FIRST_MAP, TiledMap.class, params);
If you used PPM and want to move pixel by pixel, you could use this integer correction for your game, If not you could just convert the position to integer.
I almost wasted whole day to slove this, hope these investigation could help every game developers :)
Edit(2018/04/21)
I found out that Unity is also having the same problem, but I haven't tested If Libgdx have 2x Anti-Alias setting by default. Libgdx might fix the issue as Unity by turning off the Anti-Alias.
When I try to use mipmap filtering in LibGDX, none of the images appear.
I'm new to LibGDX, and I have a simple 2d scene with three rotating, scaled circles. In order to anti-alias them, I wanted to use linear filtering. For advice, I looked to this article,which said that, for heavily scaled images, a mipmap can be used to improve speed or quality.
The first unexpected appearance was that, despite the fact that all of my images were scaled down, I would only see a linear filter if the magFilter was linear. In other words:
This code will show a linear filter for minified images:
parentTexture.setFilter(TextureFilter.Nearest, TextureFilter.Linear);
whlie this code will not:
parentTexture.setFilter(TextureFilter.Linear, TextureFilter.Nearest);
which seems opposite to the libGDX function:
void com.badlogic.gdx.graphics.Texture.setFilter(TextureFilter minFilter, TextureFilter magFilter)
This would not bother me, except that it indicates that either libgdx is wrong (unlikely), the article is wrong (unlikely), or I don't understand texture filters. The latter seems especially likely when I try mipmap filters.
This code causes nothing to display
parentTexture.setFilter(TextureFilter.MipMapLinearLinear, TextureFilter.Linear);
This code displays, but with nearest filtering
parentTexture.setFilter(TextureFilter.Linear, TextureFilter.MipMapLinearLinear);
Any explanation of where I'm wrong would be greatly appreciated. I have searched elsewhere, but texture filters in libGDX is pretty specific, so aside from the article, I haven't found much to help.
I had this same problem, and the fix turned out to be insanely simple. When you create a Texture, you need to specify that it uses mipmaps.
All you have to do is pass a second parameter to the Texture constructor like this:
Texture myTexture = new Texture(Gdx.files.internal("myImage.png"), true);
You can view all the Texture class constructors in the API docs here: http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/Texture.html
Just like Mitesh said in his answer mipmaps filters doesn't work because you are not telling Libgdx to generate mipmaps.
if you are using assets manager the code will be something like this
TextureParameter param = new TextureParameter();
param.genMipMaps = true; // enabling mipmaps
manager.load("path/to/texfile.png", Texture.class, param);
Texture tex = manager.get("path/to/texfile.png", Texture.class);
tex.setFilter(TextureFilter.MipMap, TextureFilter.Nearest);
There can be multiple issues with your image:
It should be power of 2, if you are using an image with size like 354X420, it won't work. In this case you need to take an image of 512X512 or any other power of 2.
When you want to enable Mipmap filtering, then you need to enable it using boolean genMipMaps which tells libgdx whether to generate mapmaps.
Try using the same minFilter and maxFilter. I had a similiar problem and if I put
TextureFilter.Linear,
TextureFilter.Linear
or both MipMap the problem is solved.
Hope this helps.
I am trying to implement this for so many days. I have read every single post here but I cannot get it done. Everything thas was suggested using methods such as getIntrisicHeight() doesn't seem to work as I want on every screen that I try it. So I am thinking o a solution like this: https://stackoverflow.com/a/4942812/1113997. The problem is that I don't understand many points of that answer:
Can anyone give me an example of the xml file?
What should I check after the return? I mean I will have something like a map and have several areas colored with different colors (in my invisible image,right?) and then if I press the area with the red colour do something, if the green one do something else.
Can anyone complete the answer by giving an example of the code?
How do I know that the same red I draw my image on paint for example, will be the same that it will be compared?
Code form the link:
private int getColour(int x, int y) {
ImageView img=(ImageView)findViewById(R.id.img2);
img.setDrawingCacheEnabled(true);
Bitmap hotspots=Bitmap.createBitmap(img.getDrawingCache());
img.setDrawingCacheEnabled(false);
return hotspots.getPixel(x, y);
}
Here is a general solution to the image map for Android: http://catchthecows.com/?p=113
I haven't tried it myself, though it appears promising imho