@kkarum/framework 2.3.28 → 2.3.29

package/component/WEColorAssembler.ts

@@ -0,0 +1,341 @@
+const { ccclass, property, executeInEditMode, disallowMultiple, menu } =
+  cc._decorator;
+
+/**
+ * WEColorAssembler - 顶点色渐变
+ * ============================================================
+ * 2.4.x 适配版：保留 3.8 版本的渐变计算方式，仅替换引擎渲染数据接入点。
+ *
+ * 行为：
+ *   - `colors` 数组中的颜色作为 N 个色标，沿 angle 方向等距铺开，按顶点位置投影插值
+ *     · 1 个色：所有顶点同色
+ *     · 2 个色：两端渐变
+ *     · N 个色：N stops 渐变（CSS linear-gradient 多色那种）
+ *   - `colors` 为空 → 全部顶点取白色
+ *   - 最终 alpha 乘以本节点到根的累乘 opacity
+ */
+@ccclass("FWColorAssembler")
+@menu("render/FWColorAssembler(顶点色渐变)")
+@disallowMultiple
+@executeInEditMode
+export class FWColorAssembler extends cc.Component {
+  @property
+  private _colors: cc.Color[] = [];
+
+  @property({
+    type: [cc.Color],
+    tooltip:
+      "颜色色标（按 angle 方向均匀铺开）：\n" +
+      "- 1 个 → 全部同色\n" +
+      "- 2 个 → 两端渐变\n" +
+      "- N 个 → N stops 渐变\n" +
+      "- 0 个 → 全部白色",
+  })
+  public get colors(): cc.Color[] {
+    return this._colors;
+  }
+  public set colors(v: cc.Color[]) {
+    this._colors = v || [];
+    this._markDirty();
+    this._updateColors();
+  }
+
+  @property
+  private _angle: number = 0;
+
+  @property({
+    type: cc.Float,
+    min: 0,
+    max: 360,
+    step: 1,
+    slide: true,
+    tooltip:
+      "渐变角度（度），对任意色数生效：\n" +
+      "    0° = 由上向下（默认）\n" +
+      "   90° = 由左向右\n" +
+      "  180° = 由下向上\n" +
+      "  270° = 由右向左",
+  })
+  public get angle(): number {
+    return this._angle;
+  }
+  public set angle(v: number) {
+    this._angle = v;
+    this._markDirty();
+    this._updateColors();
+  }
+
+  private _tmp: cc.Color = new cc.Color();
+  private _renderer: cc.RenderComponent = null;
+  private _projBuf: Float32Array = null;
+
+  private _hookedAssembler: WEAssembler = null;
+  private _origUpdateRenderData: Function = null;
+  private _origFillBuffers: Function = null;
+
+  private _convertBuffer: ArrayBuffer = new ArrayBuffer(4);
+  private _convertFloat: Float32Array = new Float32Array(this._convertBuffer);
+  private _convertUint: Uint32Array = new Uint32Array(this._convertBuffer);
+
+  protected onLoad(): void {
+    this._refreshRenderer();
+    this._hook();
+    this._updateColors();
+  }
+
+  protected onEnable(): void {
+    this._refreshRenderer();
+    this._hook();
+    this._markDirty();
+    this._updateColors();
+  }
+
+  protected onDisable(): void {
+    this._unhook();
+    this._restoreDefaultColor();
+  }
+
+  protected onDestroy(): void {
+    this._unhook();
+    this._renderer = null;
+    this._projBuf = null;
+  }
+
+  protected update(): void {
+    this._refreshRenderer();
+    this._hook();
+    this._updateColors();
+  }
+
+  protected onFocusInEditor(): void {
+    this._updateColors();
+  }
+
+  protected onLostFocusInEditor(): void {
+    this._updateColors();
+  }
+
+  public setGradient(angleDeg: number, ...stops: cc.Color[]): void {
+    this._angle = angleDeg;
+    this._colors = stops || [];
+    this._markDirty();
+    this._updateColors();
+  }
+
+  public refresh(): void {
+    this._markDirty();
+    this._updateColors();
+  }
+
+  public getEffectiveOpacity(): number {
+    let alpha = 255;
+    let node: cc.Node = this.node;
+    while (node) {
+      alpha = (alpha * node.opacity) / 255;
+      node = node.parent;
+    }
+    return Math.round(alpha);
+  }
+
+  private _refreshRenderer(): void {
+    const renderer = this.getComponent(cc.RenderComponent);
+    if (renderer === this._renderer) return;
+
+    this._unhook();
+    this._renderer = renderer;
+  }
+
+  private _hook(): void {
+    const renderer = this._renderer;
+    const assembler = renderer && ((renderer as any)._assembler as WEAssembler);
+    if (!assembler || assembler === this._hookedAssembler) return;
+
+    this._unhook();
+
+    this._origUpdateRenderData = assembler.updateRenderData;
+    this._origFillBuffers = assembler.fillBuffers;
+
+    const self = this;
+    assembler.updateRenderData = function (comp?: cc.RenderComponent) {
+      if (self._origUpdateRenderData) {
+        self._origUpdateRenderData.call(this, comp || renderer);
+      }
+      if (self.enabled) self._updateColors();
+    };
+
+    assembler.fillBuffers = function (
+      comp: cc.RenderComponent,
+      rendererNode: cc.Node,
+    ) {
+      if (self.enabled) self._updateColors();
+      if (self._origFillBuffers) {
+        return self._origFillBuffers.call(this, comp, rendererNode);
+      }
+    };
+
+    this._hookedAssembler = assembler;
+  }
+
+  private _unhook(): void {
+    const assembler = this._hookedAssembler;
+    if (!assembler) return;
+
+    if (this._origUpdateRenderData) {
+      assembler.updateRenderData = this._origUpdateRenderData;
+    }
+    if (this._origFillBuffers) {
+      assembler.fillBuffers = this._origFillBuffers;
+    }
+
+    this._hookedAssembler = null;
+    this._origUpdateRenderData = null;
+    this._origFillBuffers = null;
+  }
+
+  private _markDirty(): void {
+    const renderer = this._renderer || this.getComponent(cc.RenderComponent);
+    if (renderer && renderer.setVertsDirty) {
+      renderer.setVertsDirty();
+    }
+  }
+
+  private _restoreDefaultColor(): void {
+    const renderer = this._renderer || this.getComponent(cc.RenderComponent);
+    if (!renderer) return;
+
+    if (renderer._updateColor) {
+      renderer._updateColor();
+    }
+    if (renderer.setVertsDirty) {
+      renderer.setVertsDirty();
+    }
+  }
+
+  private _updateColors(): void {
+    const renderer = this._renderer || this.getComponent(cc.RenderComponent);
+    if (!renderer) return;
+
+    const assembler = (renderer as any)._assembler as WEAssembler;
+    const renderData = this._getRenderData(assembler, renderer);
+    const vData = renderData && renderData.vDatas && renderData.vDatas[0];
+    const uintVData =
+      renderData && renderData.uintVDatas && renderData.uintVDatas[0];
+    if (!renderData || (!vData && !uintVData)) return;
+
+    const floatStride = 5;
+    const vertexCount =
+      renderData.vertexCount || (vData || uintVData).length / floatStride;
+    if (vertexCount <= 0) return;
+
+    const nodeColor = this.node.color || cc.Color.WHITE;
+    const alphaScale = this.getEffectiveOpacity() / 255;
+    const len = this._colors.length;
+
+    let projMin = 0;
+    let projRange = 1;
+    let projBuf: Float32Array = null;
+
+    if (len >= 2) {
+      const rad = (this._angle * Math.PI) / 180;
+      const dx = Math.sin(rad);
+      const dy = -Math.cos(rad);
+
+      if (!this._projBuf || this._projBuf.length < vertexCount) {
+        this._projBuf = new Float32Array(vertexCount);
+      }
+      projBuf = this._projBuf;
+
+      let pMin = Infinity;
+      let pMax = -Infinity;
+      for (let i = 0; i < vertexCount; i++) {
+        const base = i * floatStride;
+        const x = this._readFloat(vData, uintVData, base);
+        const y = this._readFloat(vData, uintVData, base + 1);
+        const p = x * dx + y * dy;
+        projBuf[i] = p;
+        if (p < pMin) pMin = p;
+        if (p > pMax) pMax = p;
+      }
+      projMin = pMin;
+      projRange = Math.max(pMax - pMin, 1e-4);
+    }
+
+    const out = this._tmp;
+    const lastStop = len - 1;
+    for (let i = 0; i < vertexCount; i++) {
+      if (len === 0) {
+        cc.Color.set(out, 255, 255, 255, 255);
+      } else if (len === 1) {
+        const c = this._colors[0] || nodeColor;
+        cc.Color.set(out, c.r, c.g, c.b, c.a);
+      } else {
+        const t = (projBuf[i] - projMin) / projRange;
+        const f = t * lastStop;
+        const i0 = Math.min(Math.floor(f), lastStop - 1);
+        const alpha = f - i0;
+        const c0 = this._colors[i0] || nodeColor;
+        const c1 = this._colors[i0 + 1] || nodeColor;
+        cc.Color.set(
+          out,
+          Math.round(c0.r + (c1.r - c0.r) * alpha),
+          Math.round(c0.g + (c1.g - c0.g) * alpha),
+          Math.round(c0.b + (c1.b - c0.b) * alpha),
+          Math.round(c0.a + (c1.a - c0.a) * alpha),
+        );
+      }
+
+      cc.Color.set(out, out.r, out.g, out.b, Math.round(out.a * alphaScale));
+      this._writeColor(vData, uintVData, i * floatStride + 4, out);
+    }
+
+    renderData.vertDirty = true;
+    renderer._vertsDirty = true;
+  }
+
+  private _getRenderData(
+    assembler: WEAssembler,
+    renderer: cc.RenderComponent,
+  ): WEAssemblerRenderData {
+    if (assembler && assembler._renderData) return assembler._renderData;
+    return (renderer as any)._renderData as WEAssemblerRenderData;
+  }
+
+  private _readFloat(
+    vData: Float32Array,
+    uintVData: Uint32Array,
+    index: number,
+  ): number {
+    if (vData) return vData[index];
+    return this._uintToFloat(uintVData[index]);
+  }
+
+  private _writeColor(
+    vData: Float32Array,
+    uintVData: Uint32Array,
+    index: number,
+    color: cc.Color,
+  ): void {
+    const value = (color as any)._val;
+    if (uintVData) uintVData[index] = value;
+    if (vData) vData[index] = this._uintToFloat(value);
+  }
+
+  private _uintToFloat(value: number): number {
+    this._convertUint[0] = value;
+    return this._convertFloat[0];
+  }
+}
+
+interface WEAssembler {
+  _renderData?: WEAssemblerRenderData;
+  updateRenderData?: Function;
+  fillBuffers?: Function;
+}
+
+interface WEAssemblerRenderData {
+  vDatas?: Float32Array[];
+  uintVDatas?: Uint32Array[];
+  iDatas?: Uint16Array[];
+  vertexCount?: number;
+  vertDirty?: boolean;
+}

package/component/WEColorAssembler.ts.meta

@@ -0,0 +1,10 @@
+{
+  "ver": "1.1.0",
+  "uuid": "b824b6eb-5242-4f6c-8fce-41b5acd533ee",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkarum/framework",
-  "version": "2.3.28",
+  "version": "2.3.29",
   "description": "cocoscreator 2.x mvc framework",
   "main": "index.js",
   "keywords": [