Grid with sprites looks horrible! What to do?

#1 ya me too, just posted

http://www.torquepowered.com/community/forums/viewthread/110815

#2 I have this problem in the builder but not in game. Are you seeing it while the game runs too?

#3 This is usually caused because the image rendered to screen is not exactly on a pixel boundary so the pixel shader will pick up colours from adjacent texels in the texture when it tries to display partial texels (it will sample multiple texels from the texture, so picks up unwanted stuff) - if the texture is a sprite sheet then it'll be picking up texels from the neighbouring sprite/s.

By pixel boundary I don't mean a whole number TX scene coordinate - unless yr TX scene dimensions are the same as the screen resolution you're using. I mean literally on a pixel boundary. Note: if you haven't modified the default pixel shader in TX then you actually have to move the image to 0.5 off the pixel boundary as the default shader is 0.5 pixels off.

hopefully that's slightly clearer than mud :)

#4 Yes problem in-game and in editor.

"0.5 off the pixel boundary as the default shader is 0.5 pixels off." ??
What\where do you determine the pixel boundry is?

#5 how could one modify the default pixle shader?

#6 Pixel shader modification...


TorqueCore/Engine/Data/effects/SimpleEffect.fx

change:

output.texCoord = input.texCoord;

to:

output.texCoord.x = input.texCoord.x + (0.5 / 1280);
output.texCoord.y = input.texCoord.y + (0.5 / 720);

Replace 1280x760 with the screen resolution you are using. Basically the above code just adds half a texel to the texture coordinate so that it lands right on the texel and not 0.5 off it like it normally does.


More detail on the 'why' of it: msdn.microsoft.com/en-us/library/ee417850%28VS.85%29.aspx

You can see how adjacent sprites in a spritesheet would bleed into other sprites.


If you put your tiles on exact whole coordinates in the TX scene and modify the pixel shader as shown above then you shouldn't get any texture bleeding anymore.


Also: this has been covered in a few threads before on the forums so have a search in the forums aswell.

#7 if you just want to change the shader the vertex shader; SimpleVS in SimpleEffect.fx then just replace

output.texCoord = input.texCoord;

with

// use 1280 for screenSizeX and 720 for screenSizeY, 
// if using 1280x720 resolution
output.texCoord.x = input.texCoord.x + 0.5 / screenSize.x;
output.texCoord.y = input.texCoord.y + 0.5 / screenSize.y;

otherwise if you want, you can modify SimpleMaterial.cs to pass in the screen size parameter

in the Private, protected, internal fields region add

Vector2 _screenSize;
EffectParameter _screenSizeParameter;

in _SetupGlobalParameters add

_screenSize = new Vector2(
GFX.GFXDevice.Instance.Device.Viewport.Width,
GFX.GFXDevice.Instance.Device.Viewport.Height);

EffectManager.SetParameter(_screenSizeParameter, _screenSize);

in _LoadParameters add

_screenSizeParameter = EffectManager.GetParameter(Effect, "screenSize");

in _ClearParameters add

_screenSizeParameter = null;

and in SimpleEffect.fx add and make the changes above to the SimpleVS

float2 screenSize;

#8 hey thanks guys,
tried it all- no luck, still does it, no idea why
position on a whole number: do you mean the xy coords of the sprite in txb are whole numbers ie 128.0?
(tried that...)

#9 128.0 will do (assuming the screen resolution is 1280 then 128 is just x10 so still a whole number).

Note that if you have sprites with sides that are an odd-number length (e.g. 31x31 instead of 32x32) then you need to put on a 0.5 pixel position (since TX locates objects based on their center and not the upper left corner).


Another alternative is to put a pixel shader on your sprites that uses POINT sampling instead of Linear sampling.

You can test if this solves your problem by editing SimpleEffect.fx to change the 'baseTextureSampler' property to use 'POINT' filtering instead of 'Linear' filtering. This approach stops the pixel shader from blending colours from multiple pixels - it is forced to use only one pixel so there should be no texture bleeding (the down side is if you need to scale an image then it will not be smooth looking - so it's a trade off).

#10 thanks
I even tried swithching to POINT filtering
(images looked crisper)
but the line keeps comming back, flickering on and off depending on camera movement...

#11 can I email you the spritesheet?

#12 sure: duncan atta flooge dotto plus dot com

#13 sorry man, can't make head or tails of that

#14 really? wow, I rock at obsfucation! =)

duncan
flooge
plus
com

#15 I couldn't get this to work either. :( My pixel shader is compiling fine with the _screenSize variable.

And I cannot figure out your email either lol.

Update:
Changing the Linear filter to Point fixed the lines for me (In addition to the 0.5 fix):

sampler2D baseTextureSampler = sampler_state
{
Texture = <baseTexture>;
//MipFilter = Linear;
MipFilter = POINT;
MinFilter = POINT;
MagFilter = POINT;
};

I wonder why Linear is grabbing the pixel.. Anyway. Even though Linear made it look slightly blurry and point is making it a bit crisper, I'm losing some pixilated details from the source.

#16 Linear mode samples multiple texels if it has too (i.e. if not aligned exactly on whole pixels). POINT only ever samples from the nearest texel no matter what.

Check your tiles are being displayed in the game at exactly the same resolution as they actually are in the image file. Display 128x128 as 128x128 and not as 64x64 for example.

#17 Ahh I see. How do you do the conversion of that? For example, how do I know that I want a tile to be 32x32 pixels on the screen because the source is? Is this the way the world units are configured? 1:1? Because the default environment doesn't seem set up for that.

#18 Default is not 1:1 - I usually change it so it is as pixel perfect alignments are useful.

Probably yours is set up as 128x72 or something like that. And the screen resolution actually being used is 1280x720. So that's a simple factor of ten. If your tiles were 32x32 in the image files then they would need to be 3.2x3.2 in the editor scene.

Work out the factor and apply it to get the size in the editor.

#19 So would that just be editing the camera size in the editor? Or do I modify some other settings elsewhere? (if so, where are they located exactly)

I understand what you're saying though. It's clicking now. :)

#20 when i bring in a 128x128 sprite it automatically brings it in as 12.8x12.8
my res is 1280x720
and my camera is 128x72

even when i blow up the sprite to 128x128 (in txb) and put it on a whole number position
still does it, with the all the code changes and everything...