Bitmap Font Artifacts When using setAliasTexParameters

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Bitmap Font Artifacts When using setAliasTexParameters

(21 posts) (6 voices)

Started 2 years ago by Makeshift James
Latest reply from zeraien

Tags:

Makeshift James
Member

Hello, we're making a game that uses all pixel art for the UI, including the fonts. All of the textures in the game have setAliasTexParameters turned on. Everything works great except for the fonts. The issue is that we keep seeing random extra pixels added to font glyphs on the x-axis on the right side of the characters. It seems like something is stretching the output just a tiny bit and it's causing the rendering engine to add another column of pixels. If the font were anti-aliased, you probably wouldn't even notice. However, on our small aliased fonts, it is pretty noticeable. The issue is best described with an image, so I've attached one below. Look at the letter R in the word "PLAYERS". Any help would be much appreciated.

Posted 2 years ago #
riq
Key Master
Are you using 2d projection ?
```
[[Director sharedDirector] setProjection:CCDirectorProjection2D];
```
It might help you with your issue.
Posted 2 years ago #
Makeshift James
Member

Thanks for the fast response! Is the command you suggested the same as [[Director sharedDirector] set2Dprojection] ? I don't seem to have setProjection in my version (v0.8.1). It makes the problem even worse when I use set2Dprojection. Interestingly, it only seems to affect objects that are under a certain size. I can't figure out exactly what determines when a sprite gets messed or not. Oh, and I was wrong before- it does affect regular sprites.

with 2D Proj:

Posted 2 years ago #
riq
Key Master

are you scaling down your image ?

if you are using aliased images, try not to scale it down. Instead try to use scale them down on GIMP or Photoshop.

Posted 2 years ago #
Makeshift James
Member

"2 PLAYERS ONLINE" is rendered using a BitmapFontAtlas. We're not scaling anything. The glyph sheet is shown above in my first post. Everywhere we use text, we call this utility function:

'
+(BitmapFontAtlas*)smallLabelWithCaption:(NSString*)caption color:(ccColor3B)color
{
BitmapFontAtlas * label = [BitmapFontAtlas bitmapFontAtlasWithString:caption fntFile:@"edit_undo_14.fnt"];
[label.textureAtlas.texture setAliasTexParameters];
[label setColor:color];

return label;
}
'

Thanks again for your attention on this matter.

Posted 2 years ago #
riq
Key Master
in v0.8.2 try commenting this line from ccConfig.h:
```
// comment this line
#define CC_ATLAS_SPRITE_RENDER_SUBPIXEL 1
```
in v0.8.1, try to comment it from AtlasSprite.m (or AtlasSpriteManager.m)
Posted 2 years ago #
Makeshift James
Member
In AtlasSprite is see this (v0.8.1)
```
#if 1
#define RENDER_IN_SUBPIXEL
#else
#define RENDER_IN_SUBPIXEL(__A__) ( (int)(__A__))
#endif
```
should I change it to #if 0 or just :
#define RENDER_IN_SUBPIXEL(__A__) ( (int)(__A__))

Also, what is the recommended procedure for upgrading from 0.8.1 to 0.8.2 ?
Posted 2 years ago #
riq
Key Master

#if 0 should be ok.

to upgrade to v0.8.2, please read:
http://www.cocos2d-iphone.org/wiki/doku.php/release_notes:0_8_2

Posted 2 years ago #
Makeshift James
Member
I upgraded our project to 0.8.2 and turned off sub-pixel rendering and now it looks gorgeous! You sir have made my night. Thank you so much.

I just though of something that may be useful to other users. When we generated our glyph pages using the Hiero Bitmap Font Tool, it always anti-aliased the font which was not ideal for the look of our game. I spent half a day reverse engineering the source code for the project and getting it to compile and run. We ended up modifying only two lines of code:

GlyphPage.java, Line 58:
```
scratchGraphics.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_OFF);
		scratchGraphics.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_OFF);
```
If you can get it to compile for you (which took longer than making the change) you too can have aliased bitmap fonts.
Posted 2 years ago #
Makeshift James
Member

Shoot, I spoke too soon. I just tested it on the device and it still looks ugly. Worse actually.

On 3GS:

Posted 2 years ago #
riq
Key Master

mmm.... I would repeat all the experiment again (2d/3d projection, subpixel rendering, aliasing/anti-aliasing) on the device.

Posted 2 years ago #
Makeshift James
Member

After redoing all the tests on the device, I decided to try and isolate the issue in a separate simple project. Here's where is gets interesting...

The project I built is based on the HelloWorld template provided with 0.8.2. With all the settings on "normal" the rendering always looks good on the top half of the screen and the bottom half always has errors.

Here is the source if you want to look at it:
http://makeshiftgames.com/random/FontTest.zip

If you don't have time, I totally understand.

Posted 2 years ago #
Steve Oldmeadow
Administrator
Try changing line 66 of HelloWorldScene.m to:
```
[label setPosition:ccp(160.5f,20.5f + i * 20.0f)];
```
Posted 2 years ago #
Makeshift James
Member

It fixed the issue on my 2nd Gen iPod, but not on 3GS. I'm experimenting still, but so far have not found a solution that solves the issue across the board.

Posted 2 years ago #
Makeshift James
Member

Any ideas why it would look different on the 3GS or what could be done to fix it?

Posted 2 years ago #
Makeshift James
Member

For what it's worth, setting 2D projection on fixes the issue on the 3GS, but makes it much worse on all other devices. The half-pixel offset trick fixes most of the errors on all non-3GS devices, but not all of them.

Posted 2 years ago #
Makeshift James
Member

RESOLVED!

The final winning configuration is:

[[Director sharedDirector] setProjection:CCDirectorProjection2D];
CC_COCOSNODE_RENDER_SUBPIXEL 0
CC_ATLAS_SPRITE_RENDER_SUBPIXEL 0

Now we have a pixel-perfect game. Thanks again for all your help guys.

Posted 2 years ago #
jeffam112368
Member

This works, but it disables sub-pixel rendering for ALL objects including standard and atlas sprites...which is undesirable for my game. Any way to just turn off sub-pixel rendering for fonts? The solution here does make the fonts look MUCH better, but it degrades the overall look of some of my smaller non-font cocosnode objects.

Posted 2 years ago #
jeffam112368
Member

On my iphone 3G test device, simply calling the [[Director sharedDirector] setProjection:CCDirectorProjection2D] fixes my font artifacts problem. Haven't tested on my 3GS...

Posted 2 years ago #
willf
Member

I had the same issue in 0.8.2 and i fixed it by doing
CC_COCOSNODE_RENDER_SUBPIXEL 0
CC_ATLAS_SPRITE_RENDER_SUBPIXEL 0

as mentioned above. Now I just upgraded to 0.99.1 and the artifacts in the bitmapfontatlas's are back.
In my ccConfig I have now:

CC_COCOSNODE_RENDER_SUBPIXEL 0
CC_SPRITESHEET_RENDER_SUBPIXEL 0

(as well as projection set to 2d)

Any idea what I need to do?

Posted 2 years ago #
zeraien
Member

I think the only solution for this would be to override the updateTransform method in CCSprite specifically for bitmap font atlas, perhaps by using a category, and force it not to render in subpixel... but that's just a makeshift solution that I might use, for cocos2d I think a more "clean" solution is needed, although I am not sure what that would be... Almost all labels rendered with bitmapfontatlas look weird from time to time, especially if you try to scroll them sideways in a ticker style fashion.. that just looks like crap... If I think of something, I'll post.

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.