fix bmfont richText & remove uiComponent (cocos#38)

* fix bmfont uv

* fix richText & remove ui Component

cocos/2d/assembler/label/bmfontUtils.ts

@@ -100,6 +100,7 @@ export const bmfontUtils = {
 
             _comp.actualFontSize = _fontSize;
             _uiTrans.setContentSize(_contentSize);
+            this.updateUVs(comp);
 
             _comp.renderData!.vertDirty = false;
             // fix bmfont run updateRenderData twice bug
@@ -116,6 +117,20 @@ export const bmfontUtils = {
         }
     },
 
+    updateUVs (label: Label) {
+        const renderData = label.renderData!;
+        const vData = renderData.chunk.vb;
+        const vertexCount = renderData.vertexCount;
+        const dataList = renderData.data;
+        let vertexOffset = 3;
+        for (let i = 0; i < vertexCount; i++) {
+            const vert = dataList[i];
+            vData[vertexOffset] = vert.u;
+            vData[vertexOffset + 1] = vert.v;
+            vertexOffset += 9;
+        }
+    },
+
     _updateFontScale () {
         _bmfontScale = _fontSize / _originFontSize;
     },

cocos/2d/components/rich-text.ts

@@ -42,10 +42,9 @@ import { Node } from '../../core/scene-graph';
 import { CacheMode, HorizontalTextAlignment, Label, VerticalTextAlignment } from './label';
 import { LabelOutline } from './label-outline';
 import { Sprite } from './sprite';
-import { UIComponent, UITransform } from '../framework';
+import { UITransform } from '../framework';
 import { legacyCC } from '../../core/global-exports';
 import { Component } from '../../core/components';
-import assetManager from '../../core/asset-manager/asset-manager';
 import { CCObject } from '../../core';
 import { NodeEventType } from '../../core/scene-graph/node-event';
 
@@ -152,7 +151,7 @@ interface ISegment {
 @executionOrder(110)
 @menu('2D/RichText')
 @executeInEditMode
-export class RichText extends UIComponent {
+export class RichText extends Component {
     /**
      * @en
      * Content string of RichText.

cocos/2d/components/ui-mesh-renderer.ts

@@ -31,10 +31,11 @@
 
 import { ccclass, help, executionOrder, menu } from 'cc.decorator';
 import { RenderableComponent } from '../../core/components/renderable-component';
-import { UIComponent } from '../framework/ui-component';
 import { RenderPriority } from '../../core/pipeline/define';
 import { IBatcher } from '../renderer/i-batcher';
 import { scene } from '../../core/renderer';
+import { Stage } from '../renderer/stencil-manager';
+import { Component } from '../../core/components';
 
 /**
  * @en
@@ -50,7 +51,7 @@ import { scene } from '../../core/renderer';
 @help('i18n:cc.UIMeshRenderer')
 @executionOrder(110)
 @menu('UI/UIMeshRenderer')
-export class UIMeshRenderer extends UIComponent {
+export class UIMeshRenderer extends Component {
     private _models: scene.Model[] | null = null;
 
     public get modelComponent () {
@@ -59,6 +60,10 @@ export class UIMeshRenderer extends UIComponent {
 
     private _modelComponent: RenderableComponent | null = null;
 
+    public __preload () {
+        this.node._uiProps.uiComp = this;
+    }
+
     public onLoad () {
         if (!this.node._uiProps.uiTransformComp) {
             this.node.addComponent('cc.UITransform');
@@ -73,16 +78,10 @@ export class UIMeshRenderer extends UIComponent {
         this._models = this._modelComponent._collectModels();
     }
 
-    public onEnable () {
-        super.onEnable();
-    }
-
-    public onDisable () {
-        super.onDisable();
-    }
-
     public onDestroy () {
-        super.onDestroy();
+        if (this.node._uiProps.uiComp === this) {
+            this.node._uiProps.uiComp = null;
+        }
         this._modelComponent = this.getComponent('cc.RenderableComponent') as RenderableComponent;
         if (!this._modelComponent) {
             return;
@@ -92,6 +91,14 @@ export class UIMeshRenderer extends UIComponent {
         this._models = null;
     }
 
+    /**
+     * @en Render data submission procedure, it update and assemble the render data to 2D data buffers before all children submission process.
+     * Usually called each frame when the ui flow assemble all render data to geometry buffers.
+     * Don't call it unless you know what you are doing.
+     * @zh 渲染数据组装程序，这个方法会在所有子节点数据组装之前更新并组装当前组件的渲染数据到 UI 的顶点数据缓冲区中。
+     * 一般在 UI 渲染流程中调用，用于组装所有的渲染数据到顶点数据缓冲区。
+     * 注意：不要手动调用该函数，除非你理解整个流程。
+     */
     public updateAssembler (render: IBatcher) {
         if (this._models) {
             // @ts-expect-error: UIMeshRenderer do not attachToScene
@@ -105,6 +112,17 @@ export class UIMeshRenderer extends UIComponent {
         return false;
     }
 
+    /**
+     * @en Post render data submission procedure, it's executed after assembler updated for all children.
+     * It may assemble some extra render data to the geometry buffers, or it may only change some render states.
+     * Don't call it unless you know what you are doing.
+     * @zh 后置渲染数据组装程序，它会在所有子节点的渲染数据组装完成后被调用。
+     * 它可能会组装额外的渲染数据到顶点数据缓冲区，也可能只是重置一些渲染状态。
+     * 注意：不要手动调用该函数，除非你理解整个流程。
+     */
+    public postUpdateAssembler (render: IBatcher) {
+    }
+
     public update () {
         this._fitUIRenderQueue();
     }
@@ -132,4 +150,16 @@ export class UIMeshRenderer extends UIComponent {
             }
         }
     }
+
+    // interface
+    public markForUpdateRenderData (enable = true) {
+    }
+
+    public stencilStage : Stage = Stage.DISABLED;
+
+    public setNodeDirty () {
+    }
+
+    public setTextureDirty () {
+    }
 }

cocos/2d/renderer/batcher-2d.ts

@@ -30,7 +30,7 @@ import { JSB } from 'internal:constants';
 import { Camera, Model } from 'cocos/core/renderer/scene';
 import type { UIStaticBatch } from '../components/ui-static-batch';
 import { Material } from '../../core/assets/material';
-import { RenderRoot2D, Renderable2D, UIComponent } from '../framework';
+import { RenderRoot2D, Renderable2D } from '../framework';
 import { Texture, Device, Attribute, Sampler, DescriptorSetInfo, Buffer,
     BufferInfo, BufferUsageBit, MemoryUsageBit, DescriptorSet } from '../../core/gfx';
 import { Pool } from '../../core/memop';
@@ -50,6 +50,7 @@ import { StaticVBAccessor } from './static-vb-accessor';
 import { assertIsTrue } from '../../core/data/utils/asserts';
 import { getAttributeStride, vfmtPosUvColor } from './vertex-format';
 import { updateOpacity } from '../assembler/utils';
+import { UIMeshRenderer } from '../components/ui-mesh-renderer';
 
 const _dsInfo = new DescriptorSetInfo(null!);
 const m4_1 = new Mat4();
@@ -445,7 +446,7 @@ export class Batcher2D implements IBatcher {
      * @param model - 提交渲染的 model 数据。
      * @param mat - 提交渲染的材质。
      */
-    public commitModel (comp: UIComponent | Renderable2D, model: Model | null, mat: Material | null) {
+    public commitModel (comp: UIMeshRenderer | Renderable2D, model: Model | null, mat: Material | null) {
         // if the last comp is spriteComp, previous comps should be batched.
         if (this._currMaterial !== this._emptyMaterial) {
             this.autoMergeBatches(this._currComponent!);
@@ -661,7 +662,7 @@ export class Batcher2D implements IBatcher {
         let opacity = parentOpacity;
         // TODO Always cascade ui property's local opacity before remove it
         if (uiProps.colorDirty) {
-            const selfOpacity = render ? render.color.a / 255 : 1;
+            const selfOpacity = render && render.color ? render.color.a / 255 : 1;
             this._pOpacity = opacity *= selfOpacity * uiProps.localOpacity;
             // TODO Set opacity to ui property's opacity before remove it
             // @ts-expect-error temporary force set, will be removed with ui property's opacity

cocos/2d/renderer/i-batcher.ts

@@ -6,9 +6,10 @@ import { Camera } from '../../core/renderer/scene/camera';
 import { Model } from '../../core/renderer/scene/model';
 import { SpriteFrame } from '../assets/sprite-frame';
 import { UIStaticBatch } from '../components/ui-static-batch';
-import { Renderable2D, RenderRoot2D, UIComponent } from '../framework';
+import { Renderable2D, RenderRoot2D } from '../framework';
 import { StaticVBAccessor } from './static-vb-accessor';
 import { DrawBatch2D } from './draw-batch';
+import { UIMeshRenderer } from '../components/ui-mesh-renderer';
 
 export interface IBatcher {
     currBufferAccessor: StaticVBAccessor;
@@ -37,7 +38,7 @@ export interface IBatcher {
     switchBufferAccessor (attributes?: Attribute[]): StaticVBAccessor;
 
     commitComp (comp: Renderable2D, frame: TextureBase | SpriteFrame | null, assembler: any, transform: Node | null);
-    commitModel (comp: UIComponent | Renderable2D, model: Model | null, mat: Material | null);
+    commitModel (comp: UIMeshRenderer | Renderable2D, model: Model | null, mat: Material | null);
 
     setupStaticBatch (staticComp: UIStaticBatch, bufferAccessor: StaticVBAccessor);
     endStaticBatch ();

cocos/2d/renderer/render-data.ts

@@ -81,7 +81,7 @@ export class BaseRenderData {
     }
 
     public resize (vertexCount: number, indexCount: number) {
-        if (vertexCount === this._vc && indexCount === this._ic) return;
+        if (vertexCount === this._vc && indexCount === this._ic && this.chunk) return;
         this._vc = vertexCount;
         this._ic = indexCount;
         const batcher = director.root!.batcher2D;
@@ -269,7 +269,7 @@ export class MeshRenderData extends BaseRenderData {
 
     constructor (vertexFormat = vfmtPosUvColor) {
         super(vertexFormat);
-        this.vData = new Float32Array(256 * this.stride);
+        this.vData = new Float32Array(256 * this.stride); // 长度可取宏
         this.iData = new Uint16Array(256 * 6);
     }
 

cocos/core/scene-graph/node-ui-properties.ts

@@ -28,10 +28,10 @@
  * @module scene-graph
  */
 
-import { UIComponent } from '../../2d/framework/ui-component';
 import { Renderable2D } from '../../2d/framework/renderable-2d';
 import { UITransform } from '../../2d/framework/ui-transform';
 import { warnID } from '../platform/debug';
+import { UIMeshRenderer } from '../../2d';
 
 /**
  * @en Node's UI properties abstraction
@@ -60,15 +60,15 @@ export class NodeUIProperties {
     get uiComp () {
         return this._uiComp;
     }
-    set uiComp (comp: UIComponent | Renderable2D | null) {
+    set uiComp (comp: UIMeshRenderer | Renderable2D | null) {
         if (this._uiComp && comp) {
             warnID(12002);
             return;
         }
         this._uiComp = comp;
     }
 
-    private _uiComp: UIComponent | Renderable2D | null = null;
+    private _uiComp: UIMeshRenderer | Renderable2D | null = null;
 
     /**
      * @en The opacity of the UI node for final rendering