Cocos Creator入职学习日记 |
您所在的位置：网站首页 › cocos自定义bmfont字体颜色 › Cocos Creator入职学习日记 |
Cocos Creator入职学习日记
|
刚入职，事情不是特别多，看到了之前一直在找的Cocos Creator的一些使用技巧，简做记录 目录 一、艺术字 二、渐变色 三、透明过渡特效 四、分享时间 一、艺术字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 #include 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 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 |
【本文地址】
今日新闻 |
推荐新闻 |