生活随笔
收集整理的這篇文章主要介紹了
使用Graphics在鼠标点击画圆圈扩散效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
很久沒更新博客了,因?yàn)榭吹絼e的游戲中有今天要說的效果,所以就去稍微看了一下Cocos Creator里的Graphics組件,并且也實(shí)現(xiàn)了這個(gè)挺好玩的效果,就是在鼠標(biāo)點(diǎn)擊的位置畫一個(gè)填充好的圓圈并且實(shí)現(xiàn)擴(kuò)散效果,這并不是唯一實(shí)現(xiàn)這個(gè)效果的解決辦法,用動(dòng)畫同樣也可以實(shí)現(xiàn),然后廢話不多說了,直接開始。(因?yàn)椴粫?huì)弄gif圖就簡(jiǎn)單的截了個(gè)圖)如下圖所示是效果圖,
效果圖比較簡(jiǎn)陋,一會(huì)我會(huì)把代碼貼出來,代碼寫在一個(gè)腳本中并且在場(chǎng)景中創(chuàng)建一個(gè)空節(jié)點(diǎn),這個(gè)空節(jié)點(diǎn)位置、寬高和Canvas一樣,掛上graphics組件即可,腳本也直接掛到這個(gè)空節(jié)點(diǎn)上運(yùn)行在瀏覽器中就可以看到實(shí)際效果了。
//鼠標(biāo)點(diǎn)擊出現(xiàn)畫線圓圈擴(kuò)散
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請(qǐng)自行去官網(wǎng)上查閱,想了解更多的小伙伴也可以直接去Cocos Creator的范例集合中去看,我也是在那里研究整理出來的,想直接用的小伙伴直接代碼拷貝過去就可以用,我自己也測(cè)試過沒有問題。
總結(jié)
以上是生活随笔為你收集整理的使用Graphics在鼠标点击画圆圈扩散效果的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。