qq_tracker_code_advanced_default

Hi everyone. It’s been forever since my last post and with good reason. I’ve been working non-stop on updating all of my apps in the Mac App store to support sandboxing as well as working on my first Mac game, more on that in another post.

This post is mainly for reference so that I don’t forget how to do this but I thought that maybe this would help out some of you as well.

So basically this applies to anyone who is wanting to use a font that is not part of the Mac OS X system fonts within your Mac game using Cocos2D.

For this tutorial, I’ve created a new project named Demo and have chosen the default Cocos2D Mac Template

If you’ll click on the HelloWorldLayer.m file, and review the init method. We will be changing the default font from Marker Felt to our own custom font that we will download.

To use a custom font here is what you’ll have to do:

  • Click on your project and then click on your project target and then click on Build Phases
  • At the bottom, find the Add Build Phase Button, click it and then click on Add Copy Files
  • Click on the disclosure triangle to expose Copy Files
  • Destination should be Resources and Subpath should be Fonts
  • If you haven’t done so yet, please go ahead and download a font. I will be using Led 8×6 

  • When your download has completed, drag the font file into the Add files here box within the Copy Files Build Phase. Keep the defaults and click Finish
  • You should have something similar to the below screen shotScreen Shot 2013-02-11 at 7.42.25 AM

 

 

 

 

 

 

You then need to add the ATSApplicationFontsPath key to your Info.plist file, with the name of the folder containing your font as its value:

<key>ATSApplicationFontsPath</key>
<string>Fonts</string>

Now we are all set to begin using our custom font within our project. Let’s go ahead and click back over to the HelloWorldLayer.m file.

  1. Within the init method replace @”Marker Felt” with @”Led 8×6″

Notice that we are not using the name of the file which is led_8x6.ttf but instead we are using the actual font name. The way you would go about knowing what the name of the font is, would be to double-click on the file and let it install, then look for it in Font Book.

Finally lets run the project. You should see your custom font now.

Screen Shot 2013-02-11 at 8.08.26 AM