使用Graphics在鼠标点击画圆圈扩散效果

很久没更新博客了，因为看到别的游戏中有今天要说的效果，所以就去稍微看了一下Cocos Creator里的Graphics组件，并且也实现了这个挺好玩的效果，就是在鼠标点击的位置画一个填充好的圆圈并且实现扩散效果，这并不是唯一实现这个效果的解决办法，用动画同样也可以实现，然后废话不多说了，直接开始。（因为不会弄gif图就简单的截了个图）如下图所示是效果图，

效果图比较简陋，一会我会把代码贴出来，代码写在一个脚本中并且在场景中创建一个空节点，这个空节点位置、宽高和Canvas一样，挂上graphics组件即可，脚本也直接挂到这个空节点上运行在浏览器中就可以看到实际效果了。


//鼠标点击出现画线圆圈扩散
cc.Class({extends: cc.Component,properties: {},onLoad () {if(cc.director.setClearColor){cc.director.setClearColor(cc.hexToColor('#d1f1ff'));}this.ctx=this.node.getComponent(cc.Graphics);this.ripples=[];this.mouse={x:0,y:0};this.onClick();},onClick(){const self=this;self.node.on(cc.Node.EventType.TOUCH_START,function (event) {self.mouse=event.touch.getLocation();self.addRipples();},self);},start () {},update(){let ripples=this.ripples;for(let index=0;index<ripples.length;index++){var ripple=ripples[index];ripple.reactivity+=10;ripple.fade-=0.05;if(ripple.fade<=0.0){ripples.splice(index,1);}}this.render();},addRipples(){if(this.ripples.length==0){this.ripples.push({x:this.mouse.x,y:this.mouse.y,reactivity:0,fade:1.0})}},render(){let graphics=this.ctx;graphics.clear();let ripples=this.ripples;for(var index = 0; index < ripples.length; index++) {var ripple = ripples[index];let fillColor = cc.hexToColor('#AAA5A5');fillColor.a = ripple.fade * 255;graphics.fillColor = fillColor;graphics.circle(ripple.x, ripple.y, ripple.reactivity);graphics.fill();}},onDisable() {if (cc.director.setClearColor) {cc.director.setClearColor( cc.Color.BLACK );}},
});

代码不做任何解释，不懂的API请自行去官网上查阅，想了解更多的小伙伴也可以直接去Cocos Creator的范例集合中去看，我也是在那里研究整理出来的，想直接用的小伙伴直接代码拷贝过去就可以用，我自己也测试过没有问题。

使用Graphics在鼠标点击画圆圈扩散效果相关推荐

基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
JS实现鼠标点击处烟花爆炸效果
JS实现鼠标点击处烟花爆炸效果(面向对象版) 程序由网上开源"JS实现放烟花效果"代码改编,实现在鼠标点击处出现烟花爆炸效果. 改编前源码link https://github. ...
Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）
很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...
用鼠标点击画一个五边形
在窗口中点击5个点来画一个五边形 from graphics import *def main():win = GraphWin("Draw a polygon",300,300) ...
鼠标点击时隐藏java代码,js实现点击展开隐藏效果（实例代码）
本章给大家介绍用js事件冒泡实现鼠标点击显示提示框效果(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 先看看效果图: 代码实例: 事件冒泡-提示框 button { wi ...
博客园美化（3）博客园鼠标点击特效代码
博客园鼠标点击特效代码样式效果鼠标点击出现烟花和"富强", "民主", "文明", "和谐"... 特效使用方法 ...
php网页点击特效,网站鼠标点击炫酷特效分享
今天给大家分享的是一个非常有意思的网页鼠标点击特效,具体效果如下: 总得来说这个特效还是非常棒的,颜色搭配清新,效果也比较炫酷,喜欢的小伙伴可以在下方进行下载. 演示地址:http://img.hel ...
使用canvas在图片上画圆圈，并可点击圆圈在圆圈下方画垂直线（适配移动端）
一.UI 二.实现 <div class="carBrightSpot"><div class="block-swi ...
arcgis for js 画圆圈(会跟地图一起缩小)，而不是打点然后加半径的圆点(不会缩小)，制作打卡功能选点。可以点击地图自动画圆圈
先贴图找了好久的gis画圆方法,终于实现了,之前都是画的圆点,加上半径,会随着地图放大. 我的这个圆圈是贴地的不会放大xixi~ 网上找的画圆圈都是3.X的版本,在我这里实现不了. 我是用的arcg ...
在UITouch事件中画圆圈-iOS8 Swift基础教程
这篇教程主要内容展示如何利用Core Graphics Framework画圆圈,当用户点击屏幕时随机生成不同大小的圆,这篇教程在Xcode6和iOS8下编译通过. 打开Xcode,新建项目选择Sin ...

使用Graphics在鼠标点击画圆圈扩散效果

使用Graphics在鼠标点击画圆圈扩散效果相关推荐

最新文章

热门文章