@cyclonium/2d 0.0.103 → 1.0.0

package/assets/meta.json

@@ -0,0 +1 @@
+{}

package/assets/sprite-renderer.effect

@@ -0,0 +1,65 @@
+// Effect Syntax Guide: https://docs.cocos.com/creator/manual/zh/shader/index.html
+
+CCEffect %{
+  techniques:
+  - name: default
+    passes:
+    - vert: sprite-renderer-vs:vert
+      frag: sprite-renderer-fs:frag
+      properties: &props
+        mainTexture:    { value: white }
+        mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }
+      rasterizerState:
+        cullMode: none
+        cullFace: front
+      depthStencilState:
+        depthTest: true
+        depthWrite: false
+      blendState:
+        targets:
+        - blend: true
+          blendSrc: src_alpha
+          blendDst: one_minus_src_alpha
+          blendSrcAlpha: src_alpha
+          blendDstAlpha: one_minus_src_alpha
+}%
+
+CCProgram sprite-renderer-vs %{
+  precision highp float;
+
+  #include <builtin/uniforms/cc-local>
+  #include <builtin/uniforms/cc-global>
+  #include <builtin/functionalities/world-transform>
+
+  in vec2 a_position;
+  in vec2 a_texCoord;
+
+  out vec2 v_texCoord;
+
+  vec4 vert() {
+    v_texCoord = a_texCoord;
+
+    vec3 position = vec3(a_position, 0.0);
+    return cc_matProj * (cc_matView * cc_matWorld) * vec4(position, 1.0);
+  }
+}%
+
+CCProgram sprite-renderer-fs %{
+  precision highp float;
+  #include <legacy/output>
+  #include <legacy/fog-fs>
+
+  in vec2 v_texCoord;
+  in vec3 v_position;
+
+  uniform sampler2D mainTexture;
+
+  uniform Constant {
+    vec4 mainColor;
+  };
+
+  vec4 frag () {
+    vec4 color = mainColor * texture(mainTexture, vec2(v_texCoord.x, 1.0 - v_texCoord.y));
+    return color;
+  }
+}%

package/assets/sprite-renderer.effect.meta

@@ -0,0 +1,11 @@
+{
+  "ver": "1.7.1",
+  "importer": "effect",
+  "imported": true,
+  "uuid": "230b4535-10a9-475d-843a-05cbf87b2227",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}

package/lib/sprite-renderer.component.d.ts

@@ -1,6 +1,7 @@
 import { CycloComponent } from '@cyclonium/core/framework';
-import { Texture2D, Material, Color, componentEditorTraits, geometry } from 'cc';
+import { Material, Color, componentEditorTraits, geometry } from 'cc';
 import { Bounds2D } from '@cyclonium/core/math/bounds-2d';
+import { Sprite } from './sprite.js';
 import { SortableRenderer } from './sortable.js';
 import { SortSettings } from './sort-settings.js';
 export declare enum SpriteRenderType {
@@ -12,8 +13,8 @@ export declare class SpriteRenderer extends CycloComponent implements SortableRe
     set renderType(value: SpriteRenderType);
     get color(): Color;
     set color(value: Color);
-    get sprite(): Texture2D | undefined;
-    set sprite(value: Texture2D | undefined);
+    get sprite(): Sprite | undefined;
+    set sprite(value: Sprite | undefined);
     debugShowNormals: boolean;
     get sortSettings(): SortSettings;
     get [SortableRenderer.Tags.sortSettings](): SortSettings;
@@ -47,16 +48,17 @@ export declare class SpriteRenderer extends CycloComponent implements SortableRe
     private _createDefaultEffectMaterialAndSetAsEffective;
     private _setEffectiveMaterial;
     private _destroyRenderRecord;
-    private _constructRenderRecord;
+    private _reconstructRenderRecord;
+    private _markRenderRecordDirty;
+    private _updateRenderRecordBounds;
     private _createRenderingSubMeshes;
     private _createRenderingSubMeshesInSimpleRenderType;
+    private _updateSimpleRenderVertexBuffer;
     private _updateAllMaterialProperties;
     private _updateMaterialColor;
     private _updateMaterialSprite;
-    private _updateMaterialPixelsPerUnit;
     private _updateModelBoundingShape;
     private _updateLocalBounds;
-    private _getBoundingHalfSize;
     private _syncRenderRecordEnabled;
     private _shouldRenderRecordBeEnabled;
 }

package/lib/sprite-renderer.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { CycloComponent } from '@cyclonium/core/framework';
 import { designType, editable, executeInEditMode, cycloClass, idem, serializable } from '@cyclonium/core/legacy-decorator';
-import { Texture2D, Material, Color, renderer, RenderingSubMesh, gfx, EffectAsset, Vec2, Vec3, componentEditorTraits, geometry, assetManager } from 'cc';
+import { Material, Color, renderer, RenderingSubMesh, gfx, EffectAsset, Vec3, componentEditorTraits, geometry, assetManager } from 'cc';
 import { assert, markEnum } from '@cyclonium/core/utils';
 import { logger } from '@cyclonium/core/log';
 import { Bounds2D } from '@cyclonium/core/math/bounds-2d';
@@ -20,6 +20,13 @@ export var SpriteRenderType;
     SpriteRenderType["simple"] = "simple";
 })(SpriteRenderType || (SpriteRenderType = {}));
 markEnum(SpriteRenderType);
+var RenderRecordDirtyFlag;
+(function (RenderRecordDirtyFlag) {
+    // Render type changes can alter submesh/model structure, so they require a full record rebuild.
+    RenderRecordDirtyFlag[RenderRecordDirtyFlag["renderType"] = 1] = "renderType";
+    // Bounds changes keep the same simple quad topology and only rewrite vertex data.
+    RenderRecordDirtyFlag[RenderRecordDirtyFlag["bounds"] = 2] = "bounds";
+})(RenderRecordDirtyFlag || (RenderRecordDirtyFlag = {}));
 const loadDefaultEffect = (() => {
     let defaultEffect;
     return () => {
@@ -51,7 +58,7 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
     }
     set renderType(value) {
         this._renderType = value;
-        this._constructRenderRecord();
+        this._markRenderRecordDirty(RenderRecordDirtyFlag.renderType);
     }
     get color() {
         return this._color;
@@ -70,10 +77,7 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
         if (this._effectiveMaterial) {
             this._updateMaterialSprite(this._effectiveMaterial);
         }
-        if (this._renderRecord) {
-            this._updateModelBoundingShape(this._renderRecord.model);
-            this._syncRenderRecordEnabled();
-        }
+        this._markRenderRecordDirty(RenderRecordDirtyFlag.bounds);
     }
     debugShowNormals = false;
     get sortSettings() {
@@ -87,12 +91,7 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
     }
     set pixelsPerUnit(value) {
         this._pixelsPerUnit = value;
-        if (this._effectiveMaterial) {
-            this._updateMaterialPixelsPerUnit(this._effectiveMaterial);
-        }
-        if (this._renderRecord) {
-            this._updateModelBoundingShape(this._renderRecord.model);
-        }
+        this._markRenderRecordDirty(RenderRecordDirtyFlag.bounds);
     }
     get material() {
         return this._material;
@@ -149,12 +148,11 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
         }
         switch (this.renderType) {
             case SpriteRenderType.simple:
-                if (this._renderRecord) {
-                    // nothing
+                if (!this._renderRecord || (this._renderRecord.dirty & RenderRecordDirtyFlag.renderType) !== 0) {
+                    this._reconstructRenderRecord();
                 }
-                else {
-                    this._destroyRenderRecord();
-                    this._constructRenderRecord();
+                else if ((this._renderRecord.dirty & RenderRecordDirtyFlag.bounds) !== 0) {
+                    this._updateRenderRecordBounds(this._renderRecord);
                 }
                 break;
             default:
@@ -232,10 +230,17 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
         });
         model.destroy();
     }
-    _constructRenderRecord() {
+    _reconstructRenderRecord() {
+        this._destroyRenderRecord();
+        switch (this._renderType) {
+            case SpriteRenderType.simple:
+                break;
+            default:
+                return;
+        }
         const renderScene = this._getRenderScene();
         const device = renderScene.root.device;
-        const renderingSubMeshes = this._createRenderingSubMeshes(device);
+        const { renderingSubMeshes, vertexBuffer, localVertexBuffer, } = this._createRenderingSubMeshes(device);
         const model = new renderer.scene.Model();
         model.node = this.node;
         model.transform = this.node;
@@ -248,7 +253,10 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
         model.enabled = this._shouldRenderRecordBeEnabled();
         renderScene.addModel(model);
         this._renderRecord = {
+            dirty: 0,
             renderingSubMeshes: renderingSubMeshes,
+            vertexBuffer,
+            localVertexBuffer,
             model: model,
             renderScene,
         };
@@ -256,6 +264,17 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
             model.priority = this._sortSettings.sortingKey;
         }
     }
+    _markRenderRecordDirty(flag) {
+        if (this._renderRecord) {
+            this._renderRecord.dirty |= flag;
+        }
+    }
+    _updateRenderRecordBounds(renderRecord) {
+        this._updateSimpleRenderVertexBuffer(renderRecord.vertexBuffer, renderRecord.localVertexBuffer);
+        this._updateModelBoundingShape(renderRecord.model);
+        this._syncRenderRecordEnabled();
+        renderRecord.dirty &= ~RenderRecordDirtyFlag.bounds;
+    }
     _createRenderingSubMeshes(device) {
         switch (this._renderType) {
             case SpriteRenderType.simple:
@@ -265,57 +284,55 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
         }
     }
     _createRenderingSubMeshesInSimpleRenderType(device) {
-        const { vertexCount, positions, normals, indices, } = simpleSpriteQuad;
-        const offsetPositionF = 0;
-        const stridePositionF = 2;
-        const offsetNormalF = offsetPositionF + stridePositionF;
-        const strideNormalF = 2;
-        const strideF = offsetNormalF + strideNormalF;
-        const localVertexBuffer = new Float32Array(vertexCount * strideF);
-        let pVerticesF = 0;
-        for (let i = 0; i < vertexCount; i++) {
-            localVertexBuffer[pVerticesF + offsetPositionF] = positions[i * 2];
-            localVertexBuffer[pVerticesF + offsetPositionF + 1] = positions[i * 2 + 1];
-            localVertexBuffer[pVerticesF + offsetNormalF] = normals[i * 2];
-            localVertexBuffer[pVerticesF + offsetNormalF + 1] = normals[i * 2 + 1];
-            pVerticesF += strideF;
-        }
-        const vertexBuffer = device.createBuffer(new gfx.BufferInfo(gfx.BufferUsageBit.VERTEX, gfx.MemoryUsageBit.DEVICE, localVertexBuffer.byteLength, Float32Array.BYTES_PER_ELEMENT * strideF, gfx.BufferFlagBit.NONE));
-        updateGfxBuffer(vertexBuffer, localVertexBuffer);
+        const { indices, } = simpleSpriteQuad;
+        const localVertexBuffer = new Float32Array(simpleSpriteQuad.vertexCount * simpleSpriteQuad.strideF);
+        const vertexBuffer = device.createBuffer(new gfx.BufferInfo(gfx.BufferUsageBit.VERTEX, gfx.MemoryUsageBit.DEVICE, localVertexBuffer.byteLength, Float32Array.BYTES_PER_ELEMENT * simpleSpriteQuad.strideF, gfx.BufferFlagBit.NONE));
+        this._updateSimpleRenderVertexBuffer(vertexBuffer, localVertexBuffer);
         const indexBuffer = device.createBuffer(new gfx.BufferInfo(gfx.BufferUsageBit.INDEX, gfx.MemoryUsageBit.DEVICE, indices.byteLength, indices.BYTES_PER_ELEMENT, gfx.BufferFlagBit.NONE));
         updateGfxBuffer(indexBuffer, indices);
         const renderingSubMesh = new RenderingSubMesh([vertexBuffer], [
-            new gfx.Attribute(gfx.AttributeName.ATTR_POSITION, gfx.Format.RGB32F, false, undefined, false, undefined),
+            new gfx.Attribute(gfx.AttributeName.ATTR_POSITION, gfx.Format.RG32F, false, undefined, false, undefined),
             new gfx.Attribute(gfx.AttributeName.ATTR_NORMAL, gfx.Format.RG32F, false, undefined, false, undefined),
             new gfx.Attribute(gfx.AttributeName.ATTR_TEX_COORD, gfx.Format.RG32F, false, undefined, false, undefined),
         ], gfx.PrimitiveMode.TRIANGLE_LIST, indexBuffer, null, true);
-        return [renderingSubMesh];
+        return {
+            renderingSubMeshes: [renderingSubMesh],
+            vertexBuffer,
+            localVertexBuffer,
+        };
+    }
+    _updateSimpleRenderVertexBuffer(vertexBuffer, localVertexBuffer) {
+        const { offsetNormalF, offsetPositionF, offsetTexCoordF, normals, strideF, texCoords, uvVertexIndices, vertexCount, } = simpleSpriteQuad;
+        const localBounds = this.localBounds;
+        const spriteUV = this.sprite?.uv ?? texCoords;
+        localVertexBuffer[offsetPositionF] = localBounds.xMin;
+        localVertexBuffer[offsetPositionF + 1] = localBounds.yMin;
+        localVertexBuffer[strideF + offsetPositionF] = localBounds.xMin;
+        localVertexBuffer[strideF + offsetPositionF + 1] = localBounds.yMax;
+        localVertexBuffer[2 * strideF + offsetPositionF] = localBounds.xMax;
+        localVertexBuffer[2 * strideF + offsetPositionF + 1] = localBounds.yMax;
+        localVertexBuffer[3 * strideF + offsetPositionF] = localBounds.xMax;
+        localVertexBuffer[3 * strideF + offsetPositionF + 1] = localBounds.yMin;
+        for (let iVertex = 0; iVertex < vertexCount; iVertex++) {
+            const pVerticesF = iVertex * strideF;
+            const pVectorF = iVertex * 2;
+            const pUVF = uvVertexIndices[iVertex] * 2;
+            localVertexBuffer[pVerticesF + offsetNormalF] = normals[pVectorF];
+            localVertexBuffer[pVerticesF + offsetNormalF + 1] = normals[pVectorF + 1];
+            localVertexBuffer[pVerticesF + offsetTexCoordF] = spriteUV[pUVF];
+            localVertexBuffer[pVerticesF + offsetTexCoordF + 1] = spriteUV[pUVF + 1];
+        }
+        updateGfxBuffer(vertexBuffer, localVertexBuffer);
     }
     _updateAllMaterialProperties(material) {
         this._updateMaterialColor(material);
         this._updateMaterialSprite(material);
-        this._updateMaterialPixelsPerUnit(material);
     }
     _updateMaterialColor(material) {
         material.setProperty('mainColor', this.color);
     }
     _updateMaterialSprite(material) {
-        const pixelsPerUnit = this._pixelsPerUnit;
-        let mainTexture = null;
-        const spriteSize = new Vec2();
-        if (this.sprite) {
-            mainTexture = this.sprite;
-            spriteSize.set(this.sprite.width / 2, this.sprite.height / 2);
-        }
-        else {
-            mainTexture = null;
-            spriteSize.set(pixelsPerUnit, pixelsPerUnit);
-        }
-        material.setProperty('mainTexture', mainTexture);
-        material.setProperty('spriteSize', spriteSize);
-    }
-    _updateMaterialPixelsPerUnit(material) {
-        material.setProperty('pixelsPerUnit', this._pixelsPerUnit);
+        material.setProperty('mainTexture', this.sprite?.texture ?? null);
     }
     _updateModelBoundingShape(model) {
         const localBounds = this.localBounds;
@@ -323,16 +340,17 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
         model.updateWorldBound();
     }
     _updateLocalBounds(bounds) {
-        const halfSize = this._getBoundingHalfSize();
-        bounds.min.set(-halfSize.x, -halfSize.y);
-        bounds.max.set(halfSize.x, halfSize.y);
-        return bounds;
-    }
-    _getBoundingHalfSize() {
         if (!this.sprite) {
-            return new Vec2(1, 1);
+            bounds.min.set(-1, -1);
+            bounds.max.set(1, 1);
+            return bounds;
         }
-        return new Vec2(this.sprite.width / 2 / this.pixelsPerUnit, this.sprite.height / 2 / this.pixelsPerUnit);
+        const width = this.sprite.rect.width / this.pixelsPerUnit;
+        const height = this.sprite.rect.height / this.pixelsPerUnit;
+        const pivot = this.sprite.pivot;
+        bounds.min.set(-pivot.x * width, -pivot.y * height);
+        bounds.max.set((1 - pivot.x) * width, (1 - pivot.y) * height);
+        return bounds;
     }
     _syncRenderRecordEnabled() {
         if (this._renderRecord) {
@@ -346,7 +364,8 @@ let SpriteRenderer = class SpriteRenderer extends CycloComponent {
 __decorate([
     editable,
     serializable,
-    designType(SpriteRenderType)
+    designType(SpriteRenderType),
+    idem
 ], SpriteRenderer.prototype, "renderType", null);
 __decorate([
     editable
@@ -392,6 +411,13 @@ SpriteRenderer = __decorate([
 ], SpriteRenderer);
 export { SpriteRenderer };
 const simpleSpriteQuad = (() => {
+    const offsetPositionF = 0;
+    const stridePositionF = 2;
+    const offsetNormalF = offsetPositionF + stridePositionF;
+    const strideNormalF = 2;
+    const offsetTexCoordF = offsetNormalF + strideNormalF;
+    const strideTexCoordF = 2;
+    const strideF = offsetTexCoordF + strideTexCoordF;
     const positions = new Float32Array([
         -1, -1, // left bottom
         -1, 1, // left top
@@ -400,14 +426,27 @@ const simpleSpriteQuad = (() => {
     ]);
     const n = Math.sqrt(2);
     const normals = positions.map((position) => n * position);
+    const texCoords = new Float32Array([
+        0, 0, // left bottom
+        0, 1, // left top
+        1, 1, // right top
+        1, 0, // right bottom
+    ]);
+    // Cocos SpriteFrame.uv is ordered as left-bottom, right-bottom, left-top, right-top.
+    const uvVertexIndices = new Uint8Array([0, 2, 3, 1]);
     const indices = new Uint16Array([
         0, 1, 2,
         0, 2, 3,
     ]);
     return {
+        offsetNormalF,
+        offsetPositionF,
+        offsetTexCoordF,
+        strideF,
         vertexCount: 4,
-        positions,
         normals,
+        texCoords,
+        uvVertexIndices,
         indices,
     };
 })();

package/lib/sprite.d.ts

@@ -1,2 +1,2 @@
-export { Texture2D as Sprite } from 'cc';
+export { SpriteFrame as Sprite } from 'cc';
 //# sourceMappingURL=sprite.d.ts.map

package/lib/sprite.js

@@ -1 +1 @@
-export { Texture2D as Sprite } from 'cc';
+export { SpriteFrame as Sprite } from 'cc';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyclonium/2d",
-  "version": "0.0.103",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/shrinktofit/cyclonium",
@@ -8,21 +8,18 @@
   },
   "type": "module",
   "files": [
-    "lib/**/*{.js,.d.ts}"
+    "lib",
+    "!lib/**/*.map",
+    "assets"
   ],
   "exports": {
-    ".": {
-      "types": "./lib/index.d.ts",
-      "default": "./lib/index.js"
-    },
-    "./editor": {
-      "types": "./lib/editor.d.ts",
-      "default": "./lib/editor.js"
-    }
+    ".": "./lib/index.js",
+    "./editor": "./lib/editor.js",
+    "./assets-meta": "./assets/meta.json"
   },
   "peerDependencies": {
-    "@cyclonium/core": "0.0.103",
-    "@cyclonium/editor": "0.0.103"
+    "@cyclonium/core": "0.0.104",
+    "@cyclonium/editor": "0.0.104"
   },
   "peerDependenciesMeta": {
     "@cyclonium/editor": {
@@ -35,8 +32,9 @@
     "playwright": "^1.59.1",
     "typescript": "^6.0.2",
     "vitest": "^4.1.5",
+    "@cyclonium/canvas-3d": "0.0.104",
     "@cyclonium/cc-test": "0.0.102",
-    "@cyclonium/editor": "0.0.103",
+    "@cyclonium/editor": "0.0.104",
     "@cyclonium/workflow": "0.0.100",
     "@cyclonium/types-cc": "0.0.100"
   },