archive
/
spine-runtimes
miroir de https://github.com/EsotericSoftware/spine-runtimes.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html>

<head>
	<!--<script src="https://unpkg.com/@esotericsoftware/[email protected].*/dist/iife/spine-canvas.js"></script>-->
	<script src="../dist/iife/spine-canvas.js"></script>
</head>

<body style="margin: 0; padding: 0; background: #333">
	<canvas id="canvas" style="width: 100%; height: 100vh;"></canvas>
</body>

<script>
	let lastFrameTime = Date.now() / 1000;
	let canvas, context;
	let assetManager;
	let skeleton, animationState, bounds;
	let skeletonRenderer;

	async function load() {
		canvas = document.getElementById("canvas");
		context = canvas.getContext("2d");
		skeletonRenderer = new spine.SkeletonRenderer(context);

		// Load the assets.
		assetManager = new spine.AssetManager("https://esotericsoftware.com/files/examples/4.0/spineboy/export/");
		assetManager.loadText("spineboy-ess.json");
		assetManager.loadTextureAtlas("spineboy.atlas");
		await assetManager.loadAll();

		// Create the texture atlas and skeleton data.
		let atlas = assetManager.require("spineboy.atlas");
		let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
		let skeletonJson = new spine.SkeletonJson(atlasLoader);
		let skeletonData = skeletonJson.readSkeletonData(assetManager.require("spineboy-ess.json"));

		// Instantiate a new skeleton based on the atlas and skeleton data.
		skeleton = new spine.Skeleton(skeletonData);
		skeleton.setToSetupPose();
		skeleton.updateWorldTransform();
		bounds = skeleton.getBoundsRect();

		// Setup an animation state with a default mix of 0.2 seconds.
		var animationStateData = new spine.AnimationStateData(skeleton.data);
		animationStateData.defaultMix = 0.2;
		animationState = new spine.AnimationState(animationStateData);

		// Set the run animation, looping.
		animationState.setAnimation(0, "run", true);

		// Start rendering.
		requestAnimationFrame(render);
	}

	function render() {
		// Calculate the delta time between this and the last frame in seconds.
		var now = Date.now() / 1000;
		var delta = now - lastFrameTime;
		lastFrameTime = now;

		// Resize the canvas drawing buffer if the canvas CSS width and height changed
		// and clear the canvas.
		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;
		let 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();
		skeletonRenderer.draw(skeleton);

		requestAnimationFrame(render);
	}

	load();
</script>

</html>