谁知道有什么办法让sprite能做渐变色

目前sprite只能在编辑面板上修改纯色，我现在需要给一个sprite设置渐变色，由上到下，由白变红（颜色可以通过代码动态修改），有没有办法做得到。

shader可以搞定 加个顶点颜色就行

还不会写creator的shader，有没有现成的，提供一个呗

首先创建这两个文件

D1CB50C3-F691-4AAE-9EF1-CBE63256C119686×616 58 KB

然后点击New Material这个文件,修改属性,选择你刚新建出的 New Effect 文件

69D213E1-FE28-4465-9685-1389BE54B15D620×740 78.1 KB

然后双击打开New Effect,替换 o *= v_color; 为红色标记处的代码

image740×838 49.2 KB

新建一个 node 修改属性为新建的 New Material,然后拖上来一个白色的图片

1C1E81B3-0A2E-4DB3-AFB5-3CC289FB281F616×1444 124 KB

效果就是下面这样

多谢指点,good!

mark…

多谢指点!

也可以试试直接修改顶点属性

你的解决方案更屌啊，不止Sprite，连文本都能做渐变，希望让官方把你的功能集成到编辑器里随时能用

shader也可以作用文本.
使用顶点属性的优势是不影响合批.

都已经没有ColorAssembler2D了

效果如下:修改顶点颜色实现,不会打断合批,只要是从cc.RenderComponent派生的都可以绑定;

image1478×333 39.4 KB

基于2.4.9实现,如果需要3.x的则前往这里https://forum.cocos.org/t/topic/146839?u=1015130701

源码:

const {ccclass, property, executeInEditMode} = cc._decorator;

/**

• 渐变顶点;

• 仅适用于简单(非九切)的非透明渐变;
  */
  @ccclass
  @executeInEditMode
  export default class VertexGradient extends cc.Component
  {
  @property({tooltip:“是否反向”})
  set invert(v)
  {
  if(this._bInvert != v)
  {
  this._bInvert = v;
  this.markColorDirty();
  }
  }

  get invert()
  {
  return this._bInvert;
  }

  @property
  _bInvert:boolean = false;

  @property({type:cc.Enum(GRID_TYPE)})
  set dir(v)
  {
  if(this._dir != v)
  {
  this._dir = v;
  this.markColorDirty();
  }
  }

  get dir()
  {
  return this._dir;
  }

  @property({type:cc.Enum(GRID_TYPE)})
  _dir:GRID_TYPE = GRID_TYPE.GRID_VERTICAL;

  @property(cc.Color)
  set downColor(value)
  {
  if(!this._downColor.equals(value))
  {
  this._downColor.set(value);
  this.markColorDirty();
  }
  }
  get downColor()
  {
  return this._downColor.clone();
  }
  @property(cc.Color)
  private _downColor:cc.Color = cc.Color.WHITE;

  @property(cc.Color)
  set upColor(value)
  {
  if(!this._upColor.equals(value))
  {
  this._upColor.set(value);
  this.markColorDirty();
  }
  }
  get upColor()
  {
  return this._upColor.clone();
  }
  @property(cc.Color)
  private _upColor:cc.Color = cc.Color.WHITE;

  onLoad()
  {
  let render = this.getComponent(cc.RenderComponent);
  render["_updateColor"] = this._updateColor.bind(this);
  this.markColorDirty();
  }

  markColorDirty()
  {
  let render = this.getComponent(cc.RenderComponent);
  render.node["_renderFlag"] |= (cc as any).RenderFlow.FLAG_COLOR | (cc as any).RenderFlow.FLAG_OPACITY;
  }

  _updateColor() {
  let colors = [];
  switch(this.dir)
  {
  case GRID_TYPE.GRID_VERTICAL:
  {
  colors = [this.upColor, this.upColor, this.downColor, this.downColor];
  }
  break;

       case GRID_TYPE.GRID_HORIZONTAL:
           {
               colors = [this.downColor, this.upColor, this.downColor, this.upColor];
           }
           break;
   }
  
   if(this.invert)
   {
       colors = colors.reverse();
   }
  
   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] = (colors[count++] || color)['_val'];
   }
   cmp.setVertsDirty();
  

  }
  }

因为GRID_TYPE在其他脚本中,这里为了保证脚本独立性,单独分离出来;
export enum GRID_TYPE

{

GRID_HORIZONTAL,

GRID_VERTICAL

}