qq_tracker_code_advanced_default

I’ve been following the cocos2d community for a while now and discovered that their latest release includes the ability to build your app for OS X. The folks over at cocos2d are trying to make it a simple process to port your iPhone / iPad app over to Mac OS X, probably in preparation of the newly anticipated Mac App Store that we should be seeing soon.

There doesn’t seem to be 100% full support for Mac OS X just yet but the basics are working. You might be asking yourself, how would I go about changing my project to build Mac OS X instead of iPhone? Honestly I haven’t found an easy way, so if someone wants to jump in and help me out I’d appreciate it but for the purposes of this tutorial I will be creating a new App.

Let’s review some of the steps we will need to perform to accomplish this task.

Begin by downloading the latest version of cocos2d here. When the download has completed, go ahead and extract this to a folder on your Mac.

  1. Start a New Cocoa Project
  2. Add Cocos2d Sources to Project
  3. Edit AppDelegate.h & .m files
  4. Import Frameworks
  5. Create a new Objective-C class
  6. Change Settings in Interface Builder for MainMenu.xib
  7. Import sample artwork files

I’d like to add in that I am not stating that this is the best or only way to setup a project with cocos2d to build on OS X and I may have taken some unnecessary steps and may have made a few mistakes. The following is what I did to get it to work for me. If anyone has any suggestions to make this a more accurate or better tutorial, please feel free to let me know.

Start a New Cocoa Project:

First we’ll need to open up Xcode and then start a new project. This time though, instead of starting with one of the pre-defined cocos2d templates we will be using the Cocoa Application template that you should find under Mac OS X -> Application. Please see the screen shot below:

Once you have created a new project you should see the Xcode interface come up. For the purpose of this tutorial I have named my App Demo Mac Port. Your screen should look similar to the screen shot below.

In the next step you will be adding the cocos2d sources to your project, so be sure you’ve downloaded the latest release of cocos2d to be sure you have the version that supports Mac OS X.

Add Cocos2d Source to your Project:

For this step you will need the cocos2d files, if you haven’t downloaded cocos2d yet you can download the latest version here. Once downloaded, go ahead and extract to somewhere on your hard drive.

After you have extracted Cocos2d you will need to navigate to the location on your hard drive where you extracted Cocos2d then open up the cocos2d-iphone-0.99.5-beta3 folder and locate the cocos2d folder. See the screen shot below:

We will need to add this folder to our project. I usually just drag it from the Finder window into the project. Drag the cocos2d folder into your project right under your App name on the very top. A dialog window similar to the screen shot below will pop up.

Click on Add and this will add the required Cocos2d sources to our project. Your Xcode Project interface should look similar to the screen shot below.

The next section will guide you through modifying the AppDelegate.h and .m files.

Modify AppDelegate.h & .m Files:

In this section you will need to modify the AppDelegate.h & .m files to work with Cocos2d. I will not be explaining the code her but I will list the code so you can see what these files should look like.

AppDelegate.h

#import "cocos2d.h"
 
@class CCSprite;
 
//CLASS INTERFACE
#ifdef __IPHONE_OS_VERSION_MAX_ALLOWED
@interface AppController : NSObject
{
	UIWindow *window;
}
@end
 
#elif defined(__MAC_OS_X_VERSION_MAX_ALLOWED)
@interface Demo_Mac_PortAppDelegate : NSObject  {
    NSWindow *window_;
	MacGLView *glView_;
}
 
@property (assign) IBOutlet NSWindow *window;
@property (assign) IBOutlet MacGLView *glView;
 
@end
#endif // Mac

AppDelegate.m

//
// Actions Demo
// a cocos2d example
// http://www.cocos2d-iphone.org
//
 
// local import
#import "cocos2d.h"
#import "Demo_Mac_PortAppDelegate.h"
#import "DemoScene.h"
 
// CLASS IMPLEMENTATIONS
 
#ifdef __IPHONE_OS_VERSION_MAX_ALLOWED
 
#pragma mark AppController - iOS
 
@implementation AppController
 
- (void) applicationDidFinishLaunching:(UIApplication*)application
{
	// CC_DIRECTOR_INIT()
	//
	// 1. Initializes an EAGLView with 0-bit depth format, and RGB565 render buffer
	// 2. EAGLView multiple touches: disabled
	// 3. creates a UIWindow, and assign it to the "window" var (it must already be declared)
	// 4. Parents EAGLView to the newly created window
	// 5. Creates Display Link Director
	// 5a. If it fails, it will use an NSTimer director
	// 6. It will try to run at 60 FPS
	// 7. Display FPS: NO
	// 8. Device orientation: Portrait
	// 9. Connects the director to the EAGLView
	//
	CC_DIRECTOR_INIT();
 
	// Obtain the shared director in order to...
	CCDirector *director = [CCDirector sharedDirector];
 
	// Sets landscape mode
	[director setDeviceOrientation:kCCDeviceOrientationLandscapeLeft];
 
	// Turn on display FPS
	[director setDisplayFPS:YES];
 
	// Enables High Res mode (Retina Display) on iPhone 4 and maintains low res on all other devices
	if ([UIScreen instancesRespondToSelector:@selector(scale)])
		[director setContentScaleFactor:[[UIScreen mainScreen] scale]];
 
	// Default texture format for PNG/BMP/TIFF/JPEG/GIF images
	// It can be RGBA8888, RGBA4444, RGB5_A1, RGB565
	// You can change anytime.
	[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA8888];
 
	CCScene *scene = [CCScene node];
	[scene addChild: [nextAction() node]];
 
	[director runWithScene: scene];
 
}
 
// getting a call, pause the game
-(void) applicationWillResignActive:(UIApplication *)application
{
	[[CCDirector sharedDirector] pause];
}
 
// call got rejected
-(void) applicationDidBecomeActive:(UIApplication *)application
{
	[[CCDirector sharedDirector] resume];
}
 
// application will be killed
- (void)applicationWillTerminate:(UIApplication *)application
{
	CC_DIRECTOR_END();
}
 
// sent to background
-(void) applicationDidEnterBackground:(UIApplication*)application
{
	[[CCDirector sharedDirector] stopAnimation];
}
 
// sent to foreground
-(void) applicationWillEnterForeground:(UIApplication*)application
{
	[[CCDirector sharedDirector] startAnimation];
}
 
// purge memory
- (void)applicationDidReceiveMemoryWarning:(UIApplication *)application
{
	[[CCDirector sharedDirector] purgeCachedData];
}
 
- (void) dealloc
{
	[window release];
	[super dealloc];
}
 
// next delta time will be zero
-(void) applicationSignificantTimeChange:(UIApplication *)application
{
	[[CCDirector sharedDirector] setNextDeltaTimeZero:YES];
}
 
@end
 
#elif defined(__MAC_OS_X_VERSION_MAX_ALLOWED)
 
#pragma mark AppController - Mac
@implementation Demo_Mac_PortAppDelegate
 
@synthesize window=window_, glView=glView_;
 
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
 
	CCDirector *director = [CCDirector sharedDirector];
 
	[director setDisplayFPS:YES];
 
	[director setOpenGLView:glView_];
 
	// Enable "moving" mouse event. Default no.
	[window_ setAcceptsMouseMovedEvents:NO];
 
	[[CCDirector sharedDirector] runWithScene: [DemoScene scene]];
}
 
@end
#endif

Within the applicationDidFinishLaunching method you will notice the [[CCDirector sharedDirector] runWithScene:[DemoScene scene]]; line.  This line specifies the Scene we want our project to start with. In the next section I will list some more code for a new Objective-C class.

Create a New Objective-C Class:

At this point we will need to create a new Objective-C class. Right click on the Classes group within your Xcode Project interface and click on Add -> New File. You will be presented with a dialog similar to the following.

Click on Next and you’ll be presented with the next dialog.

I’ve named my class, DemoScene.m be sure the check mark to create DemoScene.h file is checked. Click on finish, you should now see your new class files in your Xcode project interface. Below you will find the code you should put into these 2 files. If you are familiar with Cocos2d, then the code below should look familiar to you.

DemoScene.h

//
//  DemoScene.h
//  Demo Mac Port
//
//  Created by Chris Fletcher on 10/24/10.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//
 
#import
#import "cocos2d.h"
 
@interface DemoSceneLayer : CCLayer {
 
	CCDirector *Director;
 
}
@end
 
@interface DemoScene : CCScene {
 
	DemoSceneLayer *_layer;
 
}
 
@property (nonatomic, retain) DemoSceneLayer *layer;
 
+(id)scene;
 
@end

DemoScene.m

//
//  DemoScene.m
//  Demo Mac Port
//
//  Created by Chris Fletcher on 10/24/10.
//  Copyright 2010 __MyCompanyName__. All rights reserved.
//
 
#import "DemoScene.h"
 
@implementation DemoScene
@synthesize layer = _layer;
 
+ (id)scene {
 
	CCScene *scene = [CCScene node];
	DemoSceneLayer *layer = [DemoSceneLayer node];
	[scene addChild:layer];
 
	return scene;
 
}
 
- (id) init {
 
	if ((self = [super init])) {
 
		self.layer = [DemoSceneLayer node];
		[self addChild:_layer];
 
	}
	return self;
}
 
@end
 
@implementation DemoSceneLayer
 
- (id)init {
 
	if ((self = [super init])) {
 
		CGSize winSize = [CCDirector sharedDirector].winSize;
 
		CCSprite *starBG = [CCSprite spriteWithFile:@"starbg.png" rect:CGRectMake(0, 0, 960, 640)];
		starBG.position = ccp(winSize.width/2, winSize.height/2);
		[self addChild:starBG];
 
	}
	return self;
}
 
-(void) dealloc {
 
	[super dealloc];
 
}
 
@end

As you can see from the code above, we are simple creating an Interface and Implementation for a layer and a scene and then adding a CCSprite to the layer. This is very simple Cocos2d functionality but should be enough code to get you started.

We can’t Build & Run the project just yet. We have a few things left to do, mainly importing some frameworks & images and then making some changes in Interface Builder. The next section will cover the frameworks we will need to import.

Importing Additional Frameworks:

In this section of the tutorial I will cover which frameworks we will need to add to our project and how to add them. The frameworks we will add are as follows:

  • QuartzCore.framework
  • OpenGL.framework
  • ApplicationServices.framework
  • libz.dylib

To add a framework to our project, right click on Frameworks and then  Add -> Existing Frameworks. You will be presented with a dialog similar to the following screen shot.

Find the QuartzCore.framework and click Add, then right click on Frameworks and then Add -> Existing Frameworks and find the OpenGL.framework and click Add. Repeat these steps for the ApplicationServices.framework and the libz.dylib.

When you are done adding all of the frameworks your Xcode Project interface should look similar to the screen shot below:

At this time all we have left to do is is import some images and then make some Interface Builder changes. This is turning out to be a pretty lengthy tutorial but I promise we are almost at the end. In the next section I will quickly cover the images that need to be added.

Add Images To Our Project:

The code in the DemoScene.m file uses a CCprite that uses an image named starBG.png. You can download this image from the link below:

Download:

  Star Background (1.3 MiB, 1,761 hits)

The Cocos2d source requires that an image called fps_images.png exists in our resources folder to render the FPS image that you are used to seeing on the bottom left hand corner. You can find this file in the Cocos2d/Resources/fonts folder within the extracted folder from the cocos2d sources.

When you have both files located, drag them into the Resources folder of your Xcode project.

At this point we have done all that is required within our Xcode Project, the only thing left to do is to make some changes and additions to our MainMenu.xib file within interface builder.

MainMenu.xib & Interface Builder:

Go ahead and locate your MainMenu.xib file inside of your Xcode Project interface. It should be located inside of your Resources folder. Double Click on MainMenux.xib, this should launch interface builder.

After Interface Builder has launched, the first thing I like to do is resize the window to what the size of my application will be. For simplicity I will set the size of my window to 960×640 since I already have all of my images created at that resolution to support the iPhone 4.

After you have resized your window to 960×640, it should look similar to the following screen shot.

While we have focus on the window lets make a quick change. You will need to change a setting in the Window Attributes. At the bottom find the check mark for One Shot and uncheck this box. See the screen shot below:

After changing the size of the window and unchecking the One Shot mode we need to add an OpenGL View to our window. In your Library scroll down until you see OpenGL View. Select this and drag it onto your Window. You should now see something similar to the screen shot below:

Go ahead and resize the OpenGL View to the size of the window. Your resulting window should look similar to the screen shot below:

Now that we have our window and our OpenGL view resized to 960 x 640 we will need to make some changes to the OpenGL View. First, you’ll want to change the Class to MacGLView. With the OpenGL View selected go to the Identity tab and change the class name to MacGLView. See the screen shot below:

Next, click on the Attributes tab and make the changes as in the provided screen shot below:

After you have finished making the changes above, we will need to make one final change. We need to create a link to the glView outlet in our AppDelegate to the OpenGL View, so drag a connection from glView to OpenGL View. You can reference the screen shot below:

Now we are done with Interface Builder so go ahead and save and then exit Interface Builder and go back to your Xcode Project. At this point we have everything setup to properly run a cocos2d app on Mac OS X. You should see your app start up and it should look similar to the following screen shot.

Congratulations, you now have the basic building blocks to create / port your app for Mac OS X. I’ve tried to be as thorough  as possible when creating this tutorial and I am hoping that I didn’t miss anything. You can download a working project which includes everything from this tutorial below.

Download:

  Demo Mac Port (6.9 MiB, 1,951 hits)

Was this tutorial useful? Have you used this tutorial to create a Mac App using Cocos2d? I’d like to hear stories

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

XR3CP8E7P54C

YouTube Preview Image

Just thought I’d share this awesome video that I stumbled upon the other day on YouTube. You’ve got to appreciate the amount of time and effort that must have gone into making this work. Truly amazing.

Kid Tunes

Kid Tunes

Kid Tunes, one of my most recently developed apps, was approved and is now available on the App Store for purchase at only .99 cents. As usual I am doing a writeup on about the app here on chris-fletcher.com and provide links to the App Store page as well as a link to the location of the app on Empoc Media.

It was a lot of fun developing this app, mostly for my 6 year old daughter because she got to help me test it. Now that the app is finished she constantly asks me if she can play it. Needless to say, my iPhone no longer belongs to me. :)

Kid Tunes is an easy to use app for the iPhone and iPod Touch that includes 12 music sheets for famous children’s songs. Kid Tunes is sure to bring many hours of entertainment for your kids as well as for yourself, yup, Kid Tunes is fun for adults too. I’ll admit I have Row Row Row Your Boat stuck in my head.

The piano keys are color and number coded which match with the colors and numbers on the note sheets to make it easy for anyone to play the piano while learning how to read some simple sheet music. I already have some future updates planned which will include more songs to choose from as well as some other feature enhancements. Maybe I will include a play song button that will play the song for you once so that you can listen to the tune and and tempo. I think a volume bar might be a good idea and maybe I will implement some different themes.

Ideas are always welcome as well as any and all constructive criticism.

Links:

Kid Tunes on the App Store

Kid Tunes on Empoc Media