我已经关注cocos2d小组一段时间了,他们最近的发布版本支持在Mac OS X系统上创建项目。也许是为即将上线的Mac App Store作准备,cocos2d团队正在努力使得从iPhone/iPad到Mac OS X上程序的移植更简单。
目前似乎并不能100%地支持Mac OS X系统,但是基础功能可以实现。你或许比较关心如何使自己iPhone上的项目转而支持Mac OS X,实话说我没找到简单的方法,因此倘若有人可以站出来帮我的话,我非常感激。但是这篇教程的目的将是创建一个新的应用程序。
下面让我们回顾一下为完成这个任务而需要的步骤。
这里可以下载最新的cocos2d版本。完成下载之后,解压到Mac上的文件夹中。
- 创建新的Cocoa工程。
- 将Cocos2d资源添加到项目中
- 编辑AppDelegate.h 和AppDelegate.m文件
- 引入架构
- 创建新的Objective-C的类
- 为MainMenu.xib更改Interface Builder中的设置
- 引入样例文件
我还得说这不一定是在OS X上创建使用Cocos2d的项目的最好的或唯一的方式,有一些步骤可能是多余的或者是不对的。下面只是我采取的步骤,如果你们有更好的建议来使这篇教程更完善,请放心的告诉我。
创建新的Cocoa工程
首先我们需要打开Xcode之后开始新的项目。然而这一次,我们将用在Mac OS X->Application下的Cocoa Application模板而不是预定义的cocos2d模板。下面是屏幕截图:
一旦你创建了新的项目,你会看到Xcode界面出现。这篇教程中我的程序命名为Demo Mac Port。你的屏幕跟下面的截图看起来应该差不多。
在下一步将要添加cocos2d资源到项目中,确定你已经下载了支持Mac OS X的最新的cocos2d的版本。
将Cocos2d资源添加到项目中
这一步你需要cocos2d文件,如果你还没有下载,那么你可以在这里下载最新版本。下载后解压到你的硬盘上。
解压缩之后,打开cocos2d-iphone-0.99.5-beta3文件夹找到cocos2d文件夹。屏幕截图如下:
这个文件夹需要添加到工程中。我通常把它直接从文件查找窗口拖拽到工程中。只需拖拽到在程序名下工程中,与下面截图类似的一个对话框就会出现:
之后你的Xcode工程界面跟下面看起来相似:
下一个环节将引导你修改AppDelegate.h 和AppDelegate.m文件。
编辑AppDelegate.h 和AppDelegate.m文件
这一部分你会修改这两个文件使它们与Cocos2d相兼容。我在这里不会解释代码但是详细的代码我粘贴在下面:
AppDelegate.h
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | |
AppDelegate.m
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | |
使用applicationDidFinishLaunching方法,你会注意到[[CCDirector shardDirector] runWithScene:[DemoScene scene]]这一行。这一行定义了我们打算令工程开始的视图。在下一部分我会为一个新的Objective-C类列出更多的代码。
创建新的Objective-C的类
在此时我们需要创建新的Objective-C的类。右击你的Xcode工程界面上的Classes group,之后点击Add->New File.你会看到下面的对话框:
点击下一步你会看到:
我已经命名我的类为DemoScene.m ,注意检查创建相应的DemoScene.h的方框选中。点击finish,可以看到新的类。下面是这两个文件中的代码,如果你对cocos2d熟悉,那么下面的代码你不会陌生:
DemoScene.h
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | |
DemoScene.m
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | |
正如你所看到的,我们为图层(layer)和视图(scene)创建了接口和实现,之后将CCSprite添加到图层中。这是非常基础的Cocos2d功能,但是对于你上手来说足够了。
目前我们还是不能建造和运行这个工程。还有一些事情要处理,引入一些框架和图片并且作一些修改。下一部分将会涉及我们需要引入的框架。
引入额外的框架
这一部分设计我们需要添加的框架以及如何添加框架。我们需要添加的框架如下:
- QuartzCore.framework
- OpenGL.framework
- ApplicationServices.framework
- libz.dylib
在Framework上右击,然后点击Add->Existing Frameworks.之后下面的窗口会出现:
找到QuartzCore.framework然后点击添加,重复该步骤添加剩下的三个。
在你完成添加之后,Xcode工程界面应该跟下图类似:
之后我们需要做的就是引入一些图片然后做一些界面的修改。这篇教程比较长,但是我保证快到结尾了。下一部分我会快速讲述需要添加的图片。
将图片添加到工程中
在DemoScene.m中使用了CCprite,该CCprite使用了一个名为starBG.png的图片。你可以在这里下载该图片。
Cocos2d资源要求我们的资源文件夹中有一个称作fps_images.png的文件来渲染在底部左边角出现的图片。你可以在解压缩后的Cocos2d/Resources/fonts 文件夹中找到这个文件。
之后你把这两个文件放到Xcode工程的资源文件夹中。
此时我们已经完成了对Xcode工程来说必需的步骤,唯一未完成的是使用界面编辑器(Interface Builder)来为我们的MainMenu.xib文件做一些改动。
MainMenu.xib 与Interface Builder
在Xcode 工程界面中找到MainMenu.xib。它应该位于你的资源文件夹中。双击这个文件,会启动界面编辑器。
界面编辑器启动后,首先需要确定程序窗口的大小。为了简化,我设置窗口为960*640大小,因为我的图片本来都是为iPhone4准备的。
在你调整完大小后,屏幕截图如下:
你需要在Window Attributes中改变设置。在底部找到One Shot的标志然后不勾选这一项:
在改变窗口大小和取消One Shot模式之后,我们需要添加一个OpenGL的视图。在library中向下滚动查找OpenGL View。将它拖入你的窗口。你现在可以看到下面的图:
将该OpenGL视图的大小调整为窗口大小,窗口变化如下:
现在窗口和Open GL视图大小都是960*640,下面需要对该视图做一些改变。首先,要将该类变为MacGLView。选中OpenGL视图在Identity 标签下将它的名字改为MacGLView。
下一步,点击Attributes 标签,具体设置如下图所示:
在你完成上面的修改之后,下面是最后的修改。我们需要在OpenGL View的AppDelegate中创建一个到glView的链接。因此创建这个链接的具体设置如下所示:
现在我们已经完成了界面编辑,保存退出界面生成器,返回Xcode工程。在此时为在Mac OS X上运行cocos2d程序的准备都完成了,启动你的程序之后你可以看到如下所示的截图:
恭喜,你已经完成了在Mac OS X上创建程序的基础模块。在创建这个教程的时候我努力使它周密并且希望没有遗漏什么东西。你可以在下面下载该工程文件。
Demo Mac Port (6.9M)
这个教程有用么?你已经利用该教程在Mac上创建基于cocos2d的程序了么?期待您的反馈。
原文作者:Chris Fletcher
原文链接:http://chris-fletcher.com/2010/10/24/howto-create-a-cocos2d-mac-project/
原文:
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.
- Start a New Cocoa Project
- Add Cocos2d Sources to Project
- Edit AppDelegate.h & .m files
- Import Frameworks
- Create a new Objective-C class
- Change Settings in Interface Builder for MainMenu.xib
- 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.
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.
- Start a New Cocoa Project
- Add Cocos2d Sources to Project
- Edit AppDelegate.h & .m files
- Import Frameworks
- Create a new Objective-C class
- Change Settings in Interface Builder for MainMenu.xib
- 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 thelatest 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 | |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | |
DemoScene.m
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | |
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, 20 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, 39 hits)
Was this tutorial useful? Have you used this tutorial to create a Mac App using Cocos2d? I’d like to hear stories