Hiero Font Editor on OSX? « cocos2d for iPhone

cocos2d for iPhone » Programming » editors / tools

Hiero Font Editor on OSX?

(42 posts) (29 voices)

Started 2 years ago by psionic
Latest reply from How Do I Put An Avatar?

Tags:

12 Next »

psionic
Member

The java file downloads and opens up in dashcode.. How do I get
it to actually run the font editor?

----->

Hi,
I've added support for the Hiero Font editor in trunk (v0.8) (r822)

The Hiero Font editor ( http://slick.cokeandcode.com/demos/hiero.jnlp
) let's you create bitmap fonts from TTF fonts.
You can also apply nice effects to the generated fonts like gradients,
shadows, etc.

You can treat each character like an atlas sprite.
This means that you can transform each character with actions, and use
them in the physics engine, etc.

Features:
- Easy to create labels (like in LabelAtlas)
- Easy to transform each character (like in AtlasSprite)
- Easy to generate the "atlas" using 3rd party editor

You can find running examples in AtlasTest.m

3 BitmapFontAtlas that are updated every "tick" aligned right, center and left:
http://lh3.ggpht.com/_7Tp7oCOlWFE/SeynV_SbPgI/AAAAAAAARbs/Q8ftdi7Pw4A/IMG_0001_7.PNG

2 BitmapFontAltas aligned in the center. Some of the characters are
transformed using standard animations:
http://lh4.ggpht.com/_7Tp7oCOlWFE/SeynWVNWGBI/AAAAAAAARb0/h9ODqabngkU/IMG_0002_5.PNG

Thanks to Michael Daley, the author of original Hiero parser:
http://www.71squared.co.uk/2009/04/iphone-game-programming-tutorial-4-bitmap-font-class

riq.

Posted 2 years ago #
riq
Key Master

save the link in your machine, and then "open with" Java Web Start

Posted 2 years ago #
psionic
Member

okay here's the steps if anyone needs it in the future:

1) download http://slick.cokeandcode.com/demos/hiero.jnlp to your desktop/etc.

2) get the 'Java for Mac OS X 10.5 Update 4 Developer Preview ' at:

https://connect.apple.com/cgi-bin/WebObjects/MemberSite.woa/107/wo/kdGuof49NXHc3ylt7EG93kUKHYp/5.1.17.2.1.3.3.1.1.1.1.0.3.11.3.3.1

(you'll need to sign in w/ your iphone developer signin)

3) run the hiero.jnlp file.

4) profit!

Chris.

On Mon, Jun 22, 2009 at 3:50 AM, <cocos2d-iphone-discuss@gamesforfood.cl> wrote:
> riq says:
>
> save the link in your machine, and then "open with" Java Web Start
>
> Read the whole thread.

Posted 2 years ago #
jd
Member

thanks. Don't you mean:
4)
5) profit

:)

Posted 2 years ago #
Codemattic
Moderator

ahh yes, the mysterious illusive step 4. ;)

Posted 2 years ago #
wcrtr
Member

just another note on this, on OS X you shouldn't have to download java again, just select open with -> other -> Macintosh HD/System/Library/CoreServices/Java Web Start

Posted 2 years ago #
terrym
Member

Anybody else notice that Heiro is not working for some fonts, eg. Gill Sans Ultra Bold as it is not showing the correct font?

Any fixes planned please does anybody know

Posted 2 years ago #
spog
Member

What about creating fonts from Images?

I already have some nice, oldschool, bitmapfonts from good old amiga-days (as png-files).
Whats the best/easiest way to create the apropriate .fnt-file? Does somebody know a liitle tool for that?

Thx,
spog

Posted 2 years ago #
woebtz
Member

You could reverse engineer the .fnt format, manually create one for your .png, and then adjust the letter positions accordingly...

An easier alternative is to find a close substitute .ttf and run it through Hiero or BMFont.

How to find a .ttf from just a picture (What The Font!):
http://ilovetypography.com/2007/08/19/identify-that-font/

Posted 2 years ago #
jakechance
Member

Is anyone else getting upside-down pngs when using Hiero? Our designer (and all us devs for that matter) cannot get the tool to output a correct png. To my knowledge there is no "upside-down and backward" option that we're accidentally setting in the tool.

Posted 1 year ago #
domp
Member

I also get upside down pngs, then I flip them vertically with a picture tool.
...btw have you red the date of the last post of this thread (8 (!) months ago)?

Posted 1 year ago #
abitofcode
Moderator

This thread brings back happy memories, we won't see posts like those again ;)

Posted 1 year ago #
isquires
Member

Bump. I've been using Hiero for a few months now, and just started getting upside-down images. Is this somehow a result of recent changes? (I did re-download the app recently).

Also, I'm trying to adjust the padding around the characters, and with certain padding the offsets are incorrect (or at least something is wrong - I'm getting half letters and garbled looking text).

Help! :)

Posted 1 year ago #
David994A
Member

I haven't had the upside down images but I am having an issue with the "outline" effect not correctly following the font causing a rounding of letters that should be more square. It is strange that I did not have this issue 6 months ago the last time I used it.

Posted 1 year ago #
Reonarudo
Member

@isquires You are not alone, I hope there is a fix for it.

Posted 1 year ago #
David994A
Member

Is it possible the the upgrade to Snow Leopard may have caused Hiero to now have some bugs?

Posted 1 year ago #
dcthatch
Member

upside down image, wrong letters, sane problem here

Posted 1 year ago #
JKyy
Member

For the upside-down problem:

I am not sure, can't check it out now, but I think there are several versions (that all look the more or less the same) of the Hiero editor floating in the web. And the first to come up in Google isn't the newest. Check the version number from the program. I had the problem with 1.x version but not with 2.x version.

It has been a while since I used it, so I might remember wrong, but it is worth of trying.

Posted 1 year ago #
David994A
Member

The version of Hiero that I am using is V2.0. The problem that I am having is that the "outline" effect is causing a strange "rounding" of some of the characters. For instance, the font has a very square "O" and "0" but when I apply the outline effect it causes the flat edges of the font to look rounded. If I delete the outline effect the font returns to normal - very strange. I did not have this problem when I used Hiero several months ago (which was before my upgrade to Snow Leopard).

Posted 1 year ago #
cybergreg
Member

I was using v1.0 from this link: http://slick.cokeandcode.com/demos/hiero.jnlp
When I saved the font the .png was upside down. I flipped it in Preview and it worked fine.

I just switched to v2.0 from this link: http://www.n4te.com/hiero/hiero.jnlp
When I saved the font the .png was correct and the outline of my fairly sharp text seems fine.

@David994A have you tried a different "squarish" font and did you try a different outline join (default is bevel)?

Posted 1 year ago #
David994A
Member

@cybergreg - I tried a few different fonts, some got rounded from the outline effect and some did not. I tried all of the outline joins but non of these made any difference. I am using the v2.0 version. Are you Leopard or Snow Leopard? (not that this makes any difference)

Posted 1 year ago #
cybergreg
Member

@David994A - I'm using Snow Leopard too. Very odd.

Posted 1 year ago #
Reonarudo
Member

Is Hiero open source?

Posted 1 year ago #
AcesWild
Member

Can someone please explain to me how to use this hiero editor in cocos2d? The font I am saving creates a .fnt file and 17 .pngs.

When I add the .fnt file to my project and try to create a CCBitmapAtlasFont (or whatever it is called), I get an assertion that it can only be 1 page? I looked in the .fnt file and it says it has 17 pages (one for each png)...

How do I correctly add the output of the Hiero editor to my project, and how do I correctly use the .fnt/.pngs it produces?

Thanks!

Posted 1 year ago #
David994A
Member

@AcesWild check out the Cocos2D documentation page on labels and fonts here:
http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:labels

Now I believe that Cocos2D can only work with bitmap fonts .png files that only use one .png file. Since you have created a font that uses 17 .png files you must have a HUGE font size. in Hiero, make sure you select NEHE instead of ASCII because ASCII has lots of extra characters that you do not want. You can also remove characters manually from the font that you are not using to help bring your page count to 1. Just how big is your font?

Posted 1 year ago #
AcesWild
Member

David994A,

Thanks for the help...Basically, I just ran the Hiero app, and chose "Handwriting-Dakota", left all the defaults (yes, ASCII, because I didn't now what I was doing), and out came 17 pngs, and a .fnt.

I did read that link you posted, and there is this line
CCBitmapFontAtlas *label = [CCBitmapFontAtlas bitmapFontAtlasWithString:@"Bitmap Font Atlas" fntFile:@"bitmapFontTest.fnt"];

and when I use that line (of course, replacing the strings with my own strings), is when I get my "only supports 1 page" assertion.

Posted 1 year ago #
David994A
Member

@AcesWild the "only supports 1 page" assertion means that you font must fit into a single .png file. What is your font size? It must be very large. Like I said before, after selecting NEHE, you can go in and manually remove characters until you can make it fit in a single .png page file. Simply select NEHE and then delete unwanted characters from the "Sample Text" area. After manually removing characters you have to go to "glyph cache" and click "reset cache". You can see how many .png file pages it will take up by clicking on "glyph cache". You can also increase the "page width" and "page height" (under "glyph cache") to make Hiero use fewer pages.

I hope this helps. Note also that if you are targeting a iPhone 3G or earlier then you can only make your page size 1024 X 1024 MAX.

Posted 1 year ago #
AcesWild
Member

Thanks David,
I'll give it a shot on my lunch break.

Posted 1 year ago #
AcesWild
Member
maybe I am doing something wrong...
I go to Hiero, I select my font, I increase the Page Size from the "Glyph Cache" page. The "View" dropdown only has "Page 1". I increase my page width and height to 1024 (This may not be necessary, but I'll leave it like this for now). I change the color to red using the color picker thing on the right.

I go file->save, and out comes ONE .fnt and ONE .png. I add them to my project. However, when I view the .png file, the text is NOT in red, and the things look all like gibberish (and they are upside down, but i don't care about that right now).

So, I add them to my project and I create my label like this.
```
CCBitmapFontAtlas* label = [CCBitmapFontAtlas bitmapFontAtlasWithString:@"TestString", fntFile:@"MyFNTFile.fnt"];
label.position = ccp(350, 350);
[self addChild:label];  //This wasn't here originally, but with or without it the results appear to be the same
```
"self" is a CCLayer...i don't see my label...

Anything obvious I am doing wrong?

*Forgive any typos...the code compiles and runs with no assertions or anything of the sort
Posted 1 year ago #
JamesK
Member

@AcesWild don't know if you've sorted your problems but you may not be able to see your label as it's rendering 'blank' characters from the spritesheet. If your image is upside down (as mine are when I use Hiero v2) then flip them vertically first and see what you get.

Posted 1 year ago #

RSS feed for this topic

12 Next »

Reply »

You must log in to post.