1000字范文 > Cocos Creator入职学习日记——篇1（KeyWord：艺术字渐变色透明过渡特效）

Cocos Creator入职学习日记——篇1（KeyWord：艺术字渐变色透明过渡特效）

时间：2019-01-04 19:22:22

刚入职，事情不是特别多，看到了之前一直在找的Cocos Creator的一些使用技巧，简做记录

一、艺术字

二、渐变色

三、透明过渡特效

四、分享时间

一、艺术字

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

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

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

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

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

二、渐变色

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

源码如下：

const { ccclass, property, executeInEditMode, requireComponent, menu } = cc._decorator;@ccclass@executeInEditMode@requireComponent(cc.RenderComponent)// @menu('i18n:ponent.renderers/ColorAssembler2D-')export default class ColorAssembler2D extends ponent {@propertyprivate _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./s/8pMNeD78fBvF480xiGJCVQ

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

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

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

三、透明过渡特效

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

//07/19/%E9%80%8F%E6%98%8E%E6%B8%90%E5%8F%98%E8%BF%87%E6%B8%A12-0/

/t/creator-2-3-shader/88541

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

// Copyright (c) - Xiamen Yaji Software Co., Ltd. CCEffect %{techniques:- passes:- vert: vsfrag: fsblendState:targets:- blend: truerasterizerState:cullMode: noneproperties: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_TEXTUREin vec2 a_uv0;out vec2 v_uv0;#endifvoid main () {vec4 pos = vec4(a_position, 1);#if CC_USE_MODELpos = cc_matViewProj * cc_matWorld * pos;#elsepos = cc_matViewProj * pos;#endif#if USE_TEXTUREv_uv0 = a_uv0;#endifv_color = a_color;gl_Position = pos;}}%CCProgram fs %{precision highp float;#include <alpha-test>in vec4 v_color;#if USE_TEXTUREin vec2 v_uv0;uniform sampler2D texture;// non-sampler类型声明要用EOB形式，就是下面这种// 如果不用这种形式编译器会报错，可以试试看加深理解uniform time {float time;};#endifvoid main () {vec4 o = vec4(1, 1, 1, 1);#if USE_TEXTUREo *= texture(texture, v_uv0);#if CC_USE_ALPHA_ATLAS_TEXTUREo.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;#endif#endifo *= v_color;ALPHA_TEST(o);gl_FragColor = o;// 新增代码#if USE_TEXTUREfloat 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;@ccclassexport default class NewClass extends ponent {@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);// 重置图片}}}

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