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

2019 年 10 月 7 日
筆記

摘要

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 应该能解决这个问题。

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