专栏首页Creator星球游戏开发社区新版ShaderHelper,终于支持 Creator 2.1.2 了!

新版ShaderHelper,终于支持 Creator 2.1.2 了!

之前有不少伙伴反馈 ShaderHelper 在 2.1.2 版本中不能工作,非常抱歉,让你们久等了!

ShaderHelper 组件在 2.0.x 版本中有不少伙伴在使用,其实这里要感谢「Colin」大神,我是在他的git开源版本基本上修改而来的;同时要感谢「大掌教」,ShaderHelper中集成了大多数Shader特效是在「大掌教」的仓库中搬运过来的。

这一次,我仍然做一名搬运工,将 Cocos Creator 2.1.2 范例合集中的 custom_material 案例认真研究了一下,重新编写了新版本的 ShaderHelper2 终于可以让 ShaderHelper 又活过来了!下面是 ShaderHelper2 完整组件代码:

let ShaderProperty = cc.Class({
    name: 'ShaderProperty',
    properties: {
        key: '',
        value: '',         
    }
});

cc.Class({
    extends: cc.Component,

    properties: {
        effect: cc.EffectAsset,   //effect资源
        speed: 0.01,              //控制动态Shader的time参数
        props: [ShaderProperty],  //shader参数
    },

    start () {
        if (!this.effect) {
            return;
        }

        //获取精灵组件
        let sprite = this.node.getComponent(cc.Sprite);
        if (!sprite) {
            return;    
        }

        //实例化一个材质对象
        let material = new cc.Material();
        //在材质对象上开启USE_TEXTURE定义
        material.define('USE_TEXTURE', true); 
        //为材质设置effect,也是就绑定Shader了
        material.effectAsset = this.effect;
        material.name = this.effect.name;

        //将材质绑定到精灵组件上,精灵可以绑定多个材质
        //这里我们替换0号默认材质
        sprite.setMaterial(0, material);

        //从精灵组件上获取材质,这步很重要,不然没效果
        this.material = sprite.getMaterial(0);

        //初始化参数
        this.time = 0;
        this.props.forEach(item => this.material.setProperty(item.key, item.value));
    },

    /**
     * 在update事件中更新材质参数
     * 不同的Shader这里可能需要重写
     */
    update () {

        if (!this.material || !this.speed) {
            return;
        }


        if (this.flag) {
            this.time += this.speed;
        } else {
            this.time -= this.speed;
        }

        if (this.time >= 1.2) {
            this.flag = 0;
        } else if (this.time <= -0.2 ) {
            this.flag = 1;
        }
        //更新Shader代码中的time参数
        this.material.setProperty('time', this.time);  
    },
});

由于比较仓促,ShaderHelper2 使用上还与老版本有所差异,同时支持的Shader特殊只有两个,也欢迎你向 ShaderHelper2 提交更多的 effect 特效文件!

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star),作者:张晓衡

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 狂热「小工」的9款Creator游戏源码及图文教程,等你来拿!

    他在 Cocos 论坛上公开了自己9款小游戏作品,完成度相当之高,是不可多得的Creator学习资源,下面是论坛链接地址:https://forum.cocos...

    张晓衡
  • Creator3D 打砖块子弹发射,以及摄像机平滑移动控制!

    前面一篇教程《Creator3D图文教程【打砖块】》,我们讲了打砖块游戏中的 3D 物体的场景布局、材质资源、物理刚体与碰撞组件,接下来本篇文章重点介绍“子弹的...

    张晓衡
  • 重磅!H5游戏接入App已经解决了,民间SDK将会崛起!

      《各种红包 App 最后都会整合游戏!App+游戏的变现模式分析》一文让晓衡有幸结识到了一位技术大佬「梦近在咫尺」,有时候真的是心想事成!大佬在第2天就写下...

    张晓衡
  • 面向对象版tab 栏切换案例

    梨涡浅笑
  • JavaScript 风格指南 [每日前端夜话(0x1C)]

    原文链接:https://github.com/ryanmcdermott/clean-code-javascript

    疯狂的技术宅
  • 学习React中ref的两个demo

    虚拟Dom虽然能够提升网页的性能, 但虚拟 DOM 是拿不到用户输入的。为了获取文本输入框的一些操作, 还是js原生的事件绑定机制最好用~

    zhaoolee
  • java的this关键字理解

    1、java提供了一个this关键字,this关键字总是指向调用该方法的对象。根据this出现位置的不同,this作为对象的默认引用有两种情形。 a)、构造器中...

    别先生
  • React组件方法中为什么要绑定this

    上例仅仅是一个组件类的定义,当在其他组件中调用或是使用ReactDOM.render( )方法将其渲染到界面上时会生成一个组件的实例,因为组件是可以复用的,面向...

    大史不说话
  • 这个问题你能答对吗?

    首先,还是给大家说声抱歉,由于微信限制,前两天抽奖的好友请求还没有全部通过验证,这两天都会通过并拉大家进抽奖群的,还请大家海涵。

    我的小碗汤
  • 关于 servlet 的这个问题,你能答对吗?

    今天首先来看个问题,用原生servlet实现的接口,大家看下控制台输出结果是什么?

    Java程序猿阿谷

扫码关注云+社区

领取腾讯云代金券