背景:

  本来打算下一个游戏是涂鸦跳跃的,因为图片资源没准备好,暂时往后推迟。刚好笔者手头上有部分水果忍者的游戏素材,于是上周末花了一些时间把水果忍者实现了;以前读大学的时候这款游戏就风靡大街小巷,记得当时同学间也比赛谁得的分数高,乐趣无穷;笔者在那会还没学过编程,很难理解切西瓜是怎么做出来,现在此一时彼一时了。

  因为素材有限,实现的效果可能和原版有差距,例外很多童鞋反映flappy,popstar和原版不同,笔者在此说明:因为是学习demo,差距肯定是有的,好的游戏需要读者精雕细琢,把握好每一个参数和细节,都是需要花时间的。

  本系列共有上中下三篇,源码基本完成,分析分为三篇;

ps:

1  CocosEditor已发布新版本,现在提供6个实战demo学习,包括flappy ,popstar ,fruitninja,moonwarroris,fruitattack,testjavascript;

2  运行demo需要配置好CocosEditor,暂不支持其他工具。demo是跨平台的,可移植运行android,ios,html5网页等,代码是基于javascript语言,cocos2d-x游戏引擎,CocosEditor手游开发工具完成的。



源代码下载:

请到代码集中营下载(水果忍者 ):http://blog.makeapp.co/?p=319



不同平台下的效果图:


windows

Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-js



html5网页

Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-js_02


android平台


Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_CocosEditor_03


Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-js_04



代码分析:

实战项目里面ccbx场景都是略过的,主要放在代码这块,水果忍者主要有两个场景,一个开始场景StarLayer和主场景MainLayer;

1 StartLayer.js里面有三个按钮,道场,开始,退出。道场功能未去实现,点击开始进入主场景MainLayer;StarLayer里面主要处理三个选项的旋转动画,如下直接无限循环旋转cc.RepeatForever.create(cc.RotateBy.create());圆环顺时针,水果逆时针;


[javascript]view plaincopyFruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-html5_05Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_CocosEditor_06
  1. StartLayer.prototype.onEnter = function ()  

  2. {  

  3. this.rings = [this.dojoRing, this.newGameRing, this.quitRing];  

  4. for (var i = 0; i < this.rings.length; i++) {  

  5. this.rings[i].runAction(cc.RepeatForever.create(cc.RotateBy.create(1, -90)));  

  6.    }  

  7. this.fruits = [this.dojoFruit, this.newGameFruit, this.quitFruit];  

  8. for (var j = 0; j < this.fruits.length; j++) {  

  9. this.fruits[j].runAction(cc.RepeatForever.create(cc.RotateBy.create(5, 90)));  

  10.    }  

  11.    cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.menu, true);  

  12. this.isFlash = false;  

  13. };  


2 切掉绿色西瓜进入主场景;

#西瓜包括两个西瓜碎片,触摸的瞬间,西瓜消失,两个碎片san0,san1产生;并各自执行不同的移动动画,并动画结束后cleanup;

#触摸的瞬间也产生刀锋的效果 cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);

#0.5s执行延迟函数进入主场景this.rootNode.scheduleOnce;


[javascript]view plaincopyFruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-html5_05Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_CocosEditor_06
  1. StartLayer.prototype.onTouchesMoved = function (touches, event)  

  2. {  

  3. var loc = touches[0].getLocation();  

  4. if (cc.rectContainsPoint(this.newGameFruit.getBoundingBox(), loc)) {  

  5. var sandiaImages = ["sandia-1.png", "sandia-2.png"];  

  6. var fruitPosition = this.newGameFruit.getPosition();  

  7. var san0 = cc.MySprite.create(this.rootNode, sandiaImages[0], fruitPosition, 100);  

  8. var san1 = cc.MySprite.create(this.rootNode, sandiaImages[1], fruitPosition, 100);  

  9. this.newGameFruit.runAction(cc.ScaleTo.create(0, 0));  

  10. var rotation = this.newGameFruit.getRotation();  

  11.        cc.log("rotation==" + rotation);  

  12.        san0.setRotation(rotation);  

  13.        san1.setRotation(rotation);  

  14.        cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.splatter, false);  

  15. var upSprite = san0;  

  16. var downSprite = san1;  

  17. var fruitX = fruitPosition.x;  

  18. var fruitY = fruitPosition.y;  

  19.        upSprite.runAction(cc.Sequence.create(  

  20.                cc.MoveTo.create(0.2, cc.p(fruitX - 50, fruitY + 50)),  

  21.                cc.CleanUp.create(upSprite)  

  22.        ));  

  23.        downSprite.runAction(cc.Sequence.create(  

  24.                cc.MoveTo.create(0.2, cc.p(fruitX + 50, fruitY - 50)),  

  25.                cc.CleanUp.create(downSprite)  

  26.        ));  

  27. if (this.isFlash == false) {  

  28. this.isFlash = true;  

  29.            cc.MySprite.createFlash(this.rootNode, "flash.png", this.pBegin, loc);  

  30.        }  

  31. this.rootNode.scheduleOnce(function ()  

  32.        {  

  33.            cc.AudioEngine.getInstance().stopAllEffects();  

  34.            cc.BuilderReader.runScene("", "MainLayer");  

  35.        }, 0.5);  

  36.    }  

  37. }  


3  产生刀锋函数,主要是根据pBegin和pEnd两个点计算旋转角度,简单的数学应用;以前不知道学数学干嘛,现在知道了;


[javascript]view plaincopyFruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-html5_05Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_CocosEditor_06
  1. cc.MySprite.createFlash = function (node, name, pBegin, pEnd)  

  2. {  

  3. var flash = cc.MySprite.create(node, name, pEnd, 3000);  

  4. var ratio = (pEnd.y - pBegin.y) / (pEnd.x - pBegin.x);  

  5. var angle = (Math.atan(ratio) / (Math.PI)) * 180;  

  6.    flash.setRotation(-angle);  

  7.    flash.setScale(0.5);  

  8.    flash.runAction(cc.Sequence.create(cc.DelayTime.create(0.2), cc.CleanUp.create(flash)));  

  9. return flash;  

  10. };  





4 进入主场景MainLayer,需要每隔一段时间产生向上抛的水果newFruit;

#从水果数组里面随机取一个水果getRandom(FRUIT_DATA.length)

#创建水果精灵,初识位置 x随机取,y的话在屏幕下方-100,fruit.setPosition(cc.p(x, -100));;

#设置水果的各种属性zorder,num等;

#创建一个贝塞尔曲线控制数组,有三个点,决定一条曲线var controlPoints = [
       cc.p(x, -100),
       cc.p(x - offSetX, topY),
       cc.p(x - offSetX * 2, -100)
   ]; 又是数学的应用;

#让水果同时实现贝塞尔曲线动画和旋转动画

#水果数组添加该水果,主要用于后面的水果切除检测 this.fruitList.push(fruit);

#播放抛出音效;


[javascript]view plaincopyFruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-html5_05Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_CocosEditor_06
  1. MainLayer.prototype.newFruit = function ()  

  2. {  

  3. //create new fruit per 0.5s

  4. var random = getRandom(FRUIT_DATA.length);  

  5. var data = FRUIT_DATA[random];  

  6. var fruit = cc.Sprite.createWithSpriteFrameName(data.fruitImage);  

  7. var x = 300 + getRandomOffset(200);  

  8.    fruit.setPosition(cc.p(x, -100));  

  9.    fruit.setAnchorPoint(cc.p(0.5, 0.5));  

  10. this.fruitZOrder -= 1;  

  11.    fruit.setZOrder(this.fruitZOrder);  

  12.    fruit.cleanuped = false;  

  13.    fruit.num = data.num;  

  14. var offSetX = getRandomOffset(100);  

  15. var topY = 900 + getRandom(100);  

  16. var controlPoints = [  

  17.        cc.p(x, -100),  

  18.        cc.p(x - offSetX, topY),  

  19.        cc.p(x - offSetX * 2, -100)  

  20.    ];  

  21. var fruitTime = 3;  

  22. var bezier = cc.BezierTo.create(fruitTime, controlPoints);  

  23. var action2 = cc.RotateBy.create(fruitTime, getRandom(360));  

  24. var upActions = cc.Spawn.create(cc.Sequence.create(bezier, cc.CleanUp.create(fruit)), action2);  

  25.    fruit.runAction(upActions);  

  26. this.rootNode.addChild(fruit);  

  27. this.fruitList.push(fruit);  

  28.    cc.AudioEngine.getInstance().playEffect(FRUIT_SOUNDS.throw, false);  

  29. };  


5 每隔一段时间抛出一个newFruit,只要在update更新函数里面编写就行;

如果当前时间距离上一个水果产生时间为0.5s,就又产生一个,周次循环,不断产生水果


[javascript]view plaincopyFruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_cocos2d-html5_05Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台_CocosEditor_06
  1. if (this.currentTime - this.lastFruitTime > 0.5) {  

  2. this.newFruit();  

  3. this.lastFruitTime = this.currentTime;  

  4.    }  


上篇就这些,over;






cocos2d-x跨平台游戏引擎

cocos2d-x是全球知名的游戏引擎 ,引擎在全球范围内拥有众多开发者,涵盖国内外各知名游戏开发商。目前Cocos2d-x引擎已经实现横跨ios、Android、Bada、MeeGo、BlackBerry、Marmalade、Windows、Linux等平台。编写一次,到处运行,分为两个版本 cocos2d-c++和cocos2d-html5 本文使用了后者;
cocos2d-x 官网:http://cocos2d-x.org/
cocos2d-x 资料下载  http://cocos2d-x.org/download




CocosEditor开发工具:

CocosEditor,它是开发跨平台的手机游戏工具,运行window/mac系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试方便,和实时模拟;

CocosEditor 下载,介绍和教程:http://blog.csdn.net/touchsnow/article/details/19070665

CocosEditor官方博客:http://blog.makeapp.co/