地球人己阻止不了程序猿们学习cocos2d-x了 (第三篇)
2013-09-05 14:46
567 查看
转自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, 把用不著的代码删去, 加上我们自己的东西:
//////////////////////////////////////////////////////////////////////////
// add your codes below...
//////////////////////////////////////////////////////////////////////////
CCDirector::sharedDirector()->enableRetinaDisplay(true);
CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
cache->addSpriteFramesWithFile("images.plist", "images.png");
CCSize size = CCDirector::sharedDirector()->getWinSize();
CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("background.png");
pSprite->setPosition(ccp(size.width/2, size.height/2));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("girl4.png");
pSprite->setPosition(ccp(size.width/2, size.height/2));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("healthheart.png");
pSprite->setPosition(ccp(size.width/2+100, size.height/2+50));
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 才做:
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
cache->addSpriteFramesWithFile("images-hd.plist", "images-hd.png");
else
{
CCDirector::sharedDirector()->enableRetinaDisplay(true);
cache->addSpriteFramesWithFile("images.plist", "images.png");
}
复制代码
解决了这个问题後, 还有另一个问题要想法子应付, 那就是图像在画面上的位置! 我们知道 cocos2d-x 是用 point 来代表位置, 在普通 iPhone 上一个 point 等於一个 pixel, 在 iPhone 4 的 Retina 显示, 一个 point 等於两个 pixels, 所以我们只要把遊戏画面一直当成是 480x320, 什麽问题都没有. 但 iPad 因为不是 Retina, 而且iPad 的画面比例和 iPhone 又不同, 这可怎麽搞呢?
参考了网上的一些例子, 我决定用的方法是在 iPad 上也把遊戏画面规限在 960x640 的範围内, 如下图:
然後再把 CCMakePoint 打包一下, 在产生 CCPoint 时会基於本身是 iPhone 还是 iPad自动调整一下:
CCPoint CCMakePoint(float x, float y)
{
if (mIsPad)
return ccp(x*2+32, y*2+64);
else
return ccp(x, y);
}
复制代码
测试是不是 iPad 时我们要用上 iOS 的系统功能, 所以这里我们把它打包在一个叫 System 的类里:
System.h
#ifndef iOSGame_System_h
#define iOSGame_System_h
#include "cocos2d.h"
using namespace cocos2d;
class System
{
public:
static void Init();
static bool IsPad();
static CCPoint CCMakePoint(float x, float y);
private:
static bool mIsPad;
};
#endif
复制代码
System.cpp
#include "System.h"
#import "Foundation/Foundation.h"
bool System::mIsPad = false;
void System::Init()
{
mIsPad = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad;
}
CCPoint System::CCMakePoint(float x, float y)
{
if (mIsPad)
return ccp(x*2+32, y*2+64);
else
return ccp(x, y);
}
bool System::IsPad()
{
return mIsPad;
}
复制代码
当我们在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 就没问题了, 方便!
搞定!
System::Init();
CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
if (System::IsPad())
{
cache->addSpriteFramesWithFile("images-hd.plist", "images-hd.png");
}
else
{
CCDirector::sharedDirector()->enableRetinaDisplay(true);
cache->addSpriteFramesWithFile("images.plist", "images.png");
}
CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("background.png");
pSprite->setPosition(System::CCMakePoint(240, 160));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("girl4.png");
pSprite->setPosition(System::CCMakePoint(240, 160));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("healthheart.png");
pSprite->setPosition(System::CCMakePoint(240+100, 160+50));
this->addChild(pSprite);
复制代码
2012-5-26 19:52:45 上传
下载附件 (291.19
KB)
(内容重点: 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, 把用不著的代码删去, 加上我们自己的东西:
//////////////////////////////////////////////////////////////////////////
// add your codes below...
//////////////////////////////////////////////////////////////////////////
CCDirector::sharedDirector()->enableRetinaDisplay(true);
CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
cache->addSpriteFramesWithFile("images.plist", "images.png");
CCSize size = CCDirector::sharedDirector()->getWinSize();
CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("background.png");
pSprite->setPosition(ccp(size.width/2, size.height/2));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("girl4.png");
pSprite->setPosition(ccp(size.width/2, size.height/2));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("healthheart.png");
pSprite->setPosition(ccp(size.width/2+100, size.height/2+50));
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 才做:
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
cache->addSpriteFramesWithFile("images-hd.plist", "images-hd.png");
else
{
CCDirector::sharedDirector()->enableRetinaDisplay(true);
cache->addSpriteFramesWithFile("images.plist", "images.png");
}
复制代码
解决了这个问题後, 还有另一个问题要想法子应付, 那就是图像在画面上的位置! 我们知道 cocos2d-x 是用 point 来代表位置, 在普通 iPhone 上一个 point 等於一个 pixel, 在 iPhone 4 的 Retina 显示, 一个 point 等於两个 pixels, 所以我们只要把遊戏画面一直当成是 480x320, 什麽问题都没有. 但 iPad 因为不是 Retina, 而且iPad 的画面比例和 iPhone 又不同, 这可怎麽搞呢?
参考了网上的一些例子, 我决定用的方法是在 iPad 上也把遊戏画面规限在 960x640 的範围内, 如下图:
然後再把 CCMakePoint 打包一下, 在产生 CCPoint 时会基於本身是 iPhone 还是 iPad自动调整一下:
CCPoint CCMakePoint(float x, float y)
{
if (mIsPad)
return ccp(x*2+32, y*2+64);
else
return ccp(x, y);
}
复制代码
测试是不是 iPad 时我们要用上 iOS 的系统功能, 所以这里我们把它打包在一个叫 System 的类里:
System.h
#ifndef iOSGame_System_h
#define iOSGame_System_h
#include "cocos2d.h"
using namespace cocos2d;
class System
{
public:
static void Init();
static bool IsPad();
static CCPoint CCMakePoint(float x, float y);
private:
static bool mIsPad;
};
#endif
复制代码
System.cpp
#include "System.h"
#import "Foundation/Foundation.h"
bool System::mIsPad = false;
void System::Init()
{
mIsPad = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad;
}
CCPoint System::CCMakePoint(float x, float y)
{
if (mIsPad)
return ccp(x*2+32, y*2+64);
else
return ccp(x, y);
}
bool System::IsPad()
{
return mIsPad;
}
复制代码
当我们在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 就没问题了, 方便!
搞定!
System::Init();
CCSpriteFrameCache *cache = CCSpriteFrameCache::sharedSpriteFrameCache();
if (System::IsPad())
{
cache->addSpriteFramesWithFile("images-hd.plist", "images-hd.png");
}
else
{
CCDirector::sharedDirector()->enableRetinaDisplay(true);
cache->addSpriteFramesWithFile("images.plist", "images.png");
}
CCSprite* pSprite = CCSprite::spriteWithSpriteFrameName("background.png");
pSprite->setPosition(System::CCMakePoint(240, 160));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("girl4.png");
pSprite->setPosition(System::CCMakePoint(240, 160));
this->addChild(pSprite);
pSprite = CCSprite::spriteWithSpriteFrameName("healthheart.png");
pSprite->setPosition(System::CCMakePoint(240+100, 160+50));
this->addChild(pSprite);
复制代码
2012-5-26 19:52:45 上传
下载附件 (291.19
KB)
相关文章推荐
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第三篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了
- 地球人己阻止不了程序猿们学习cocos2d-x了-学习笔记01
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第二篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第一篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第一篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了-学习笔记03
- 地球人己阻止不了程序猿们学习cocos2d-x了-学习笔记04
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第二篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第一篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第四篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第五篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了 (第六篇)
- 地球人己阻止不了程序猿们学习cocos2d-x了-学习笔记02
- 地球人已阻止不了程序猿学习cocos2d-x个人学习笔记二
- 【cocos2d-x 3.x 学习笔记】 HelloWorld —— 小程序大道理
- Cocos2d-x 3.1.1 学习笔记(一)关联程序逻辑与CocosStudio导出文件
- Cocos2d-x学习入门之HelloWorld程序
- 【地球人..学习cocos2d-x】学习实践之逐步变强的HelloWorld(上集)
- [cocos2d-x 学习] 第一个cocos2d-x win32程序和Android NDK交叉编译