Hi there,
I've been working off the ts-webgl-overlay branch and the "Made some changes to make it work on old browsers" commit seems to have broken my react spine setup. The spine character doesn't show up anymore.
When I reverted this part of the commit, things seem to work again:
here is my react setup for my spine component below, and i've imported the spine-webgl.min.js file into my page:
const SpineChibi = ({
animation,
skins,
isCustomFit,
scale = 1,
offsetX = 0,
offsetY = 0,
hairColor,
skinColor,
width,
height,
}: SpineChibiProps) => {
const identifier = useMemo(() => `spine-widget-${uuidv4()}`, []);
useEffect(() => {
const updateWidget = async () => {
// @ts-ignore
const widget = spine.getSpineWidget(identifier);
const loadedWidget = await widget.loadingPromise;
const { state, skeleton, bounds } = loadedWidget;
// @ts-ignore
const newSkin = new spine.Skin("new-skin");
skins.forEach((skin) => {
const skinEntry = skeleton.data.findSkin(skin);
if (skinEntry) {
newSkin.addSkin(skinEntry);
}
});
skeleton.setSkin(newSkin);
updateSlotColor(skeleton, ["Base", "Hand", "Head", "Ear"], skinColor);
updateSlotColor(skeleton, ["Hair", "HBangs", "Hbot", "Htop"], hairColor);
state.setAnimation(0, animation, true);
if (isCustomFit && width && height) {
widget.beforeUpdateWorldTransforms = (_skeleton) => {
// determine the smallest scale ratio
const scaleW =
(width / bounds.width) * window.devicePixelRatio * scale;
const scaleH =
(height / bounds.height) * window.devicePixelRatio * scale;
const finalScale = Math.min(scaleW, scaleH);
// scale the skeleton accordingly
_skeleton.scaleX = finalScale;
_skeleton.scaleY = finalScale;
};
}
widget.recalculateBounds();
};
updateWidget();
}, [
animation,
skins,
scale,
offsetX,
offsetY,
skinColor,
hairColor,
width,
height,
]);
return (
<div
style={{
width: width ?? "100%",
height: height ?? "100%",
}}
>
{/* @ts-ignore */}
<spine-widget
identifier={identifier}
atlas="spine-dynamic-nopremult/char.atlas"
skeleton="spine-dynamic-nopremult/char.skel"
animation={animation}
skin={skins[0]}
clip="true"
mode="inside"
fit={isCustomFit ? "none" : "fit"}
/>
</div>
);
};
