qq_tracker_code_advanced_default

Today I want to tell you all about a great new app developed by Andreas Loew, who is also the developer of Texture Packer, an essential development tool if you are using cocos2d and want to optimize memory usage. The app I will talk about today is another great development tool named Physics Editor.

Physics Editor is a very useful tool for anyone using Cocos2d and Box2d. It takes all of the difficult work out defining vertexes for box2d bodies. The tool makes it so easy in fact that you can import any shape with transparency and Physics Editor automatically detects all the vertexes for you and stores them in a plist file that you can later add to your project.

Physics Editor makes it easy to place all of your box2d body information into a single plist file including information for multiple box2d bodies. You can add other useful information to your bodies besides the vertexes, you can also specify properties such as; PTM-RATIO, Anchor Point, Density, Restitution, Friction, Is Sensor, etc…

This app really does take a lot of the time you would spend figuring out all of the vertexes and writing code for all of your box2d bodies’ properties. Best of all you can save your project to later make quick and easy changes to the properties of your bodies by simply editing a single file. Physics Editor also includes some easy to understand examples that show you how to use the exported plist file with your box2d project. Apart from box2d, Physics Editor also supports chipmunk and you can also create your own custom export profile since Physics Editor is all template based.

All in all I consider Physics Editor to be a must have tool for anyone that spends any amount of time developing with box2d, you will not regret purchasing this software and will most likely be sending a thank you message to Andreas for all of his hard work and dedication to make our lives easier.

You can download Physics Editor from here.

Have you ever wanted a professional looking font for your iPhone / iPod Touch / iPad or Mac game but weren’t sure how to go about it? Maybe you are just lacking the artistic talent? One way to get around this is using photoshop and just making textures of the text you want to use. If you go this route then you’ll be stuck with static text and you’ll need to have a separate texture for each variation of your text, not to mention the learning curve that comes with Photoshop.

With Glyph Designed, you can forget everything I just mentioned above. Glyph Designer is a development tool that was designed by Mike & Tom of 71squared.com, a development blog for the Mac and iOS platform. With Glyph designer you can easily choose from your pre-installed fonts and modify them to your hearts content to make them fit perfectly with your game’s theme.

In this post I am going to cover some of Glyph Designer’s features and also provide a short tutorial on how to use Glyph Designer to make custom Glyph textures that you can then import into your cocos2d game project and use for your in-game text.

If you want to follow along go ahead and download Glyph Designer from here http://glyphdesigner.71squared.com

Glyph Designer Layout:

Selecting a Font to use:

You’ll notice that in the above screen shot, looking at the left most side of the application you’ll see a font browser that has a list of all the fonts that are currently installed on your Mac. You can scroll through this list and select the font you want to use. When you click on a font you’ll notice that it shows up in the preview window. At the bottom left of the app there 2 basic font settings that allow you to adjust the currently selected font. Using these 2 settings, you can change the size and type of the font, and by type I mean; Regular, Bold, Italic, Condensed, etc… whichever the selected font supports.

Editing The Selected Font:

On the right most side of the app you will notice a lot of settings that can be modified. Most of these settings are pretty self explanatory, I will however cover them anyways. The settings that can modified are as follows:

  • Texture Atlas ( Width, Height, Color, Spacing, Auto Size )
  • Glyph Fill ( Fill Glyph, Fill Type)
  • Glyph Outline (Outline, Width, Fill Type, Color )
  • Glyph Shadow (Shadow, Type, Lightsource, Blur Radius, Color)
  • Included Glyphs

I will now cover each of these in more Detail

Texture Atlas:

The Texture Atlas Settings define the properties of the exported texture. If you are not familiar with the term Texture Atlas, think Sprite Sheet, more on that later. You can set the width and height of of the Texture Atlas. I recommend going with the smallest multiple of 2 that you can get away with, meaning: 32 x 32, 64 x64, 128 x 128, etc…

For the Color setting I just set the Opacity to 0 so it doesn’t matter what the background color is, the choice is yours on this one.

You can leave the spacing at a default of 2. Another option to setting the width and height is to check the Auto Size check box which tells Glyph Designer that you want it to determine the best size of the Texture Atlas.

Glyph Fill:

The first option in Glyph Fill is a check box called Fill Glyph. If you want your Glyph to have a fill color, then you should select this checkbox otherwise you can skip over Glyph Fill. For Fill type you have 2 options. You can chose to fill using a gradient or fill using a solid color; gradients are great and look nice but will give you problems if you want to use RGBA4444 unless you set your dithering properly. Maybe Mike or Tom can add a feature that allows you to apply filters when exporting, maybe the ability to choose from RGBA4444 and RGBA8888 as well as some dithering filters. What do you think guys?

With that being said, if you pick gradient then you can pick your start and end colors as well as the angle of the gradient. These are totally up to you and you should go with what you think looks best.

Glyph Outline:

The first option you have here is a checkbox to enable or disable an outline for your Glyph. All of the options here are pretty self explanatory. Choose if you want an outline and then set the width, the fill type, which can be a solid fill type or a gradient fill type and then set your color. The same applies to Glyph Outline with gradients as for Glyph Fill.

Glyph Shadow:

Again, just as with Glyph Fill and Glyph Outline, the first option you have here is to either turn Shadow On or Off by checking or unchecking the Shadow Box. You have quite a few options here for the Glyph Shadow setting. First lets talk about the different Shadow types that you can use.

  • Outer Shadow – This type of shadow will add a shadow to the Outside of your Glyph
  • Inner Thin Shadow – This type of shadow will add a shadow to the Inside of your Glyph. If you want to use an inner shadow, I recommend using this one on fonts that are not very thick.
  • Inner Thick Shadow – This type of shadow will add a shadow to the Inside of your Glyph. If you have a thick font you can get away with using this shadow with good results, you could also use the thin shadow for your thicker fonts for a less shadowy effect.

After you’ve decided on the type of shadow to use we need to look at the Light Source. For the most part the default location of the Light Source should be fine, but if you need your shadow somewhere else then you can drag the light source to a different location, you can also move the light source via its x and y values for more accurate control.

The Blur Radius for the shadow specifies how blurred your shadow should be; in my opinion the default value here should do for most. Last but not least we have the shadow color.. No your shadow does not have to be black, this is your choice, don’t be afraid to be creative.

Included Glyphs:

Not too much to say about the Included Glyphs section. This part of the app specifies which letters, numbers, symbols you want to have in your Texture Atlas. You can edit this to include only the ones you know you’ll use to save some space. For instance if you know you will only use numbers or if you’ll only be using upper case or lower case characters.

Export The Texture Atlas:

Now all that’s left to do before we can use our new Glyph is to export the Texture Atlas, to do this just click on the Export button at the top right corner of Glyph Designer. From the dialog that pops up, just pick a location and specify a name for the Texture Atlas and click on Save.

In the next section I will go over the basics for using our Texture Atlas with Cocos2d by showing some sample code. You’ll be amazed at how easy this is.

Using Glyph Designer Exported Texture Atlas With Cocos2d:

If you’ve exported your glyph from Glyph Designer, you should have 2 resulting files with the name you’ve specified. Both of these files need to be copied to your Xcode Project.

Start a new Xcode Project and choose the cocos2d template.

Place the 2 files that Glyph Designer generated into your Resources folder within your Xcode Project.

After you’ve added the glyph files to your resources folder, select your HelloWorldScene.m file and find the init method. Replace the following code:

CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];

with

CCLabelBMFont *label = [CCLabelBMFont labelWithString:@"Hello World" fntFile:@"test.fnt"];

That’s all you have to do to use the glyphs with cocos2d… See, I told you it was easy.

Thank’s to Mike & Tom, we now have a full featured tool that allows us to easily create awesome looking in-game text. Please support Glyph Designer, it will soon be available on the Mac App Store but you can get it now from the Glyph Designer site at http://glyphdesigner.71squared.com

I would like to start this post by introducing some new software that will make the lives of developers much easier. When I first starting developing my new game Elementals HD for the iPhone I had no idea that loading individual PNG’s as textures for sprites would result in a final memory consumption of over 130MB on load. That’s really bad considering that the newest iPod Touch only comes with 256MB of RAM which to this day I will never understand. Apple added the hi-res display to the iPod Touch which means that images will use twice the amount of memory that they were using before. With the iPhone 4 they did it right and doubled up on the memory which helps a lot with the HD images taking up twice the amount of memory as the SD ones do. So anyway, back to the topic.

I needed some way to minimize the amount of memory utilization, so I started reading about sprite sheets and image sizes in the power of 2, etc… I found a neat utility called Zwoptex to create sprite sheets of all my images. This ended up helping me quite a bit, not only did it reduce the amount of disk space but it also reduced the amount of memory being used. At this time I was able to get my memory utilization down to about 90MB. To me, this is still quite high and I was not satisfied with the result, so I continued to look for a solution. I started reading about PVR’s and how fast they load and then I read about compressed PVR’s. Next, I needed to figure out how to use these PVR’s to lower my memory utilization and speed up my loading times.

I found an awesome app called TexturePacker which runs natively on Mac OS X. TexturePacker is a very similar tool to Zwoptex in that it creates sprite sheets from images but is very different and far more advanced when it comes to optimization. Long story short, I was able to use TexturePacker to create *.pvr.ccz sprite sheets for HD and SD images and reduced my memory utilization down to 50MB… WOW.. Now that is a lot better then the 130MB I started with. What I’d like to do now is present a tutorial on the usage of TexturePacker and walk you through step-by-step to get HD images loaded into TexturePacker, optimize them, publish them and finally write the code in Xcode to make them work. I’ll also share some best practices for memory management at the end of the tutorial.

Software you will need:

  1. Texture Packer

After you are done downloading the software above, you can follow the below steps to install TexturePacker and start up the Demo Project

Install TexturePacker:

If you haven’t downloaded Texture Packer yet, you can download it here. After the download has completed you can double click on the DMG file so that it mounts a disk image. The disk image contains the Texture Packer installer package. The screen should look like the screen shot below:

Texture Packer - Disk Image Contents

Double-Click the TexturePacker Package File and you will see the install screen, like the one below:

Texture Packer - Install

Texture Packet - Install

From there just follow all of the prompts until Texture Packer has completed the install process. You will find Texture Packer within your applications folder. Go ahead and launch Texture Packer. You will get the following screen:

Texture Packer Essential vs Texture Packer Pro

Texture Packer Essential vs Texture Packer Pro

Unless you’ve purchased a license you should choose Essential. The main difference is that with the Essential (Free Version) anything you export will be exported in red. In the next section I will give a brief overview of Texture Packer and the features we will use the most.

Note: All typos within the installer have been fixed since version 2.1.3

Importing Sprites:

Texture Packer - Import Sprites

Texture Packer - Import Sprites

Referring to the screen shot above I used the Import Sprites button to import a selection of sprites to work with. Once I imported the sprites, Texture Packer automatically adjusts the sprite sheet size to fit the 3 sprites I imported. If you look to the bottom right of the application on the status bar, Texture Packer displays the size of the resulting sprite sheet and the amount of memory it will consume. In this case with the above images, my sprite sheet will be 128×128 and consume 64 kB of memory. 64kB of memory isn’t a whole lot but lets go ahead and do some optimization anyway and see if we can cut down on memory usage.

On the left hand side of the app you will see the Texture Settings menu that is divided into 3 categories; Geometry, Layout and Output. Scroll down to Output and find the Image format setting. The default for this setting is RGBA8888 which results in a sprite sheet with the highest quality and the most memory usage. Change this setting to RGBA4444 and watch what happens to the memory usage. 32kB is what the memory usage is now… WOW we just cut memory usage in half but at the cost of quality. Why? The reduced quality comes from taking a 32-bit image and converting it to a 16-bit image. Make sense?

Ok, lets fix the quality to make it look a little better. Two fields down, you’ll see Dithering. The default Dithering setting is NearestNeighbour which makes for some ugly gradients when going from 32 to 16-bit. Go ahead and change this to FloydSteinberg+Alpha and watch in amazement as your gradients start to look like gradients again. You may notice that this results in your sprites looking a bit noisy but remember, we are working with hi-res images here and every 4 pixels will equal 1 point so the image should look pretty sharp, at least that’s what I’ve experienced.

Let’s take a minute to go over the Output Category that’s in the Texture Settings Menu:

  • Data Format – This setting is for defining in what format the sprite sheet data should be processed in. We need to select cocos2d for this. What this will do is generate a plist file that we will load into frame cache a little later.
  • Data File – This will be the output location and name of the data file (plist file for cocos2d) You don’t need to set this as it will automatically be filled when you set the Texture File
  • Texture Subpath – Not sure what this is for, I’ve never used it
  • Trim sprite names – Leave this unchecked, I’m not sure what this is used for
  • Texture Format – Here you will choose the output format of your sprite sheet. You can choose any format you like, they are all compatible with cocos2d but I recommend Compressed PVR (.pvr.ccz). This will give you the most compression and pretty quick load times.
  • Image format - This is where we will get most of our optimization from. For most of the sprite sheets we create we should choose RGBA4444 as it will give you the best result. RGBA4444 is used for sprites with transparency’s. If you have a sprite that doesn’t use any transparency you should use RGB565. If you have a sprite sheet that absolutely needs to have the highest quality then use RGBA8888 but we aware that this will result in high memory use, especially if your sprite sheet is 2048 x 2048.
  • Texture File – This is where you would set the name of your texture file. Click on the browse button to select your location and then give a name. If you are working with hi-res images be sure to add -hd at the end of the filename, you’ll see why, later.
  • Dithering – I covered this earlier but just to re-cap, if you are using RGBA4444 you should use FloydSteinberg+Alpha and if you are using RGB565 then use FloydSteinberg
  • Premultiply alpha – This is used to limit the amount of artifacts and possible thin black borders around your sprites when sprite anti aliasing is on. Also semi-transparent pixels might get too dark without this setting. If this is enabled be sure to add the following to your code:
    [CCTexture hasPremultipliedAlpha:YES]
  • AutoSD – This is one of my favorite features of TexturePacker. What this little nifty checkbox does is automatically create a low-res sprite sheet and plist file for you but you have to make sure that you named your Texture file with a -hd at the end.

A Note from the author of TexturePacker: Whenever possible, you should use Add Folder to import your sprites because this uses smart folder. Every time you add sprites to the folder and update your sprite sheet it re-scans the contents of the folder and adds all sprites. This makes sprite handling much easier than adding single sprites.

Ok, so now we have our sprites imported and have everything optimized. Next we will talk about Publishing.

Publishing Sprite Sheets:

Before you click on the Publish button be sure that you’ve got all of your settings configured the way you want them. Here’s a quick step-by-step re-cap of the steps above:

  1. Import sprites either by using the Add Sprites or the Add Folder button.
  2. Set Data Format to cocos2d
  3. Set Texture format to Compressed PVR (.pvr.ccz)
  4. Set Image format to RGBA4444
  5. Set Texture file to something-hd
  6. Set Dithering to FloydSteinberg+Alpha
  7. Check AutoSD

With all of the above completed go ahead and click on the Publish button. Texture Packer will now export your hi-res and low-res sprite sheets and associated plist data files.

You should have something similar to the following screen shot:

There isn’t too much to say about publishing, the next section will cover how to get your sprite sheets to work with cocos2d.

Writing The Code:

After publishing your sprite sheets with Texture Packer, the next and last step would be to add this into your project and get them to show up in your scene. I’ll be walking you through adding your sprite sheets to your project and showing you code examples of how to make the best use of your new sprite sheets.

Open up Xcode, create a new cocos2d Project from one of the cocos2d templates and copy the 2 sprite sheets and 2 plist files that were exported from TexturePacker into your Resources folder within your Xcode project, make sure that copy files is checked.

Copy Items

Copy Items

Once the sprite sheets and plist files have been added go ahead and click on your HelloWorldScene.m and find your init method. Once you’ve located your init method replace what’s inside the if statement with the following lines of code:

[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA4444];
CCSpriteBatchNode *spritesDemoNode;
spritesDemoNode = [CCSpriteBatchNode batchNodeWithFile:@"demosprite.pvr.ccz"];
spritesDemoNode.tag = 805;
[self addChild:spritesDemoNode];
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"demosprite.plist"];

The code above does the following:

  1. Sets the current Pixel format to RGBA4444 to match that of our sprite sheet that we set in TexturePacker
  2. Creates a sprite batch node using the Compressed PVR
  3. Sets a tag ( has nothing to do with texture packer but I use tags for other reasons )
  4. Adds the node as a child to your current Layer
  5. Adds the sprite frames to cache from the plist file that was exported by Texture Packer

Next we need to create a CCSprite from the frames that are in cache, we do this with the following code:

CCSprite *spriteDemo = [CCSprite spriteWithSpriteFrameName:@"fireball.png"];
spriteDemo.position = ccp(size.width/2, size.height/2);
spriteDemo.tag = 1;
[self addChild:spriteDemo];

The above code does the following:

  1. Creates a sprite from the frames in cache. In this case I had an image named fireball.png that was one of the images that was imported into Texture Packer. When Texture Packer creates the plist file it uses the names of your sprites for the frame names, which makes it easy to use.
  2. Next I am setting the position to the center of the screen. size is a variable that I’ve setup that has the height and width of the screen as properties.
  3. Again I am setting a tag, not something you have to do
  4. Last we are adding the new sprite to our layer.

If all went well and you’ve followed all of the above directions then you should be able to build your project and see your sprite on the scene. Granted, this is more work then copying individual PNG’s into your project and just creating sprites from the PNG’s but that is a big waste of memory and will eventually crash your app. Remember, with Texture Packer I was able to reduce my memory to more then half of the original memory utilization even using Zwoptex did not make a huge improvement with memory usage. I would definitely recommend Texture Packer to anyone that is interested in optimizing memory.

If anyone has any questions or comments please feel free to leave them. If anyone has any more optimization tips, please share, I would love to hear them and I’m sure everyone else would appreciate it as well.

How much time and effort would you say a typical developer puts into making a game? I can tell you from experience that if you are just one person, it can very well take months upon months to come up with a good game and maybe close to a year to come up with a great game.

If you’ve ever developed a great game or even just an average game, you should also know the value of having a free Lite Version for your paid Full Version. If your game requires a purchase of even .99 cents you should make sure that you provide users with a Lite / Trial Version of your game that they don’t have to pay for. The purpose of having a Lite Version is so that they can try out your game with the other reason being of course marketing.

Everyone will download the free version over the paid version so what you have to do is make sure that your free version leaves with some sort of cliff hanger, something that will make the user want to purchase your full version to continue playing. If you’ve ever watched a season of any TV show, you’ll see that at the end of the season it leaves you with a cliff hanger and by the time the new season comes on, you can hardly contain yourself. This is what your game should do, it should make the user curious about what comes next, what will happen to the hero at the end of the story???

Anyways, enough of that… let’s get on with the tutorial. I will be showing you how to implement within Xcode a really quick and easy method to keep your Full and Lite versions separate but together…

An overview of what we will be doing is outlined in the steps below:

  • Start a new XCode Project
  • Duplicate the current Target
  • Rename the Duplicated Target
  • Rename the Duplicated Info.plist File
  • Change the Icons in the Duplicated Info.plist file to use the Lite Version Icons
  • Change the Bundle Identifier to match with the bundle identifier from Apple for the Lite Version
  • Edit Build Properties of the Duplicated Target
    - Add C / C++ Compiler Flags
    - Change the Product Name
    - Change the name of the Info.plist file to the name of the Duplicated Info.plist File
  • Add Logic to code to separate features of Lite and Full version.

As you can see, in only a few steps we can set up our app’s environment to make it very easy to have a lite and full version within the same project and be able to build them separately. In the tutorial listed below I will be covering what I have outlined above with a lot more details and screen shots.

Let’s Start by Opening Xcode and starting a new project. I’ll be starting a new Cocos2D project as you can see in the Screen shot below and I’ll be calling it MyGame.

After you’ve started a new project and Xcode has finished loading you will need to look on the bottom left side of the window. You’ll need to locate and expand the Targets group and then right-click and click on duplicate. See the screen shots below for an example.

This will make a duplicate of the MyGame Target, and will also create a duplicate of the Info.plist file. Next we will need to rename the duplication of the MyGame Target. I’m going to use the name MyGameLite. We will also need to rename the duplicated Info.plist file, and for simplicity I just named mine InfoLite.plist, to keep a standard naming convention. You can see some example screenshots below.

You’ll also notice that in the above screen shot to the right clicking the Build drop down will now show you 2 Targets, one for MyGame and one for MyGameLite.

Next we need to edit some of the Build settings for the MyGameLite Target. If its not already expanded, expand the Targets group and then right click on the MyGameLite target and from the pop-up menu, click on Get Info. An example screen shot is shown below.

After clicking on Get Info, you will be presented with a dialog box that has a number of tabs across the top of it. The tab we are interested in is the build tab. Go ahead and click on the build tab and ensure that in the Configurations drop down, that All Configurations is selected, then in the Search window type Product Name. If you are following this tutorial to the T, then your product name should say MyGame. We’ll need to change that to MyGameLite. To change it, just double-click on MyGame and then make your change and click on OK. See example screen shots below.

Don’t close the Build Settings just yet, we have a few more steps to take before we’re done. In the search bar type. Other C. This should give you results similar to the screen shot below

What we are interested in here are the “Other C Flags” and the “Other C++ Flags”. Your results may differ from mine depending if you already have some compiler flags setup. Double click on the empty space next to Other C Flags and you will get a dialog window pop up. In this window you will need to type the following without quotes: “-DLITE_VER” and then click on OK. This should set both the “Other C Flags” and the “Other C++ Flags” See screen shots below for examples.

I know that the screen shots are a little small but if you click on them you can see the images a little bigger. There is one more setting that we need to change in the Build settings and that is to specify the name of our Info.plist file. Currently it is still defined as Info.plist but we want to set it to InfoLite.plist so that the build settings match.

Go ahead and type Info.plist File and locate the “Info.plist File” string which should read “Info Copy.plist” or something similar. Change this string to InfoLite.plist.

You are now done with Build settings and you can safely close the Build Settings Dialog. See below for some example screen shots for renaming Info Copy.plist

Now we just need to make a few minor changes to our InfoLite.plist file and then we can start modifying some code. Locate the InfoLite.plist file, usually in the left column under the Resources group and click on it. You should see the values of the InfoLite.plist file listed in your preview window on the bottom right.

We need to change the Icon and the Bundle Identifier. To do this you simply edit each with the proper names. For instance, I used IconLite.png for my icon file and used com.domain.mygamelite for the bundle identifier.

The bundle ID’s for the Lite and Full version of your game must be different in order for Apple to recognize that they are 2 separate applications and so that you don’t run into any issues when using the uploader.

That’s pretty much it for setting up the environment. It seems like a lengthy task, but once you’ve done it a few times, it should only take you about 5 min or so to get your environment setup for multiple apps within one project.

So lets go ahead and do some coding so I can show you how to use the environment we just setup to differentiate your code from being for your Lite version or for your Full version.

Within any file in your Xcode project, I am using a Cocos2D template so I will be using HelloWorldScene.m, all you have to do is place the following code:

#ifdef LITE_VER
//- Code that should be executed if the build target is set to MyGameLite
 
#else
//- Code that should be executed if the build target is set to MyGame
 
#endif

What the above code does is, it checks for compiler flags of LITE_VER, remember when we set the Other C and C++ Flags? Well this is where they get used. Anything between

#ifdef LITE_VER

and

#else

will get compiled if the Lite version build target is selected while everything between

#else

and

#endif

will not. You should be able to figure out how to move forward from here. I suggest that this be the first thing you do before starting the development of your game. The game I am currently working on is about 45% finished and it just now occurred to me that I need to start thinking about a Lite version. Even if you think that you will be making a free app, go ahead and make a Lite version anyways, you never know, and you might change your mind later.

Believe me, this is much easier to implement when you haven’t already spent months writing thousands of lines of code :(

So… I’m hoping that this was able to help someone, and if anyone needs any help or has any questions, feel free to leave me a comment.. Happy Developing