mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
[ts][webgl] Additional physics samples
This commit is contained in:
Mario Zechner
parent
55f2d6863b
commit
8c515501ee
@ -1,201 +1,166 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
||||||
<title>spine-ts Examples</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<link rel="stylesheet" href="index.css" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<head>
|
||||||
<div style="width: 300px; margin: 0 auto">
|
<meta charset="utf-8" />
|
||||||
<h1>spine-ts Examples</h1>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<title>spine-ts Examples</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="index.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div style="width: 300px; margin: 0 auto">
|
||||||
|
<h1>spine-ts Examples</h1>
|
||||||
|
<ul>
|
||||||
|
<li>Canvas</li>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Canvas</li>
|
<li><a href="/spine-canvas/example">Example</a></li>
|
||||||
<ul>
|
<li>
|
||||||
<li><a href="/spine-canvas/example">Example</a></li>
|
<a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
|
||||||
<li>
|
</li>
|
||||||
<a href="/spine-canvas/example/mouse-click.html">Mouse click</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<li>Pixi</li>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
|
|
||||||
<li><a href="/spine-pixi/example/manual-loading.html">Manual Loading</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-pixi/example/events-example.html">Events example</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-pixi/example/mix-and-match-example.html">Mix and match example</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-pixi/example/simple-input.html">Simple input</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-pixi/example/mouse-following.html">Mouse following</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<li>Phaser</li>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/basic-example.html">Basic example</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/events-example.html"
|
|
||||||
>Events example</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/mix-and-match-example.html"
|
|
||||||
>Mix and match example</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/arcade-physics-example.html"
|
|
||||||
>Arcade physics example</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/control-bones-example.html"
|
|
||||||
>Control bones example</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/batching-test.html">Batching test</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/multi-scene-test.html"
|
|
||||||
>Multi-scene test</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/visibility-test.html"
|
|
||||||
>Visibility test</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/visibility-test-container.html"
|
|
||||||
>Visibility test (container)</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/blend-test.html">Blend test</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/camera-pipeline-test.html"
|
|
||||||
>Camera pipeline test</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/extended-class-test.html"
|
|
||||||
>Extended class</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/depth-test.html">Depth test</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/render-to-texture-test.html"
|
|
||||||
>Render to texture test</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/custom-spine-object-type.html"
|
|
||||||
>Custom object factory name</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-phaser/example/add-existing.html"
|
|
||||||
>Add existing object</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<li>Player</li>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/spine-player/example/example.html">Example</a></li>
|
|
||||||
<li><a href="/spine-player/example/physics.html">Physics</a></li>
|
|
||||||
<li><a href="/spine-player/example/editor.html">Editor</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-player/example/embedding-binary-example.html"
|
|
||||||
>Embedding binary</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-player/example/embedding-json-example.html"
|
|
||||||
>Embedding JSON</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-player/example/dispose.html">Disposing a player</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<li>WebGL</li>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/spine-webgl/example">Example</a></li>
|
|
||||||
<li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
|
|
||||||
<li><a href="/spine-webgl/example/physics.html">Physics</a></li>
|
|
||||||
<li><a href="/spine-webgl/example/physics2.html">Physics II</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-webgl/example/mix-and-match.html"
|
|
||||||
>Mix & match</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-webgl/example/custom-attachment.html"
|
|
||||||
>Custom attachment</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-webgl/example/drag-and-drop.html"
|
|
||||||
>Drag & drop</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-webgl/demos/additiveblending.html"
|
|
||||||
>Additive blending</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
|
|
||||||
<li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
|
|
||||||
</li>
|
|
||||||
<li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
|
|
||||||
<li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a>
|
|
||||||
</li>
|
|
||||||
<li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
|
|
||||||
<li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
|
|
||||||
<li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
|
|
||||||
<li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
|
|
||||||
<li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
|
|
||||||
</ul>
|
|
||||||
<li>THREE.JS</li>
|
|
||||||
<ul>
|
|
||||||
<li><a href="/spine-threejs/example/index.html">Example</a></li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-threejs/example/coordinate-transform.html"
|
|
||||||
>Coordinate transform</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/spine-threejs/example/logarithmic-depth-buffer.html"
|
|
||||||
>Logarithmic depth buffer</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
<li>Pixi</li>
|
||||||
</body>
|
<ul>
|
||||||
</html>
|
<li><a href="/spine-pixi/example/index.html">Basic example</a></li>
|
||||||
|
<li><a href="/spine-pixi/example/manual-loading.html">Manual Loading</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-pixi/example/events-example.html">Events example</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-pixi/example/mix-and-match-example.html">Mix and match example</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-pixi/example/simple-input.html">Simple input</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-pixi/example/mouse-following.html">Mouse following</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<li>Phaser</li>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/basic-example.html">Basic example</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/events-example.html">Events example</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/mix-and-match-example.html">Mix and match example</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/arcade-physics-example.html">Arcade physics example</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/control-bones-example.html">Control bones example</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/batching-test.html">Batching test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/multi-scene-test.html">Multi-scene test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/bounds-test.html">Bounds test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/visibility-test.html">Visibility test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/visibility-test-container.html">Visibility test (container)</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/blend-test.html">Blend test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/camera-pipeline-test.html">Camera pipeline test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/extended-class-test.html">Extended class</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/canvas-test.html">Canvas test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/depth-test.html">Depth test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/render-to-texture-test.html">Render to texture test</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/custom-spine-object-type.html">Custom object factory name</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-phaser/example/add-existing.html">Add existing object</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<li>Player</li>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/spine-player/example/example.html">Example</a></li>
|
||||||
|
<li><a href="/spine-player/example/physics.html">Physics</a></li>
|
||||||
|
<li><a href="/spine-player/example/editor.html">Editor</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-player/example/embedding-binary-example.html">Embedding binary</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-player/example/embedding-json-example.html">Embedding JSON</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-player/example/dispose.html">Disposing a player</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<li>WebGL</li>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/spine-webgl/example">Example</a></li>
|
||||||
|
<li><a href="/spine-webgl/example/barebones.html">Barebones</a></li>
|
||||||
|
<li><a href="/spine-webgl/example/physics.html">Physics</a></li>
|
||||||
|
<li><a href="/spine-webgl/example/physics2.html">Physics II</a></li>
|
||||||
|
<li><a href="/spine-webgl/example/physics3.html">Physics III</a></li>
|
||||||
|
<li><a href="/spine-webgl/example/physics4.html">Physics IV</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-webgl/example/mix-and-match.html">Mix & match</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-webgl/example/custom-attachment.html">Custom attachment</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-webgl/example/drag-and-drop.html">Drag & drop</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="/spine-webgl/example/dress-up.html">Dress-up</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-webgl/example/bone-dragging.html">Bone dragging</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-webgl/demos/additiveblending.html">Additive blending</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="/spine-webgl/demos/clipping.html">Clipping</a></li>
|
||||||
|
<li><a href="/spine-webgl/demos/hoverboard.html">Hoverboard</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-webgl/demos/imagechanges.html">Image changes</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="/spine-webgl/demos/meshes.html">Meshes</a></li>
|
||||||
|
<li><a href="/spine-webgl/demos/skins.html">Skins</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-webgl/demos/spritesheets.html">Spritesheets</a>
|
||||||
|
</li>
|
||||||
|
<li><a href="/spine-webgl/demos/stretchyman.html">Stretchyman</a></li>
|
||||||
|
<li><a href="/spine-webgl/demos/tank.html">Tank</a></li>
|
||||||
|
<li><a href="/spine-webgl/demos/transforms.html">Transforms</a></li>
|
||||||
|
<li><a href="/spine-webgl/demos/transitions.html">Transitions</a></li>
|
||||||
|
<li><a href="/spine-webgl/demos/vine.html">Vine</a></li>
|
||||||
|
</ul>
|
||||||
|
<li>THREE.JS</li>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/spine-threejs/example/index.html">Example</a></li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-threejs/example/coordinate-transform.html">Coordinate transform</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/spine-threejs/example/logarithmic-depth-buffer.html">Logarithmic depth buffer</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
89
spine-ts/spine-webgl/example/physics3.html
Normal file
89
spine-ts/spine-webgl/example/physics3.html
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
</head>
|
||||||
|
<script src="../dist/iife/spine-webgl.js"></script>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
|
||||||
|
<script>
|
||||||
|
class App {
|
||||||
|
constructor() {
|
||||||
|
this.skeleton = null;
|
||||||
|
this.animationState = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
loadAssets(canvas) {
|
||||||
|
// Load the skeleton file.
|
||||||
|
canvas.assetManager.loadBinary("assets/snowglobe-pro.skel");
|
||||||
|
// Load the atlas and its pages.
|
||||||
|
canvas.assetManager.loadTextureAtlas("assets/snowglobe-pma.atlas");
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize(canvas) {
|
||||||
|
let assetManager = canvas.assetManager;
|
||||||
|
|
||||||
|
// Create the texture atlas.
|
||||||
|
var atlas = assetManager.require("assets/snowglobe-pma.atlas");
|
||||||
|
|
||||||
|
// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
||||||
|
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||||
|
|
||||||
|
// Create a SkeletonBinary instance for parsing the .skel file.
|
||||||
|
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||||
|
|
||||||
|
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
||||||
|
skeletonBinary.scale = 0.5;
|
||||||
|
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/snowglobe-pro.skel"));
|
||||||
|
this.skeleton = new spine.Skeleton(skeletonData);
|
||||||
|
|
||||||
|
// Create an AnimationState, and set the "run" animation in looping mode.
|
||||||
|
var animationStateData = new spine.AnimationStateData(skeletonData);
|
||||||
|
this.animationState = new spine.AnimationState(animationStateData);
|
||||||
|
this.animationState.setAnimation(0, "shake", true);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(canvas, delta) {
|
||||||
|
|
||||||
|
// Update the animation state using the delta time.
|
||||||
|
this.animationState.update(delta);
|
||||||
|
// Apply the animation state to the skeleton.
|
||||||
|
this.animationState.apply(this.skeleton);
|
||||||
|
// Let the skeleton update the transforms of its bones and apply physics
|
||||||
|
this.skeleton.update(delta);
|
||||||
|
this.skeleton.updateWorldTransform(spine.Physics.update);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(canvas) {
|
||||||
|
let renderer = canvas.renderer;
|
||||||
|
// Resize the viewport to the full canvas.
|
||||||
|
renderer.resize(spine.ResizeMode.Expand);
|
||||||
|
|
||||||
|
// Clear the canvas with a light gray color.
|
||||||
|
canvas.clear(0.2, 0.2, 0.2, 1);
|
||||||
|
|
||||||
|
// Begin rendering.
|
||||||
|
renderer.begin();
|
||||||
|
// Draw the skeleton
|
||||||
|
renderer.drawSkeleton(this.skeleton, true);
|
||||||
|
// Complete rendering.
|
||||||
|
renderer.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
new spine.SpineCanvas(document.getElementById("canvas"), {
|
||||||
|
app: new App()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
88
spine-ts/spine-webgl/example/physics4.html
Normal file
88
spine-ts/spine-webgl/example/physics4.html
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
</head>
|
||||||
|
<script src="../dist/iife/spine-webgl.js"></script>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas>
|
||||||
|
<script>
|
||||||
|
class App {
|
||||||
|
constructor() {
|
||||||
|
this.skeleton = null;
|
||||||
|
this.animationState = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
loadAssets(canvas) {
|
||||||
|
// Load the skeleton file.
|
||||||
|
canvas.assetManager.loadBinary("assets/cloud-pot.skel");
|
||||||
|
// Load the atlas and its pages.
|
||||||
|
canvas.assetManager.loadTextureAtlas("assets/cloud-pot-pma.atlas");
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize(canvas) {
|
||||||
|
let assetManager = canvas.assetManager;
|
||||||
|
|
||||||
|
// Create the texture atlas.
|
||||||
|
var atlas = assetManager.require("assets/cloud-pot-pma.atlas");
|
||||||
|
|
||||||
|
// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
||||||
|
var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||||
|
|
||||||
|
// Create a SkeletonBinary instance for parsing the .skel file.
|
||||||
|
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||||
|
|
||||||
|
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
||||||
|
skeletonBinary.scale = 0.5;
|
||||||
|
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("assets/cloud-pot.skel"));
|
||||||
|
this.skeleton = new spine.Skeleton(skeletonData);
|
||||||
|
|
||||||
|
// Create an AnimationState, and set the "run" animation in looping mode.
|
||||||
|
var animationStateData = new spine.AnimationStateData(skeletonData);
|
||||||
|
this.animationState = new spine.AnimationState(animationStateData);
|
||||||
|
this.animationState.setAnimation(0, "playing-in-the-rain", true);
|
||||||
|
}
|
||||||
|
|
||||||
|
update(canvas, delta) {
|
||||||
|
// Update the animation state using the delta time.
|
||||||
|
this.animationState.update(delta);
|
||||||
|
// Apply the animation state to the skeleton.
|
||||||
|
this.animationState.apply(this.skeleton);
|
||||||
|
// Let the skeleton update the transforms of its bones and apply physics
|
||||||
|
this.skeleton.update(delta);
|
||||||
|
this.skeleton.updateWorldTransform(spine.Physics.update);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(canvas) {
|
||||||
|
let renderer = canvas.renderer;
|
||||||
|
// Resize the viewport to the full canvas.
|
||||||
|
renderer.resize(spine.ResizeMode.Expand);
|
||||||
|
|
||||||
|
// Clear the canvas with a light gray color.
|
||||||
|
canvas.clear(0.2, 0.2, 0.2, 1);
|
||||||
|
|
||||||
|
// Begin rendering.
|
||||||
|
renderer.begin();
|
||||||
|
// Draw the skeleton
|
||||||
|
renderer.drawSkeleton(this.skeleton, true);
|
||||||
|
// Complete rendering.
|
||||||
|
renderer.end();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
new spine.SpineCanvas(document.getElementById("canvas"), {
|
||||||
|
app: new App()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user