使用Cocos2D和Box2D制作《Jetpack Joyride》part-2 - 推酷
使用Cocos2D和Box2D制作《Jetpack Joyride》part-2
本文由游戏帮翻译，泰然授权转载，转载请联系原文作者！
作者：Bogdan Vladu
前面我们已经制作出带有背景美工元素的可行关卡（第1部分详见
在第2部分中，我们将着眼于添加游戏活动元素，包括激光、硬币、飞行角色及初始触碰活动等。
要继续本教程，你需持有我们第1部分谈到的RocketMouse项目内容。
Jetpack Joyride
制作《Jetpack Joyride》游戏的下一步是，添加可供玩家直接互动的游戏元素：激光和硬币。添加这些元素也是学习如何基于LevelHelper落实动画和激光的绝佳方式。
由于我们希望激光间断运作，所以我们需要将其制作成动画效果。至于硬币，我们希望把握玩家同其互动的时间点，但我们不希望玩家弹开它们。要做到这点，我们需要赋予其传感能力。
把握动画和触碰反应基本要素后，我们会将话题转移至游戏的其他元素，包括游戏玩家。我们将学习如何创造标签，追踪触碰活动，然后将其同若干真实代码整合。
在开始内容前，请打开你的当前LevelHelper项目，将关卡状态设置成level03。在进行此过程时，将这一新关卡添加至Xcode项目中，按照下列操作更新代码，将关卡状态设置成level 3：
lh = [[LevelHelperLoader alloc] initWithContentOfFile:@”level03″];
着手动画元素：添加激光
我们对于玩法动画元素的运用相当简单。当玩家同激光接触时，我们只需测试动画帧所处位置。若动画帧处于激光关闭状态，玩家就不会有性命之忧，如果处于激光开启状态，玩家就会死亡。
要创造激光动画，我们需要查看LevelHelper右侧的图像列表，右击其中的一个激光图像。然后在菜单中选择“Open SpriteHelper scene”。
openSHSceneFromSpritesList
SpriteHelper会呈现正确场景。转换至Animation版块，点击Add Frame。这一操作将给动画添加两个精灵。
通过点击上下箭头，以正确顺利安排游戏画面。将速度设定成3，选中Start At Launch和Loop Forever选项。
SHFirstAnimation
完成这些后，点击Command-S保存画面。
现在我们回到LevelHelper，着手处理我们刚刚创建的动画。此时你会发现Animations版块已被添加至LevelHelper中，如下图所示。
animationsInLH
激活动画有两种方式。我将逐一进行陈述。
第一种方式就是将动画拖到关卡（游戏邦注：这和操作精灵的方式类似）。
dragAnimationInLevel
第二种方式是，将动画同已存在于关卡中的精灵连接起来。在这种情况下，我会将动画添加至激光画面中。
spriteSectionAnimExample
现在进入精灵版块。我们还没有将激光精灵添加至关卡中，所以现在要将列表中的一个精灵拖到关卡中，要选定此精灵。然后跳到General Properties版块，从列表中选择激光动画。
spriteSectionAnimExample 2
继续在关卡中添加激光，直到达到满意的危险系数。你可以基于选择精灵时出现的控键旋转和调节laser。
我的关卡现在呈现如下样式：
levelWithLasers
若查看laser形状，你会发现精灵现在呈现四方形模式。
laserShapeFull
就我们的游戏来说，我们希望老鼠只在击中真正的激光时死去，所以我们不妨缩小模型的尺寸。
要做到这点，我们可以采用定义小猫和小狗形状的方式，或者我们可以通过预定义的数值修改Physics菜单下的Shape Border属性。现在你已知道如何通过位点创造物件形状，下面就来尝试第二种方式。
在LevelHelper的Images版块中选择laser1图像，然后右击，选择Open SpriteHelper Scene。
当呈现SpriteHelper scene时，点击“laser1”精灵。由于激光是个动画，我们需要修改动画首个帧数的物理属性——在此就是指“laser1”精灵。动画包含第一个帧数的物理属性。
选中laser1后，进入Physics菜单，在Shape Border数值中输入70和40。精灵的最终模型大小是原本尺寸减去你所输入的数值。你可以在画面上看到视觉表征。
laserShapeDefine
回到LevelHelper，我们会看到所有laser都被更新为正确形状。
现在选中所有laser，将它们添加到我们的parallax（游戏邦注：影视编辑软件）。按比例输入1和0。
保存关卡，若创建和运行游戏后你会发现，它现在具备动态laser。
AnimatingLasers
处理传感设置：添加硬币
现在就轮到硬币。记住，我们想要创建硬币传感器，这样老鼠就能够直接穿过它们，不会弹开，但我们依然能够察觉到触碰活动的发生。
要创造硬币传感器，从LevelHelper中的精灵列表中选择硬币精灵，右击，然后选择Open SpriteHelper Scene。
openCoinSHScene
开放SpriteHelper scene后，选择硬币精灵，选中Physics菜单中的Is Sensor、Is Circle和Can Sleep选项。然后保存画面。
* Is Sensor：让身体触发触碰活动，但不呈现触碰反应
* Is Circle：让身体的形状呈现圆形模式
* Can Sleep：加速物理元素的模拟过程
setCoinSensor
现在将硬币精灵添加到关卡，将其放在你认为合适的位置。通过Clone Tool复制硬币，基于你青睐的位移方向。
cloneToolDirection
现在我的关卡呈现如下模式：
levelWithCoins
将硬币添加至parallax，将比例调成1和0，然后保存关卡。编辑和运行你的项目，现在你拥有硬币元素。
AddingCoins
添加玩家元素
现在我们拥有包含基本要素的不错关卡，下面就来创建玩家角色及其相应的动画内容。
打开SpriteHelper，进入File\New创建空的精灵工作表。然后在Finder中点击目录（游戏邦注：这里保存游戏的美工元素）。在此你需要将所有老鼠精灵和火箭火焰拖到SpriteHelper窗口。
mouseAnimationDrag
现在我们需要通过刚输入的美工元素创建单个画面。这是创建动画前的必要步骤。LevelHelper和SpriteHelper支持的所有引擎都将动画帧数视作图像文件的组成元素。
现在切换到Sheet Editor菜单，取消选定Crop，因为我们不希望改变老鼠动画的帧数。点击Pack Sprites，将所有精灵都分配到精灵表单中。
packMouseFrames
然后，切换到SpriteHelper的Animation版块。我们将在此创建所有必要的动画内容，和我创建laser的过程一样。
运用你先前学到的技巧，创建包含下述属性的5个动画内容。
若你忘记如何创建动画，点击+按键，双击进行重命名。然后选定动画的规定帧数，设定速度，记得给需要进行循环的动画选定Loop Forever。
）动画名称：
Loop Forever: YES
Speed: 0.400（默认）
Repetition: 1.000（默认）
Frames: rocketmouse_1_run, rocketmouse_2_run, rocketmouse_3_run, rocketmouse_4_run
）动画名称：
Start At Launch: YES
Loop Forever: YES
Speed: 0.400（默认）
Repetition: 1.000（默认）
Frames: rocket_flame1, rocket_flame2
rocketFlame
）动画名称：
Start At Launch: YES
Loop Forever: YES
Speed: 0.400（默认）
Repetition: 1.000（默认）
Frames: rocketmouse_5_fly
）动画名称：
Start At Launch: YES
Loop Forever: NO
Speed: 0.400（默认）
Repetition: 1.000（默认）
Frames: rocketmouse_7_die, rocketmouse_8_die
）动画名称：
Start At Launch: YES
Loop Forever: NO
Speed: 0.400（默认）
Repetition: 1.000（默认）
Frames: rocketmouse_6_fall
完成这些操作后，点击Command-S，保存画面。在Save对话框中，点击Xcode项目Resources文件夹中的Images文件，将画面保存为“mouse”。
saveMouseImage
回到LevelHelper，我们将在Animation区块中找到所有新创建的动画内容。
将mouseRun动画拖到主页面（有红色边界的页面），然后置于页面左侧。
然后拖动火焰精灵，将其放置在老鼠背后的红色坦克下。
最终画面如下：
mousePlacement
仔细观察你会发现，火焰精灵位于红色坦克之上。不妨将其放在坦克之后，这样火焰看起来会更像是由坦克产生的。完成这一操作后，选择火焰精灵，然后在General Properties中将Z Order调成-1。
zOrderOnFlame
若你此时通过Scene Tester运行关卡，你可能会看到老鼠，但也可能没看到。
这是因为精灵是通过成批节点进行渲染。要将老鼠放在关卡其他精灵顶部，我们需要改变成批节点的Z Order。
切换到LevelHelper的Images区块，双击mouse.png的Z Order字段。输入数值4。
我们希望玩家把握所有内容，我们很快将添加更多图片。这就是为什么我们要在这里设置一个更大的数值。
batchZOrder
现在运行关卡，你会看到老鼠在画面中奔跑，但没有发生任何触碰活动。
它其实有何小狗和小猫发生触碰，但由于老鼠和其他物件都处于静止状态，所以什么也没有发生。
现在是时候把老鼠和火焰精灵设置成动态模式。打开老鼠的SpriteHelper情境：
openMouseSH
然后选择所有精灵，将其设置成动态模式。我们不希望老鼠在和其他精灵触碰时发生旋转，所以还要选择Fixed Rotation option。
makeMouseDynamic
至于两个火箭火焰精灵，我们还需要勾选Is Sensor选项。这是因为随后我们将把火焰和火箭坦克结合起来。
flameProperties
完成操作后保存火箭坦克。
再次运行Scene Tester，我们将会看到老鼠在画面中掉落。这是老鼠对地心引力所做出的反应。不妨让它继续停留在屏幕上。
点击Physic Boundaries按键。
pressOnPBoundary
在Physic Boundaries窗口点击Create。
createPBoundary 1
我们现已创建边界，但想要对其进行编辑，使其出现在地板中间的老鼠的下方，老鼠会在这块区域中行走。点击Physic Boundaries窗口中的Edit。
pressOnEditBoundary
现在你会在物理边界的拐角处看到4个红色控键。你可以拖曳任何底部控键移动边界，确保边界始终处在老鼠的脚下。
dragPBoundaryHandle
你将看到类似的画面：
correctHandleBoundary
若你对物理边界没有什么意见，点击Editing按键，中断编辑过程。
stopEditingPBoundary
在Scene Tester中运行关卡，你将看到老鼠和小猫&小狗发生触碰，然后继续停留在屏幕中，但这里还存在另一问题。
这次，火焰在屏幕中落下，它有传感设置，所以不会和任何物体触碰，不会附着于老鼠的身体。但我们可以通过创建远距离接合点，将火焰和老鼠联系起来。
现在切换到LevelHelper中的Joints版块，选择列表中的Distance Joint，点击绿色+按键。
createDJoint
现在我们可以选择接合点要连接的精灵。
选择列表中的接合点，然后是Body A的属性，点击圆形图标。然后将老鼠拖至火焰精灵。当文本显示rocket_flame_1时，放开老鼠。
connectJointFlame
现在在Body B中重复相同操作，但这次要选择老鼠。
connectJointMouse
现在将接合点的定位点拉得更近些。
在接合点属性中选择A，拖曳显示火焰精灵的手柄，将锚点置于坦克之上。
jointAnchorA
在其他定位点中重复这一操作。选择锚点B，拖曳把手，将此锚点置于其他定位点的旁边。
jointAnchorB
若你在Scene Tester中运作关卡，你会看到火焰现在附着于老鼠身上。
现在我们已完成进入编码工作前所需的所有内容。
创建标签，执行触碰活动
要执行精灵间的触碰活动，我们需要记录同类精灵与其他类型精灵的触碰活动。
我们需要通过标签将精灵分类。所以所有有关小狗的精灵都会被标上“DOG” ，而所有涉及小猫的精灵都会被标上“CAT”。
要创建这些标签，需在LevelHelper中点击Define Tags按键。
defineTagsButton
在Define Tags窗口中，给新标签设定名称，点击Add按键创建新标签。需要创建如下标签：DOG、CAT、LASE、COIN和PLAYER。
pressAddTag
明确定义标签后，我们需要将这些标签分配到各个精灵中。
选择左边精灵列表中的所有小狗精灵。然后在General& Properties中将这些DOG标签分配到上述精灵。
assignDogTag
然后在所有精灵中重复这一操作：将PLAYER标签分配至老鼠精灵中，CAT分配至各小猫精灵，LASER分配到各种激光精灵，COIN分配到硬币精灵中。
完成这些操作后，以Command-S保存关卡。
编写游戏逻辑的代码
我们现在准备着手编写游戏代码。所以我们重新回到Xcode，打开我们的项目，开始真正的趣味之旅。
首先，确保将新的美工元素（游戏邦注：即mouse.png）纳入其中。此时的资源文件夹将呈如下模式：
newArtAndLevels
为控制parallax的运作，让玩家能够进行跳跃，我们需要设定若干指示LevelHelper物件的变量。将HelloWorldScene.h的这些代码添加至类别定义中。
LHParallaxNode* paralaxN
随后在类别定义之外，即@end和+(id)scene之间，添加下列方法标记（method signature）：
-(void) retrieveRequiredO
在HelloWorldScene.mm中定义新方法（可以选择任何适当位置，但要确保其处在类别定义之中）。我将其放置于初始方法之后。
-(void) retrieveRequiredObjects
//Retrieve pointers to parallax node and player sprite.
paralaxNode = [lh paralaxNodeWithUniqueName:@&Parallax_1&];
NSAssert(paralaxNode!=nil, @”Couldn’t find the parallax!”);
player = [lh spriteWithUniqueName:@&player&];
NSAssert(player!=nil, @”Couldn’t find the player!”);
playerBody = [player body];
NSAssert(playerBody!=nil, @”Error taking the body from the player LHSprite.”);
rocketFlame = [lh spriteWithUniqueName:@&flame&];
NSAssert(rocketFlame!=nil, @”Couldn’t find flame sprite!”);
[rocketFlame setVisible:NO]; //You can do it in LH, but I do it here so you guys can see it in LH
这里我们将把目光转至parallax，赋予LevelHelper parallax标识名称。
parallaxName
再来就是玩家精灵，也是赋予它们标识名称。若标识名称原先没有修改，要将其改成“player”，如下面的截图所示。
playerName
同样，你得把火焰的标识名称改成“flame”，以同代码相匹配。
若你通过spriteWithUniqueName查看精灵，你将得到一个LHSprite*实例，这是源自CCSprite的一个类别。通过此LHSprite*实例，我们将指示器转移到玩家的Box2d身体，因为我们随后要这一身体进行跳跃。
现在我们转移到火焰精灵，将此画面隐藏起来。只有当玩家飞起来的时候，我们才会看到此火焰。
现在我们已完整定义此新方法，不妨将其称作：
lh = [[LevelHelperLoader alloc] initWithContentOfFile:@”level03″]; // or level02 if you never changed it
[lh addObjectsToWorld:world cocos2dLayer:self];
if([lh hasPhysicBoundaries])
[lh createPhysicBoundaries:world];
if(![lh isGravityZero])
[lh createGravity:world];
// Add this
[self retrieveRequiredObjects]; // Retrieve all objects after we’ve loaded the level.
编辑和运行代码，若火焰运行时无法为我们所见，那么操作就圆满完成。
MouseInvisibleFlame
让玩家在空中飞行
现在我们重新取回加载关卡中的玩家，让其在空中飞行。
在HelloWorldScene.h类别定义中添加如下内容：
playerWasF
playerShouldF
通过这一操作，我们让老鼠在用户触摸屏幕时飞入空中。
在HelloWorldScene.mm中将触控功能替换成如下内容：
- (void)ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
playerVelocity = 0.5f;
playerShouldFly =
[rocketFlame setVisible:YES];
[player startAnimationNamed:@&mouseFly&];
////////////////////////////////////////////////////////////////////////////////
- (void)ccTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
////////////////////////////////////////////////////////////////////////////////
-(void) cancelPlayerFly
playerShouldFly =
[rocketFlame setVisible:NO];
playerWasFlying =
playerVelocity = 0.0f;
- (void)ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
[self cancelPlayerFly];
- (void)ccTouchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
[self cancelPlayerFly];
在ccTouchesBegan方法中，当用户触控屏幕时，玩家就会开始飞翔，火箭的火焰就会进入我们的视野，飞翔动画就会出现在玩家精灵中。
接着我们就会在玩家的LHSprite*实例（游戏邦注：这由我们通过retrieveRequiredObjects方法取回）中启动“mouseFly” 动画。
当玩家停止触控屏幕，或取消触控时，我们就会通过调用“cancelPlayerFly”新方法让玩家停止飞翔。然后我们会继续隐藏火焰，因为玩家已不在空中飞翔。
但这远远不够。我们设定呈现玩家飞翔的时间，但我们没有落实真实的飞行操作。这需要我们在“tick”方法末尾添加如下内容：
if(playerShouldFly)
playerBody-&ApplyLinearImpulse(b2Vec2(0, playerVelocity), playerBody-&GetWorldCenter());
playerVelocity += 0.01f;
if(playerVelocity & 1.5f)
playerVelocity = 1.5f;
这里，我们会判断玩家是否应该飞翔，及测试操作是否正确，我们在老鼠的box2d身体中施加水平线性冲量。
然后我们会将速率变得越来越快，这样玩家就仿佛真的飞离地面，而且速度越来越快。
若玩家的速度到达一定程度（1.5），我们会停止加速。
编辑和运行游戏，现在你可以通过触控屏幕让老鼠在空中飞翔。
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见cocos2d-x 2.0版本 自适应屏幕分辨率 | Alex Zhou的BLOG
& cocos2d-x 2.0版本 自适应屏幕分辨率
我使用的版本是cocos2d-2.0-x-2.0.4，cocos2dx-2.0版本对多分辨率适配提供了很好的支持，使用起来比1.0版本要简单些，1.0版本的适配可以参考。
1. 做2.0版本的适配首先需要了解下面这些知识。
(1)适配策略
2.0版本提供了三种适配策略：
kResolutionNoBorder：超出屏幕的部分会被裁剪，两侧没有黑边，铺满屏幕，按图片原始比例显示，图片不变形。
kResolutionShowAll：整个游戏界面是可见的，会按原始比例进行缩放，图片不变形，但两侧可能会留有黑边，不铺满屏幕。
kResolutionExactFit：整个游戏界面是可见的，图片可能会进行拉伸或者压缩处理，铺满屏幕，图片会变形。
可以根据自己的要求选择。
(2)VisibleSize和VisibleOrigin
getVisibleSize：表示获得视口(可视区域)的大小，如果DesignResolutionSize跟屏幕尺寸一样大，则getVisibleSize等于getWinSize。
getVisibleOrigin：表示可视区域的起点坐标，这在处理相对位置的时候非常有用，确保节点在不同分辨率下的位置一致。
(3)DesignResolutionSize
DesignResolutionSize是一个比较重要的概念，其实2.0版本的适配跟1.0版本原理差不多，都是按比例进行缩放。这个DesignResolutionSize表示设计方案，就是你的游戏完美支持的分辨率方案，一般根据图片资源的尺寸来定，自适配时会按照这个分辨率计算出缩放因子。因此，这个值也应该是动态的，如果是横屏游戏则高度肯定是铺满屏幕的，宽度也要尽可能的铺满屏幕，因此应该选择宽高比最大的作为设计分辨率，下面的demo会给出使用方法。
(4)设置相对位置
在游戏中使用相对位置设置坐标的好处是显而易见的，这样就不需要为每个分辨率都定义一套坐标了。首先得定义一些参考点，引擎的TestCpp例子中就提供了一种方法，以屏幕上可视区域的9个点作为参考点，相当于在该矩形内写一个米字，这9个点分别是：左上、左、左下、下、右下、右、右上、上、中心。
2. 下面来实现一个简单的demo，首先创建一个win32工程，这个就不详述了。
(1)创建一个AppMacros.h文件，定义了一些宏，源码如下：
#ifndef __APPMACROS_H__
#define __APPMACROS_H__
#include "cocos2d.h"
typedef struct tagResource
cocos2d::CCS
char directory[100];
//可用的资源尺寸
static Resource smallResource
{ cocos2d::CCSizeMake(480, 320),
"iphone" };
static Resource mediumResource =
{ cocos2d::CCSizeMake(),
static Resource largeResource
{ cocos2d::CCSizeMake(), "ipadhd" };
//设计方案
static cocos2d::CCSize smallDesignResolutionSize = cocos2d::CCSizeMake(480.0f, 320.0f);
static cocos2d::CCSize mediumDesignResolutionSize = cocos2d::CCSizeMake(1024.0f, 768.0f);
static cocos2d::CCSize largeDesignResolutionSize = cocos2d::CCSizeMake(2048.0f, 1536.0f);
//缩放因子，主要给文字标签使用
#define SCALE_FACTOR
(cocos2d::CCEGLView::sharedOpenGLView()-&getDesignResolutionSize().width / smallResource.size.width)
(2)接下来修改AppDelegate.cpp文件的applicationDidFinishLaunching函数，添加以下代码：
bool AppDelegate::applicationDidFinishLaunching()
// initialize director
CCDirector *pDirector = CCDirector::sharedDirector();
CCEGLView *pEGLView = CCEGLView::sharedOpenGLView();
pDirector-&setOpenGLView(pEGLView);
CCSize frameSize = pEGLView-&getFrameSize();
float ratio = frameSize.width / frameSize.
float ratio1 = largeDesignResolutionSize.width / largeDesignResolutionSize.
float ratio2 = mediumDesignResolutionSize.width / mediumDesignResolutionSize.
float ratio3 = smallDesignResolutionSize.width / smallDesignResolutionSize.
float d1 = abs(ratio - ratio1);
float d2 = abs(ratio - ratio2);
float d3 = abs(ratio - ratio3);
std::map&float, CCSize& designS
designSize[d1] = largeDesignResolutionS
designSize[d2] = mediumDesignResolutionS
designSize[d3] = smallDesignResolutionS
std::map&float, CCSize&::reverse_iterator iter = designSize.rbegin();
//得到key最大的，因此我这里是横屏，所以以高度为基准，为了确保缩放后宽度能全屏，所以选取宽高比最大的为设计方案
CCSize designResolutionSize = iter-&
//pEGLView-&setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionNoBorder);
pEGLView-&setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionShowAll);
//pEGLView-&setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionExactFit);
if (frameSize.height & mediumResource.size.height)
CCFileUtils::sharedFileUtils()-&setResourceDirectory(largeResource.directory);
pDirector-&setContentScaleFactor(largeResource.size.height/designResolutionSize.height);
else if (frameSize.height & smallResource.size.height)
CCFileUtils::sharedFileUtils()-&setResourceDirectory(mediumResource.directory);
pDirector-&setContentScaleFactor(mediumResource.size.height/designResolutionSize.height);
CCFileUtils::sharedFileUtils()-&setResourceDirectory(smallResource.directory);
pDirector-&setContentScaleFactor(smallResource.size.height/designResolutionSize.height);
pDirector-&setDisplayStats(true);
pDirector-&setAnimationInterval(1.0 / 60);
CCScene *pScene = HelloWorld::scene();
pDirector-&runWithScene(pScene);
(3)创建VisibleRect.h和VisibleRect.cpp文件，封装了获取那9个点坐标的函数，比较简单。代码如下：
VisibleRect.h
#ifndef __VISIBLERECT_H__
#define __VISIBLERECT_H__
#include "cocos2d.h"
USING_NS_CC;
class VisibleRect
static CCRect getVisibleRect();
static CCPoint left();
static CCPoint right();
static CCPoint top();
static CCPoint bottom();
static CCPoint center();
static CCPoint leftTop();
static CCPoint rightTop();
static CCPoint leftBottom();
static CCPoint rightBottom();
static void lazyInit();
static CCRect s_visibleR
VisibleRect.cpp
#include "VisibleRect.h"
CCRect VisibleRect::s_visibleR
void VisibleRect::lazyInit()
if (s_visibleRect.size.width == 0.0f && s_visibleRect.size.height == 0.0f)
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
s_visibleRect.origin = pEGLView-&getVisibleOrigin();
s_visibleRect.size = pEGLView-&getVisibleSize();
CCRect VisibleRect::getVisibleRect()
lazyInit();
return CCRectMake(s_visibleRect.origin.x, s_visibleRect.origin.y, s_visibleRect.size.width, s_visibleRect.size.height);
CCPoint VisibleRect::left()
lazyInit();
return ccp(s_visibleRect.origin.x, s_visibleRect.origin.y + s_visibleRect.size.height/2);
CCPoint VisibleRect::right()
lazyInit();
return ccp(s_visibleRect.origin.x+s_visibleRect.size.width, s_visibleRect.origin.y + s_visibleRect.size.height/2);
CCPoint VisibleRect::top()
lazyInit();
return ccp(s_visibleRect.origin.x + s_visibleRect.size.width/2, s_visibleRect.origin.y + s_visibleRect.size.height);
CCPoint VisibleRect::bottom()
lazyInit();
return ccp(s_visibleRect.origin.x + s_visibleRect.size.width/2, s_visibleRect.origin.y);
CCPoint VisibleRect::center()
lazyInit();
return ccp(s_visibleRect.origin.x + s_visibleRect.size.width/2, s_visibleRect.origin.y + s_visibleRect.size.height/2);
CCPoint VisibleRect::leftTop()
lazyInit();
return ccp(s_visibleRect.origin.x, s_visibleRect.origin.y + s_visibleRect.size.height);
CCPoint VisibleRect::rightTop()
lazyInit();
return ccp(s_visibleRect.origin.x + s_visibleRect.size.width, s_visibleRect.origin.y + s_visibleRect.size.height);
CCPoint VisibleRect::leftBottom()
lazyInit();
return s_visibleRect.
CCPoint VisibleRect::rightBottom()
lazyInit();
return ccp(s_visibleRect.origin.x + s_visibleRect.size.width, s_visibleRect.origin.y);
(4)修改HelloWorldScene.cpp的init函数，使用相对位置设置坐标。
bool HelloWorld::init()
if ( !CCLayer::init() )
CCMenuItemImage *pCloseItem = CCMenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
menu_selector(HelloWorld::menuCloseCallback));
pCloseItem-&setPosition(ccpAdd(VisibleRect::rightBottom(),
ccp(-pCloseItem-&getContentSize().width/2, pCloseItem-&getContentSize().height/2)));
CCMenu* pMenu = CCMenu::create(pCloseItem, NULL);
pMenu-&setPosition(CCPointZero);
this-&addChild(pMenu, 1);
CCLabelTTF* pLabel = CCLabelTTF::create("Hello World", "Arial", SCALE_FACTOR * 24);
pLabel-&setPosition(ccpAdd(VisibleRect::top(),
ccp(0, -pLabel-&getContentSize().height)));
this-&addChild(pLabel, 1);
CCSprite* pSprite = CCSprite::create("HelloWorld.png");
pSprite-&setPosition(VisibleRect::center());
this-&addChild(pSprite, 0);
CCSprite *pLogoSprite = CCSprite::create("icon.png");
pLogoSprite-&setAnchorPoint( ccp(0, 0.5) );
pLogoSprite-&setPosition(ccpAdd(VisibleRect::left(), ccp(50, 0)));
this-&addChild(pLogoSprite, 0);
(5)创建窗口，main.cpp的主要内容：
CCEGLView* eglView = CCEGLView::sharedOpenGLView();
//eglView-&setFrameSize();
//eglView-&setFrameSize(480, 320);
//eglView-&setFrameSize(800, 480);
//eglView-&setFrameSize();
//eglView-&setFrameSize();
eglView-&setFrameSize();
//eglView-&setFrameSize(960, 640);
eglView-&setFrameZoomFactor(0.5f);
int ret = CCApplication::sharedApplication()-&run();
OK，到此为止，代码部分已经完成了，下面看看在各种分辨率和不同策略下的效果图：
1. kResolutionShowAll策略：
(3)480×320
(4)800×480
(6)960×640
2. kResolutionExactFit策略
3. kResolutionNoBorder策略
demo源码：
您可能也喜欢:
我也是第一次使用cocos2d_html5，对js和html5也不熟，看引擎自带的例子和引擎源码，边学边做，如果使用过cocos2d-x的话，完成这个游戏还是十分简单的。游戏体...
上一篇已经完成特性99在win32平台下的开发，现在把它移植到android上，首先修改Android.mk文件，内容如下：
LOCAL_PATH := $(call my-dir)
include $(CLEAR_...
现在特性99游戏的功能基本完成了，但是游戏没有首页也挺奇怪，所以这篇博客为游戏添加首页，通过首页进入游戏。
首页的元素比较简单，就是一张背景图，一个l...