(Slick2D) TiledMap scaling quality

[DrewLols]

When I scale the graphics context in any render method, images, for the most part, scale perfectly smoothly.  Images extracted from a TiledMap, however, don't seem to have this effect.  Let me be specific in what I'm doing...

I extract images from a TiledMap for individual rendering rather than simply calling the map's .render() method (for my own purposes,  don't judge!) and I render them one by one in a separate pool.

The problem is, when I render images from a TiledMap in this fashion, the quality of the images deteriorate when, for instance, I want to transform the graphics context before anything is rendered.

So, I might write something like this...

public void render(Graphics g)
{
    g.transform(0.75f, 0.75f);
    imagePool.render(g);

    // Blah blah blah, render other stuff, blah blah blah...
}

The images rendered from said pool appear to be a little blocky, nearest neighbor-ey-ish.  They are jagged in comparison to the rest of the images.

How can I avoid this problem?

[SHC]

This is because TiledMap scales the images to the tile size and you are stretching it.

P.S use

/[code/]

tags for code.

[davedes]

appear to be a little blocky, nearest neighbor-ey-ish.  They are jagged in comparison to the rest of the images.

TiledMap uses FILTER_NEAREST by default.

Use getTileSetCount and getTileSet to iterate through each tile set, then call setFilter on the SpriteSheet in that tile set and use FILTER_LINEAR.

Note that you may run into filtering artifacts; e.g. lines between tiles, depending on how you are rendering and storing your data.

Games published by our own members! Check 'em out!

[DrewLols]

appear to be a little blocky, nearest neighbor-ey-ish.  They are jagged in comparison to the rest of the images.

TiledMap uses FILTER_NEAREST by default.

Use getTileSetCount and getTileSet to iterate through each tile set, then call setFilter on the SpriteSheet in that tile set and use FILTER_LINEAR.

Note that you may run into filtering artifacts; e.g. lines between tiles, depending on how you are rendering and storing your data.

Ah!  You were right about the visual artifacts, davedes.  Also, I was only really able to get the smooth effect to work when I applied the filter to each individual image within the map rather than the sprite sheets (probably because I painted the images outside of the TiledMap itself).  Course, the side effect of this is that the borders of the images when scaling are transparent half the time and leave behind an awkward outline in the shape of the grid.

I've considered rendering all that there is to a second buffer, then scaling said buffer.  I would do this by drawing my objects to an Image, then drawing the scaled image to the graphics context in the render method.

If there is a way to do this with less bloat, or if my entire idea is a bad one,  I would appreciate some input!  Thanks a bunch! 

[davedes]

I've considered rendering all that there is to a second buffer, then scaling said buffer.  I would do this by drawing my objects to an Image, then drawing the scaled image to the graphics context in the render method.

This is an easy solution and should give you pretty good results. Benchmark & stress test it to see if the performance is acceptable, as it will lead to extra texture binds and high fill rate.

Read the following links to get a better understanding of sprite rendering in Slick/OpenGL:
http://www.slick2d.org/wiki/index.php/Performance
http://slick.javaunlimited.net/viewtopic.php?p=31225#p31225
http://slick.javaunlimited.net/viewtopic.php?p=31187#p31187

[DrewLols]

I've considered rendering all that there is to a second buffer, then scaling said buffer.  I would do this by drawing my objects to an Image, then drawing the scaled image to the graphics context in the render method.

This is an easy solution and should give you pretty good results. Benchmark & stress test it to see if the performance is acceptable, as it will lead to extra texture binds and high fill rate.

Read the following links to get a better understanding of sprite rendering in Slick/OpenGL:
http://www.slick2d.org/wiki/index.php/Performance
http://slick.javaunlimited.net/viewtopic.php?p=31225#p31225
http://slick.javaunlimited.net/viewtopic.php?p=31187#p31187

Thanks for the rendering tips!  Eventually, I AM going to have to learn how to use openGL.  I just post that the method I suggested seems to work fine.  I don't know how it will perform on a larger scale, though.