zimporter-html - v1.0.0
    Preparing search index...

    Class ZSpine

    HTML canvas–based Spine animation container.

    Uses @esotericsoftware/spine-canvas when it is available on window.spine or via a global import. If the runtime is not found the class degrades to an invisible ZContainer so the rest of the scene still loads without errors.

    1. Include the spine-canvas UMD bundle on the page before your game script (sets window.spine).
    2. In your scene JSON set the asset type to "spine" and supply spineJson, spineAtlas, and optional skin + playOnStart.
    3. Call play(animationName, loop) / stop() as needed.
    4. ZSpine automatically registers itself with ZUpdatables for its per-frame draw loop and unregisters on destroy.

    ZTimeline-based animations remain the simpler path for frame-by-frame tweens; ZSpine is only needed for skeletal-mesh animations exported directly from Spine.

    Hierarchy (View Summary)

    Index

    Constructors

    Properties

    _fitToScreen: boolean = false
    _props?: any
    children: ZContainer[] = []

    Typed child list (mirrors PIXI's children array).

    currentTransform: OrientationData
    el: HTMLDivElement

    The root div element for this container.

    fixedBoxSize?: boolean
    interactive: boolean = false
    interactiveChildren: boolean = true
    landscape: OrientationData
    originalFontSize?: number
    originalTextHeight?: number
    originalTextWidth?: number
    parent: ZContainer | null = null
    portrait: OrientationData
    resizeable: boolean = true
    scale: { x: number; y: number }

    PIXI-compatible scale object. Setting .x / .y delegates to the scaleX / scaleY setters so that ZScene can write stage.scale.x = s exactly as in the PIXI version.

    Initialised in the constructor so this is captured correctly.

    stageOffsetX: number = 0

    Current CSS-pixel X offset of the stage from the viewport edge.

    stageOffsetY: number = 0

    Current CSS-pixel Y offset of the stage from the viewport edge.

    stageScale: number = 1

    Current uniform CSS scale applied to the stage element.

    Accessors

    • get alpha(): number

      Returns number

    • set alpha(value: number): void

      Parameters

      • value: number

      Returns void

    • get cursor(): string

      Returns string

    • set cursor(value: string): void

      Parameters

      • value: string

      Returns void

    • get name(): string

      Returns string

    • set name(value: string): void

      Parameters

      • value: string

      Returns void

    • get pivotX(): number

      Returns number

    • set pivotX(value: number): void

      Parameters

      • value: number

      Returns void

    • get pivotY(): number

      Returns number

    • set pivotY(value: number): void

      Parameters

      • value: number

      Returns void

    • get rotation(): number

      Returns number

    • set rotation(value: number): void

      Parameters

      • value: number

      Returns void

    • get scaleX(): number

      Returns number

    • set scaleX(value: number): void

      Parameters

      • value: number

      Returns void

    • get scaleY(): number

      Returns number

    • set scaleY(value: number): void

      Parameters

      • value: number

      Returns void

    • get visible(): boolean

      Returns boolean

    • set visible(value: boolean): void

      Parameters

      • value: boolean

      Returns void

    • get x(): number

      Returns number

    • set x(value: number): void

      Parameters

      • value: number

      Returns void

    • get y(): number

      Returns number

    • set y(value: number): void

      Parameters

      • value: number

      Returns void

    Methods

    • Stretches this container to visually cover the entire browser viewport. Mirrors PIXI's executeFitToScreen — positions the container at the viewport's top-left (expressed in stage / scene-unit coords) and scales the first child image element to fill the viewport dimensions.

      Parameters

      • viewportW: number

        Current browser viewport width in CSS pixels.

      • viewportH: number

        Current browser viewport height in CSS pixels.

      • stageOffsetX: number

        CSS-pixel X offset of the scaled stage from the viewport edge.

      • stageOffsetY: number

        CSS-pixel Y offset of the scaled stage from the viewport edge.

      • stageScale: number

        Uniform CSS scale applied to the stage.

      Returns void

    • Finds the first text element (a <span class="z-text">) among children. Mirrors PIXI's getTextField().

      Returns HTMLElement | null

    • Called once all children have been added. Captures original text dimensions.

      Returns void

    • Load Spine assets and initialise the skeleton.

      Parameters

      • basePath: string

        URL prefix applied to all asset paths.

      • jsonPath: string

        Spine JSON skeleton file (relative to basePath).

      • atlasPath: string

        Spine atlas text file (relative to basePath).

      • pngPaths: string[]

        Array of PNG texture file paths (relative to basePath).

      • skin: string = 'default'

        Optional skin name to activate (defaults to "default").

      • width: number = 512

        Canvas width in scene units.

      • height: number = 512

        Canvas height in scene units.

      Returns Promise<void>

    • Parameters

      • event: string
      • listener: Function

      Returns this

    • Parameters

      • event: string
      • listener: Function

      Returns this

    • Parameters

      • animationName: string
      • loop: boolean = true

      Returns void

    • Public entry point for ZScene to re-run the anchor computation after all containers in the resize map have been updated to the new orientation. This guarantees that ancestor _x / _y values are current when chain inversion runs.

      Returns void

    • Parameters

      • width: number
      • height: number
      • orientation: "portrait" | "landscape"

      Returns void

    • Parameters

      • skinName: string

      Returns void