CocosCreator之KUOKUO带你利用Mask做些有趣的loading图

最新推荐文章于 2021-12-01 09:28:20 发布

大家好我是阔阔

最新推荐文章于 2021-12-01 09:28:20 发布

阅读量883

点赞数 1

分类专栏： CocosCreator之随笔系列文章标签： CocosCreator 游戏开发

本文链接：https://blog.csdn.net/kuokuo666/article/details/98988590

版权

CocosCreator之随笔系列专栏收录该内容

11 篇文章 0 订阅

订阅专栏

引擎

CocosCreator v2.x

遮罩

Mask 用于规定子节点可渲染的范围，带有 Mask 组件的节点会使用该节点的约束框（也就是属性检查器中 Node 组件的 Size 规定的范围）创建一个渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。

层级

在这里插入图片描述

我们看下遮罩组件这里，注意给节点尺寸Size
shape这个图片你可以任意的做，会做出多种多样的效果。
在这里插入图片描述
给出图片：
（眼神不好可看不见，我确实上传了shape图片）

脚本

旋转的脚本就简单了，父节点转，子节点反向转，就保证子节点不动了。

cc.Class({
    extends: cc.Component,

    properties: {
        mask: cc.Node
    },

    onLoad () {
        this.rotation = 0;
        this.speed = 100;
    },

    update (dt) {
        this.rotation += this.speed * dt;
        if (this.rotation > 360) this.rotation = 0;
        this.mask.rotation = this.rotation;
        this.mask.children[0].rotation = -this.rotation;
    },
});