地球人己阻止不了程序猿们学习cocos2d-x了 (第三篇)

转自http://cocos2d.cocoachina.com/bbs/forum.php?mod=viewthread&tid=852&extra=page%3D1

(内容重点: Win+iOS+Android 兼容)

知道了 cocos2d-x 的一些基本知识, 我觉得差不多可以开始实习了 , 因为我的目标是想兼顾 Windows, iOS (iPhone+iPad) 和 Android, 所以我们先看看怎样建立和设定有关的工程吧.

第一步来说, 我们要準备一些图像来用, 和第一篇一样, 我找来了Daniel Cook 提供的免费资源, 关于Danc大家可以看看这里:
http://cocos2d.cocoachina.com/bbs/forum.php?mod=viewthread&tid=851&extra=page%3D1

 

因为想兼容 iPhone 4 Retina 和 iPad, 背景图像我选择了 1024x768 的大小 (细节稍後再讨论), 在用TexturePacker 製作纹理时, 我们要在档案名字加上 "-hd":
 

另外要选上 "Auto SD", 这样的话 TexturePacker 会自动生成SD 的图像和纹理:

 

我们应该把 Border padding 设为0, 不然的话因为背影的宽己是 1024, 之後产生出来的纹理的宽要变成 2048了!
 

最後按 Publish, 我们就得到4个档案: images-hd.plist, images-hd.png, images.plist 和 images.png.

接下来我们如往常般建立一个 VC 的 cocos2d-x 项目, 再把刚才成生的档案取替 Resources 里的内容, 然後打开 HelloWorldScene.cpp, 把用不著的代码删去, 加上我们自己的东西:

1. //
   
2.         // add your codes below...
   
3.         //
   
4. 
   
5.                 CCDirector::sharedDirector()->enableRetinaDisplay(true);
   
6. 
   
7.                 CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
   
8.                 cache->addSpriteFramesWithFile("images.plist", "images.png");
   
9. 
   
10.                 CCSize size = CCDirector::sharedDirector()->getWinSize();
    
11.       
    
12.                 CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("background.png");
    
13.                 pSprite->setPosition(ccp(size.width/2, size.height/2));
    
14.                 this->addChild(pSprite);
    
15. 
    
16.                 pSprite = CCSprite::spriteWithSpriteFrameName("girl4.png");
    
17.                 pSprite->setPosition(ccp(size.width/2, size.height/2));
    
18.                 this->addChild(pSprite);
    
19. 
    
20.                 pSprite = CCSprite::spriteWithSpriteFrameName("healthheart.png");
    
21.                 pSprite->setPosition(ccp(size.width/2+100, size.height/2+50));
    
22.                 this->addChild(pSprite);

复制代码

这里可以看到我们用了enableRetinaDisplay(true) 选择HD 画面, 这时如果我们在 VC 里执行项目的话, 可以看到整个画面比之前的大了一倍!

 

搞好了VC 这部份, 我参考了老G的教程  http://4137613.blog.51cto.com/4127613/767198, 在 VC 工程的目录里建立了一个叫 iOSGame 的 cocos2d-x XCODE 工程, 然後我把下图这些选择了的档案由工程里删掉并把VC工程里的有关档案换上去:

 

在iPhone模拟器上的画面:
 

当然我们别忘了 iPad, 所以我们要选上 Universal:
 

再接下去, 该是 Android 了, 这里忍不住要吐糟一下, 利用 Android NDK+SDK+Eclipse+Cygwin+...  来搞 Android 实在太痛苦了, 让我回忆起以前做Symbian 遊戏时的惨痛经验, 所以我果断地放弃了 Android NDK, 投奔 Marmalade 的怀抱!

http://www.madewithmarmalade.com/ 

理论上来说, 用了 Marmalade, 我们一个版本已经可以照顾 iOS, Android, Symbian 等等等等... 但考虑到 Marmalade 不是免费(最少149美刀一年), 并不是每个童鞋都想买, 而且这中间又多了一层第三方平台, 多了一个"依赖性", 也不是每个人都喜欢的, 所以就只让 Android 版有这个特殊优惠.

建立 Marmalade 工程的方法, 基本上是把 cocos2d-x 的 HelloWorld 里的 marmalade 目录抄到我们VC工程的目录里, 把 HelloWorld.mkb 改成一个好听点的名字: droidGame.mkb, 再根据 template\marmalade 里的 .mkb 内容修改一下就可以, 下边就是在 Marmalade 模拟见到的画面:

 
来到这里, 我们的3合1 工程就搞定了!
 

我在一开始就提到为了兼容 iPad (暂时先不理New iPad) 而选用了一张 1024x768 的背景图, 但当我们在 iPad 上测试时, 郤看到它只显示了SD 的小图:
 

这是因为 iPad (1+2代) 并不是 Retina 显示, 所以 cocos2d-x 不懂得在截入资源时自动加上 -hd, 因此这里我们要自己截入HD 资源, 另外, 我们暂时也不想支持New iPad的超高清, 也得把 Retina 的设定放在不是 iPad 才做: 

1. if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
   
2.         cache->addSpriteFramesWithFile("images-hd.plist", "images-hd.png");
   
3. else
   
4. {
   
5.         CCDirector::sharedDirector()->enableRetinaDisplay(true);
   
6.         cache->addSpriteFramesWithFile("images.plist", "images.png");
   
7. }

复制代码

解决了这个问题後, 还有另一个问题要想法子应付, 那就是图像在画面上的位置! 我们知道 cocos2d-x 是用 point 来代表位置, 在普通 iPhone 上一个 point 等於一个 pixel, 在 iPhone 4 的 Retina 显示, 一个 point 等於两个 pixels, 所以我们只要把遊戏画面一直当成是 480x320,  什麽问题都没有. 但 iPad 因为不是 Retina, 而且iPad 的画面比例和 iPhone 又不同, 这可怎麽搞呢?

参考了网上的一些例子, 我决定用的方法是在 iPad 上也把遊戏画面规限在 960x640 的範围内, 如下图:

 

然後再把 CCMakePoint 打包一下, 在产生 CCPoint 时会基於本身是 iPhone 还是 iPad自动调整一下:

1. CCPoint CCMakePoint(float x, float y)
   
2. {
   
3.     if (mIsPad)
   
4.         return ccp(x*2+32, y*2+64);
   
5.     else 
   
6.         return ccp(x, y);
   
7. 
   
8. }

复制代码

测试是不是 iPad 时我们要用上 iOS 的系统功能, 所以这里我们把它打包在一个叫 System 的类里:

System.h

1. #ifndef iOSGame_System_h
   
2. #define iOSGame_System_h
   
3. 
   
4. #include "cocos2d.h"
   
5. 
   
6. using namespace cocos2d;
   
7. 
   
8. class System
   
9. {
   
10.     
    
11. public:
    
12.     static void Init();
    
13.     static bool IsPad();
    
14.     static CCPoint CCMakePoint(float x, float y);
    
15.     
    
16. private:
    
17.     static bool mIsPad;
    
18.     
    
19. };
    
20. 
    
21. #endif

复制代码

System.cpp

1. #include "System.h"
   
2. 
   
3. #import "Foundation/Foundation.h"
   
4. 
   
5. bool System::mIsPad = false;
   
6. 
   
7. 
   
8. void System::Init()
   
9. {
   
10.     mIsPad = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad;
    
11.     
    
12. }
    
13. 
    
14. 
    
15. CCPoint System::CCMakePoint(float x, float y)
    
16. {
    
17.     
    
18.     if (mIsPad)
    
19.         return ccp(x*2+32, y*2+64);
    
20.     else 
    
21.         return ccp(x, y);
    
22. 
    
23. }
    
24. 
    
25. 
    
26. bool System::IsPad()
    
27. {
    
28.     return  mIsPad;
    
29. 
    
30. }

复制代码

当我们在XCODE里加了System.h 和System.cpp 後一按BUILD, 就看到一堆错误,  因为我们在 .cpp 里运用 Obj-C 的系统类, XCODE 就会报错! 解决的方法是叫XCODE 把 System.cpp 当成是 Obj-C 源代码, 先点选了 System.cpp:

 

在XCODE 右上方, 我们在 Identity and Type 下边可以看到 File Type, 把它改为 Objective-C++ source, 再BUILD 就没问题了, 方便!

 

搞定!

1.         System::Init();
   
2.                         
   
3.                 CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
   
4. 
   
5.         if (System::IsPad())
   
6.                 {
   
7.                         cache->addSpriteFramesWithFile("images-hd.plist", "images-hd.png");
   
8.                 }
   
9.                 else
   
10.                 {
    
11.                         CCDirector::sharedDirector()->enableRetinaDisplay(true);
    
12.                         cache->addSpriteFramesWithFile("images.plist", "images.png");
    
13.                 }
    
14.       
    
15.                 CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("background.png");
    
16.                 pSprite->setPosition(System::CCMakePoint(240, 160));
    
17.                 this->addChild(pSprite);
    
18. 
    
19.                 pSprite = CCSprite::spriteWithSpriteFrameName("girl4.png");
    
20.                 pSprite->setPosition(System::CCMakePoint(240, 160));
    
21.                 this->addChild(pSprite);
    
22. 
    
23.                 pSprite = CCSprite::spriteWithSpriteFrameName("healthheart.png");
    
24.                 pSprite->setPosition(System::CCMakePoint(240+100, 160+50));
    
25.                 this->addChild(pSprite);

复制代码

 

2012-5-26 19:52:45 上传

下载附件 (291.19 KB)