Bitmap Font Update

I’ve been meaning to update the bitmap font code for a while. I made a number of changes to this code for the book as I found problems with the rendering of characters for some fonts. This was done to bugs in my code that positioned each character rendered. I fixed these for the book code and I’ve just updated the Tutorial 4 project code with the same fixes.

If you were seeing odd alignment of characters then the fixes in the Bitmap Font tutorial code should sort them out. It also ensures that the point provided when rendering text is used as the bottom left hand corner of the first character.

Hope this helps people and let me know how you get on.

Tutorial 4 – Bitmap Fonts

Mike

Share:
  • Digg
  • del.icio.us
  • Facebook
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • TwitThis
  • Design Float
  • DZone
  • email
  • Google Bookmarks
  • LinkedIn
  • Scoopeo
  • Tumblr

25 Comments

Scott  on February 6th, 2010

Hey Mike,

I noticed some funky spacing between chars on some fonts. My fix for this was to… change fonts ;-)

However, I need to revisit this for a new project I am on. Thanks for updating this class for us. I’ll run it through my Diff tool to see what changed.

How is the book coming? Anything I can do to help?

-Scott

RoberRM  on February 6th, 2010

Thank you for the update, Mike!

YH  on February 6th, 2010

Hello mike,
Thanks for the update, but I think for the point.x, the xoffset should be multiplied by the image scale as well? I think that is missing in the updated code.

And for some reason in the project I’m working on, after adding the common height the whole string shifted up. I probably messed up something in my code…

mike  on February 6th, 2010

@Scott, the book is going OK. Almost finished Chapter 11 on Sound, this weekend should see it complete, which leaves around seven chapters still to do, so head down and cracking on at the moment. I’ll be sure to shout if I need any help :o)

@YH, You didn’t mess anything up in your code. With the new update the x,y point now specifies the bottom left hand corner of the first character in the string, which will cause your strings to move up from where they were being rendered. This is the correct behaviour and would need you to adjust your string locations. You may notice that the bottom of the first character is not exactly sitting on y, this is because the new calculation takes into account how characters with tails or other punctuation that sits low.

You don’t need to adjust newPoint.x by the scale amount as you still want the spacing between the characters to be the same even when scaled up. using scale with the xAdvance value is all that is needed to correctly move newPoint.x along once a character has been rendered.

The render code in my new Bitmap Font class is different to the tutorials, but to give you an idea of how it looks I’ve pasted it below

- (void)renderStringAt:(CGPoint)aPoint text:(NSString*)aText {

	// Loop through all the characters in the text to be rendered
	for(int i=0; i< [aText length]; i++) {

		// Grab the character value of the current character.  We take off 32 as the first
		// 32 characters of the fonts are not used
		unichar charID = [aText characterAtIndex:i] - 32;

		// Using the current x and y, calculate the correct position of the character using the x and y offsets for each character.
		// This will cause the characters to all sit on the line correctly with tails below the line.  The lineHeight which has
		// been taken from the fonts control file is used within the calculation as commonHeight.
		int y = aPoint.y + commonHeight - (charsArray[charID].height + charsArray[charID].yOffset) * charsArray[charID].image.scale.y;
		int x = aPoint.x + charsArray[charID].xOffset;
		CGPoint renderPoint = CGPointMake(x, y);

		// Set the color of this character based on the fontColor
		charsArray[charID].image.color = fontColor;

		// Render the current character at the renderPoint
		[charsArray[charID].image renderAtPoint:renderPoint];

		// Move x based on the amount to advance for the current char
		aPoint.x += charsArray[charID].xAdvance * image.scale.x;
	}
}

Let me know what you see in your project. It's working fine in mine and I've tried scaling text right up over 5x :o)

Mike

YH  on February 9th, 2010

Hello Mike,

Thank you for the reply. The code is working fine for me now :)

kingbombs  on February 9th, 2010

i was just wondering, if you wanted to slim the bitmap font code to its bare minimum so you only displayed just a perticular font and not any type of font. Would you slim down the code much at all?

mike  on February 9th, 2010

Hi kingbombs

If you were still using a font generated by Hiero then not much would change. You would still need to process the .fnt file and then render your strings to the screen.

If you wanted a hard coded font and not control file then you could create a much smaller class I’m sure. I’ve not looked at doing that, but I would assume it would be a lot smaller.

Mike

Trevor Newsome  on February 14th, 2010

Hi Mike,

Loving the tutorials. Just wondering if you was going to make anymore tutorials as there is one or two last items I would say are missing and that would be valuable, and that is collision detection on items e.g. bullets and/or asteroids, and also some sort of enemy intelligence.

Keep up the great work.

Trevor

mike  on February 14th, 2010

Hi Trevor

The easy answer is yes, I’m going to be making more tutorials. They have slowed down due to writing the book. What with work and trying to get the book finished the blog tutorials have taken a hit.

The topics you mention are topics I do cover in the book.

Just a little plug ;o)

Mike

Trevor Newsome  on February 14th, 2010

Hi Mike,

Any estimations when the book might be finished?

Trevor

mike  on February 14th, 2010

The plan is to have it out in Spring this year. I’m currently sat working my way through Chapter 13 “Game GUI” and I have 18 chapters to do it total. I should have all the chapters finished by the end of this month, so got the whole of next week off work to do nothing but write.

That’s as detailed as I can be right now on the publish date, but I will be keeping everyone on the blog up to speed with progress and due dates etc.

Mike

glen  on February 25th, 2010

Has anyone tried displaying an int using the anglecode font method and got it to work.
I have tried placing an int into an NSString using stringWithFormat but when i attempt to display it the program crashes?
Any help on this would be much appreciated.
Thanks

Scott  on February 25th, 2010

Glen,

Post your code se we can take a look.

Thanks,

-Scott

glen  on February 25th, 2010

Hi Scott
Im trying things along the lines of

NSString *mystring = [NSString stringWithFormat:@"%d",myint];

with myint being a number

which does seem to work ok
the problem is when i use the anglefont code to display the string on screen, it still compiles with no errors but crashes the program.
Its not the anglecode font thats crashing it because it displays fine if used with a regular NSString so its only when i do a combination of trying to populate an NSString with a int and then display it?
Thanks in advance for any suggestions or solutions
Glen

Scott  on February 25th, 2010

Hmm, your string looks correct, so I am not sure what the problem is. Are you sure myint is a valid value? If you step through the debugger, are you able to see where things go wrong? Is it during the render?

glen  on February 25th, 2010

Hi Scott
The problem is when rendering yet if i pass a string which hasn’t been created from an int it works fine. i’ve also checked the value of the NSString after its been created from the int and it all appears ok. maybe it’s just not possible for some reason i just wondered if anyone else had tried doing this and either had the same problem or got it working?

mike  on February 25th, 2010

Have you got an example project you can provide that has the problem?

Mike

glen  on February 25th, 2010

Hi Mike
Any example project i could send would be very messy as im still trying out loads of different stuff and its hasn’t got any real structure at the moment but as mentioned all im trying to do is take an integer place it in a string, which all seems to work fine, but when i try to render it with
[font1 drawStringAt:CGPointMake(160, 200) text:message];
the program crashes.
If i simply place a string into message its fine.
The problem is only when i take an int and place it into the NSString ‘message’ which does appear to work but crashes when executing the line above.
I have created an NSlog and message is the same when its created as a string and when its created from the int.
The only other thing i can say is im using tutorial 9 as this one is the one i seem to understand best at the moment.
PS cant wait for the book
Glen

glen  on February 25th, 2010

Hi Mike
Sorry me again, i’ve just took another look at the video for SLQ and i notice that you are displaying a time and a score which im guessing are int values so my question is are you displaying these using the anglecode font like im trying to do or is there another method?
Cheers
Glen

mike  on February 25th, 2010

Hi Glen

I am using Anglecode font to render all the text in SLQ. My class though is a complete rewrite, but it still works in the same way. I just need to pull out the project that uses the angelcode class to see if there are any problems.

I cannot think there are as I used the original angelcode class when prototyping SLQ and it was also using numbers in that way.

In SLQ I am creating strings in the same way you are and then rendering them by passing that string to the BitmapFont class as mine is called.

When it crashes what do you get, EXC_BAD_ACCESS maybe?

Mike

glen  on February 26th, 2010

Thanks for the help
Slept on it made a couple of changes and now its working :)
Glen

Scott  on February 26th, 2010

What was the issue?

glen  on February 26th, 2010

Hi Scott
im still learning objective-c and still getting to grips with what variables will carry over to different areas of the program, needless to say i was creating everything correctly but it was no longer available when it came to rendering it.
Thanks to your suggestion of using the debugger and a nights sleep i sorted it.
Thanks again for the help and hopefully im in a better position to sort out problems myself now.
Cheers
Glen

Scott  on February 26th, 2010

Glen,

I’m glad you got it worked out. I am coming to Objective-C from C++ and C# and know how difficault it can be.

Personally, I like strongly typed languages, but there are some cool aspects in Obj C too I guess.

Good luck!

-Scott

FoxtrotF  on March 7th, 2010

Hello Guys, I’ve some question.
I’m very new to the Game Dev. What is better for performance, bigger(dimensions) of sprites image, for example: animation of the movement to the left and right, or possible to have animation sequence only in left direction and during run time flipping(mirror) it to the right side?
I have this code where I’m trying to flip sprite sheet image, but nothing happens, it’s work fine with other single images (player.png)

ssi = [[Image alloc] initWithImage:[UIImage imageNamed:@"spritesheet16.gif"] filter:GL_LINEAR];
[ssi getSubImageAtPoint:CGPointMake(0, 0) subImageWidth:16 subImageHeight:16 scale:2.0];
[ssi setFlipHorizontally:YES];
ss = [[SpriteSheet alloc] initWithImage: ssi spriteWidth:16 spriteHeight:16 spacing:0];
sprite = [ss getSpriteAtX:0 y:0];

Leave a Comment