找了3年，圖文顏色漸變終於有人實現了！

支持 Sprite 和 Label！參數可調！擺地攤的時候學習一波～

效果預覽：

如何使用？

在 cc.Spirte 或 cc.Label 添加腳本 ColorAssembler2D 。

調整顏色 colors 參數即可。

每個點的對應位置如下：

如何實現的呢？

對於 cc.RenderComponent 都有一個 _assembler。

只要這個 _assembler 是繼承 cc.Assembler2D , 就有一個 updateColor 的方法。

只要依葫蘆畫瓢，修改一下頂點的顏色值就行了，參考代碼如下。

// 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'];
}

當然這個方法要在引擎渲染之後再修改纔有效。

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;
}

以上爲白玉無冰使用 Cocos Creator v2.3.3 關於 "圖片/文字 的漸變色實現" 的技術分享。如果對你有點幫助，歡迎分享給身邊的朋友。

轉載請保留文末二維碼和完整代碼獲取方式！

完整代碼(詳見readme): 

https://github.com/baiyuwubing

點擊“閱讀原文”查看精選導航

“在看”是最大的鼓勵▼