Tile Zooming is something I'd REALLY like to get working in my game (maybe I'll even post a link here when I'm done! ;) ).
I'm using the D3DXSprite interface and just applying a scaling matrix to it globally.
Ignore the tiles, they aren't the ones I was using for this map (I thought the problem might be that my tiles had a 1 pixel border of alpha around them so I changed the tile sheet to test it).
I've got it zooming but the problem is I get gaps between tiles like these:
It looks fine when the scale is 1.0:
But it looks horrible and swims when you zoom in (see the gaps!?):
And blurry when you zoom out:
What can I do to stop this?
Also, I like pixels.
I'd like to have clear sharp edges on my pixels and not have them blur. What kind of render states do I need to set to see them?
Many thanks in advance (and a credit in my game to those who help me get this working! ;) ).
-SD
Those are the artifacts of bilinear filtering. That's common when using it. You could also use nearest point filtering, but I'm not sure if you'd like that in your game. I'd prefer you render to a surface or texture and stretch that instead to reduce that effect. That way, the render target only gets stretched.
If you want crisp edges instead of blur, use point-sampling, rather than filtering (linear, bi-linear, tri-linear, etc) however, that will likely introduce its own visual maladies, but this is likely what you want to go for that old-school zooming effect.
As for your vertices swimming, there's probably something weird going on with your initial vertex coordinates, since identical vertices transformed by the same matrix should end up at the same place... using the tiles as an example, are the lower-right vertices's coordinates equal to the upper-left vertices's coordinates of it's south-east neighbor?
Personally, I just use the standard rendering means, so I'm not sure of the specifics of D3DXSprite. If they don't prescribe this coordinate overlap, and the API doesn't account for it by some other means, then it may not be suitable for tiled imagery.
Also, make sure that your texture coordinates are chosen correctly for 1-1 pixel-texel relationship. This is one of the finer points of getting pixel-art like imagery out of 3D acceleration.
Quote:Original post by Ravyne If you want crisp edges instead of blur, use point-sampling, rather than filtering (linear, bi-linear, tri-linear, etc) however, that will likely introduce its own visual maladies, but this is likely what you want to go for that old-school zooming effect.
Actually, there's a better solution.
If you don't allow arbitrary scaling and only allow scaling by a factor of 2x/3x/4x, you can use the hq4x algorithm. It can do some pretty impressive stuff.
I'll start using point sampling. I thought I had tried all of the render states before and none seemed to change anything but I forgot that the render states have to be set BETWEEN SpriteBegin and SpriteEnd. So no wonder setting them before that was having no effect. ;)
blueshogun96:
I like your idea of rendering to a render target and then scaling that up.
Sc4Freak:
That hq4x algorithm looks beautiful. I'm going to try to implement that during the "make it pretty" polish phase of my game.
What I may try to do is combine all three of your ideas so that I can scale by an arbitrary value (1.75 for instance) and still have the smoothness of the hq4x technique because I'll be rendering using it to the render target (which will be 2x, 3x, 4x, etc) but how much of it I'm drawing of that render target to the screen won't be ;).
But it looks horrible and swims when you zoom in (see the gaps!?):
And blurry when you zoom out:
What can I do to stop this?
Also, I like pixels.
I'd like to have clear sharp edges on my pixels and not have them blur. What kind of render states do I need to set to see them?
Many thanks in advance (and a credit in my game to those who help me get this working! ;) ).
-SD
