cocos2d-html5学习笔记(七)--Action
2012-07-14 20:53
447 查看
Action实在太多了,有些我没有用过,这里只讲常用的Action。关于Action的其他知识,请参考陈升想的两篇关于action的教程
cocos2d-html5教程之动作CCAction
cocos2d-html5教程之动作CCAction详解2 cocos2d-html5教程之动作CCAction详解2
好的,先来一个最简单的Action
动态的效果,图片就看不到了,不过可以看一下菊花:
![](http://my.csdn.net/uploads/201207/14/1342269733_7227.png)
好的,再来一个复杂一点的。
这个例子中的init部分与上一个例子是一样的,详细的我不讲了。这个例子的效果是,鼠标点击哪里,菊花就飘到哪里。如果菊花还在飘,你又点击的话,要等到上一次的Action完成之后才运行下一个Action,想一下魔兽的角色是怎么移动的。
cocos2d-html5教程之动作CCAction
cocos2d-html5教程之动作CCAction详解2 cocos2d-html5教程之动作CCAction详解2
好的,先来一个最简单的Action
var SimpleActon=cc.Layer.extend({ init:function () { var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480); var flower= cc.Sprite.create("Resources/flower.png"); //菊花太大,缩小一点,并移动一下 flower.setScale(0.1); flower.setPosition(cc.ccp(100,100)); //一个旋转的Action,2秒转一圈 var actionBy = cc.RotateBy.create(2, 360); //重复运行Action,不断的转圈 flower.runAction(cc.RepeatForever.create(actionBy)); this.addChild(green,1,1); this.addChild(flower,2,2); this.setTouchEnabled(true); return true; } });
动态的效果,图片就看不到了,不过可以看一下菊花:
![](http://my.csdn.net/uploads/201207/14/1342269733_7227.png)
好的,再来一个复杂一点的。
var ActionTest=cc.Layer.extend({ actionArray:[], sq:null, init:function () { var green=cc.LayerColor.create(cc.c4(0,255,0,255),320,480); var flower= cc.Sprite.create("Resources/flower.png"); //菊花太大,缩小一点,并移动一下 flower.setScale(0.1); flower.setPosition(cc.p(100,100)); //一个旋转的Action,2秒转一圈 var actionBy = cc.RotateBy.create(2, 360); //重复运行Action,不断的转圈 flower.runAction(cc.RepeatForever.create(actionBy)); this.addChild(green,1,1); this.addChild(flower,2,2); this.setTouchEnabled(true); return true; }, ccTouchesEnded:function (touches,event) { //获得点击位置,添加一个MoveTo的Action,菊花1秒内移动到这个位置 var position=touches[0].locationInView(); var action=cc.MoveTo.create(1,position); this.actionArray.push(action); //添加一个回调函数,其实也是一个Action this.actionArray.push(cc.CallFunc.create(this, this.callback,this.actionArray.length+1)); //是否是第一次 if (this.sq==null) { this.sq=cc.Sequence.create(this.actionArray); this.getChildByTag(2).runAction(this.sq); return; }; //上一次是否运行结束,是的话就运行本次点击的Action if (this.sq.isDone()) { this.callback(this,this.actionArray.length-2); }; }, callback:function (sender,next) { //是否是最后一个Action,是的话就返回,否则运行下两个个Action(第二个是回调函数Action,cc.CallFunc) if (next==this.actionArray.length) return; this.sq=cc.Sequence.create(this.actionArray[next],this.actionArray[next+1]); this.getChildByTag(2).runAction(this.sq); } });
这个例子中的init部分与上一个例子是一样的,详细的我不讲了。这个例子的效果是,鼠标点击哪里,菊花就飘到哪里。如果菊花还在飘,你又点击的话,要等到上一次的Action完成之后才运行下一个Action,想一下魔兽的角色是怎么移动的。
相关文章推荐
- cocos2d-html5学习笔记(七)--Action 讲了action判断是否结束,然后调用回调函数
- cocos2d-html5学习笔记(七)--Action
- cocos2d-html5学习笔记(七)--Action
- 【Cocos2d-html5游戏引擎学习笔记(9)】Action系统动作
- 【Cocos2d-html5游戏引擎学习笔记(7)】CCLayer创建及场景跳转
- cocos2d-html5学习笔记(二)——cocos2d中的layer
- cocos2d-html5学习笔记(五)--菜单和场景转换
- Cocos2d-x 3.2 学习笔记(八)Action
- 【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器
- cocos2d-html5学习笔记(六)--alpha2中cc.Sequence.create中的bug
- cocos2d-html5学习笔记(六)--alpha2中cc.Sequence.create中的bug
- cocos2d-x 3.1.1 学习笔记[3]Action 动作
- cocos2d学习笔记2--动作action
- Cocos2d-x学习笔记(七)CCAction原理分析
- 我的Cocos2d-x学习笔记(十八)CCGridAction
- 【Cocos2d-html5游戏引擎学习笔记(1)】游戏引擎初探究和搭建开发环境
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器(1)
- cocos2d-x学习笔记(四)动作(Action)
- 【Cocos2d-html5游戏引擎学习笔记(5)】Sprite精灵渲染