写在前面:最近两个月比较忙,很久没更新教程了。这么些日子,发生了不少事,WP8发布了。我的T8788也被彻底抛弃了。。。win8也RP版了。前景未卜啊。肯定不少人在迷茫了吧。我觉得呢,都是浮云,语言只是工具,能够一通百通才是王道,微软不行大不了换IOS,Android。接下来的一段时间,估计会写些win8的教程。我感觉win8和WP8有种莫名的联系,不过也道不清说不明。反正就顺着感觉来了。
本次教程写一个简单的打地鼠游戏。如果你对cocos2d-x编程不了解,可以先阅读《用cocos2d-x做一个简单的windows phone 7游戏》系列文章。不过,如果你有相关的经验就另当别论了。
程序截图:
思路简介:
打地鼠主要是问题就在于地鼠出头和打地鼠的点击处理。地鼠出头有两种方法,一种是用动画,一种是用Z轴的纵向效果。动画效果的方法Nowpaper前段时间就写了这么一篇《Cocos2d-x for WindowsPhone:开发一个打地鼠游戏》,我想就不在这里啰嗦了。懒得再将这些重复的内容在做一遍。这里就介绍下Z轴的方法。
只要把前景分为3块。分为上中下三块,在洞的中心分开。添加到层的时候设置Z轴,最下的最前,最上的最后。最后后的设置一块黑色的背景。两块图之间留着空间来让地鼠Sprite进行move动作。这样就能产生地鼠从洞中钻出的视觉效果了。
现在来下载需要的图片;/data/p_w_upload/portal/et2/201207/ET35158120912203.zip
开始吧:
新建一个工程cocos2d的工程,命名为cocos2dWhacAMoleDemo。当然,因为是练习项目,所以OpenXLive没有用到。就去掉那个勾。然后修复引用。这些操作做了很多次了。不懂的建议看下以前的文章。
然后再Classes文件夹添加一个类。命名为AttackMoleScene.cs,使之继承于CCScene。修改代码如下:
namespace cocos2dWhacAMoleDemo.Classes{ class AttackMoleScene:CCScene { public AttackMoleScene() { this.addChild(AttackMoleLayer.node()); } } class AttackMoleLayer : CCLayer { public override bool init() { if (!base.init()) return false; CCSize winSize = CCDirector.sharedDirector().getWinSize(); CCSprite background = CCSprite.spriteWithFile(@"p_w_picpaths/background"); background.position = new CCPoint(winSize.width / 2, winSize.height / 2); this.addChild(background, -3); CCSprite grassUpper = CCSprite.spriteWithFile(@"p_w_picpaths/grass_upper"); grassUpper.position = new CCPoint(winSize.width / 2, winSize.height - grassUpper.contentSize.height / 2); this.addChild(grassUpper, -2); CCSprite grassMid = CCSprite.spriteWithFile(@"p_w_picpaths/grass_mid"); grassMid.position = new CCPoint(winSize.width / 2, winSize.height - grassUpper.contentSize.height - grassMid.contentSize.height / 2); this.addChild(grassMid, 0); CCSprite grassLower = CCSprite.spriteWithFile(@"p_w_picpaths/grass_lower"); grassLower.position = new CCPoint(winSize.width / 2, grassLower.contentSize.height / 2); this.addChild(grassLower, 2); return true; } public new static AttackMoleLayer node() { AttackMoleLayer layer = new AttackMoleLayer(); if (layer.init()) return layer; return null; } }}
上面做了些什么呢,在层里面添加了前景。三块,细心的朋友注意到了。我addChild的时候,Z轴的参数都不一样。背景在最后,所以Z轴的值最小。每两块间留一个位置给地鼠冒头。前景的位置也是设置成上中下三个位置。这样,从Z轴的上头看下就能正好成一整块前景。
现在修改AppDelegate的applicationDidFinishLaunching方法:
//CCScene pScene = cocos2dWhacAMoleDemoScene.scene(); AttackMoleScene pScene = new AttackMoleScene(); //run pDirector.runWithScene(pScene);
现在可以执行了。就可以看到不错的前景了。
那么现在来添加一个地鼠来冒一下头试试吧。
在层的init方法上面添加:
CCSprite mole = CCSprite.spriteWithFile(@"p_w_picpaths/mole_1"); mole.position = new CCPoint(155,30); var move = CCMoveBy.actionWithDuration(2, new CCPoint(0, 100)); var action = CCRepeat.actionWithAction(CCSequence.actions(move, move.reverse()), 5); mole.runAction(action); this.addChild(mole, 1);
添加一个地鼠到层中,并且设置它在左下角的洞里进行Move来回运动。关于这个坐标(155,30)是怎么算出来的,我用画图工具打开grass.png这个文件,用鼠标来大概获取坐标,然后用笔算下坐标。需要注意的是,cocos2d-x里面的坐标原点在左下角。而window的是在左上角。
现在编译运行,就能看到一个地鼠来回冒头了。
让地鼠随机冒头
我们先来思考下接下来的怎么做,怎么保存所以的地鼠精灵,怎么确定初始化坐标,怎么判断地鼠被打,然后让他消失,怎么确定洞里面有地鼠而不至于重复添加。
我的方法是全部用数组来解决。比较简单。
添加以下的声明到层:
int[,] moleValue = http://www.cnblogs.com/fengyun1989/archive/2012/07/09/new int[2, 3] { { 0, 0, 0 }, { 0, 0, 0 } }; CCSprite[,] moles = new CCSprite[2, 3]; int[] initPositionX = new int[3] { 155, 400, 640 }; int[] initPositionY = new int[2] {30, 260};
上面的moleValue记录的是当前洞里有没有地鼠,1就是有,0就是没有。moles记录当前所有冒头地鼠的引用。最后两个是初始化坐标,3*2=6. 这些坐标都是我通过画图工具来计算出来的。
现在注释到上面的单个地鼠冒头的代码。往层里面添加方法:
void addMole(float dt) { Random r = new Random(); int i = r.Next() % 3; int j = r.Next() % 2; if (moleValue[j, i] == 0) { moles[j, i] = CCSprite.spriteWithFile(@"p_w_picpaths/mole_1"); moles[j, i].position = new CCPoint(initPositionX[i], initPositionY[j]); var move = CCMoveBy.actionWithDuration(2, new CCPoint(0, 100)); var action = CCSequence.actions(move, move.reverse() , CCCallFuncN.actionWithTarget(this, spriteMoveDone)); moles[j, i].runAction(action); moleValue[j, i] = 1; if (j == 0) this.addChild(moles[j, i], 1); else this.addChild(moles[j, i], -1); } } void spriteMoveDone(object sender) { CCSprite sprite = sender as CCSprite; for (int i = 0; i < 3; i++) { for (int j = 0; j < 2; j++) { if (moles[j, i] == sprite) { moleValue[j, i] = 0; break; } } } this.removeChild(sprite, true); }
并且添加一行到init方法
this.schedule(addMole, 1.0f);
我们修改地鼠变为只是上下Move一次。并且在退回后调用回调函数移除该sprite。设置该位置的moleValue值为0.现在就能看见地鼠不怕死的不断冒头了。
打地鼠
既然地鼠都不怕死的冒出来了。不打貌似很不爽的样子,但是,现在点击屏幕,没人任何反应。。。因为我们还没有对点击进行注册和处理。
那么怎么判断是点击了地鼠呢。我设定这么一个范围算是点击了地鼠。
由于地鼠初始化在框的下面,其坐标的X和在这个黑色框下边的中点坐标X一样。Y值+70才算和这个黑色框下边的中点的坐标Y值一样。
现在添加一个方法来处理触点坐标:
private void handleTouchPosition(CCPoint touch) { for (int i = 0; i < 3; i++) { for (int j = 0; j < 2; j++) { float tempX = initPositionX[i] - touch.x; if ((tempX < 80 && tempX > -80) && (initPositionY[j] + 150 - touch.y > 0 && initPositionY[j] + 70 < touch.y)) { if (moleValue[j, i] == 1) { if (moles[j, i] != null) { this.removeChild(moles[j, i], true); } moleValue[j, i] = 0; moles[j, i] = null; } return; } } } }
这样,遍历所有的洞,判断点击是否是这个洞。然后判断现在是否有地鼠,有地鼠就把地鼠移除。
现在在init方法中注册触摸事件:
this.isTouchEnabled = true;
然后重载ccTouchesEnded方法:
public override void ccTouchesEnded(List<CCTouch> touches, CCEvent event_) { foreach (var touch in touches) { CCPoint touchLocation = touch.locationInView(touch.view()); touchLocation = CCDirector.sharedDirector().convertToGL(touchLocation); touchLocation = this.convertToNodeSpace(touchLocation); handleTouchPosition(touchLocation); } }
这个方法先把坐标转换,再处理坐标。现在运行,可以看到地鼠被打死了。
何去何从
现在,我们已经拥有了一个不错的打地鼠游戏。是不是觉得少了点什么呢。。
考虑拓展地鼠被打的动作,加个锤子或者什么的。另外,可以添加地鼠被打后的表情,这都可以用Action可以实现
把硬编码的地鼠重构出来,添加多个关卡
去试试用动画来制作地鼠冒头
增加更多种类的地鼠,比如说有些地鼠可以挨打2下
添加很棒的音效
转载于:https://blog.51cto.com/kaka123456/929157