如何用一张图片来实现炫光方块

摘要

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;
        }
    }

});

摄像机调整

最后不要忘记了摄像机要切换为 3D 摄像机。
设置下投影方式，然后调节下 z 轴位置为 800。

结语

effect，材质的引入将使得游戏特效制作更加方便。

CocosCreator v2.1.2 的 3D 模型合批还不支持。DC 较高。
CocosCreator v2.1.3 和 v2.2.0 应该能解决这个问题。

工程源码在我的微信公众号回复关键词【炫光】即可获得

O(∩_∩)O~~

微信公众号

or v2.1.3 和 v2.2.0 应该能解决这个问题。

工程源码在我的微信公众号回复关键词【炫光】即可获得

O(∩_∩)O~~

微信公众号

[外链图片转存中…(img-gha05KPt-1569301137263)]