@kkarum/framework 2.3.17

package/registry/FWRegistry.ts

@@ -0,0 +1,62 @@
+import { injectable } from 'inversify';
+
+@injectable()
+export abstract class FWRegistry implements FW.Registry {
+  /**
+   * bundle名字
+   */
+  abstract readonly bundleName: string;
+  /**
+   * 是否自动释放
+   */
+  readonly autoRelease?: boolean;
+  /**
+   * 场景名字
+   */
+  readonly sceneName?: string;
+  /**
+   * 依赖
+   */
+  readonly depend?: string[];
+  /**
+   * 逻辑
+   */
+  readonly logic?: FW.Newable<FW.Logic>;
+  /**
+   * 数据
+   */
+  readonly data?: FW.Newable<FW.Data>;
+  /**
+   * 资源配置
+   */
+  readonly config?: FW.Newable<FW.AssetConfig>;
+  /**
+   * socket发送者
+   */
+  readonly sender?: FW.Newable<FW.Sender>;
+  /**
+   * socket处理者
+   */
+  readonly handle?: FW.Newable<FW.Handle>;
+
+  register(): void {
+    FW.Framework.register.bind(FW.Framework)({
+      bundleName: this.bundleName,
+      logic: this.logic,
+      data: this.data,
+      config: this.config,
+      sender: this.sender,
+      handle: this.handle,
+    });
+  }
+  unRegister(): void {
+    FW.Framework.unRegister.bind(FW.Framework)({
+      bundleName: this.bundleName,
+      logic: this.logic,
+      data: this.data,
+      config: this.config,
+      sender: this.sender,
+      handle: this.handle,
+    });
+  }
+}

package/registry/FWRegistry.ts.meta

@@ -0,0 +1,10 @@
+{
+  "ver": "1.1.0",
+  "uuid": "5da2833a-dc4a-48c5-a865-cd79ab529ddc",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

package/registry.meta

@@ -0,0 +1,13 @@
+{
+  "ver": "1.1.3",
+  "uuid": "f339a6ec-8f57-4d08-beb3-9527709af63d",
+  "importer": "folder",
+  "isBundle": false,
+  "bundleName": "",
+  "priority": 1,
+  "compressionType": {},
+  "optimizeHotUpdate": {},
+  "inlineSpriteFrames": {},
+  "isRemoteBundle": {},
+  "subMetas": {}
+}

package/render/FWRenderAssembler.ts

@@ -0,0 +1,620 @@
+import { FWLodash } from '../utils/FWLodash';
+
+const { ccclass, property, executeInEditMode, menu } = cc._decorator;
+
+@ccclass('AssemblerLabelColorConfig')
+class AssemblerLabelColorConfig implements FW.AssemblerLabelColorConfig {
+  @property({ displayName: '颜色' })
+  color: cc.Color = cc.Color.WHITE;
+
+  @property({ type: cc.Float, min: 0, max: 1, displayName: '占比', slide: true })
+  percentages: number = 0;
+}
+
+@ccclass
+@executeInEditMode
+@menu('CustomComponent/FWRenderAssembler')
+export default class FWRenderAssembler extends cc.Component {
+  @property({ displayName: '文本自定义渐变色' })
+  enableLabelCustomColors: boolean = false;
+
+  @property
+  _gradientDirection: number = 0;
+  @property({
+    type: cc.Enum({ 从左到右: 0, 从上到下: 1 }),
+    displayName: '渐变方向',
+    visible() {
+      return this.enableLabelCustomColors;
+    },
+  })
+  get gradientDirection() {
+    return this._gradientDirection;
+  }
+
+  set gradientDirection(gradientDirection: number) {
+    this._gradientDirection = gradientDirection;
+    if (CC_EDITOR) {
+      this.adjustLabel();
+      this.onPropertyChanged();
+    }
+  }
+
+  @property
+  _config: AssemblerLabelColorConfig[] = [];
+
+  @property({
+    type: [AssemblerLabelColorConfig],
+    visible() {
+      return this.enableLabelCustomColors;
+    },
+    displayName: '颜色配置',
+  })
+  get config() {
+    return this._config;
+  }
+  set config(config: AssemblerLabelColorConfig[]) {
+    this._config = config;
+    if (CC_EDITOR) {
+      this.adjustLabel();
+      this.onPropertyChanged();
+    }
+  }
+
+  private _horizontalAlign: number;
+  private _verticalAlign: number;
+  private _originalRenderData: any = null;
+  private _originalUpdateRenderData: Function = null;
+  private _originalFillBuffers: Function = null;
+  private _isPatched: boolean = false;
+  private _colors: cc.Color[] = [];
+  private _percentages: number[] = [];
+  private _isOriginalDataSaved: boolean = false;
+  private _cachedProperties: any;
+
+  protected start(): void {
+    this.adjustLabel();
+    this.config.forEach((v) => {
+      this._colors.push(v.color);
+      this._percentages.push(v.percentages);
+    });
+
+    if (!CC_EDITOR) {
+      cc.director.on(cc.Director.EVENT_AFTER_DRAW, this.onUpdateAssembler, this);
+    } else {
+      this.node.on(cc.Node.EventType.SIZE_CHANGED, this.onRefreshEditor, this);
+      this.node.on(cc.Node.EventType.COLOR_CHANGED, this.onRefreshEditor, this);
+      this.node.on(cc.Node.EventType.ANCHOR_CHANGED, this.onRefreshEditor, this);
+      setTimeout(() => {
+        this.cacheLabelProperties();
+        this.onPropertyChanged();
+      });
+    }
+  }
+
+  onRefreshEditor() {
+    if (CC_EDITOR && this.enableLabelCustomColors) {
+      this._originalRenderData = null;
+      this._isOriginalDataSaved = false;
+      this.node.label['_assembler'] = null;
+      this.node.active = false;
+      this.node.active = true;
+      setTimeout(() => {
+        this.onPropertyChanged();
+      }, 30);
+    }
+  }
+
+  private refreshGradient(): void {
+    this._colors = [];
+    this._percentages = [];
+    this.config.forEach((v) => {
+      this._colors.push(v.color);
+      this._percentages.push(v.percentages);
+    });
+
+    this._isPatched = false;
+    this.onUpdateAssembler();
+  }
+
+  private cacheLabelProperties(): void {
+    const label = this.node.label;
+    if (!label) {
+      this._cachedProperties = null;
+      return;
+    }
+
+    this._cachedProperties = {
+      horizontalAlign: label.horizontalAlign,
+      verticalAlign: label.verticalAlign,
+      overflow: label.overflow,
+      enableWrap: label.enableWrapText,
+      fontFamily: label.fontFamily,
+      font: label.font ? label.font['_uuid'] : null,
+      underlineHeight: label.underlineHeight,
+      cacheMode: label.cacheMode,
+    };
+  }
+
+  private checkLabelPropertiesChanged(): boolean {
+    const label = this.node.label;
+    if (!label || !this._cachedProperties) {
+      return false;
+    }
+
+    const current = {
+      horizontalAlign: label.horizontalAlign,
+      verticalAlign: label.verticalAlign,
+      overflow: label.overflow,
+      enableWrap: label.enableWrapText,
+      underlineHeight: label.underlineHeight,
+      fontFamily: label.fontFamily,
+      cacheMode: label.cacheMode,
+      font: label.font ? label.font['_uuid'] : null,
+    };
+
+    const keys = Object.keys(current);
+    for (let key of keys) {
+      if (current[key] !== this._cachedProperties[key]) {
+        this._cachedProperties = current;
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  protected onPropertyChanged(): void {
+    if (CC_EDITOR && this.enableLabelCustomColors) {
+      this.restoreOriginalAssembler();
+      this.refreshGradient();
+    }
+  }
+
+  protected onDisable(): void {
+    this.restoreOriginalAssembler();
+  }
+
+  private adjustLabel(): void {
+    if (CC_EDITOR && !this.node.label) {
+      this.node.label = this.node.getComponent(cc.Label);
+    }
+    if (this.node.label) {
+      if (this.gradientDirection === 1) {
+        this.node.label.lineHeight = this.node.label.fontSize * 0.8;
+      }
+
+      if (!this._horizontalAlign) {
+        this._horizontalAlign = this.node.label.horizontalAlign;
+      }
+
+      if (!this._verticalAlign) {
+        this._verticalAlign = this.node.label.verticalAlign;
+      }
+    }
+  }
+
+  protected update(dt: number): void {
+    if (!CC_EDITOR) return;
+    if (this.checkLabelPropertiesChanged()) {
+      setTimeout(() => {
+        this.adjustLabel();
+        this.onRefreshEditor();
+      }, 100);
+    }
+  }
+
+  private onUpdateAssembler(): void {
+    if (this.enableLabelCustomColors && this.node.label) {
+      this.patchAssembler();
+    } else {
+      this.restoreOriginalAssembler();
+    }
+  }
+
+  private patchAssembler(): void {
+    const label = this.node.label;
+    if (!label || !label['_assembler'] || this._isPatched) return;
+
+    const assembler = label['_assembler'];
+
+    if (!this._isOriginalDataSaved) {
+      this._originalRenderData = FWLodash.cloneDeep(assembler);
+      this._isOriginalDataSaved = true;
+    }
+
+    const colorSegments = this.createColorSegments();
+    if (!colorSegments) return;
+
+    if (!this._originalUpdateRenderData) {
+      this._originalUpdateRenderData = assembler.updateRenderData;
+    }
+    if (!this._originalFillBuffers) {
+      this._originalFillBuffers = assembler.fillBuffers;
+    }
+
+    assembler.updateRenderData = () => {
+      if (this._originalUpdateRenderData) {
+        this._originalUpdateRenderData.call(assembler, label);
+      }
+      this.applyMultiColorGradient(assembler, colorSegments);
+    };
+
+    assembler.fillBuffers = (renderer: any, node: any) => {
+      this.fillGradientBuffers(renderer, node, assembler);
+    };
+    if (colorSegments.length > 2) {
+    }
+
+    this._isPatched = true;
+    assembler.updateRenderData();
+  }
+
+  private restoreOriginalAssembler(): void {
+    if (!this.node.label || !this._isOriginalDataSaved) return;
+
+    const label = this.node.label;
+    if (label['_assembler']) {
+      const assembler = label['_assembler'];
+
+      if (this._originalUpdateRenderData) {
+        assembler.updateRenderData = this._originalUpdateRenderData;
+      }
+      if (this._originalFillBuffers) {
+        assembler.fillBuffers = this._originalFillBuffers;
+      }
+
+      if (this._originalRenderData) {
+        label['_assembler'] = FWLodash.cloneDeep(this._originalRenderData);
+      }
+    }
+
+    this._isPatched = false;
+  }
+
+  private applyMultiColorGradient(
+    assembler: any,
+    colorSegments: FW.AssemblerLabelColorSegment[],
+  ): void {
+    const renderData = assembler._renderData;
+    const originalUintVData = renderData.uintVDatas[0];
+    const charsCount = originalUintVData.length / 20;
+    const segmentsCount = colorSegments.length - 1;
+    const useVertical = this.gradientDirection === 1;
+
+    const verticesPerChar = segmentsCount * 4;
+    const newVertexCount = charsCount * verticesPerChar;
+    const newUintVData = new Uint32Array(newVertexCount * 5);
+
+    let writeIndex = 0;
+
+    for (let c = 0; c < charsCount; c++) {
+      const base = c * 20;
+      const vertices = this.getCharacterVertices(originalUintVData, base);
+      const bounds = this.calculateBounds(vertices);
+
+      for (let s = 0; s < segmentsCount; s++) {
+        const segment = colorSegments[s];
+        const nextSegment = colorSegments[s + 1];
+
+        if (useVertical) {
+          this.createVerticalSegment(
+            newUintVData,
+            writeIndex,
+            vertices,
+            bounds,
+            segment,
+            nextSegment,
+          );
+        } else {
+          this.createHorizontalSegment(
+            newUintVData,
+            writeIndex,
+            vertices,
+            bounds,
+            segment,
+            nextSegment,
+          );
+        }
+        writeIndex += 4;
+      }
+    }
+
+    this.updateRenderData(renderData, newUintVData, charsCount, segmentsCount);
+  }
+
+  private getCharacterVertices(uintVData: Uint32Array, baseIndex: number): any[] {
+    const vertices = [];
+    for (let i = 0; i < 4; i++) {
+      const idx = baseIndex + i * 5;
+      vertices.push({
+        x: this.uintToFloat(uintVData[idx]),
+        y: this.uintToFloat(uintVData[idx + 1]),
+        u: this.uintToFloat(uintVData[idx + 2]),
+        v: this.uintToFloat(uintVData[idx + 3]),
+      });
+    }
+    return vertices;
+  }
+
+  private calculateBounds(vertices: any[]): any {
+    const xs = vertices.map((v) => v.x);
+    const ys = vertices.map((v) => v.y);
+    return {
+      minX: Math.min(...xs),
+      maxX: Math.max(...xs),
+      minY: Math.min(...ys),
+      maxY: Math.max(...ys),
+      width: Math.max(...xs) - Math.min(...xs),
+      height: Math.max(...ys) - Math.min(...ys),
+    };
+  }
+
+  private createHorizontalSegment(
+    newUintVData: Uint32Array,
+    writeIndex: number,
+    vertices: any[],
+    bounds: any,
+    segment: any,
+    nextSegment: any,
+  ): void {
+    const startX = bounds.minX + bounds.width * segment.position;
+    const endX = bounds.minX + bounds.width * nextSegment.position;
+    const startU = vertices[0].u + (vertices[1].u - vertices[0].u) * segment.position;
+    const endU = vertices[0].u + (vertices[1].u - vertices[0].u) * nextSegment.position;
+
+    this.setVertexData(
+      newUintVData,
+      writeIndex,
+      startX,
+      bounds.minY,
+      startU,
+      vertices[0].v,
+      segment.color._val,
+    );
+    this.setVertexData(
+      newUintVData,
+      writeIndex + 1,
+      endX,
+      bounds.minY,
+      endU,
+      vertices[1].v,
+      nextSegment.color._val,
+    );
+    this.setVertexData(
+      newUintVData,
+      writeIndex + 2,
+      startX,
+      bounds.maxY,
+      startU,
+      vertices[2].v,
+      segment.color._val,
+    );
+    this.setVertexData(
+      newUintVData,
+      writeIndex + 3,
+      endX,
+      bounds.maxY,
+      endU,
+      vertices[3].v,
+      nextSegment.color._val,
+    );
+  }
+
+  private createVerticalSegment(
+    newUintVData: Uint32Array,
+    writeIndex: number,
+    vertices: any[],
+    bounds: any,
+    segment: any,
+    nextSegment: any,
+  ): void {
+    const startY = bounds.minY + bounds.height * (1 - segment.position);
+    const endY = bounds.minY + bounds.height * (1 - nextSegment.position);
+
+    const startVL = vertices[0].v + (vertices[2].v - vertices[0].v) * (1 - segment.position);
+    const endVL = vertices[0].v + (vertices[2].v - vertices[0].v) * (1 - nextSegment.position);
+    const startVR = vertices[1].v + (vertices[3].v - vertices[1].v) * (1 - segment.position);
+    const endVR = vertices[1].v + (vertices[3].v - vertices[1].v) * (1 - nextSegment.position);
+
+    this.setVertexData(
+      newUintVData,
+      writeIndex,
+      bounds.minX,
+      startY,
+      vertices[0].u,
+      startVL,
+      segment.color._val,
+    );
+    this.setVertexData(
+      newUintVData,
+      writeIndex + 1,
+      bounds.maxX,
+      startY,
+      vertices[1].u,
+      startVR,
+      segment.color._val,
+    );
+    this.setVertexData(
+      newUintVData,
+      writeIndex + 2,
+      bounds.minX,
+      endY,
+      vertices[2].u,
+      endVL,
+      nextSegment.color._val,
+    );
+    this.setVertexData(
+      newUintVData,
+      writeIndex + 3,
+      bounds.maxX,
+      endY,
+      vertices[3].u,
+      endVR,
+      nextSegment.color._val,
+    );
+  }
+
+  private setVertexData(
+    data: Uint32Array,
+    index: number,
+    x: number,
+    y: number,
+    u: number,
+    v: number,
+    color: number,
+  ): void {
+    const base = index * 5;
+    data[base] = this.floatToUint(x);
+    data[base + 1] = this.floatToUint(y);
+    data[base + 2] = this.floatToUint(u);
+    data[base + 3] = this.floatToUint(v);
+    data[base + 4] = color;
+  }
+
+  private updateRenderData(
+    renderData: any,
+    newUintVData: Uint32Array,
+    charsCount: number,
+    segmentsCount: number,
+  ): void {
+    renderData.uintVDatas[0] = newUintVData;
+    renderData.iDatas[0] = this.createQuadMeshIndices(charsCount, segmentsCount);
+    renderData.vertexCount = newUintVData.length / 5;
+
+    const newVData = new Float32Array(renderData.vertexCount * 5);
+    for (let i = 0; i < newVData.length; i++) {
+      newVData[i] = this.uintToFloat(newUintVData[i]);
+    }
+    renderData.vDatas[0] = newVData;
+  }
+
+  private createQuadMeshIndices(charsCount: number, segmentsCount: number): Uint16Array {
+    const indicesPerChar = segmentsCount * 6;
+    const totalIndices = charsCount * indicesPerChar;
+    const indices = new Uint16Array(totalIndices);
+    let idx = 0;
+
+    for (let charIndex = 0; charIndex < charsCount; charIndex++) {
+      const vertexOffset = charIndex * segmentsCount * 4;
+
+      for (let segIndex = 0; segIndex < segmentsCount; segIndex++) {
+        const base = vertexOffset + segIndex * 4;
+        indices[idx++] = base;
+        indices[idx++] = base + 1;
+        indices[idx++] = base + 2;
+        indices[idx++] = base + 1;
+        indices[idx++] = base + 3;
+        indices[idx++] = base + 2;
+      }
+    }
+
+    return indices;
+  }
+
+  private getLabelBounds(uintVData: Uint32Array): any {
+    let minX = Number.MAX_VALUE,
+      maxX = -Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE,
+      maxY = -Number.MAX_VALUE;
+
+    for (let i = 0; i < uintVData.length; i += 5) {
+      const x = this.uintToFloat(uintVData[i]);
+      const y = this.uintToFloat(uintVData[i + 1]);
+      minX = Math.min(minX, x);
+      maxX = Math.max(maxX, x);
+      minY = Math.min(minY, y);
+      maxY = Math.max(maxY, y);
+    }
+
+    return {
+      minX,
+      maxX,
+      minY,
+      maxY,
+      width: Math.max(maxX - minX, 1),
+      height: Math.max(maxY - minY, 1),
+    };
+  }
+
+  private fillGradientBuffers(renderer: any, node: any, assembler: any): void {
+    const renderData = assembler._renderData;
+    if (!renderData?.vDatas?.[0] || !renderData?.iDatas?.[0]) return;
+
+    const buffer = node._buffer;
+    const offsetInfo = buffer.request(renderData.vertexCount, renderData.iDatas[0].length);
+
+    const vertexOffset = offsetInfo.byteOffset >> 2;
+    buffer._vData.set(renderData.vDatas[0], vertexOffset);
+
+    const ibuf = buffer._iData;
+    const vertexId = offsetInfo.vertexOffset;
+
+    renderData.iDatas[0].forEach((index, i) => {
+      ibuf[offsetInfo.indiceOffset + i] = vertexId + index;
+    });
+  }
+
+  private createColorSegments(): FW.AssemblerLabelColorSegment[] | null {
+    if (!this._colors || this._colors.length < 2) return null;
+
+    const percentages = this.calculatePercentages();
+    const segments: FW.AssemblerLabelColorSegment[] = [];
+
+    for (let i = 0; i < this._colors.length; i++) {
+      segments.push({
+        color: this.cloneColor(this._colors[i]),
+        position: percentages[i],
+      });
+    }
+
+    return segments;
+  }
+
+  private calculatePercentages(): number[] {
+    if (this._percentages?.length === this._colors.length) {
+      const percentages = [...this._percentages];
+      percentages[0] = 0;
+      percentages[percentages.length - 1] = 1;
+
+      for (let i = 1; i < percentages.length - 1; i++) {
+        if (percentages[i] <= percentages[i - 1]) {
+          percentages[i] = percentages[i - 1] + 0.001;
+        }
+        if (percentages[i] >= percentages[i + 1]) {
+          percentages[i] = (percentages[i - 1] + percentages[i + 1]) / 2;
+        }
+      }
+      return percentages;
+    }
+
+    return Array.from({ length: this._colors.length }, (_, i) => i / (this._colors.length - 1));
+  }
+
+  private cloneColor(color: cc.Color): cc.Color {
+    return color.clone ? color.clone() : cc.color(color.r, color.g, color.b, color.a);
+  }
+
+  private interpolateColor(color1: cc.Color, color2: cc.Color, progress: number): cc.Color {
+    const r = Math.round(color1.r + (color2.r - color1.r) * progress);
+    const g = Math.round(color1.g + (color2.g - color1.g) * progress);
+    const b = Math.round(color1.b + (color2.b - color1.b) * progress);
+    const a = Math.round(color1.a + (color2.a - color1.a) * progress);
+    return cc.color(r, g, b, a);
+  }
+
+  private uintToFloat(uintValue: number): number {
+    const buffer = new ArrayBuffer(4);
+    const uintView = new Uint32Array(buffer);
+    const floatView = new Float32Array(buffer);
+    uintView[0] = uintValue;
+    return floatView[0];
+  }
+
+  private floatToUint(floatValue: number): number {
+    const buffer = new ArrayBuffer(4);
+    const floatView = new Float32Array(buffer);
+    const uintView = new Uint32Array(buffer);
+    floatView[0] = floatValue;
+    return uintView[0];
+  }
+}

package/render/FWRenderAssembler.ts.meta

@@ -0,0 +1,10 @@
+{
+  "ver": "1.1.0",
+  "uuid": "040c0953-9ad0-4720-8e60-e3e15bd539d4",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}