@galacean/effects-plugin-spine

Galacean Effects Spine Plugin

Usage

Simple Import

import { Player } from '@galacean/effects';
import '@galacean/effects-plugin-spine';

Get Spine Resource List

import type { SpineDataCache } from '@galacean/effects-plugin-spine';

const comp = await player.play(scene);
const item = comp.getItemByName('itemName');
const spineData: SpineDataCache = item.spineDataCache;

Get Animation List / Skin List

• Get using functions

const comp = await new Player().loadScene(scene);
const item = comp.getItemByName('itemName');
const { skeletonData } = item.spineDataCache;
const animationList = getAnimationList(skeletonData);
const skinList = getSkinList(skeletonData);

• After starting, you can access it in the spineDataCache.

const comp = await new Player().loadScene(scene);
const item = comp.getItemByName('itemName')
const { skinList, animationList } = item.spineDataCache;

Get Duration of a Specific Animation

const animationDuration = getAnimationDuration(skeletonData, animationName);

Get Texture Creation Options

import { getTextureOptions } from '@galacean/effects-plugin-spine';

const { magFilter, minFilter, wrapS, wrapT, pma } = getTextureOptions(atlasBuffer);

Set Animation Mix Duration

• Set default mix duration for an animation (should be called before player.play)

const comp = await new Player().loadScene(scene);
const item = comp.getItemByName(name);

item.setDefaultMixDuration(mix);

• Set mix duration for a specific transition (should be called before player.play)

const comp = await new Player().loadScene(scene);
const item = comp.getItemByName(name);

item.setMixDuration(animationOut, animationIn, mix);

Set Playback Speed

const comp = await new Player().loadScene(scene);
const item = comp.getItemByName(name);

item.setSpeed(speed);

Set Animation

• Set a single animation

const comp = await new Player().loadScene(scene);
const item = comp.getItemByName(name);

item.setAnimation(animationName, speed);

• Set a group of animations

const comp = await new Player().loadScene(scene);
const item = comp.getItemByName(name);
const animationList = [animationName1, animationName2, animationName3];

item.setAnimation(animationList, speed);

Development

Getting Started

# demo
pnpm --filter @galacean/effects-plugin-spine dev

Open in browser: http://localhost:8081/demo/

Frame Comparison Testing

Open in browser: http://localhost:8081/test/