一、动画

需要新增加动画的地方有三处：1）新生成数字块时；2）数字块合并时；3）显示排行榜时。可参考cc.tween官方文档。
新生成数字块时。修改game.js的addBlock()方法。

    addBlock() {...if (locations.length == 0) {...} else {...cc.tween(block).to(ANIMATION_DURATION, { scale: 0.75 }).to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' }).start();...}},

数字块合并时。修改moveDirection(direction)方法。

    moveDirection(direction) {...let move = (x, y, callback) => {...if (condition || this.data[x][y] == 0) {...} else if (this.data[destX][destY] == 0) {// Move...} else if (this.data[destX][destY] == this.data[x][y]) {// Mergecc.tween(this.blocks[destX][destY]).to(ANIMATION_DURATION, { scale: 1.25 }).to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' }).start();...} else {...}};...},

显示排行榜时。修改showRanks()方法。

    showRanks() {...cc.tween(this.rankBox).to(ANIMATION_DURATION, { scale: 1.05 }).to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' }).start();},

实际预览后，发现效果不佳会产生卡顿的感觉，修改将这三个动画封装为一个函数showAnimation(object)，并修改MOVE_DURATION的值。

const MOVE_DURATION = 0.02;...showAnimation(object) {cc.tween(object).to(0.06, { scale: 1.1 }).to(0.06, { scale: 1 }).start();},

在微信开发者工具中预览可得。

二、音效

下载点击音效，拷贝至assets\sound目录下，在restartButton下新建一个clickSound节点，添加AudioSource组件，将click.mp3拖至Clip栏。

在restartButton中将Button组件中的Click Event改为1，cc.Node选择clickSound节点，组件为cc.AudioSource，方法为play。

其他按钮同理，但实际预览过程中，返回按钮并不能听到声音。原因是声音事件还没有触发，相关box的active为false了，因此修改AudioSource相关代码。
在properties中添加clickSound，并与Canvas绑定，在按钮触发的相关方法中调用play()方法即可。

    properties: {...clickSound: cc.AudioSource,},...restart() {...this.clickSound.play();},

CocosCreator项目实战（15）：动画与音效相关推荐

CocosCreator项目实战（13）：功能-排行榜
文章目录一.主域设置二.子域设置三.其他相关设置参考Cocos接入微信小游戏官方文档,为了保护其社交关系链数据,微信小游戏增加了开放数据域的概念.只有在开放数据域中才能访问微信提供的wx.ge ...
项目实战No5 动画效果占位文字
一发布功能功能有动画效果,动态最好用代码实现标语代码实现建数组,填充按钮内容创建/添加按钮 // 屏幕尺寸 #define XMGScreenH [UIScreen mainScreen]. ...
CocosCreator项目实战（14）：功能-分享
文章目录一.主动分享二.被动分享一.主动分享主动分享即在游戏中:1)点击排行榜后点击分享按钮:2)游戏结束后点击分享按钮.首先在game.js的properties中添加两个按钮属性,并与Ca ...
Android项目实战（四）：ViewPager切换动画（3.0版本以上有效果）
原文:Android项目实战(四):ViewPager切换动画(3.0版本以上有效果) 学习内容来自"慕课网" 一般APP进去之后都会有几张图片来导航,这里就学习怎么在这张图片切换 ...
手把手带你用Python做数据分析和可视化项目实战，能写进简历的那种！（另送15个实战案例）...
最近几年,数据分析可真是太火了. 阿里.字节等互联网巨头基于大数据打造的商业模式获得巨大成功,使得"数据思维"."数据能力"迅速成为衡量职场人能力的核心指标,专 ...
视频教程-Cocos2d-x 3.x项目实战：星空大战（射击类游戏）-Cocos
Cocos2d-x 3.x项目实战:星空大战(射击类游戏) 东北大学计算机专业硕士研究生,欧瑞科技创始人&CEO,曾任国内著名软件公司项目经理,畅销书作者,企业IT内训讲师,CSDN学院专家讲 ...
Cocos2d-x 3.x项目实战：星空大战（射击类游戏）-李宁-专题视频课程
Cocos2d-x 3.x项目实战:星空大战(射击类游戏)-17683人已学习课程介绍本课程是<从零开始掌握Cocos2d-x 3.0(基于3.0正式版) >课程配套的 ...
备战金九银十，阿里P8师兄指导完整攻略（附：学习资料+面试宝典+项目实战笔记）
前言还剩下两个月就到了金九银十,一般来说,秋招的含金量明显是高于春招的. 那么如何准备即将到来的面试热潮呢?运筹帷幄之后,决胜千里之外! 坚决不打毫无准备的仗是小编的原则:不论是笔试还是面试都是有章 ...
java窗体添加背景图片_Java项目实战之实战之天天酷跑（四）：游戏主界面
接上文,本文将实现游戏主界面,功能如下: 移动的背景图片.动态的玩家.玩家的移动功能.五种障碍物持续出现.玩家和障碍物的碰撞.暂停.继续功能. 首先,看一下整体效果: 动图实在太大,几秒钟的 Gif ...

CocosCreator项目实战（15）：动画与音效

文章目录

一、动画

二、音效

CocosCreator项目实战（15）：动画与音效相关推荐

最新文章

热门文章