TorqueX 2D Tilemap artifacts
by Ron Barbosa · in Torque X 2D · 11/16/2009 (9:19 am) · 24 replies
Hey all...I'm testing out TorqueX 2D for a new Indie Game project that I'm working on.
I have a tilemap texture that is 1600x704 pixels of 64x64 pixel tiles (25 tiles wide and 11 tall). There is no border or padding between tiles it's just 25x64 = 1600 wide and 11x64 = 704 tall.
When I load the material into the material builder it seems to work fine. I'm able to load the image and I can paint a tilemap using the material.
But when I play the level (or hide the grid in the editor) I can see artifacts between each tile. It looks like a 1-pixel strip from an adjacent tile. If I paint a patch of water using the ocean tiles, I see a thin green line above each tile that appears to be from an adjacent grass/forest tile.
The material image is a JPEG and the bleed almost looks a bit fuzzy...as if it might be the result of some anti-aliasing or something. I've looked all over the material builder for any options that would help clear the condition...but no love.
It just seems that this is pretty basic functionality...I don't know why this would be broken.
Could it have something to do with the odd aspect ratio/resolution of the image (1600x704)? Is there any constraint or recommendation that the image be square?
I thought maybe this could be something related to my graphics card/drivers, so I deployed a build to my Xbox 360 and saw the same artifacts.
One other strange note...when I do Help->About...it shows the TGB and TorqueX are both version 2.0.0.0. But the installer I used was clearly labeled 3.0.0.0. Is this just a bug in the About dialog?
Any help would be greatly appreciated. I'm really interested in using the tool, but this stumbling block hit me pretty early.
Thanks
--Ron
I have a tilemap texture that is 1600x704 pixels of 64x64 pixel tiles (25 tiles wide and 11 tall). There is no border or padding between tiles it's just 25x64 = 1600 wide and 11x64 = 704 tall.
When I load the material into the material builder it seems to work fine. I'm able to load the image and I can paint a tilemap using the material.
But when I play the level (or hide the grid in the editor) I can see artifacts between each tile. It looks like a 1-pixel strip from an adjacent tile. If I paint a patch of water using the ocean tiles, I see a thin green line above each tile that appears to be from an adjacent grass/forest tile.
The material image is a JPEG and the bleed almost looks a bit fuzzy...as if it might be the result of some anti-aliasing or something. I've looked all over the material builder for any options that would help clear the condition...but no love.
It just seems that this is pretty basic functionality...I don't know why this would be broken.
Could it have something to do with the odd aspect ratio/resolution of the image (1600x704)? Is there any constraint or recommendation that the image be square?
I thought maybe this could be something related to my graphics card/drivers, so I deployed a build to my Xbox 360 and saw the same artifacts.
One other strange note...when I do Help->About...it shows the TGB and TorqueX are both version 2.0.0.0. But the installer I used was clearly labeled 3.0.0.0. Is this just a bug in the About dialog?
Any help would be greatly appreciated. I'm really interested in using the tool, but this stumbling block hit me pretty early.
Thanks
--Ron
#2
I guess I have to tweak my level measurements to more properly align on the pixel boundaries.
There doesn't seem to be any solid documentation on making that happen. I did notice that the rendering seems blurry when compared to the actual image...I suspected that might have something to do with a translation between world units and texels.
If anyone out there knows of a good tutorial for performing that alignment...I'd appreciate a link.
Thanks
--RB
11/16/2009 (10:57 am)
Thanks for the response, Duncan. It seems pretty basic behavior to be this broken.I guess I have to tweak my level measurements to more properly align on the pixel boundaries.
There doesn't seem to be any solid documentation on making that happen. I did notice that the rendering seems blurry when compared to the actual image...I suspected that might have something to do with a translation between world units and texels.
If anyone out there knows of a good tutorial for performing that alignment...I'd appreciate a link.
Thanks
--RB
#3
Burriness is to do with TX's default pixel shader being one that is better suited for rendering 3D textures. You need to mod the shader so that it adjusts it's rendering to better suit 2D graphics (yep, another basic oversight).
There are some posts on the blurriness issue here in the forum. But, in short, edit TorqueCore\EngineData\effects\SimpleEffect.fx and change the SimpleVS() function to:
That example is for a screen resolution of 1280x720, so change it to whatever your target resolution is. If your game needs to support multiple resolutions then you'll want to further mod the shader (and also SimpleMaterial) so that you can tell it about the screen resolution at runtime instead of having it hardcoded.
11/16/2009 (11:13 am)
To line up on pixel boundaries you need to concentrate on the scene object's position. If the texture is 64x64 then the scene object should be positioned on an exact coordinate (e.g. (0,0) or (102, 103), rather than (0.2, 0.315) or (102.1, 103.9)). If your texture had an odd number dimension such as 61x64 then you'd need to use a 0.5 offset in the coordinate (in this case just for X) to align on the pixels.Burriness is to do with TX's default pixel shader being one that is better suited for rendering 3D textures. You need to mod the shader so that it adjusts it's rendering to better suit 2D graphics (yep, another basic oversight).
There are some posts on the blurriness issue here in the forum. But, in short, edit TorqueCore\EngineData\effects\SimpleEffect.fx and change the SimpleVS() function to:
VSOutput SimpleVS(VSInput input)
{
VSOutput output;
output.position = mul(input.position, worldViewProjection);
output.texCoord.x = input.texCoord.x + (0.5 / 1280); // this is the new code
output.texCoord.y = input.texCoord.y + (0.5 / 720); // this is the new code
// output.texCoord = input.texCoord; // this is the old code
output.color = input.color;
output.color.a *= opacity;
return output;
}That example is for a screen resolution of 1280x720, so change it to whatever your target resolution is. If your game needs to support multiple resolutions then you'll want to further mod the shader (and also SimpleMaterial) so that you can tell it about the screen resolution at runtime instead of having it hardcoded.
#4
Is the pixel shader something that I can modify as part of the game project's source?
At this point, I'm a little reluctant to shell out the coin for the commercial product considering that I'm already having problems with it.
Again...thanks for your responses. This is very helpful info.
--RB
11/16/2009 (11:30 am)
Thanks again, Duncan...unfortunately, I have the version of TorqueX that's provided with XNA Creators Club accounts. This does not include the engine source code.Is the pixel shader something that I can modify as part of the game project's source?
At this point, I'm a little reluctant to shell out the coin for the commercial product considering that I'm already having problems with it.
Again...thanks for your responses. This is very helpful info.
--RB
#5
As with any engine there will usually be things you need to mod for anything beyond the most basic game, so source is essential.
11/16/2009 (12:16 pm)
Yes, that pixel shader is part of the source included when you buy TX.As with any engine there will usually be things you need to mod for anything beyond the most basic game, so source is essential.
#6
1. My camera is set to 128.0 x 72.0 (I don't know what the unit of measure is here).
2. My tile map layer is set to the same resolution.
3. My tile counts are 32 wide by 18 high (16:9 aspect)
4. My tile size is 4 x 4 (again...I don't know what the unit of measure is here).
My tile map layer is positioned at 0, 0.
I would assume this satisfies Duncan's suggestion that the scene object be placed on an exact coordinate.
All this being said and done, I'm still seeing the same artifact.
I even went and upped the camera and tile map layer to be the exact size in pixels (1280 x 720) and set the number of cells in the tile map to be 20x12 at 64x64 in size (as an effort to align all the measuring units to a pixel). Still no love.
Kind of a bummer that something this elementary is broken in the tool. If it's not broken, then it's certainly not intuitive.
I guess I'll raise the bug and see what the fix turns out to be.
11/16/2009 (8:40 pm)
I'm a bit confused with the various options in the tile map editing dialogs, but here are my current settings.1. My camera is set to 128.0 x 72.0 (I don't know what the unit of measure is here).
2. My tile map layer is set to the same resolution.
3. My tile counts are 32 wide by 18 high (16:9 aspect)
4. My tile size is 4 x 4 (again...I don't know what the unit of measure is here).
My tile map layer is positioned at 0, 0.
I would assume this satisfies Duncan's suggestion that the scene object be placed on an exact coordinate.
All this being said and done, I'm still seeing the same artifact.
I even went and upped the camera and tile map layer to be the exact size in pixels (1280 x 720) and set the number of cells in the tile map to be 20x12 at 64x64 in size (as an effort to align all the measuring units to a pixel). Still no love.
Kind of a bummer that something this elementary is broken in the tool. If it's not broken, then it's certainly not intuitive.
I guess I'll raise the bug and see what the fix turns out to be.
#7
11/17/2009 (11:44 am)
64 does not fit exactly into 720 so you might get artifacts there because the tile layer height is not a multiple of your tile texture height. So the tiles will be squashed or stretched as necessary, leading to texture bleeding due to re-sampling the texture from the spritesheet.
#8
So I guess what I need to do is leave my camera at 1280x720, but set my map size to some multiple of 64 (1280x768 maybe). The entire map won't fit in frame at that point, but it would align the horizontal and vertical resolutions as multiples of my tile dimensions.
I'm apparently a slow learner... =P
But I think I got it now...thanks again for the responses, Duncan.
--RB
11/17/2009 (2:01 pm)
I see...I think the piece that's throwing me off is that there are a number of different units of measure, and I'm not totally clear on which ones I should be trying to map to.So I guess what I need to do is leave my camera at 1280x720, but set my map size to some multiple of 64 (1280x768 maybe). The entire map won't fit in frame at that point, but it would align the horizontal and vertical resolutions as multiples of my tile dimensions.
I'm apparently a slow learner... =P
But I think I got it now...thanks again for the responses, Duncan.
--RB
#9
11/17/2009 (6:48 pm)
yes that sounds right - let us know if you are still getting artifacts with that. Another option if you had the source is to change the pixel shader to point sampling, which will remove any texture bleeding, but you won't be able to scale your sprites up/down without artifacts of course (although you might not want to anyway).
#10
At this point, I have my tile map size at 1280x768. 20 x 12 tiles (at 64x64 "units" each). That maps out. My scene object is at the origin. My camera is 1280 x 720.
Still seeing the same artifact.
This is way frustrating.
If anyone has the free time...try what I'm doing and post your results.
You will need ForestTiles.png from the RPG Starter Kit available on creators.xna.com.
1. Create a new Torque 2D project in VC# 2008.
2. Run TorqueX Builder 2D (the free version for Creators Club members)and create a new T2D project using the C# project from step 1.
3. Create new material from ForestTiles.png. Set height and width of cells to 64 x 64.
4. Add new Tile Layer to the scene and paint using the material from step 3.
Look for the artifact. In particular, cell #108 (blue water with bubbles) shows a grimy artifact.
I really appreciate the help...but I'm not going to buy the source if I can't even get the free version to do this basic task.
Thanks again!
--RB
11/17/2009 (9:45 pm)
Still no dice. I must be doing something stupid. I find it hard to believe that this doesn't work. It has to be something I'm doing wrong.At this point, I have my tile map size at 1280x768. 20 x 12 tiles (at 64x64 "units" each). That maps out. My scene object is at the origin. My camera is 1280 x 720.
Still seeing the same artifact.
This is way frustrating.
If anyone has the free time...try what I'm doing and post your results.
You will need ForestTiles.png from the RPG Starter Kit available on creators.xna.com.
1. Create a new Torque 2D project in VC# 2008.
2. Run TorqueX Builder 2D (the free version for Creators Club members)and create a new T2D project using the C# project from step 1.
3. Create new material from ForestTiles.png. Set height and width of cells to 64 x 64.
4. Add new Tile Layer to the scene and paint using the material from step 3.
Look for the artifact. In particular, cell #108 (blue water with bubbles) shows a grimy artifact.
I really appreciate the help...but I'm not going to buy the source if I can't even get the free version to do this basic task.
Thanks again!
--RB
#11
11/18/2009 (11:27 am)
Since you can't fix the shader without source code there might be texture bleeding anyway (remember that the default shader is suited to 3D and not 2D so the pixel to texel mapping is not correct - you could try positioning your tilemap at (0.5, 0.5) to account for the errant default shader that comes with the trial version of TX).
#12
I will zip the project folder up when I get back to my PC. Hopefully...it's something completely stupid that I'm doing...or something simple like the pixel shader.
At any rate...thanks.
BTW...are you affiliated with Garage Games?
--RB
11/18/2009 (3:23 pm)
Will do, Duncan. I appreciate you taking a look at this.I will zip the project folder up when I get back to my PC. Hopefully...it's something completely stupid that I'm doing...or something simple like the pixel shader.
At any rate...thanks.
BTW...are you affiliated with Garage Games?
--RB
#13
11/18/2009 (3:35 pm)
I'm not affiliated with Garage Games.
#14
11/18/2009 (9:58 pm)
The dimensions of the tiles weren't setup right - they were 40x40 pixels. I've updated the scene file and emailed it to you along with a screenshot of the result.
#15
At one point in time, I had set my pixel dimensions to 64x64, but I had NOT added in the 0.5x0.5 offset to my scene object's position.
I think I tried everything you suggested...just not the right combination of things.
At any rate...it's working now...so I can get back to prototyping.
Thanks again, Duncan...this has been a very helpful exercise for me.
--RB
11/19/2009 (9:04 am)
You are a gentleman and a scholar, Duncan. Thanks.At one point in time, I had set my pixel dimensions to 64x64, but I had NOT added in the 0.5x0.5 offset to my scene object's position.
I think I tried everything you suggested...just not the right combination of things.
At any rate...it's working now...so I can get back to prototyping.
Thanks again, Duncan...this has been a very helpful exercise for me.
--RB
#16
11/20/2009 (6:10 pm)
I would advise anyone doing serious work with Torque X 2D to purchase the engine's source code. Sometimes you just need to debug it to see if you are missing something. Really worked wonders for me, and it is not very expensive.
#17
I bought the Torque X source recently...and I was able to make the changes that Duncan posted a few months back.
That helped the blurriness...but it brought back the thin artifact between tiles. I monkeyed around with the positioning of my scene object to compensate...that also helped in the X direction...but I just can't seem to tune the Y direction enough to get rid of the artifact.
Also...it doesn't work very well for some of my animated sprites which move in realtime and often do NOT align on pixel borders as a result of the free movement.
It just seems like the sprite-sheet based tile painting mechanism is ill-advised for Torque X. Even with the source code.
I also tried using point filtering which is just ugly as sin...but it also helped remove the artifact.
Is anyone out there using the tile painting mechanism in their project...if so how are you eliminating both the blur and the pixel artifacts at the same time?
Thanks
--RB
03/12/2010 (4:42 pm)
Sprite sheets and Torque X just don't work well together. :(I bought the Torque X source recently...and I was able to make the changes that Duncan posted a few months back.
That helped the blurriness...but it brought back the thin artifact between tiles. I monkeyed around with the positioning of my scene object to compensate...that also helped in the X direction...but I just can't seem to tune the Y direction enough to get rid of the artifact.
Also...it doesn't work very well for some of my animated sprites which move in realtime and often do NOT align on pixel borders as a result of the free movement.
It just seems like the sprite-sheet based tile painting mechanism is ill-advised for Torque X. Even with the source code.
I also tried using point filtering which is just ugly as sin...but it also helped remove the artifact.
Is anyone out there using the tile painting mechanism in their project...if so how are you eliminating both the blur and the pixel artifacts at the same time?
Thanks
--RB
#18
My artist however had encountered these problems before when working with XNA where the borders of characters had a thin, semi-transparent artifact surrounding the sprite. His fix on the art end involved putting a 1px border around all of his images with a 1% opacity so that the alpha artifact around his images would blend with the 1% line and be pretty much invisible. I'm not sure if this will help you in anyway but here's a couple images to show what I had and what the result was after the fix.
A close up view of the artifact line
A zoomed out view to show how prominent the artifact was
Top of the first image has the line while the bottom doesn't. Helm in second picture has it while the armor doesn't.
Hope this helps!
03/13/2010 (6:46 am)
I spent all day yesterday with very small artifact lines around most of my character art. The character animations are done using 4x4 celled sprite sheets in png format. I stumbled on this thread hoping that maybe the fixes proposed in here would maybe help my semi-related problem but to no avail.My artist however had encountered these problems before when working with XNA where the borders of characters had a thin, semi-transparent artifact surrounding the sprite. His fix on the art end involved putting a 1px border around all of his images with a 1% opacity so that the alpha artifact around his images would blend with the 1% line and be pretty much invisible. I'm not sure if this will help you in anyway but here's a couple images to show what I had and what the result was after the fix.
A close up view of the artifact line
A zoomed out view to show how prominent the artifact was
Top of the first image has the line while the bottom doesn't. Helm in second picture has it while the armor doesn't.
Hope this helps!
#19
So a 64x64 pixel image must be defined with pixels 0-63 belonging to the first tile, 64-127 belonging to the 2nd etc. So I can't really create a "gutter" between tiles where I can do some image space manipulation to counteract the problem.
I haven't seen much "hope" in any of the usual forums (these forums or Creators Club forums). Most people are pretty much just saying "ditch the sprite sheets and put each tile in its own image file."
That just seems like a ton of overhead to me though.
I expect to continue prototyping using the tools and accepting the artifact. But if I land on a project I want to get serious about...I will take the advice of those who have wrestled with this before me.
;)
Thanks for the info nonetheless...good stuff!
--RB
03/13/2010 (9:21 am)
Thanks for the insight, Michael...this would be very helpful if not for one further limitation in the Torque X tile engine...it doesn't allow you to specify padding between cells.So a 64x64 pixel image must be defined with pixels 0-63 belonging to the first tile, 64-127 belonging to the 2nd etc. So I can't really create a "gutter" between tiles where I can do some image space manipulation to counteract the problem.
I haven't seen much "hope" in any of the usual forums (these forums or Creators Club forums). Most people are pretty much just saying "ditch the sprite sheets and put each tile in its own image file."
That just seems like a ton of overhead to me though.
I expect to continue prototyping using the tools and accepting the artifact. But if I land on a project I want to get serious about...I will take the advice of those who have wrestled with this before me.
;)
Thanks for the info nonetheless...good stuff!
--RB
#20
03/13/2010 (12:15 pm)
The TX builder will not work with animations unless there is a sprite sheet (unlike TGB you can't link images into meta spritesheets). 
Torque Owner Duncan Colvin
blogs.msdn.com/shawnhar/archive/2009/10/21/texture-filtering-sprite-sheets.aspx
In other versions of Torque there is a FilterPad property that you can set to avoid texture bleeding. However, it seems to have been omitted from Torque X (although TXB still outputs it in the scene files it is not used). I actually hadn't noticed this until you posted, as I haven't had the need yet to use spritesheets in Torque X projects that would be effected by bleeding. You should definitely file it as an official bug/feature request.
Probably the simplest solution for you would be to make sure that your tiles are aligned precisely on pixel boundaries in your scene.
Alternatively you could try separating your spritesheet out into separate textures (not an ideal solution though - modding the engine to fix the issue would be better in my opinion).