@galacean/engine-spine 0.0.0-experimental-2024071602 → 0.0.0-experimental-2024071801

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.0-experimental-2024071602",
+  "version": "0.0.0-experimental-2024071801",
   "description": "galacean spine runtime",
   "name": "@galacean/engine-spine",
   "main": "dist/main.js",
@@ -36,15 +36,17 @@
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "babel-core": "^6.26.3",
     "babel-jest": "^29.7.0",
-    "canvas": "^2.11.2",
     "chai": "^4.3.6",
     "chai-spies": "^1.0.0",
     "cross-env": "^5.2.1",
     "cypress": "^13.13.0",
+    "cypress-recurse": "^1.35.3",
     "dat.gui": "^0.7.9",
-    "electron": "^12.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-webgl-canvas-mock": "^2.5.3",
+    "nock": "^13.5.4",
+    "odiff-bin": "^3.0.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "regenerator-runtime": "^0.14.1",
@@ -55,12 +57,13 @@
     "rollup-plugin-swc3": "^0.8.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-version-injector": "^1.3.3",
+    "sass": "^1.77.8",
     "sinon": "^18.0.0",
     "ts-jest": "^29.2.2",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.5.3",
-    "vite": "^4.3.9"
+    "vite": "^5.3.4"
   },
   "ci": {
     "type": "aci",
@@ -74,7 +77,7 @@
     "runner": "jest-runner",
     "testEnvironment": "jsdom",
     "testEnvironmentOptions": {
-      "url": "https://jestjs.io/",
+      "url": "https://mdn.alipayobjects.com/",
       "userAgent": "Agent/007"
     },
     "preset": "ts-jest",
@@ -89,6 +92,10 @@
     },
     "transformIgnorePatterns": [
       "node_modules/(?!(.*@esotericsoftware/spine-core.*))"
+    ],
+    "setupFilesAfterEnv": [
+      "./jest.setup.ts",
+      "jest-webgl-canvas-mock"
     ]
   },
   "scripts": {
@@ -96,6 +103,9 @@
     "test": "jest",
     "test:cov": "jest --coverage",
     "test:debug": "cross-env DEBUG_MODE=1 jest",
+    "e2e:case": "vite serve ./e2e/.dev --config ./e2e/.dev/vite.config.js",
+    "e2e": "cypress run --browser chrome --headless",
+    "e2e:debug": "cypress open",
     "dev": "rollup -cw",
     "build": "npm run b:types && cross-env BUILD_TYPE=ALL rollup -c",
     "build:watch": "npm run b:types && cross-env BUILD_TYPE=ALL rollup -c --watch",

package/types/cypress.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Cypress.ConfigOptions<any>;
+export default _default;

package/types/e2e/case/.mockForE2E.d.ts

@@ -0,0 +1,3 @@
+import { Camera, Engine } from "@galacean/engine-core";
+export declare const updateForE2E: (engine: any, deltaTime?: number, loopTime?: number) => void;
+export declare function initScreenshot(engine: Engine, camera: Camera, width?: number, height?: number, flipY?: boolean, isPNG?: boolean, jpgQuality?: number): void;

package/types/e2e/case/mix-and-match.d.ts

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

package/types/e2e/case/raptor.d.ts

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

package/types/e2e/case/spine-boy.d.ts

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

package/types/e2e/config.d.ts

@@ -0,0 +1,19 @@
+export declare const E2E_CONFIG: {
+    Spine: {
+        'spine-boy': {
+            category: string;
+            caseFileName: string;
+            threshold: number;
+        };
+        raptor: {
+            category: string;
+            caseFileName: string;
+            threshold: number;
+        };
+        'mix-and-match': {
+            category: string;
+            caseFileName: string;
+            threshold: number;
+        };
+    };
+};

package/types/e2e/support/commands.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            screenshotWithThreshold(category: string, name: string, threshold?: number): Chainable<Element>;
+        }
+    }
+}
+export {};

package/types/e2e/support/e2e.d.ts

@@ -0,0 +1 @@
+import "./commands";

package/types/e2e/tests/index.cy.d.ts

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

package/types/example/main.d.ts

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

package/types/example/outline.d.ts

@@ -0,0 +1,11 @@
+import { Entity, MeshRenderer, Camera } from '@galacean/engine';
+export default class BoundingBoxLine extends MeshRenderer {
+    private attachedEntity;
+    private renderers;
+    private boundingBox;
+    constructor(entity: Entity);
+    updateBoundingBox(): void;
+    attachToEntity(entity: Entity): void;
+    private updateVertices;
+    _render(camera: Camera): void;
+}

package/types/jest.setup.d.ts

@@ -0,0 +1,5 @@
+declare class MockImage {
+    onload: () => void;
+    onerror: () => void;
+    set src(_url: string);
+}

package/types/src/SpineAnimationRenderer.d.ts

@@ -0,0 +1,213 @@
+import { Skeleton, SkeletonData, AnimationState, AnimationStateData } from "@esotericsoftware/spine-core";
+import { Buffer, Renderer, Entity, Material, Engine, BoundingBox, Primitive, SubPrimitive } from "@galacean/engine";
+import { SkeletonDataResource } from "./loader/SkeletonDataResource";
+export declare class SpineAnimationRenderer extends Renderer {
+    private static _defaultMaterial;
+    private static _spineGenerator;
+    private static _positionVertexElement;
+    private static _colorVertexElement;
+    private static _uvVertexElement;
+    /** @internal */
+    static _materialCache: Map<string, Material>;
+    /** @internal */
+    static _animationDataCache: Map<SkeletonData, AnimationStateData>;
+    /** @internal */
+    static _getDefaultMaterial(engine: Engine): Material;
+    /** Render setting for spine rendering. */
+    setting: SpineRenderSetting;
+    /**
+     * Default state for spine animation.
+     * Contains the default animation name to be played, whether this animation should loop,
+     * the default skin name, and the default scale of the skeleton.
+     */
+    defaultState: DefaultState;
+    /** @internal */
+    _primitive: Primitive;
+    /** @internal */
+    _subPrimitives: SubPrimitive[];
+    /** @internal */
+    _indexBuffer: Buffer;
+    /** @internal */
+    _vertexBuffer: Buffer;
+    /** @internal */
+    _vertices: Float32Array;
+    /** @internal */
+    _indices: Uint16Array;
+    /** @internal */
+    _needResizeBuffer: boolean;
+    /** @internal */
+    _vertexCount: number;
+    /** @internal */
+    _resource: SkeletonDataResource;
+    private _skeleton;
+    private _state;
+    /**
+     * Setting `skeletonData` initializes a new Spine animation with the provided data.
+     * This property allows you to switch between different animations at runtime.
+     */
+    set resource(value: SkeletonDataResource);
+    /**
+     * Provides access to `AnimationState` which controls animation playback on a skeleton.
+     * You can use its API to manage, blend, and transition between multiple simultaneous animations effectively.
+     */
+    get state(): AnimationState;
+    /**
+     * Provides access to `Skeleton`, which defines the structure of a Spine model.
+     * Through its API, users can manipulate bone positions, rotations, scaling
+     * and change spine attachment to customize character appearances dynamically during runtime.
+     */
+    get skeleton(): Skeleton;
+    constructor(entity: Entity);
+    /**
+     * Separate slot by slot name. This will add a new sub primitive, and new materials.
+     */
+    addSeparateSlot(slotName: string): void;
+    /**
+     * @internal
+     */
+    _onEnable(): void;
+    /**
+     * @internal
+     */
+    update(delta: number): void;
+    /**
+     * @internal
+     */
+    _render(context: any): void;
+    /**
+     * @internal
+     */
+    _updateBounds(worldBounds: BoundingBox): void;
+    /**
+     * @internal
+     */
+    _calculateGeneratorBounds(worldBounds: BoundingBox): void;
+    /**
+     * @internal
+     */
+    _cloneTo(target: SpineAnimationRenderer): void;
+    /**
+     * @internal
+     */
+    _onDestroy(): void;
+    /**
+     * @internal
+     */
+    _createBuffer(vertexCount: number): void;
+    /**
+     * @internal
+     */
+    _addSubPrimitive(subPrimitive: SubPrimitive): void;
+    /**
+     * @internal
+     */
+    _clearSubPrimitives(): void;
+    /**
+     * @internal
+     */
+    _isContainDirtyFlag(type: number): boolean;
+    /**
+     * @internal
+     */
+    _setDirtyFlagFalse(type: number): void;
+    /**
+     * @internal
+     */
+    _onWorldVolumeChanged(): void;
+    private _onAnimationStart;
+    private _onAnimationComplete;
+    private _clearMaterialCache;
+    private _initializeDefaultState;
+}
+/**
+ * @internal
+ */
+export declare enum SpineAnimationUpdateFlags {
+    /** On World Transform Changed */
+    TransformVolume = 1,
+    /** On Animation start play */
+    AnimationVolume = 2,
+    /** On skeleton data asset changed */
+    InitialVolume = 4
+}
+/**
+ * @internal
+ */
+export declare enum RendererUpdateFlags {
+    /** Include world position and world bounds. */
+    WorldVolume = 1
+}
+/**
+ * Render setting for spine rendering.
+ */
+export declare class SpineRenderSetting {
+    /**
+     * The spacing between z layers.
+     */
+    zSpacing: number;
+    /**
+     * Whether to use clipping.
+     */
+    useClipping: boolean;
+    /**
+     * Creates an instance of SpineRenderSetting.
+     * @param {number} [zSpacing=0.01] - The spacing between z layers.
+     * @param {boolean} [useClipping=true] - Whether to use clipping.
+     */
+    constructor(
+    /**
+     * The spacing between z layers.
+     */
+    zSpacing?: number, 
+    /**
+     * Whether to use clipping.
+     */
+    useClipping?: boolean);
+}
+/**
+ * Default state for spine animation.
+ * Contains the default animation name to be played, whether this animation should loop,
+ * the default skin name, and the default scale of the skeleton.
+ */
+export declare class DefaultState {
+    /**
+     * The default scale of the animation.
+     */
+    scale: number;
+    /**
+     * Whether the default animation should loop.
+     */
+    loop: boolean;
+    /**
+     * The name of the default animation.
+     */
+    animationName: string | null;
+    /**
+     * The name of the default skin.
+     */
+    skinName: string;
+    /**
+     * Creates an instance of DefaultState.
+     * @param {number} [scale=1] - The default scale of the animation.
+     * @param {boolean} [loop=false] - Whether the default animation should loop.
+     * @param {string | null} [animationName=null] - The name of the default animation.
+     * @param {string} [skinName="default"] - The name of the default skin.
+     */
+    constructor(
+    /**
+     * The default scale of the animation.
+     */
+    scale?: number, 
+    /**
+     * Whether the default animation should loop.
+     */
+    loop?: boolean, 
+    /**
+     * The name of the default animation.
+     */
+    animationName?: string | null, 
+    /**
+     * The name of the default skin.
+     */
+    skinName?: string);
+}

package/types/src/SpineGenerator.d.ts

@@ -0,0 +1,37 @@
+import { Texture2D, SubPrimitive, BoundingBox } from "@galacean/engine";
+import { Skeleton, Color, BlendMode, SkeletonData } from "@esotericsoftware/spine-core";
+import { SpineAnimationRenderer } from "./SpineAnimationRenderer";
+import { AdaptiveTexture } from "./loader/LoaderUtils";
+import { ReturnablePool } from "./util/ReturnablePool";
+import { ClearablePool } from "./util/ClearablePool";
+declare class SubRenderItem {
+    subPrimitive: SubPrimitive;
+    blendMode: BlendMode;
+    texture: any;
+    slotName?: string;
+}
+export declare class SpineGenerator {
+    static QUAD_TRIANGLES: number[];
+    static VERTEX_SIZE: number;
+    static VERTEX_STRIDE: number;
+    static tempDark: Color;
+    static tempColor: Color;
+    static tempVerts: any[];
+    static tempBlendMode: BlendMode | null;
+    static tempTexture: AdaptiveTexture | null;
+    static subPrimitivePool: ReturnablePool<SubPrimitive>;
+    static subRenderItemPool: ClearablePool<SubRenderItem>;
+    static bounds: BoundingBox;
+    private _clipper;
+    private _subRenderItems;
+    private _separateSlots;
+    private _separateSlotTextureMap;
+    getMaxVertexCount(skeletonData: SkeletonData): number;
+    buildPrimitive(skeleton: Skeleton, renderer: SpineAnimationRenderer): void;
+    addSeparateSlot(slotName: string): void;
+    addSeparateSlotTexture(slotName: string, texture: Texture2D): void;
+    private _createMaterialForTexture;
+    private _expandByPoint;
+    private _getSkinVertexCount;
+}
+export {};

package/types/src/SpineMaterial.d.ts

@@ -0,0 +1,6 @@
+import { Engine, Material } from "@galacean/engine";
+export declare class SpineMaterial extends Material {
+    private static _spineVS;
+    private static _spineFS;
+    constructor(engine: Engine);
+}

package/types/src/index.d.ts

@@ -0,0 +1,7 @@
+import "./loader/SpineLoader";
+import "./loader/EditorSpineAtlasLoader";
+export { SpineAnimationRenderer } from "./SpineAnimationRenderer";
+export { SkeletonDataResource } from "./loader/SkeletonDataResource";
+export { createTextureAtlas } from "./loader/LoaderUtils";
+export * from "@esotericsoftware/spine-core";
+export declare const version = "__buildVersion";

package/types/src/loader/EditorSpineAtlasLoader.d.ts

@@ -0,0 +1,6 @@
+import { AssetPromise, Loader, ResourceManager, LoadItem } from "@galacean/engine";
+import { TextureAtlas } from "@esotericsoftware/spine-core";
+declare class EditorSpineAtlasLoader extends Loader<TextureAtlas> {
+    load(item: LoadItem, resourceManager: ResourceManager): AssetPromise<TextureAtlas>;
+}
+export { EditorSpineAtlasLoader };

package/types/src/loader/LoaderUtils.d.ts

@@ -0,0 +1,18 @@
+import { AssetPromise, Engine, Texture2D } from "@galacean/engine";
+import { TextureAtlas, SkeletonData, Texture, TextureFilter, TextureWrap } from "@esotericsoftware/spine-core";
+export declare function createSkeletonData(textureAtlas: TextureAtlas, skeletonTextData: string | ArrayBuffer, skeletonFileType: 'json' | 'skel'): SkeletonData;
+export declare function loadTexturesByPath(imagePaths: string[], imageExtensions: string[], engine: Engine): Promise<Texture2D[]>;
+export declare function loadTextureAtlas(atlasPath: string, engine: Engine): Promise<TextureAtlas>;
+export declare function createTextureAtlas(atlasText: string, textures: Texture2D[]): TextureAtlas;
+export declare function loadTexture(url: string, engine: Engine, imageLoaderType?: string): AssetPromise<Texture2D>;
+export declare function createAdaptiveTexture(texture: Texture2D): AdaptiveTexture;
+export declare function getBaseUrl(url: string): string;
+export declare class AdaptiveTexture extends Texture {
+    texture: Texture2D;
+    constructor(image: HTMLImageElement | ImageBitmap, texture: Texture2D);
+    getImage(): any;
+    setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
+    setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
+    dispose(): void;
+    private _convertWrapMode;
+}

package/types/src/loader/SkeletonDataResource.d.ts

@@ -0,0 +1,12 @@
+import { SkeletonData } from "@esotericsoftware/spine-core";
+import { Engine, ReferResource, Texture2D } from "@galacean/engine";
+export declare class SkeletonDataResource extends ReferResource {
+    readonly textures: Texture2D[];
+    private _skeletonData;
+    get skeletonData(): SkeletonData;
+    constructor(engine: Engine, skeletonData: SkeletonData);
+    protected _onDestroy(): void;
+    private _disassociationSuperResource;
+    private _associationTextureInSkeletonData;
+    private _clearAttachmentTextures;
+}

package/types/src/loader/SpineLoader.d.ts

@@ -0,0 +1,29 @@
+import { AssetPromise, Loader, LoadItem, ResourceManager } from "@galacean/engine";
+import { SkeletonDataResource } from "./SkeletonDataResource";
+export type SpineAssetBundle = {
+    skeletonPath: string;
+    skeletonExtension: string;
+    skeletonTextData?: string | ArrayBuffer;
+    atlasPath: string;
+    imagePaths: string[];
+    imageExtensions: string[];
+};
+type SpineLoaderParams = {
+    fileExtensions?: string | string[];
+};
+type SpineLoadItem = LoadItem & {
+    params?: SpineLoaderParams;
+};
+export declare class SpineLoader extends Loader<SkeletonDataResource> {
+    static imageExtensions: string[];
+    static skeletonExtensions: string[];
+    static parseAndAssignSpineAsset(url: string, fileExtension: string | null, bundle: SpineAssetBundle): void;
+    static deriveAndAssignSpineAsset(url: string, fileExtension: string | null, bundle: SpineAssetBundle): void;
+    static verifyFileExtensions(fileExtensions: string | string[], expectArray: boolean): string | string[] | null;
+    static getUrlExtension(url: string, fileExtension: string): string | null;
+    load(item: SpineLoadItem, resourceManager: ResourceManager): AssetPromise<SkeletonDataResource>;
+    private _handleEditorAsset;
+    private _handleOriginAsset;
+    private _determineSkeletonDataType;
+}
+export {};

package/types/src/util/BlendMode.d.ts

@@ -0,0 +1,4 @@
+import { BlendMode } from "@esotericsoftware/spine-core";
+import { Material } from "@galacean/engine";
+export declare function setBlendMode(material: Material, blendMode: BlendMode): void;
+export declare function getBlendMode(material: Material): BlendMode;

package/types/src/util/BufferReader.d.ts

@@ -0,0 +1,10 @@
+export declare class BufferReader {
+    data: Uint8Array;
+    private _dataView;
+    private _position;
+    constructor(data: Uint8Array, byteOffset?: number, byteLength?: number);
+    nextUint16(): number;
+    nextStr(): string;
+    nextImageData(): Uint8Array;
+    private decodeText;
+}

package/types/src/util/ClearablePool.d.ts

@@ -0,0 +1,8 @@
+export declare class ClearablePool<T> {
+    private _type;
+    private _elements;
+    private _usedElementCount;
+    constructor(type: new () => T);
+    get(): T;
+    clear(): void;
+}

package/types/src/util/ReturnablePool.d.ts

@@ -0,0 +1,8 @@
+export declare class ReturnablePool<T> {
+    private _type;
+    private _elements;
+    private _lastElementIndex;
+    constructor(type: new () => T, initializeCount?: number);
+    get(): T;
+    return(element: T): void;
+}

package/types/tests/SpineAnimation.test.d.ts

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

package/types/tests/SpineGenerator.test.d.ts

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

package/types/tests/SpineMaterial.test.d.ts

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

package/types/tests/loader/EditorSpineAtlasLoader.test.d.ts

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

package/types/tests/loader/SkeletonDataResource.test.d.ts

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

package/types/tests/loader/SpineLoader.test.d.ts

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

package/types/tests/testUtils.d.ts

@@ -0,0 +1,3 @@
+import { WebGLEngine } from "@galacean/engine";
+export declare function createEngine(): Promise<WebGLEngine>;
+export declare function mockSkeletonDataResource(): void;

package/types/tests/util/BlendMode.test.d.ts

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

package/types/tests/util/BufferReader.test.d.ts

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

package/types/tests/util/ClearablePool.test.d.ts

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

package/types/tests/util/ReturnablePool.test.d.ts

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