Colored fonts with alpha « cocos2d for iPhone

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

Colored fonts with alpha

(14 posts) (4 voices)

Started 2 years ago by onedayitwillmake
Latest reply from Matt Rix

Tags:

font

onedayitwillmake
Member

Hi so in a project i'm currently working, I'm using a bitmapfontatlas for a score area.
However my problem is that, when I introduce alpha channel to the font.bmp the coloring no longer works on the iphone.

However, when I remove the alpha channel it colors it correctly, but now the alpha is gone.
In the demo, AtlasTest.m - @implementation Atlas3 has a colored font.
There is a note about not having a pre-multiplied alpha channel, looking at "bitmapFontTest2.bmp" in photoshop, shows a font with a blackbackground.

I feel like theres some step, i'm missing i've tried saving the bmp differently advanced via the advanced modes (im using photoshop) - to no avail.

Does anyone have any suggestions?

Posted 2 years ago #
onedayitwillmake
Member

Ok I solved my own problem after studying the bitmapFontTest2.bmp file some more.
Here's what I did in case someone runs into this same problem...

You have to save out your bmp file with an alpha channel, now in order to do that you cannot just save it out again as a bmp with 32 bit color.

You have to (im using photoshop), go to the Channels tab, create a new channel.
Go to the layer with your font, pres ctrl+click to make it your selection.

Go to your channels tab, and press alt+backspace to fill that selection with white (assuming you haven't changed the swap colors).
--

Now save your image again, if you did it right you will notice that the checkbox "[x] Alpha Channels" is enabled and selected, save your file as a 32bit bitmap.

Posted 2 years ago #
Codemattic
Moderator

good to know!

Posted 2 years ago #
Matt Rix
Member

Just out of curiosity, why not use a png file? I'm probably missing something :)

Posted 2 years ago #
onedayitwillmake
Member

PNG's have pre-multiplied alpha, instead of a true alpha channel.

For whatever reason this does not work.
If you try to color it, in the simulator it looks fine however, on the device the text will be white.

A BMP will color correctly, but if you want an alpha channel in the BMP, or coloring or translucent opacity you'll have to supply an alpha channel. But like I mentioned, you cannot just export a bmp with alpha (it will be ignored no matter the color depth setting), you have to explicitly create an alpha channel in photoshop then export it using the 'with alpha channel' box checked from the SaveAs dialog.

Posted 2 years ago #
onedayitwillmake
Member

Btw this is referring to, BitmapFontAtlas png vs bmp, specifically!

Posted 2 years ago #
Matt Rix
Member

Maybe it's just because I'm using 8888 color mode everywhere, but I've had no problems colouring BitmapFontAtlases made from PNG files(straight from Heiro).

By colouring, I mean calling setColor on the BitmapFontAtlas, not using actual colored characters(my png file has white characters), is that what causes problems?

Posted 2 years ago #
Steve Oldmeadow
Administrator

@Matt Rix - the issue arises when you combine setting the colour and setting the opacity. Also make sure you are checking on the device, the most common problem people are reporting is setting the colour works in the simulator but not on the device.

Also, not all PNG's have pre-multiplied alpha. It depends whether the compress PNG option is set in XCode and this only happens when building for the device. It is all rather complex, search for "libpng" if you want to know the full horror.

Posted 2 years ago #
Matt Rix
Member

ah ok, I've just been colouring mine, not changing the opacity AND colouring them, so it's been fine on the device for me. Thanks for the info.

Posted 2 years ago #
onedayitwillmake
Member

Well to be honest, this post makes me feel that I'm doing something incorrect.
I created my font in heiro and it output a png file. Attempting to color that image, and it works in the simulator but not on the device.

I'm not setting alpha as well as color, just coloring.
I'm using "kPixelFormatRGBA8888" and "kTexture2DPixelFormat_RGBA8888"
--

Is there anything else that could be wrong?

Posted 2 years ago #

Steve Oldmeadow
Administrator

@onedayitwillmake - this is straight from my code. userMessage2 is a BitmapFontAtlas. I'm doing the same as you, coloring a font.

[userMessage2 setBlendFunc: (ccBlendFunc) {GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA}];//Required to allow set color to work
[userMessage2 setOpacityModifyRGB: NO];//Required to allow set color to work NB:setColor and modify rgb not compatible
[userMessage2 setColor:COLOR_BROWN_MEDIUM];

Posted 2 years ago #

onedayitwillmake
Member

Oh great - there's some good stuff in there that I'll use.
Out of curiosity, is that a different blending mode than the default

This might be a big fail on my part, but maybe it could help someone.
After you change the string, I have to call setColor again each time, is this by design?

Posted 2 years ago #
onedayitwillmake
Member

It put everything back to the original PNGS (good thing i kept those!) - and call setColor after set string and it looks great!

Thanks dudes

Posted 2 years ago #
Matt Rix
Member

Yeah the only problem I ever had was having to call setColor after setString, but that's a known issue at this point(which is how I found out about it in the first place).

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.