Skip to content

Feature Request: Add Spine component support as a subpath import #604

@matthias-grgic

Description

@matthias-grgic

Title: Add Spine component support to @pixi/react as a subpath import

Description:
Here’s a working and minimal React-compatible Spine integration using @pixi/react with @esotericsoftware/spine-pixi-v8.

As Trezy mentioned this could live in the repo either as a utility or example, but ideally as a subpath export (e.g. @pixi/react/spine) to make it easily consumable in Pixi+React projects:

import { useEffect, useRef } from "react"
import { Spine } from "@esotericsoftware/spine-pixi-v8"
import { Assets } from "pixi.js"
import { useApplication } from "@pixi/react"

interface SpineCompProps {
  skeleton: string 
  atlas: string 
  animation?: string
  x?: number
  y?: number
  scale?: number
  loop?: boolean
}

export function SpineComp({ skeleton, atlas, animation = "idle", x = 0, y = 0, scale = 1, loop = true }: SpineCompProps) {
  const { app } = useApplication()
  const spineRef = useRef<Spine | null>(null)

  useEffect(() => {
    const load = async () => {
      Assets.add({ alias: "spine-atlas", src: atlas })
      Assets.add({ alias: "spine-skeleton", src: skeleton })

      await Assets.load(["spine-atlas", "spine-skeleton"])

      const spine = Spine.from({
        skeleton: "spine-skeleton",
        atlas: "spine-atlas",
      })

      spine.x = x
      spine.y = y
      spine.scale.set(scale)
      spine.state.setAnimation(0, animation, loop)

      app.stage.addChild(spine)
      spineRef.current = spine
    }

    load()

    return () => {
      const spine = spineRef.current
      if (spine) {
        app.stage.removeChild(spine)
        spine.destroy({ children: true })
      }
    }
  }, [app, skeleton, atlas, animation, x, y, scale, loop])

  return null
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    v8Issues related to Pixi React v8

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions