I have weird grey lines in my animation. This is my code (copied from spine-canvas github and changed to use in React.js). Please help, my source code:
import { useEffect } from 'react';
import * as spine from '@esotericsoftware/spine-canvas';
export const HomeImage = () => {
// canvas test place =======================================
let lastFrameTime = Date.now() / 1000;
let canvas: HTMLCanvasElement | null;
let context: CanvasRenderingContext2D | null;
let assetManager;
let skeleton: spine.Skeleton, animationState: spine.AnimationState, bounds: any;
let skeletonRenderer: spine.SkeletonRenderer;
async function load() {
canvas = document.getElementById('canvas-spine-test') as HTMLCanvasElement;
if (!canvas) return;
context = canvas.getContext('2d');
if (!context) return;
skeletonRenderer = new spine.SkeletonRenderer(context);
skeletonRenderer.triangleRendering = true;
// Load the assets.
assetManager = new spine.AssetManager('/spine-test/');
assetManager.loadBinary('spineboy-pro.skel');
assetManager.loadTextureAtlas('spineboy.atlas');
await assetManager.loadAll();
// Create the texture atlas and skeleton data.
const atlas = assetManager.require('spineboy.atlas');
const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
const skeletonBinary = new spine.SkeletonBinary(atlasLoader);
const skeletonData = skeletonBinary.readSkeletonData(assetManager.require('spineboy-pro.skel'));
// Instantiate a new skeleton based on the atlas and skeleton data.
skeleton = new spine.Skeleton(skeletonData);
skeleton.setToSetupPose();
skeleton.updateWorldTransform(spine.Physics.update);
bounds = skeleton.getBoundsRect();
// Setup an animation state with a default mix of 0.2 seconds.
const animationStateData = new spine.AnimationStateData(skeleton.data);
animationStateData.defaultMix = 0.2;
animationState = new spine.AnimationState(animationStateData);
// Set the run animation, looping.
animationState.setAnimation(0, 'walk', true);
animationState.timeScale = 1;
// Start rendering.
requestAnimationFrame(render);
}
function render() {
// Calculate the delta time between this and the last frame in seconds.
const now = Date.now() / 1000;
const delta = now - lastFrameTime;
lastFrameTime = now;
// Resize the canvas drawing buffer if the canvas CSS width and height changed
// and clear the canvas.
if (!canvas) return;
if (!context) return;
if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
context.clearRect(0, 0, canvas.width, canvas.height);
// Center the skeleton and resize it so it fits inside the canvas.
skeleton.x = canvas.width / 2;
skeleton.y = canvas.height - canvas.height * 0.1;
const scale = (canvas.height / bounds.height) * 0.8;
skeleton.scaleX = scale;
skeleton.scaleY = -scale;
// Update and apply the animation state, update the skeleton's
// world transforms and render the skeleton.
animationState.update(delta);
animationState.apply(skeleton);
skeleton.updateWorldTransform(spine.Physics.update);
skeletonRenderer.draw(skeleton);
requestAnimationFrame(render);
}
useEffect(() => {
load();
}, []);
return (
<div className="relative mx-auto flex w-full items-center justify-center">
<canvas
id="canvas-spine-test"
className="h-[200px] w-[150px]"
onClick={() => console.log('hello')}></canvas>
</div>
);
};
