如何仅用一张图片就能实现【炫光方块】特效？

张晓衡

发布于 2019-09-25 16:35:46

1.2K0

发布于 2019-09-25 16:35:46

文章被收录于专栏：Creator星球游戏开发社区

摘要

CocosCreator 的节点上的颜色属性对 3D 模型是不起作用的，要想修改模型颜色就要对材质操作，而材质是基于 effect 渲染的。那么怎么改变模型颜色呢？

正文

看看效果

素材制作

打开 Photoshop 软件，我们新建一个 200 * 200 的画布。

然后填充黑色，加白色渐变的边。复制，旋转到四边。

好了，最终图片。

内置effect

让我们新建工程，场景。在资源管理器新建一个材质，选择 builtin-unlit （无需光照）并拖入素材。

Canvas 下新建一个 3D 物体 New Box。设置材质，绑上脚本。

改变颜色脚本

box.js

cc.Class({
    extends: cc.Component,

    properties: {
    },

    onLoad () {
        // 获得组件
        this.m = this.getComponent(cc.MeshRenderer);
        // 定义初始颜色
        this.color = {
            r: 100,
            g: 0,
            b: 0
        };
        // rgb颜色缓动
        cc.tween(this.color)
            .repeatForever(
                cc.tween()
                .to(0.8, {r: 255, g: 0, b: 0})
                .to(0.8, {r: 0, g: 100, b: 0})
                .to(0.8, {r: 0, g: 255, b: 0})
                .to(0.8, {r: 0, g: 0, b: 100})
                .to(0.8, {r: 0, g: 0, b: 255})
                .to(0.8, {r: 100, g: 0, b: 0})
            )
            .start();
    },

    setColor () {
        let color = cc.color(this.color.r, this.color.g, this.color.b, 255);
        // 修改材质的属性
        this.m.sharedMaterials[0].setProperty('diffuseColor', color);
    },

    update (dt) {
        this.setColor();
    }

});

好了，我们可以开心的把它拖成预制体了。

管理脚本

层级管理器，注意 boxMgr 空节点要转为 3D。

在 Canvas 节点上绑定脚本。通过脚本初始化很长的路，然后在 update 里模拟前进运动。main.js

cc.Class({
    extends: cc.Component,

    properties: {
        mgr: cc.Node,
        box: cc.Prefab
    },

    onLoad () {
        this.init();
    },

    init () {
        for (let i = -1; i <= 1; i++) {
            for (let j = -60; j <= 10; j++) {
                let b = cc.instantiate(this.box);
                this.mgr.addChild(b);
                b.x = 110 * i;
                b.z = 150 * j;
                b.y = -50;
            }
        }
    },

    update (dt) {
        this.mgr.z += 500 * dt;
        if (this.mgr.z > 300) {
            this.mgr.z = 0;
        }
    }

});