CocosCreator项目实战(15):动画与音效

文章目录

  • 一、动画
  • 二、音效


一、动画

  1. 需要新增加动画的地方有三处:1)新生成数字块时;2)数字块合并时;3)显示排行榜时。可参考cc.tween官方文档。
  2. 新生成数字块时。修改game.jsaddBlock()方法
    addBlock() {
		...
        if (locations.length == 0) {
			...
        } else {
			...
            cc.tween(block)
                .to(ANIMATION_DURATION, { scale: 0.75 })
                .to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
                .start();
			...
        }
    },
  1. 数字块合并时。修改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]) {
                // Merge
                cc.tween(this.blocks[destX][destY])
                    .to(ANIMATION_DURATION, { scale: 1.25 })
                    .to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
                    .start();
				...
            } else {
				...
            }
        };
		...
    },
  1. 显示排行榜时。修改showRanks()方法
    showRanks() {
        ...
        cc.tween(this.rankBox)
            .to(ANIMATION_DURATION, { scale: 1.05 })
            .to(ANIMATION_DURATION, { scale: 1 }, { easing: 'backOut' })
            .start();
    },
  1. 实际预览后,发现效果不佳会产生卡顿的感觉,修改将这三个动画封装为一个函数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();
    },
  1. 在微信开发者工具中预览可得。

CocosCreator项目实战(15):动画与音效_第1张图片


二、音效

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

CocosCreator项目实战(15):动画与音效_第2张图片

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

CocosCreator项目实战(15):动画与音效_第3张图片

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


你可能感兴趣的:(CocosCreator)