Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets 修正边缘发光的效果 Sep 18, 2018
settings
snapshot
README.md Create README.md Aug 16, 2018
creator.d.ts init Aug 16, 2018
jsconfig.json init Aug 16, 2018
project.json init Aug 16, 2018

README.md

creator_2_0_material_demo

简介

使用Creator2.0的材质系统实现几个Shader,效果如下:

  • 正常效果(Sprite自带): 效果

  • 灰度效果(Sprite自带): 效果

  • 高亮叠加效果 效果

  • 雨水效果 效果

实现概述

修改Sprite对材质的默认支持

Sprite默认提供了两种材质效果,就是上面的正常效果,和灰度效果,个人觉得实现得有点局限性:比如我想实现一种效果(如上面的高亮),只能通过外部强制指定材质来实现,如果Sprite换了另一张纹理,或是Sprite同时有一个Animation组件用于播放序列帧,那么Sprite内部会强制切换回正常效果。

所以,我Hook了Sprite的实现,增加自定义材质的逻辑,代码在: SpriteHook

自定义材质类

继承自引擎的Material类,实现了一个CustomMaterial,这个材质类可以实现各种不同的效果。

Demo代码片段

高亮效果

{
    var name = 'overlay';
    var mat = this.spImage.getMaterial(name);
    if (!mat) {
        var CustomMaterial = require("CustomMaterial");
        mat = new CustomMaterial(name);
        this.spImage.setMaterial(name, mat);	
    }
    this.spImage.node.color = new cc.Color().fromHEX("#FBC00C")
    this.spImage.activateMaterial(name);
}

雨效果

// 雨珠效果
this.resetImage();

this._start = Date.now();
var name = 'rainheart';
var mat = this.spImage.getMaterial(name);
if (!mat) {
    var CustomMaterial = require("CustomMaterial");
    mat = new CustomMaterial(name, 
        [
            { name: 'texSize', type: renderer.PARAM_FLOAT2 },
            { name: 'iResolution', type: renderer.PARAM_FLOAT3 },
            { name: 'iTime', type: renderer.PARAM_FLOAT },
        ],
        [
            { name: 'HAS_HEART', value: false },
            { name: 'USE_POST_PROCESSING', value: true }
        ]);
    this.spImage.setMaterial(name, mat);
}
this.spImage.activateMaterial(name);
mat.texture.update({flipY: true});
var iResolution = new cc.Vec3(this.spImage.node.width, this.spImage.node.height, 0);
var texSize = new cc.Vec2(this.spImage.node.width, this.spImage.node.height);
mat.setParamValue("iResolution", iResolution);
mat.setParamValue("texSize", texSize);

增加更多的Shader效果

Shaders目录中只有两个,有兴趣的欢迎增加更多的效果:)

You can’t perform that action at this time.