Cocos Creator 图片/文字的渐变色实现！

            <div id="content_views" class="htmledit_views">
                <p>刚入职，事情不是特别多，看到了之前一直在找的Cocos Creator的一些使用技巧，简做记录</p> 

目录

一、艺术字

二、渐变色

三、透明过渡特效

四、分享时间 

---

一、艺术字

Cocos Creator的艺术字只支持ASCII的顺序编码，就是说一组数据必须是连续的，因为它在创建艺术字体那边只有Start Char，后续的内容是根据ASCII表后推的。

创建艺术字体需要美工提供一组长宽相同的字符组，它的取值是根据单个Item的宽高进行的。

首先创建一个艺术字体 ，在资源管理器的任意位置右键，新建艺术数字配置，我创建的是名为artFont的艺术字。

把字体图片拖到前一张图的Raw Texture部分，它会自动锁定最小的Font Size（这与美工给提供的字符像素有关） ，我们新建一个Label，托入刚刚创建的艺术字就可以使用了。

我只做了这三个数字作为示例，实际上你可以写任何字符，用ASCII表的对应字符进行替代即可，不过因此也限制了所能够表达的字符数量是十分有限的。 

二、渐变色

渐变色部分的内容参考了大佬的github的内容，里面有蛮多东西的，地址：https://github.com/baiyuwubing/cocos-creator-examples

源码如下：

const { ccclass, property, executeInEditMode, requireComponent, menu } = cc._decorator;
 
@ccclass
@executeInEditMode
@requireComponent(cc.RenderComponent)
// @menu('i18n:MAIN_MENU.component.renderers/ColorAssembler2D-lamyoung.com')
export default class ColorAssembler2D extends cc.Component {
 
    @property
    private _colors: cc.Color[] = [];
    @property({ type: [cc.Color] })
    public get colors() {
        return this._colors;
    }
    public set colors(colors) {
        this._colors = colors;
        this._updateColors();
    }
 
    onEnable() {
        cc.director.once(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
    }
 
    onDisable() {
        cc.director.off(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
        this.node['_renderFlag'] |= cc['RenderFlow'].FLAG_COLOR;
    }
 
    private _updateColors() {
        const cmp = this.getComponent(cc.RenderComponent);
        if (!cmp) return;
        const _assembler = cmp['_assembler'];
        if (!(_assembler instanceof cc['Assembler2D'])) return;
        const uintVerts = _assembler._renderData.uintVDatas[0];
        if (!uintVerts) return;
        const color = this.node.color;
        const floatsPerVert = _assembler.floatsPerVert;
        const colorOffset = _assembler.colorOffset;
        let count = 0;
        for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
            uintVerts[i] = (this.colors[count++] || color)['_val'];
        }
    }
 
 
}

大佬的图文教程：https://mp.weixin.qq.com/s/8pMNeD78fBvF480xiGJCVQ

简单来讲就是用个数组来选择几个角的颜色，告诉Render我要把它染成这个样子，简单看下使用吧~

随便建一个Label或者是Sprite，把上面的代码复制一下保存，然后在结点当中引入这个代码，然后设置一下颜色的数量（可以自己调着试一试，还蛮好玩的），这里我需要上下颜色一致的渐变，所以设置了四个颜色数组两个颜色，结果见下：

 怎么样？是不是很好用？！！！感谢大佬~~

三、透明过渡特效

该部分内容参考了以下内容

http://ituuz.com/2019/07/19/%E9%80%8F%E6%98%8E%E6%B8%90%E5%8F%98%E8%BF%87%E6%B8%A12-0/

https://forum.cocos.org/t/creator-2-3-shader/88541

对Effect的编写有一个简单的了解，表示感谢。下面看具体代码：

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  
 
CCEffect %{
  techniques:
  - passes:
    - vert: vs
      frag: fs
      blendState:
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties:
        texture: { value: white }
        alphaThreshold: { value: 0.5 }
        time: { value: 0 }
}%
// properties里面的time是另外加上去的，后面有使用到这个变量
 
 
CCProgram vs %{
  precision highp float;
 
  #include <cc-global>
  #include <cc-local>
 
  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;
 
  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif
 
  void main () {
    vec4 pos = vec4(a_position, 1);
 
    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif
 
    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif
 
    v_color = a_color;
 
    gl_Position = pos;
  }
}%
 
 
CCProgram fs %{
  precision highp float;
  
  #include <alpha-test>
 
  in vec4 v_color;
 
  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
 
  // non-sampler类型声明要用EOB形式，就是下面这种
  // 如果不用这种形式编译器会报错，可以试试看加深理解
  uniform time {
    float time;
  };
  #endif
 
  
 
  void main () {
    vec4 o = vec4(1, 1, 1, 1);
 
    #if USE_TEXTURE
    o *= texture(texture, v_uv0);
      #if CC_USE_ALPHA_ATLAS_TEXTURE
      o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
      #endif
    #endif
 
    o *= v_color;
    ALPHA_TEST(o);
 
    gl_FragColor = o;
 
    // 新增代码
    #if USE_TEXTURE
    float temp = v_uv0.x - time;
    if (temp <= 0.0) {
      float temp2 = abs(temp);
      if (temp2 <= 0.2) {
        gl_FragColor.w = 1.0 - temp2/0.2;
      } else {
        gl_FragColor.w = 0.0;
      }
    } else {
      gl_FragColor.w = 1.0;
    }
    #endif
  }
}%

主要看三个地方，开头的properties、中间对time这个属性的EOB格式声明和最后的新增的渐变代码（新建特效Effect，把代码复制过去就行，我用的版本是Cocos Creator 2.3.2）。

新建一个材质，使用这种Effect，见下：

拖到一张图片上去使用这个material：

 然后我们建一个代码来看看效果：

 
const {ccclass, property} = cc._decorator;
 
@ccclass
export default class NewClass extends cc.Component {
 
    @property(cc.Sprite)
    pic: cc.Label = null;
    @property(cc.Button)
    refreshBtn: cc.Button = null;
 
    material = null;// 图片渲染材质
    time: number = 0;// 渲染计时
 
    start () {
        this.material = this.pic.getMaterial(0);// 获取材质
    }
 
    // 刷新一次
    refreshOnce() {
        this.refreshBtn.interactable = false;// 置不能点击，防止重复刷新
        this.schedule(this.myUpdate, 0, cc.macro.REPEAT_FOREVER, 0);// 调用myUpdate
    }
 
    // 刷新函数
    myUpdate() {
        this.time += 0.01;
        this.material.effect.setProperty("time", this.time);// 刷新图片
 
        if(this.time > 1.2) {// 具体的刷新时间可以自己调整
            this.unschedule(this.myUpdate);
            this.refreshBtn.interactable = true;// 可以重新点击刷新
 
            this.time = 0;// 重置时间
            this.material.effect.setProperty("time", this.time);// 重置图片
        }
    }
 
}

在页面的效果是这样（简单截了一下，没录动图）：

四、分享时间 

欢迎关注我们的公众号：落饼枫林，发送      CocosCreator篇1      获取完整工程代码哦~~

公众号图文链接（简版）：https://mp.weixin.qq.com/s/rmmbDnJiV7RIPyJHcq_n_A

有任何问题欢迎在公众号后台留言，我们会在第一时间与您进行交流探讨~