如何使用cocos2d制作一个打地鼠的游戏：（第二部分。完）

版权属于：子龙山人 首发于：泰然论坛 （译）如何使用 cocos2d 制作一个打地鼠的游戏：（第二部分。完） 整理：Taiyangmobile（泰然论坛管理组） 著作权声明：本文由 子龙山人 翻译，欢迎转载分享。请尊重作者劳动，转载时保留该声 明和作者博客链接，谢谢！首发于泰然论坛 免责申明（必读！）：本博客提供的所有教程的翻译原稿均来自于互联网，仅供学习交流之用， 切勿进行商业传播。同时，转载时不要移除本申明。如产生任何纠纷，均与本博客所有人、发 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 该翻译稿之人无任何关系。谢谢合作！ 原文链接地址： http://www.raywenderlich.com/2593/how-to-create-a-mole-whacking-game-with -cocos2d-part-2 教程截图： 这篇文章是《如何使用 cocos2d 来制作一个打地鼠的游戏》的第二部分。打地鼠系列教程， 里面用到的很多概念和方法是从这个博客的其它教程中拿来的，但是，同时，本系列教程还引入 了一些新的概念。 在第一部分教程中，我们创建了一个游戏的基本框架--让可爱地地鼠从洞里面钻出来。我们 花费了大量时间来讨论如何 规划 污水管网监理规划下载职业规划大学生职业规划个人职业规划职业规划论文 图片资源及其坐标，以便可以开发出一个游戏，让它同时能够在 iPhone、iPad 和 Retina display 的设备上运行--并且要保证尽可能地高效率！ 在这篇教程中，我们将会增加一些很酷的动画效果，比如地鼠大笑和被打中时的动画。同时， 会增加一些游戏逻辑，以便你能够打击地鼠并且获得相应的分数，当然，还会添加一些非常好听 的音乐和音效。 如果你还没有上一个教程的工程，可以从这里下载一份工程拷贝。 定义动画：实用性 版权属于：子龙山人 首发于：泰然论坛 为了使游戏变得更有趣，我们将给地鼠增加两个动画。首先，当它从洞里钻出来的时候，它 会笑一下（那笑声你绝对会忍不住想打它！）。然后，如果你打中它了，那么你会看到地鼠被打 中时的面部表情。 但是，在我们开始之前，先讨论一下代码中如何组织动画。 回想我们之前的教程《如何在 cocos2d 里面使用 spritesheet 和动画》，其中，在创建动 画过程中，有一个步骤是，创建一系列的精灵帧（sprite frames）。因此，对于你的动画效果 中的每一张不同的图片，你必须为之增加精灵帧，如下所示： [animFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"myImage.jpg "]]; 我们的地鼠笑的动画将会是下面的一些图片序列： mole_laugh1.jpg, mole_laugh2.jpg mole_laugh3.jpg, mole_laugh2.jpg, mole_laugh3.jpg, mole_laugh1.jpg. 因此，我们可以硬编码来建立动画，如下所示： [animFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"mole_laugh1. jpg"]]; [animFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"mole_laugh2. jpg"]]; [animFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"mole_laugh3. jpg"]]; [animFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@"mole_laugh2. jpg"]]; // And so on... 但是，那会使我们的代码变得非常难看。为了使代码变得更简洁，我们不是直接在代码里面 定义这些图片，取而代之的是，我们把它们的名字都存到一个 plist 文件中。 Property List 文件 如果你之前没有使用过 plist 文件，你需要知道，其实就是一种 xml 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 的文件。只不过是， 它的后缀不一样，同时，它能够被 Xcode 直接识别，并且可以方便地存储数组，字典、字符串 和数字等等。创建这种类型的文件非常方便，当然使用也一样很方便。 让我们看一下，它在 Xcode 里面是什么样子。右键点击 Resources，选择“Add\New File...”，再选择 “Mac OS X\Resource\Property List”，再点击“Next”。把这个文件命名为 “laughAnim.plist”，然后点 Finish。这时，属性列表文件 laughAnim.plist 文件的结构应该 如下图所示： 版权属于：子龙山人 首发于：泰然论坛 每一个属性列表文件（plist 文件）有一个根元素。这个根元素要么是一个数组或者一个字 典。这里的 plist 文件将会包含一个组成地鼠笑的动画的一系列图片名字的数组。因此，点击根 元素的第二列，（当前默认是 Dictionary），我们把它更改成 Array。 接下来，点击最右边的小按钮（有三行的那个按钮）--这样会往数组里面增加一个新的实体。 默认情况下，这个新添加的实体的类型是 String--那也正是我们想要的数据类型。把 Item0 的 名称改成“mole_laugh1.jpg”。 然后再点＋号来添加更多的行，重复这个过程，最终的结果如下图所示： 接下来，重复上述的过程来创建地鼠被打中时的动画属性列表文件。按上面所说的，创建一 个 hitAnim.plist 文件，然后把它建立成下图所示的结构： 现在，是时候添加一些代码来加载这些动画了。打开 HelloWorldScene.h 文件，然后为每 一个动画定义一个成员变量，如下所示： // Inside @interface HelloWorld CCAnimation *laughAnim; CCAnimation *hitAnim; 这样做的目的主要是重用，因为可以在 init 函 关于工期滞后的函关于工程严重滞后的函关于工程进度滞后的回复函关于征求同志党风廉政意见的函关于征求廉洁自律情况的复函 数里面初使化好这些动画效果，那么在其它 的地方就直接可以使用这些动画效果了。（这里需要记住的一点是，游戏里面的任何对象都要事 先分配好，在玩家玩游戏的过程中，只需要按照某种规则把它们拿出来即可）。 接下来，基于先前创建的 plist 文件来创建 CCAnimation，如下所示： - (CCAnimation *)animationFromPlist:(NSString *)animPlist delay:(float)delay { 版权属于：子龙山人 首发于：泰然论坛 NSString *plistPath = [[NSBundle mainBundle] pathForResource:animPlist ofType: @"plist"]; // 1 NSArray *animImages = [NSArray arrayWithContentsOfFile:plistPath]; // 2 NSMutableArray *animFrames = [NSMutableArray array]; // 3 for(NSString *animImage in animImages) { // 4 [animFrames addObject:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFram eByName:animImage]]; // 5 } return [CCAnimation animationWithFrames:animFrames delay:delay]; // 6 } 理解这个方法非常重要，所以让我们一行一行代码来看。  属性列表文件包含在工程当中，因此，它也在应用程序的“main bundle”中。这个方法 会返回 main bundle 中的文件的完整路径，也就是我们需要读取的 plist 文件的完整路径。  为了读取一个 plist 文件，我们调用 NSArray 的 arrayWithContentsOfFile 方法，然 后把 plist 文件的完整路径传递给它。这样就会把 plist 文件中的内容初使化成一个数组。 （本例中，这个数组就是一系列图片名字的数组）。注意，这个方法可行，是因为我们把根 元素设置成了 NSArray。如果我们把它设置成 NSDictionary 的话，那么我们就要用一个 NSDictionary 去初使化它。具体的方法就是调用 [NSDictionary dictionaryWithContentsOfFile...] 。  创建一个空的数组来存储这些动画帧。  从 plist 文件中循环遍历每一张图片并把它存到一个数组中去。  为每一张图片创建一个精灵帧，同时把它加到 animFrames 数组里面去。  基于一个精灵帧数组，返回一个 CCAnimation 对象。 接下来，在 init 方法的末尾为每一个动画调用这个辅助函数来创建相应的动画： laughAnim = [self animationFromPlist:@"laughAnim" delay:0.1]; hitAnim = [self animationFromPlist:@"hitAnim" delay:0.02]; [[CCAnimationCache sharedAnimationCache] addAnimation:laughAnim name:@"laughA nim"]; [[CCAnimationCache sharedAnimationCache] addAnimation:hitAnim name:@"hitAnim "]; 注意，在存储动画对象的引用之后，我们把它们加入到了动画缓存中（animation cache）。 这个非常重要，因为我们可以在其他地方很容易地使用引用。（对于 laughAnim 和 hitAnim， 不用 retain 就可以使用了。因为，加入到动画缓存中的时候，CCAnimationCache 已经帮你 ratain 了）。这样做还有一个好处就是，你可以通过 CCAnimationCache 来获得你想要的动 画对象引用，只需要提供动画的名字即可，因为它内部实现是采用的字典。） 最后一步--让我们来使用动画（先只使用笑的动画）。修改 popMole 方法，如下所示： - (void) popMole:(CCSprite *)mole { CCMoveBy *moveUp = [CCMoveBy actionWithDuration:0.2 position:ccp(0, mole.cont 版权属于：子龙山人 首发于：泰然论坛 entSize.height)]; CCEaseInOut *easeMoveUp = [CCEaseInOut actionWithAction:moveUp rate:3.0]; CCAction *easeMoveDown = [easeMoveUp reverse]; CCAnimate *laugh = [CCAnimate actionWithAnimation:laughAnim restoreOriginalFr ame:YES]; [mole runAction:[CCSequence actions:easeMoveUp, laugh, easeMoveDown, nil]]; } 这里唯一的差别就是，在钻出来和钻回去的 action 中间，我们不是延迟几秒，取而代之的 是播放地鼠笑的动画。CCAnimate action 使用之前已经创建好的 laughAnim，同时设置 restoreOriginalFrame 为 yes。这样的话，当动画结束的时候，它会回到播放动画之前的面貌。 编译并运行代码，现在，当地鼠从洞里钻出来的时候，它会朝着你大笑！是不是想打它？有 木有！ 是时候让这些地鼠的笑容消失了，让我们开始添加打击逻辑吧！ 增加游戏逻辑 现在我们将往游戏中添加一些玩法逻辑。主要就是 记录 混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载 有多少个地鼠钻出来过，还有就是通 过打地鼠，你能得到多少分。你会尝试尽可能多地获得分数。 因此，我们将保存分数，并且显示给用户看。当地鼠钻回去的时候，我们也要告诉用户。 所以，再打开 HelloWorldScene.h 文件，添加下面一些实例变量到 HelloWord 层中： CCLabelTTF *label; int score; int totalSpawns; BOOL gameOver; 版权属于：子龙山人 首发于：泰然论坛 这里保存了一个分数 label，当前的分数值，总共钻出来的地鼠数目，以及游戏是否结束。 接下来，在你的 init 方法的结尾添加下列初始化代码： self.isTouchEnabled = YES; float margin = 10; label = [CCLabelTTF labelWithString:@"Score: 0" fontName:@"Verdana" fontSize: [self convertFontSize:14.0]]; label.anchorPoint = ccp(1, 0); label.position = ccp(winSize.width - margin, margin); [self addChild:label z:10]; 首先，设置层能够接收到 touch 事件，因为你想检查用户击打屏幕的消息。然后创建一个 label 来显示分数。注意，这里把 label 的锚点设置成右上角，那样可以非常方便地把它放置在 屏幕的右上方。 你也要注意到，我们并不是直接传递字体大小，而是通过一个辅助函数来决定字体的大小。 这是因为，在 iPad 上面，字体应该大一些，因为它的屏幕大一些。所以要实现一个 convertFontSize 方法，如下所示： - (float)convertFontSize:(float)fontSize { if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) { return fontSize * 2; } else { return fontSize; } } 这个非常简单--在 iPad 上运行的时候，字体大小加倍，否则，就不变。 接下一，我们将添加 touch 检测代码，来检测用户是否击中一个地鼠。但是，在这之前， 我们需要添加一个标记，标记地鼠是否可以击打。因为地鼠应该只有在它朝着你笑的时候才能够 被击打，而在它笑完钻回去的时候，你是不能够击打它的。 我们可以创建 CCSprite 的一个子类来做这个事，但是，因为我们只需要存储一点点信息， 所以，我们只需要使用 CCSprite 的 userData 属性即可。因此，添加两个辅助方法，并且修改 popMole 方法，如下所示： - (void)setTappable:(id)sender { CCSprite *mole = (CCSprite *)sender; [mole setUserData:TRUE]; } - (void)unsetTappable:(id)sender { CCSprite *mole = (CCSprite *)sender; [mole setUserData:FALSE]; } - (void) popMole:(CCSprite *)mole { 版权属于：子龙山人 首发于：泰然论坛 if (totalSpawns > 50) return; totalSpawns++; [mole setDisplayFrame:[[CCSpriteFrameCache sharedSpriteFrameCache] spriteFram eByName:@"mole_1.jpg"]]; // Pop mole CCMoveBy *moveUp = [CCMoveBy actionWithDuration:0.2 position:ccp(0, mole.cont entSize.height)]; CCCallFunc *setTappable = [CCCallFuncN actionWithTarget:self selector:@select or(setTappable:)]; CCEaseInOut *easeMoveUp = [CCEaseInOut actionWithAction:moveUp rate:3.0]; CCAnimate *laugh = [CCAnimate actionWithAnimation:laughAnim restoreOriginalFr ame:YES]; CCCallFunc *unsetTappable = [CCCallFuncN actionWithTarget:self selector:@sele ctor(unsetTappable:)]; CCAction *easeMoveDown = [easeMoveUp reverse]; [mole runAction:[CCSequence actions:easeMoveUp, setTappable, laugh, unsetTapp able, easeMoveDown, nil]]; } popMole 方法做了如下一些变动：  在地鼠大笑之前，它通过运行一个 CCCallFunc action 来调用一个方法 setTappable。 这个方法会把精灵的 userData 属性设置成 True，表明当前地鼠是可以被击打的。  类似的，在地鼠笑完之后，同样运行一个 CCCallFunc action 来调用 unsetTappable 方法，把是否可击打的标记又设置回去。  只要超过 50 个地鼠从洞里钻出来后，这个方法就返回，因此，这个游戏的限制就是只 出现 50 个地鼠。  在这个方法的开始部分，还把精灵的显示帧设置成初使图片（“mole.jpg”），因为，如 果地鼠上一次被打中了，它下次再钻出来的时候，还会显示被打中。所以需要在它每次 从洞里钻出来的时候，设置它的显示帧为初使图片。  好了，现在，这个精灵有一个 userData 标记，可以表明当前它是否可以被击打了。我 们接下来，添加下面的击打检测代码： -(void) registerWithTouchDispatcher { [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:kCCMe nuTouchPriority swallowsTouches:NO]; } 版权属于：子龙山人 首发于：泰然论坛 -(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event { CGPoint touchLocation = [self convertTouchToNodeSpace:touch]; for (CCSprite *mole in moles) { if (mole.userData == FALSE) continue; if (CGRectContainsPoint(mole.boundingBox, touchLocation)) { mole.userData = FALSE; score+= 10; [mole stopAllActions]; CCAnimate *hit = [CCAnimate actionWithAnimation:hitAnim restoreOriginalFrame: NO]; CCMoveBy *moveDown = [CCMoveBy actionWithDuration:0.2 position:ccp(0, -mole.c ontentSize.height)]; CCEaseInOut *easeMoveDown = [CCEaseInOut actionWithAction:moveDown rate:3.0]; [mole runAction:[CCSequence actions:hit, easeMoveDown, nil]]; } } return TRUE; } 这个 registerWithTouchDispatcher 方法会使得每一个 touch 事件到来的时候，都会先 调用 ccTouchBegan 方法，如果 ccTouchBegan 返回 yes，则有 touch 事件，否则没有。对 于更多的细节信息，请查照第一篇教程《如何使用 cocos2d 来制作一个基于 tiled 地图的游戏》。 ccTouchBegan方法把 touch坐标转换成相对于层的本地坐标，然后循环遍历每一个地鼠。 如果地鼠不可以击打（它的 userData 属性是 false），那么就直接看下一个地鼠。否则的话， 就使用 CGRectContainPoint 来检测 touch 点是否在地鼠的精灵边框之内。 如果地鼠被击中了，就把它设置成不可击打的，同时增加分数。并且停止所有正在运行的 action，然后播放“被打中”的动画，并且立马把地鼠缩回洞里去。 最后一步--添加一些代码来更新分数 label 以及检查关卡是否完成。 if (gameOver) return; [label setString:[NSString stringWithFormat:@"Score: %d", score]]; if (totalSpawns >= 50) { CGSize winSize = [CCDirector sharedDirector].winSize; CCLabelTTF *goLabel = [CCLabelTTF labelWithString:@"Level Complete!" fontName: @"Verdana" fontSize:[self convertFontSize:48.0]]; goLabel.position = ccp(winSize.width/2, winSize.height/2); goLabel.scale = 0.1; 版权属于：子龙山人 首发于：泰然论坛 [self addChild:goLabel z:10]; [goLabel runAction:[CCScaleTo actionWithDuration:0.5 scale:1.0]]; gameOver = true; return; } 就这么多了！编译并运行，你现在可以尽情打地鼠赚分啦！你能得多少分呢？ 免费的音效 和之前一样，让我们添加一些非常酷的音效。下载这些音效（它们是用 Garage Band 和 Audacity 制作的，这两个在 iPad 上面有），解压之，并把它们拖到 Resource 文件夹下面。 同时，确保 “Copy items into destination group’s folder”被选中，再点 Add。 然后，修改 HelloWorldScene.m： // Add to top of file #import "SimpleAudioEngine.h" // Add at the bottom of your init method [[SimpleAudioEngine sharedEngine] preloadEffect:@"laugh.caf"]; [[SimpleAudioEngine sharedEngine] preloadEffect:@"ow.caf"]; [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"whack.caf" loop:YES]; // Add at bottom of setTappable [[SimpleAudioEngine sharedEngine] playEffect:@"laugh.caf"]; 版权属于：子龙山人 首发于：泰然论坛 // Add inside ccTouchBegan, inside the CGRectContainsPoint case [[SimpleAudioEngine sharedEngine] playEffect:@"ow.caf"]; 编译并运行，心情享受打地鼠的乐趣吧！ 何去何从 这里有本教程的完整源代码。 这个系列的教程到此基本上就结束了，为什么不往工程里添加更多的东西呢？我确定你可以 往这个游戏添加一些更加好玩的元素。 如果你们有什么好的想法，或者好的建议，可以在下面留言。 译者的话：希望对大家有帮助。 著作权声明：本文由 http://www.cnblogs.com/andyque 翻译，欢迎转载分享。请尊重 作者劳动，转载时保留该声明和作者博客链接，谢谢！