【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器(1)
来源:互联网 发布:ubuntu 16.04 ibus 编辑:程序博客网 时间:2024/05/29 18:25
我们在玩大型RPG游戏中,经常可以看到每个人物会有很多的技能,技能在施放的时候,可能需要吟唱一段时间,此时屏幕上会有个水平的时间条计时,当技能施放过后,又有CD时间,即所谓的冷却,这个时候技能槽就会呈现一个扇形转圈的时间倒计时。在Cocos2d-html5中,我们依然可以十分轻松的将这个两种时间进度表现出来,就是ProgressAction。由于篇幅可能比较多,我打算分两次来阐述。
ProgressAction需要用到两个函数:
1.cc.ProgressTo.create(duration, percent);
duration:进度计时器的时间周期(单次)
percent:进度的百分比
2.cc.ProgressTimer.create(sprite);
sprite:精灵类的图片
我们先从扇形类型的说起吧。
代码如下:
var to1 = cc.ProgressTo.create(5, 100); //定义好经历的时间和百分比var to2 = cc.ProgressTo.create(8, 100);var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));left.setType(cc.PROGRESS_TIMER_TYPE_RADIAL); //设置进度的类型为扇形left.setPosition(cc.p(size.width/4, size.height / 2));this.addChild(left);left.runAction(to1); //执行动作var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));right.setType(cc.PROGRESS_TIMER_TYPE_RADIAL);right.setReverseDirection(true); //设置反方向进行旋转right.setPosition(cc.p(size.width/4*3, size.height / 2));this.addChild(right);right.runAction(cc.RepeatForever.create(to2));
效果如下:
如果你可以运行起来,你会发现,由于我设置左边的时间为5秒,右边的为8秒,左边会很快执行完,而且左边只执行了一次,右边会一直反复的运动,从这里也可以看出cc.ProgressTo其实是一个Action。
下面我调整一下百分比,并且都只执行一次,我们看下结果。
代码如下:
var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));left.setType(cc.PROGRESS_TIMER_TYPE_RADIAL); //设置进度的类型为扇形left.setPosition(cc.p(size.width/4, size.height / 2));this.addChild(left);left.runAction(cc.ProgressTo.create(5, 70)); //由于ProgressTo是一个动作,为了方便,可以直接写在runAction中var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));right.setType(cc.PROGRESS_TIMER_TYPE_RADIAL);right.setReverseDirection(true); //设置反方向进行旋转right.setPosition(cc.p(size.width/4*3, size.height / 2));this.addChild(right);right.runAction(cc.ProgressTo.create(8, 100)); //left的百分比是70,而right是100效果如下:
可以看到左边会在图片的70%的地方结束,并且这70%所花的时间是5秒,而不是5*70%!
接着我们再看下条形进度计时器。
这里有两个很重要的方法:
setBarChangeRate(barChangeRate) 设置进度条的方向,即水平或者垂直进度条
setMidpoint(mpoint) 设置进度条的走向,即若为水平方向控制从左到右还是从右到左,若为垂直方向控制从上到下还是从下到上
注:这两个方法的参数都是cc.point类型的,setMidpoint是受限于setBarChangeRate参数的,比如水平进度条,setBarChangeRate(cc.p(1,0)) ,如x为1,y为0,那么setMidpoint的参数y就不起作用了,只有x可以设置1或者0,0代表从左往右,1代表从右往左。
下面给出水平的进度条代码:
var to1 = cc.ProgressTo.create(5, 100);var to2 = cc.ProgressTo.create(2, 100);var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));left.setType(cc.PROGRESS_TIMER_TYPE_BAR);left.setBarChangeRate(cc.p(1, 0));left.setMidpoint(cc.p(0, 0));this.addChild(left);left.setPosition(cc.p(size.width/4, size.height/2));left.runAction(cc.RepeatForever.create(to1));var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));right.setType(cc.PROGRESS_TIMER_TYPE_BAR);right.setBarChangeRate(cc.p(1, 0));right.setMidpoint(cc.p(1, 0));this.addChild(right);right.setPosition(cc.p(size.width/4*3, size.height/2));right.runAction(cc.RepeatForever.create(to2));效果如下:
竖直进度条的代码:
var to1 = cc.ProgressTo.create(5, 100);var to2 = cc.ProgressTo.create(2, 100);var left = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));left.setType(cc.PROGRESS_TIMER_TYPE_BAR);left.setBarChangeRate(cc.p(0, 1));left.setMidpoint(cc.p(0, 0));this.addChild(left);left.setPosition(cc.p(size.width/4, size.height/2));left.runAction(cc.RepeatForever.create(to1));var right = cc.ProgressTimer.create(cc.Sprite.create("res/powered.png"));right.setType(cc.PROGRESS_TIMER_TYPE_BAR);right.setBarChangeRate(cc.p(0, 1));right.setMidpoint(cc.p(0, 1));this.addChild(right);right.setPosition(cc.p(size.width/4*3, size.height/2));right.runAction(cc.RepeatForever.create(to2));效果如下:
我想通过这几个实例可以弄明白这个进度条的走向和方向了吧,关键就是在于理解setBarChangeRate和setMidpoint这两个方法,下一节继续讨论这个进度计时器的知识点。
不早了,睡觉了。。。
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器(1)
- 【Cocos2d-html5游戏引擎学习笔记(2)】Hello Cocos2d-Html5
- 【Cocos2d-html5游戏引擎学习笔记(1)】游戏引擎初探究和搭建开发环境
- 【Cocos2d-html5游戏引擎学习笔记(3)】渲染文字
- 【Cocos2d-html5游戏引擎学习笔记(4)】菜单按钮
- 【Cocos2d-html5游戏引擎学习笔记(5)】Sprite精灵渲染
- 【Cocos2d-html5游戏引擎学习笔记(8)】音乐及音效
- 【Cocos2d-html5游戏引擎学习笔记(9)】Action系统动作
- 【Cocos2d-html5游戏引擎学习笔记(10)】自定义精灵动画
- 【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-HTML5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器
- 【Cocos2d-html5游戏引擎学习笔记(3)】渲染文字
- 【Cocos2d-html5游戏引擎学习笔记(6)】自定义Cocos2d-html5加载资源Loading界面
- 游戏引擎cocos2d-html5
- Cocos2d-x学习笔记(14)(更新函数scheduleUpdate、进度计时器CCProgressTo、滚动视图CCScrollView)
- 【Cocos2d-html5游戏引擎学习笔记(7)】CCLayer创建及场景跳转
- 黑马程序员_Java基础_面向对象(一)_05
- Matlab--rref函数的糟蹋
- 字典树-全文检索-HDU1277
- poj1556 The Doors
- localstorage存储
- 【Cocos2d-html5游戏引擎学习笔记(13)】ProgressAction进度计时器(1)
- 中介者模式----C++实现
- 数模的这段日子
- Lua 全局变量
- pom.xml详解
- vs2012+qt5.2.0环境搭建
- java输入输出流
- Matlab--RMB人民币转换为 繁体字
- iOS Dev (26) 初步了解下UIColor的最常用知识