I’ve used following file to set the gradient on a node. The gradient is applied correctly the first time, but when I reopen the node, the background becomes white.
This is the code of ColorAssembler2D.ts file
import Logs from "./Logs";
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 _whetherHorizontal: boolean = false;
@property
public get whetherHorizontal() {
return this._whetherHorizontal;
}
public set whetherHorizontal(value) {
this._whetherHorizontal = value;
this._updateColors();
}
@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() {
try {
cc.director.once(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
}
catch (e) {
Logs.printException("Exception in ColorAssembler2D - onEnable", e);
}
}
onDisable() {
try {
cc.director.off(cc.Director.EVENT_AFTER_DRAW, this._updateColors, this);
if(this.node == null || this.node == undefined)
{
return;
}
// this.node['_renderFlag'] |= cc['RenderFlow'].FLAG_COLOR;
}
catch (e) {
Logs.printException("Exception in ColorAssembler2D - onDisable", e);
}
}
start() {
try {
this._updateColors();
}
catch (e) {
Logs.printException("Exception in ColorAssembler2D - start", e);
}
}
_updateColors() {
try {
const cmp = this.node.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;
const sp = this.node.getComponent(cc.Sprite);
if (sp != undefined)
{
/**
* In case of ballebazzi "Congratulations_You_Won_Popup" no sprite was dragged in Sprite Component of "Panel_Base" and "Panel_Stroke" node AND ColorAssembler2D script was added to the same node.
* Resulting in sf being null.
* Now if we try to 'insetBottom' or 'insetRight' of sf as done below, it throws an exception that cannot read properties of null.
* So instead of changing in the scene we added a null check for sf wherever it was used.
*/
const sf = sp.spriteFrame;
if (sp.type == cc.Sprite.Type.SIMPLE) {
if (this.whetherHorizontal) {
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
if (count%2 == 0) {
uintVerts[i] = (this.colors[0] || color)['_val'];
}
else {
uintVerts[i] = (this.colors[1] || color)['_val'];
}
count++;
}
}
else {
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
if (Math.floor(count/2) == 0) {
uintVerts[i] = (this.colors[0] || color)['_val'];
}
else {
uintVerts[i] = (this.colors[1] || color)['_val'];
}
count++;
}
}
}
else if (sp.type == cc.Sprite.Type.SLICED) {
if (this.whetherHorizontal) {
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
if (count%4 == 0) {
uintVerts[i] = (this.colors[0] || color)['_val'];
}
else if (count%4 == 1) {
let tempColor:cc.Color;
if(sf!=null && sf!=undefined)
{
tempColor = new cc.Color((this.colors[0].r * (this.node.width - sf.insetLeft) + this.colors[1].r * sf.insetLeft) / this.node.width, (this.colors[0].g * (this.node.width - sf.insetLeft) + this.colors[1].g * sf.insetLeft) / this.node.width, (this.colors[0].b * (this.node.width - sf.insetLeft) + this.colors[1].b * sf.insetLeft) / this.node.width, (this.colors[0].a * (this.node.width - sf.insetLeft) + this.colors[1].a * sf.insetLeft) / this.node.width);
uintVerts[i] = (tempColor || color)['_val'];
}
}
else if (count%4 == 2) {
let tempColor:cc.Color = new cc.Color();
if(sf!=null && sf!=undefined)
{
tempColor = new cc.Color((this.colors[0].r * sf.insetRight + this.colors[1].r * (this.node.width - sf.insetRight)) / this.node.width, (this.colors[0].g * sf.insetRight + this.colors[1].g * (this.node.width - sf.insetRight)) / this.node.width, (this.colors[0].b * sf.insetRight + this.colors[1].b * (this.node.width - sf.insetRight)) / this.node.width, (this.colors[0].a * sf.insetRight + this.colors[1].a * (this.node.width - sf.insetRight)) / this.node.width);
uintVerts[i] = (tempColor || color)['_val'];
}
}
else {
uintVerts[i] = (this.colors[1] || color)['_val'];
}
count++;
}
}
else {
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
if (Math.floor(count/4) == 0) {
uintVerts[i] = (this.colors[0] || color)['_val'];
}
else if (Math.floor(count/4) == 1) {
let tempColor:cc.Color;
if(sf!=null && sf!=undefined)
{
tempColor = new cc.Color((this.colors[0].r * (this.node.height - sf.insetBottom) + this.colors[1].r * sf.insetBottom) / this.node.height, (this.colors[0].g * (this.node.height - sf.insetBottom) + this.colors[1].g * sf.insetBottom) / this.node.height, (this.colors[0].b * (this.node.height - sf.insetBottom) + this.colors[1].b * sf.insetBottom) / this.node.height, (this.colors[0].a * (this.node.height - sf.insetBottom) + this.colors[1].a * sf.insetBottom) / this.node.height);
uintVerts[i] = (tempColor || color)['_val'];
}
}
else if (Math.floor(count/4) == 2) {
let tempColor:cc.Color = new cc.Color();
if(sf!=null && sf!=undefined)
{
tempColor = new cc.Color((this.colors[0].r * sf.insetTop + this.colors[1].r * (this.node.height - sf.insetTop)) / this.node.height, (this.colors[0].g * sf.insetTop + this.colors[1].g * (this.node.height - sf.insetTop)) / this.node.height, (this.colors[0].b * sf.insetTop + this.colors[1].b * (this.node.height - sf.insetTop)) / this.node.height, (this.colors[0].a * sf.insetTop + this.colors[1].a * (this.node.height - sf.insetTop)) / this.node.height);
uintVerts[i] = (tempColor || color)['_val'];
}
}
else {
uintVerts[i] = (this.colors[1] || color)['_val'];
}
count++;
}
}
}
}
const lb = this.node.getComponent(cc.Label);
if (lb != undefined) {
if (this.whetherHorizontal) {
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
if (count%2 == 0) {
uintVerts[i] = (this.colors[0] || color)['_val'];
}
else {
uintVerts[i] = (this.colors[1] || color)['_val'];
}
count++;
}
}
else {
for (let i = colorOffset, l = uintVerts.length; i < l; i += floatsPerVert) {
if (Math.floor(count/2) == 0) {
uintVerts[i] = (this.colors[0] || color)['_val'];
}
else {
uintVerts[i] = (this.colors[1] || color)['_val'];
}
count++;
}
}
}
}
catch (e) {
Logs.printException("Exception in ColorAssembler2D - _updateColors", e);
}
}
}
Can someone please help me with this issue? What could be the possible reasons behind getting this and how can I solve it??