前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何仅用一张图片就能实现【炫光方块】特效?

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

作者头像
张晓衡
发布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

代码语言:javascript
复制
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

代码语言:javascript
复制
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 应该能解决这个问题。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Creator星球游戏开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 正文
    • 看看效果
      • 素材制作
        • 内置effect
          • 改变颜色脚本
            • 管理脚本
              • 摄像机调整
              • 结语
              相关产品与服务
              图像处理
              图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档