-
-
Notifications
You must be signed in to change notification settings - Fork 205
Open
Labels
v8Issues related to Pixi React v8Issues related to Pixi React v8
Description
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
Labels
v8Issues related to Pixi React v8Issues related to Pixi React v8