Cocos2dx3.2编写常用UI组件(三)收集器效果Collector

前言:

在游戏中,我们经常可以看到,获取分数后,分数会自动升到对应的分数栏上面。今天我们就来实现这种效果

正文:

这种效果实现起来其实非常的简单,只需要对生成出来的分数(通常是一个Sprite或Node)添加动作,让其能够飘到目标位置,然后消失就可以了。这里我提供一个Collector类来供大家使用。方便大家的操作。

Collector的使用说明:①通过Collector::create()函数创建一个Collector对象

②首先要设置Collector的位置

③如需要元素设置到达收集器之后的回调函数,则用Collector::setCallback(std::function<void()>)函数

④对于创建出来的结点,只需要利用Collector::addSource(Node* node)添加到collector对象中,那么新建的结点自然会自动飘向collector的位置

⑤使用Collector::setTime函数设置飘动时间

例子:

<span style="white-space:pre">	</span>c = Collector::create();
	c->setPosition(240,160);
	this->addChild(c);
void HelloWorld::menuCloseCallback(Ref* pSender)
{
	Sprite* sp = Sprite::create("CloseNormal.png");
	sp->setPosition(100,100);
	this->addChild(sp);
	c->addSource(sp);
}

效果如下图:

Collector类非常的简单,主要看看最重要的addSoruce函数就好了

void Collector::addSource(Node* node){
	MoveTo* moveTo = MoveTo::create(m_time,this->getPosition());
	EaseBackInOut* easeMove = EaseBackInOut::create(moveTo);

	ScaleTo* scaleBig = ScaleTo::create(0.3*m_time,1.5f);
	ScaleTo* scaleSmall = ScaleTo::create(0.7*m_time,0.5f);
	Sequence* scale = Sequence::create(scaleBig,scaleSmall,NULL);

	Spawn* move = Spawn::create(easeMove,scale,NULL);

	CallFunc* callFunc = CallFunc::create([=](){
		node->removeFromParentAndCleanup(true);
		m_callback();
	});

	Sequence* action = Sequence::create(move,callFunc,NULL);
	node->runAction(action);
}

addSource函数只不过是将一系列动作封装,然后让Node执行罢了。

附上源码:

点击打开链接

时间: 2024-10-11 10:17:15

Cocos2dx3.2编写常用UI组件(三)收集器效果Collector的相关文章

Cocos2dx3.2编写常用UI组件(二)滚动计数器NumberScroller

前言: 废话不多说,先看最终效果图 正文: 1.使用说明: ①引入头文件 "NumberScroller.h" ②用NumberScroller::create(int length,int fontSize) 函数来创建NumberScroller对象 ③利用setNumber(int number)函数来设置计时器里面的值(这里只实现了向后滚动,即设置的值要大于等于当前值) ④利用getNumber获得当前计数器显示的值 ⑤利用setTime(float time)函数来设置计时器

Cocos2dx3.2编写常用UI组件(五)带滚动的表格GridView

前言: 按照惯例先发上效果图: 正文: 先来吐槽几句,一说起滚动效果大家可能会联想到Cocos2dx给我们提供的ScrollView.我一开始也是打算用ScrollView来实现的,但是用着用着发现出现了各种莫名其妙的错误,所以只好自己重新写一个Node,通过onTouchBegan和onTouhMoved两个事件回调来实现滚动的效果. GridView使用说明: 1.利用GridView::create(int row,int column)来创建一个GridView,row和column分别

Cocos2dx3.2编写常用UI组件(四)发光的标题BlinkTitile

前言: 如果看了上一节我推荐的blog,并且掌握了遮罩层的运用,那么本节介绍的发光标题就非常的简单了. 没有看也没关系,现在我来具体讲一下ClippingNode 正文: 关于遮罩ClippingNode,我们先来介绍两个名词:模板和底板 不知道大家以前又没有玩过橡皮泥,通常有一下空心的模具,只要把花型的模具按在红色的橡皮泥上面,就可以裁剪出一个花型的红色橡皮泥 这里花型模具就是模板,红色橡皮泥就是底板 在cocos2dx中 模板和底板都可以是Layer/Sprite/Node/DrawNode

工作流,WEB框架,UI组件网络收集整理

工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到正文: ? 工作流篇 RoadFlow工作流(收费):                  http://www.cqroad.cn/WorkFlow 驰骋工作流引擎 ccflow                       https://www.oschina.net/p/ccflow YbSof

Android常用UI组件 - Button

按钮(Button)是Android当中一个常用的UI组件,很小但是在开发中最常用到.一般通过与监听器结合使用,从而触发一些特定事件. Button继承了TextView.它的功能就是提供一个按钮,这个按钮可以供用户点击,当用户对按钮进行操作的时候,触发相应事件,如点击,触摸.一 般对于一个按钮而言,用的最多的就是点击事件,Button间接继承自View,而Android UI中的所有事件,都是定义在View中的. 实例:ButtonDemo 运行效果: 代码清单: 布局文件:main.xml

五、vue常用UI组件

下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn demo:http://elemefe.github.io/mint-ui/#/ github地址:https://github.com/Eleme

Android常用UI组件 - EditText

EditText是接受用户输入信息的最重要Android UI组件,可以利用EditText.getText()获取它的文本内容. 实例:EditTextDemo 运行效果: 代码清单: 布局文件:main.xml <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

Android常用UI组件 - ListView

列表视图(ListView)是Android当中一个非常重要的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示. 列表的显示需要三个元素: 1.ListVeiw 用来展示列表的View. 2.适配器 用来把数据映射到ListView上的中介. 3.数据 具体的将被映射的字符串,图片,或者基本组件. 首先介绍"适配器"这个基础概念.在列表中定义的数据都通过"适配器"来映射到ListView上,ListView中常用的适配器有两种: ArrayAdap

android常用UI组件 学习整理

AutoCompleteTextView  自动完成输入框  实现输入提示列表供选择 GridView 网格列表 ExpandableListView 可折叠列表组件 Spinner 下拉列表选择框 Gallery 画廊  实现滑动操作的图片集 AdapterViewFlipper 实现图片轮播 StackView 堆叠视图 ProgressBar 进度条 SeekBar 拖动条 RatingBar  星级评分条 ViewAnimator View切换时表现出动画效果 ImageSwitcher