疯狂ios讲义之疯狂打飞机(2)
4玩家飞机飞行效果
下面添加游戏背景图片和玩家操控的飞机。打开HelloWorldLayer.m文件,首先定义4个变量,实现代码如下。
成都创新互联公司是一家专业提供徽县企业网站建设,专注与成都做网站、网站建设、外贸营销网站建设、H5页面制作、小程序制作等业务。10年已为徽县众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
程序清单:codes/13/13.14/AirfightGame/AirfightGame/HelloWorldLayer.m
// 精灵表单tag static NSInteger kTagBatchNode = 1; // 玩家飞机变量 CCSprite* planeSprite; // 屏幕宽度、高度的变量 NSInteger screenWidth , screenHeight;
然后在init方法中添加背景图片,实现代码如下(程序清单同上)。
-(id) init { if( (self=[super init]) ) { // ①本例使用精灵表单来优化游戏性能, // CCSpriteBatchNode中的所有CCSprite只会被渲染1次,因此可以提高游戏的FPS batchNode = [CCSpriteBatchNode batchNodeWithFile:@"airfightSheet.png"]; batchNode.position = CGPointZero; [self addChild:batchNode z:0 tag:kTagBatchNode]; // 获取屏幕宽度和高度 CGSize winSize = [[CCDirector sharedDirector] winSize]; screenWidth = winSize.width; screenHeight = winSize.height; // ②添加背景图片 CCSprite* bgSprite = [CCSprite spriteWithSpriteFrameName:@"bg1.png"]; bgSprite.position = ccp(screenWidth/2,screenHeight/2); [batchNode addChild:bgSprite]; } return self; }
以上代码①创建了一个CCSpriteBatchNode使用精灵表单加载精灵,优化游戏性能。接下来获取屏幕宽度和高度。代码②初始化了一个背景图片精灵,添加到CCSpriteBatchNode当中。
最后在onEnter方法中添加玩家飞机,实现代码如下(程序清单同上)。
// 节点调用init方法以后将会调用此方法 -(void) onEnter{ [super onEnter]; // ③添加玩家飞机精灵 planeSprite = [CCSprite spriteWithSpriteFrameName:@"plane0.png"]; planeSprite.position = ccp(screenWidth/2, planeSprite.contentSize.height/2+5); [batchNode addChild:planeSprite]; }
代码③初始化了一个玩家飞机精灵,通过屏幕的宽度和高度设置相对坐标,添加到CCSpriteBatchNode当中。
再次编译并运行游戏,资源加载完毕后将显示背景图片和玩家飞机。模拟器显示效果如图13.61所示。
现在,玩家飞机精灵已经显示在屏幕当中了,但是这只是一个静态效果,我们可以使用动画技术,让玩家飞机精灵实现飞行动画效果,这样可以使得游戏效果更加逼真。
打开HelloWorldLayer.m文件,在私有分类中添加一个新的辅助方法,因为之后很多地方都需要获取动画帧,所以将获取动画帧的代码封装起来,从而达到代码重用的效果。示例代码如下:
-(CCAnimation*) getAnimationByName:(NSString*)animName delay:(float) delay animNum:(int) num;
该方法的作用是根据动画帧的名字和动画帧的数量,以及动画帧与帧之间的间隔时间创建一个CCAnimation动画。使用该方法要注意如下两点。
q动画帧的命名必须带序号,比如xxx1.png、xxx2.png等。
q动画帧的命名必须连续,而且必须从0开始命名。
接下来是该方法的具体实现,实现代码如下(程序清单同上)。
-(CCAnimation*)getAnimationByName:(NSString *)animName delay:(float)delay animNum: (int)num{ NSMutableArray *animeFrames = [NSMutableArray arrayWithCapacity:num]; for (int i=0; i< num; i++) { // 获取动画图片名称 NSString *frameName = [NSString stringWithFormat:@"%@%d.png",animName,i]; // 根据图片名称获取动画帧 CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:frameName]; [animeFrames addObject:frame]; } return [CCAnimation animationWithSpriteFrames:animeFrames delay:delay]; }
回到onEnter方法中,在③添加玩家飞机精灵部分代码之后添加动画效果,实现代码如下(程序清单同上)。
// ④玩家飞机动画(尾部喷火) CCAnimation* planeFlyAnimation = [self getAnimationByName:@"plane" delay:0.08 animNum:2]; // 重复动作 id planeFlyAction = [CCRepeatForever actionWithAction: [CCAnimate actionWithAnimation:planeFlyAnimation]]; // 执行动作,达到飞机尾部喷火效果 [planeSprite runAction:planeFlyAction];
这段代码调用辅助方法getAnimationByName: delay: animNum:创建了玩家飞机飞行动画,然后使用CCRepeatForever和CCAnimation创建了一个重复飞行动作,最后调用planeSprite的runAction方法播放动画效果。再次编译并运行游戏,屏幕上玩家飞机的尾部会产生不断的喷火效果,给玩家的感觉就是飞机在不断地向前飞行。
5玩家飞机Touch实现
现在,我们要完成控制玩家飞机的移动了。找到onEnter方法,在④玩家飞机动画部分代码后添加touch事件,实现代码如下(程序清单同上)。
// ⑤这是一种新的方式来激活层的touch事件 [[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];
这是一种新的方式来激活层的touch事件,老的方式是设置层的isTouchEnabled属性为“YES”。cocos2d中CCLayer默认是采用addTargetedDelegate: priority: swallowsTouches:这种方式进行touch事件处理的。每次touch事件发生时,先调用ccTouchBegan: withEvent:方法,该方法对每个UITouch进行响应并返回一个BOOL值,若为“YES”,则表明用户触摸事件已经被处理,后续的ccTouchMoved: withEvent:、ccTouchEnabled: withEvent:和ccTouchCancelled: withEvent:会接着响应,其他事件则不会再去进行监听。ccTouchBegan: withEvent:方法返回的值如果为假,则会继续交给其他注册过的类型进行处理。
接下来是ccTouchBegan: withEvent:方法和 ccTouchMoved: withEvent:方法的处理,实现代码如下(程序清单同上)。
-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event{ return YES; } - (void)ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event { // 把touch坐标转换成局部node坐标 CGPoint touchLocation = [self convertTouchToNodeSpace:touch]; // 把旧坐标也转换成局部node坐标 CGPoint oldTouchLocation = [touch previousLocationInView:touch.view]; oldTouchLocation = [[CCDirector sharedDirector] convertToGL:oldTouchLocation]; oldTouchLocation = [self convertToNodeSpace:oldTouchLocation]; // ccpSub计算两点的差异,即计算touch偏移量,把当前的点坐标减去上一个点坐标 CGPoint translation = ccpSub(touchLocation, oldTouchLocation); // ccpAdd让两个坐标相加 CGPoint newPos = ccpAdd(planeSprite.position, translation); // 给玩家飞机精灵设置新的坐标位置 planeSprite.position = newPos; }
再次编译并运行游戏,在模拟器中使用鼠标选择玩家飞机,然后移动鼠标,玩家飞机会随着鼠标轨迹移动。模拟器显示效果如图13.62所示。
6背景滚动效果
现在,玩家飞机已经开始飞行,但是背景图片一直都没有变化,我们将为游戏添加连续滚动的背景,制作出更加逼真的飞行效果。步骤如下。
①打开HelloWorldLayer.m文件,添加一个变量:
CCParallaxNode* backgroundNode;
我们定义了一个CCParallaxNode(视差视图)变量,用来完成背景滚动效果。当移动时,会看到离我们越近的物体移动得越快,越远的物体,比如远处的山会移动得很慢,而最远处的物体,比如太阳几乎不动,这种现象叫视差,而在游戏中模仿视差,可以让玩家感觉到游戏中的角色的确是在移动。CCParallaxNode可以很容易地建立一个视差层,你可以控制每一层的视差率、位置和层级的高低;而CCFollow可以让你的层镜头跟随目标,所以,这里我们会使用CCParallaxNode和CCFollow给游戏添加连续滚动的背景效果。
②找到init方法,注释掉之前②添加背景图片的代码;再找到onEnter方法,添加两个背景图片用于拼接,实现代码如下(程序清单同上)。
// ②添加连续滚动的背景 //初始化CCParallaxNode添加到当前层中 backgroundNode = [CCParallaxNode node]; [self addChild:backgroundNode z:-1]; // ratio指在CCParallaxNode移动时,添加进去的背景图片精灵的移动速度和CCParallaxNode的比率 CGPoint ratio = ccp(1.0,1.0); // 屏幕高度480是iPhone Retina(3.5-inch),568是iPhone Retina(4-inch) NSString *bgName; if (screenHeight == 480) { bgName = @"bg1.png"; // 640*960 }else{ bgName = @"bg2.png"; // 640*1136 } // 第1张背景图 CCSprite *bgSprite1 = [CCSprite spriteWithFile:bgName]; // setAliasTexParameters用于解决拼接的地图在连接滚动时容易形成黑色缝隙的问题 [[bgSprite1 texture] setAliasTexParameters]; bgSprite1.anchorPoint = ccp(0,0); [backgroundNode addChild:bgSprite1 z:1 parallaxRatio:ratio positionOffset:ccp(0,0)]; // 第2张背景图 CCSprite *bgSprite2 = [CCSprite spriteWithFile:bgName]; [[bgSprite2 texture] setAliasTexParameters]; bgSprite2.anchorPoint = ccp(0,0); // positionOffset时在第2张背景图与第1个背景图拼接处减去1个像素,可以消除地图拼接的缝隙 [backgroundNode addChild:bgSprite2 z:1 parallaxRatio:ratio positionOffset:ccp(0, winSize.height - 1)]; // 添加开始连续滚动背景的代码 const int MAX_WIDTH = 320; const int MAX_HEIGHT = 480 * 100; CCSprite *hiddenPlaneSprite = [CCSprite spriteWithSpriteFrameName:@"plane0.png"]; hiddenPlaneSprite.visible = NO; hiddenPlaneSprite.position = ccp(winSize.width / 2, winSize.height / 2); [batchNode addChild:hiddenPlaneSprite z:-4 tag:1024]; id move = [CCMoveBy actionWithDuration:300.0f position:ccp(0,MAX_HEIGHT)]; [hiddenPlaneSprite runAction:move]; // 让背景开始滚动,背景跟随隐形飞机移动 [backgroundNode runAction:[CCFollow actionWithTarget:hiddenPlaneSprite worldBoundary:CGRectMake(0, 0, MAX_WIDTH, MAX_HEIGHT)]];
上面代码首先初始化了一个CCParallaxNode,并把它添加到当前层中。初始化两个背景图片精灵,设置锚点为(0,0),并把两个背景图片精灵都添加到CCParallaxNode当中。CCParallaxNode的ratio属性表示在CCParallaxNode移动时,添加进去的背景图片精灵的移动速度和CCParallaxNode的比率。假设CCParallaxNode是以每秒10像素移动的,如果设置的ratio是(1,1),那么bgSprite1和bgSprite2的X轴方向的速度也是每秒10像素,Y轴方向的速度也是每秒10像素。如果需要飞行速度加快,则可以将ratio设置为(1,2),读者可以自行设置来测试背景图片移动的速度。在两个背景图片精灵上面都调用了setAliasTexParameters方法,用于解决拼接的地图在连接滚动时容易形成黑色缝隙的问题。同时,在设置positionOffset时,在第2张背景图与第1张背景图拼接处减去1个像素,可以消除地图拼接的缝隙。
接下来是添加连续滚动背景的代码。这里创建了一个隐形的飞机精灵,因为想要实现背景的连续滚动,需要背景能够跟随一个不断向上前进的CCNode才会产生连续向下滚动的效果。让隐形的飞机精灵执行一个moveBy动作,在一定的时间范围内运行一定的距离,而backgroundNode则执行一个CCFollow跟随动作,跟随隐形飞机移动,从而达到背景滚动的效果。
③这里还需要一个算法来计算backgroundNode的坐标位置。读者可以在配套光盘的Resource目录下找到两个预先制作好的CCParallaxNode的扩展类:CCParallaxNode-Extras.h和CCParallaxNode-Extras.m,将这两个文件添加到项目的“AirfightGame”组中。
④打开HelloWorldLayer.m文件,在私有分类中添加一个更新背景图片滚动的方法,示例代码如下:
-(void) updateBackground:(ccTime)delay;
下面是该方法的具体实现,实现代码如下(程序清单同上)。
-(void) updateBackground:(ccTime)delay{ CCSprite *sprite; int index = 0; CCARRAY_FOREACH([backgroundNode children],sprite){ CGPoint pt = [backgroundNode convertToWorldSpace:sprite.position]; if (pt.y <= -sprite.contentSize.height) { // sprite.contentSize.height表示精灵的高度,即背景图片的高度 [backgroundNode incrementOffset:ccp(0, (sprite.contentSize.height - 1) * 2.0f) forChild:sprite]; } index++; } }
updateBackground的作用是循环遍历backgroundNode中的背景图片精灵,即时修改背景图片精灵的坐标位置。
⑤找到onEnter方法,在最后添加游戏的主循环代码,实现代码如下。
// ⑥游戏主循环,每帧都调用的更新方法 // 这样以默认cocos2d的刷新频率1/60.0s调用(void)update:(ccTime)delta一次 [self scheduleUpdate];
这个方法是游戏的主循环。任何游戏都包括一个游戏主循环,用来更新游戏的状态、玩家和敌人的数量、碰撞处理的逻辑等。
定义一个update方法,调用更新背景图片滚动的方法,实现代码如下(程序清单同上)。
-(void) update:(ccTime)delta{ [self updateBackground:delta]; }
再次编译并运行游戏,可以看到一个连续滚动的游戏背景效果。
————本文节选自《疯狂ios讲义(下)》网站名称:疯狂ios讲义之疯狂打飞机(2)
当前链接:http://scyanting.com/article/psdood.html