UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Remove old namespaces, dev build

Browse Source 
Previously, we'd export to global objects called spine.canvas, spine.webgl, spine.threejs. Going forward, all Spine APIs will be hosted by the global spine object when the runtime is used straight from the bundled .js files in the build/ folder. This is a minor change with a simple fix on the user side, i.e. replace spine.canvas. with spine.
This commit is contained in:
Mario Zechner 2021-08-27 18:48:17 +02:00
parent 39df4c7cbb
commit de6cee955b
37 changed files with 15694 additions and 1880 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
spine-ts/README.md
View File

@ -29,7 +29,7 @@ spine-ts works with data exported from Spine 4.0.xx.
The spine-ts WebGL and Player backends support all Spine features. The spine-ts WebGL and Player backends support all Spine features.
spine-ts Canvas does not support mesh attachments, clipping attachments, or color tinting. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.canvas.SkeletonRenderer.useTriangleRendering` to true. Note that this experimental mesh rendering is slow and render with artifacts on some browsers. spine-ts Canvas does not support mesh attachments, clipping attachments, or color tinting. Only the alpha channel from tint colors is applied. Experimental support for mesh attachments can be enabled by setting `spine.SkeletonRenderer.useTriangleRendering` to true. Note that this experimental mesh rendering is slow and render with artifacts on some browsers.
spine-ts THREE.JS does not support two color tinting or blend modes. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings. spine-ts THREE.JS does not support two color tinting or blend modes. The THREE.JS backend provides `SkeletonMesh.zOffset` to avoid z-fighting. Adjust to your near/far plane settings.

8884
spine-ts/build/spine-canvas.js
View File

File diff suppressed because one or more lines are too long

4
spine-ts/build/spine-canvas.js.map
View File

File diff suppressed because one or more lines are too long

5097
spine-ts/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
spine-ts/package.json
View File

@ -3,12 +3,18 @@
"version": "4.0.1", "version": "4.0.1",
"description": "The official Spine Runtimes for the web.", "description": "The official Spine Runtimes for the web.",
"scripts": { "scripts": {
"build": "rm -rf build && npm run build:core && npm run build:canvas && npm run build:webgl && npm run build:player && npm run build:threejs", "build": "rm -rf build && concurrently \"npm run build:core\" \"npm run build:canvas\" \"npm run build:webgl\" \"npm run build:player\" \"npm run build:threejs\"",
"build:core": "npx esbuild --bundle spine-core/src/index.ts --tsconfig=spine-core/tsconfig.json --minify --sourcemap --outfile=build/spine-core.js --format=iife --global-name=\"spine\"", "build:modules": "tsc -b -clean && tsc -b",
"build:canvas": "npx esbuild --bundle spine-canvas/src/index.ts --tsconfig=spine-canvas/tsconfig.json --minify --sourcemap --outfile=build/spine-canvas.js --format=iife --global-name=\"spine\"", "build:core": "npx esbuild --bundle spine-core/src/index.ts --tsconfig=spine-core/tsconfig.json --sourcemap --outfile=build/spine-core.js --format=iife --global-name=\"spine\"",
"build:webgl": "npx esbuild --bundle spine-webgl/src/index.ts --tsconfig=spine-webgl/tsconfig.json --minify --sourcemap --outfile=build/spine-webgl.js --format=iife --global-name=\"spine\"", "build:canvas": "npx esbuild --bundle spine-canvas/src/index.ts --tsconfig=spine-canvas/tsconfig.json --sourcemap --outfile=build/spine-canvas.js --format=iife --global-name=\"spine\"",
"build:player": "npx esbuild --bundle spine-player/src/index.ts --tsconfig=spine-player/tsconfig.json --minify --sourcemap --outfile=build/spine-player.js --format=iife --global-name=\"spine\"", "build:webgl": "npx esbuild --bundle spine-webgl/src/index.ts --tsconfig=spine-webgl/tsconfig.json --sourcemap --outfile=build/spine-webgl.js --format=iife --global-name=\"spine\"",
"build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json --minify --sourcemap --outfile=build/spine-threejs.js --external:three --format=iife --global-name=\"spine\"" "build:player": "npx esbuild --bundle spine-player/src/index.ts --tsconfig=spine-player/tsconfig.json --sourcemap --outfile=build/spine-player.js --format=iife --global-name=\"spine\"",
"build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json --sourcemap --outfile=build/spine-threejs.js --external:three --format=iife --global-name=\"spine\"",
"dev": "concurrently \"npx live-server --no-browser\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:player\" \"npm run dev:threejs\"",
"dev:canvas": "npm run build:canvas -- --watch",
"dev:webgl": "npm run build:webgl -- --watch",
"dev:player": "npm run build:player -- --watch",
"dev:threejs": "npm run build:threejs -- --watch"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -38,11 +44,10 @@
"spine-webgl" "spine-webgl"
], ],
"devDependencies": { "devDependencies": {
"@rollup/plugin-typescript": "^8.2.5", "concurrently": "^6.2.1",
"esbuild": "^0.12.22", "esbuild": "^0.12.22",
"live-server": "^1.2.1",
"npx": "^10.2.2", "npx": "^10.2.2",
"rollup": "^2.56.3",
"rollup-plugin-dts": "^3.0.2",
"typescript": "^4.3.5" "typescript": "^4.3.5"
} }
} }

76
spine-ts/spine-canvas/example/index.html
View File

@ -2,46 +2,59 @@
<script src="../../build/spine-canvas.js"></script> <script src="../../build/spine-canvas.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</body> </body>
<script> <script>
var lastFrameTime = Date.now() / 1000; var lastFrameTime = Date.now() / 1000;
var canvas, context; var canvas, context;
var assetManager; var assetManager;
var skeleton, state, bounds; var skeleton, state, bounds;
var skeletonRenderer; var skeletonRenderer;
var skelName = "spineboy-ess"; var skelName = "spineboy-ess";
var animName = "walk"; var animName = "walk";
function init () { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = window.innerWidth; canvas.width = window.innerWidth;
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
context = canvas.getContext("2d"); context = canvas.getContext("2d");
skeletonRenderer = new spine.canvas.SkeletonRenderer(context); skeletonRenderer = new spine.SkeletonRenderer(context);
// enable debug rendering // enable debug rendering
skeletonRenderer.debugRendering = true; skeletonRenderer.debugRendering = true;
// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers // enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
skeletonRenderer.triangleRendering = false; skeletonRenderer.triangleRendering = false;
assetManager = new spine.canvas.AssetManager("assets/"); assetManager = new spine.AssetManager("assets/");
assetManager.loadText(skelName + ".json"); assetManager.loadText(skelName + ".json");
assetManager.loadText(skelName.replace("-pro", "").replace("-ess", "") + ".atlas"); assetManager.loadText(skelName.replace("-pro", "").replace("-ess", "") + ".atlas");
assetManager.loadTexture(skelName.replace("-pro", "").replace("-ess", "") + ".png"); assetManager.loadTexture(skelName.replace("-pro", "").replace("-ess", "") + ".png");
requestAnimationFrame(load); requestAnimationFrame(load);
} }
function load () { function load() {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var data = loadSkeleton(skelName, animName, "default"); var data = loadSkeleton(skelName, animName, "default");
skeleton = data.skeleton; skeleton = data.skeleton;
@ -51,9 +64,9 @@ function load () {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function loadSkeleton (name, initialAnimation, skin) { function loadSkeleton(name, initialAnimation, skin) {
if (skin === undefined) skin = "default"; if (skin === undefined) skin = "default";
// Load the texture atlas using name.atlas and name.png from the AssetManager. // Load the texture atlas using name.atlas and name.png from the AssetManager.
@ -78,25 +91,25 @@ function loadSkeleton (name, initialAnimation, skin) {
var animationState = new spine.AnimationState(new spine.AnimationStateData(skeleton.data)); var animationState = new spine.AnimationState(new spine.AnimationStateData(skeleton.data));
animationState.setAnimation(0, initialAnimation, true); animationState.setAnimation(0, initialAnimation, true);
animationState.addListener({ animationState.addListener({
event: function(trackIndex, event) { event: function (trackIndex, event) {
// console.log("Event on track " + trackIndex + ": " + JSON.stringify(event)); // console.log("Event on track " + trackIndex + ": " + JSON.stringify(event));
}, },
complete: function(trackIndex, loopCount) { complete: function (trackIndex, loopCount) {
// console.log("Animation on track " + trackIndex + " completed, loop count: " + loopCount); // console.log("Animation on track " + trackIndex + " completed, loop count: " + loopCount);
}, },
start: function(trackIndex) { start: function (trackIndex) {
// console.log("Animation on track " + trackIndex + " started"); // console.log("Animation on track " + trackIndex + " started");
}, },
end: function(trackIndex) { end: function (trackIndex) {
// console.log("Animation on track " + trackIndex + " ended"); // console.log("Animation on track " + trackIndex + " ended");
} }
}) })
// Pack everything up and return to caller. // Pack everything up and return to caller.
return { skeleton: skeleton, state: animationState, bounds: bounds }; return { skeleton: skeleton, state: animationState, bounds: bounds };
} }
function calculateBounds(skeleton) { function calculateBounds(skeleton) {
var data = skeleton.data; var data = skeleton.data;
skeleton.setToSetupPose(); skeleton.setToSetupPose();
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
@ -104,9 +117,9 @@ function calculateBounds(skeleton) {
var size = new spine.Vector2(); var size = new spine.Vector2();
skeleton.getBounds(offset, size, []); skeleton.getBounds(offset, size, []);
return { offset: offset, size: size }; return { offset: offset, size: size };
} }
function render () { function render() {
var now = Date.now() / 1000; var now = Date.now() / 1000;
var delta = now - lastFrameTime; var delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
@ -133,9 +146,9 @@ function render () {
context.stroke(); context.stroke();
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function resize () { function resize() {
var w = canvas.clientWidth; var w = canvas.clientWidth;
var h = canvas.clientHeight; var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) { if (canvas.width != w || canvas.height != h) {
@ -157,11 +170,12 @@ function resize () {
context.scale(1 / scale, 1 / scale); context.scale(1 / scale, 1 / scale);
context.translate(-centerX, -centerY); context.translate(-centerX, -centerY);
context.translate(width / 2, height / 2); context.translate(width / 2, height / 2);
} }
(function() { (function () {
init(); init();
}()); }());
</script> </script>
</html> </html>

23
spine-ts/spine-canvas/src/index.ts
View File

@ -1,27 +1,4 @@
export * from "./AssetManager"; export * from "./AssetManager";
export * from "./CanvasTexture"; export * from "./CanvasTexture";
export * from "./SkeletonRenderer"; export * from "./SkeletonRenderer";
export * from "@esotericsoftware/spine-core" export * from "@esotericsoftware/spine-core"
// Before modularization, we would expose spine-core on the global
// `spine` object, and spine-canvas on the global `spine.canvas` object.
// This was used by clients when including spine-canvas via <script src="spine-canvas.js">
//
// Now with modularization and using esbuild for bundling, we need to emulate this old
// behaviour as to not break old clients.
//
// We pass `--global-name=spine` to esbuild. This will create an object containing
// all exports and assign it to the global variable called `spine`.
//
// That solves half the issue. We also need to assign the exports object to
// `spine.canvas`. esbuild creates a local variable called `scr_exports` pointing
// to the exports object. We get to it via eval, then assign it to itself, on a new
// property called `canvas`. The client can then access the APIs through `spine` and
// `spine.canvas` as before (with the caveat that both spine-core and spine-canvas are
// now in `spine` and `spine.canvas`).
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
let exports = eval("src_exports");
if (exports) exports.canvas = exports;

23
spine-ts/spine-player/src/index.ts
View File

@ -1,27 +1,4 @@
export * from './Player'; export * from './Player';
export * from './PlayerEditor'; export * from './PlayerEditor';
export * from "@esotericsoftware/spine-core"; export * from "@esotericsoftware/spine-core";
export * from "@esotericsoftware/spine-webgl"; export * from "@esotericsoftware/spine-webgl";
// Before modularization, we would expose spine-core on the global
// `spine` object, and spine-webgl on the global `spine.webgl` object.
// This was used by clients when including spine-webgl via <script src="spine-webgl.js">
//
// Now with modularization and using esbuild for bundling, we need to emulate this old
// behaviour as to not break old clients.
//
// We pass `--global-name=spine` to esbuild. This will create an object containing
// all exports and assign it to the global variable called `spine`.
//
// That solves half the issue. We also need to assign the exports object to
// `spine.webgl`. esbuild creates a local variable called `scr_exports` pointing
// to the exports object. We get to it via eval, then assign it to itself, on a new
// property called `webgl`. The client can then access the APIs through `spine` and
// `spine.webgl` as before (with the caveat that both spine-core and spine-webgl are
// now in `spine` and `spine.webgl`).
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
let exports = eval("src_exports");
if (exports) exports.webgl = exports;

4
spine-ts/spine-threejs/example/index.html
View File

@ -52,7 +52,7 @@
canvas = renderer.domElement; canvas = renderer.domElement;
// load the assets required to display the Raptor model // load the assets required to display the Raptor model
assetManager = new spine.threejs.AssetManager(baseUrl); assetManager = new spine.AssetManager(baseUrl);
assetManager.loadText(skeletonFile); assetManager.loadText(skeletonFile);
assetManager.loadTextureAtlas(atlasFile); assetManager.loadTextureAtlas(atlasFile);
@ -82,7 +82,7 @@
var skeletonData = skeletonJson.readSkeletonData(assetManager.require(skeletonFile)); var skeletonData = skeletonJson.readSkeletonData(assetManager.require(skeletonFile));
// Create a SkeletonMesh from the data and attach it to the scene // Create a SkeletonMesh from the data and attach it to the scene
skeletonMesh = new spine.threejs.SkeletonMesh(skeletonData, function (parameters) { skeletonMesh = new spine.SkeletonMesh(skeletonData, function (parameters) {
parameters.depthTest = false; parameters.depthTest = false;
}); });
skeletonMesh.state.setAnimation(0, animation, true); skeletonMesh.state.setAnimation(0, animation, true);

23
spine-ts/spine-threejs/src/index.ts
View File

@ -3,27 +3,4 @@ export * from './AssetManager';
export * from './MeshBatcher'; export * from './MeshBatcher';
export * from './SkeletonMesh'; export * from './SkeletonMesh';
export * from './ThreeJsTexture'; export * from './ThreeJsTexture';
export * from "@esotericsoftware/spine-core"; export * from "@esotericsoftware/spine-core";
// Before modularization, we would expose spine-core on the global
// `spine` object, and spine-threejs on the global `spine.threejs` object.
// This was used by clients when including spine-threejs via <script src="spine-threejs.js">
//
// Now with modularization and using esbuild for bundling, we need to emulate this old
// behaviour as to not break old clients.
//
// We pass `--global-name=spine` to esbuild. This will create an object containing
// all exports and assign it to the global variable called `spine`.
//
// That solves half the issue. We also need to assign the exports object to
// `spine.threejs`. esbuild creates a local variable called `scr_exports` pointing
// to the exports object. We get to it via eval, then assign it to itself, on a new
// property called `threejs`. The client can then access the APIs through `spine` and
// `spine.threejs` as before (with the caveat that both spine-core and spine-threejs are
// now in `spine` and `spine.threejs`).
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
let exports = eval("src_exports");
if (exports) exports.threejs = exports;

32
spine-ts/spine-webgl/demos/additiveblending.js
View File

@ -1,4 +1,4 @@
var additiveBlendingDemo = function(canvas, bgColor) { var additiveBlendingDemo = function (canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -11,7 +11,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
var target = null; var target = null;
var dragging = false; var dragging = false;
var handle = new spine.Vector2(); var handle = new spine.Vector2();
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
var isPlaying = true; var isPlaying = true;
var left, right, up, down; var left, right, up, down;
@ -25,10 +25,10 @@ var additiveBlendingDemo = function(canvas, bgColor) {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1); return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
}; };
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
@ -36,7 +36,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
cursor = document.getElementById("cursor"); cursor = document.getElementById("cursor");
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").owl); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").owl);
@ -73,17 +73,17 @@ var additiveBlendingDemo = function(canvas, bgColor) {
setupInput(); setupInput();
} }
function calculateBlend (x, y, isPageCoords) { function calculateBlend(x, y, isPageCoords) {
var canvasBounds = canvas.getBoundingClientRect(); var canvasBounds = canvas.getBoundingClientRect();
var centerX = canvasBounds.x + canvasBounds.width / 2; var centerX = canvasBounds.x + canvasBounds.width / 2;
var centerY = canvasBounds.y + canvasBounds.height / 2; var centerY = canvasBounds.y + canvasBounds.height / 2;
right.alpha = x < centerX ? 1 - x / centerX : 0; right.alpha = x < centerX ? 1 - x / centerX : 0;
left.alpha = x > centerX ? (x - centerX) / (window.innerWidth - centerX): 0; left.alpha = x > centerX ? (x - centerX) / (window.innerWidth - centerX) : 0;
up.alpha = y < centerY ? 1 - y / centerY : 0; up.alpha = y < centerY ? 1 - y / centerY : 0;
down.alpha = y > centerY ? (y - centerY) / (window.innerHeight - centerY): 0; down.alpha = y > centerY ? (y - centerY) / (window.innerHeight - centerY) : 0;
} }
function setupInput () { function setupInput() {
if (!isMobileDevice()) { if (!isMobileDevice()) {
document.addEventListener("mousemove", function (event) { document.addEventListener("mousemove", function (event) {
clientMouseX = event.clientX; clientMouseX = event.clientX;
@ -91,18 +91,18 @@ var additiveBlendingDemo = function(canvas, bgColor) {
mouseMoved = true; mouseMoved = true;
}, false); }, false);
} else { } else {
var input = new spine.webgl.Input(canvas); var input = new spine.Input(canvas);
input.addListener({ input.addListener({
down: function(x, y) { down: function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) { if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
dragging = true; dragging = true;
} }
}, },
up: function(x, y) { up: function (x, y) {
dragging = false; dragging = false;
}, },
dragged: function(x, y) { dragged: function (x, y) {
if (dragging && x > 0 && x < canvas.width && y > 0 && y < canvas.height) { if (dragging && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
handle.x = coords.x; handle.x = coords.x;
@ -114,7 +114,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
} }
} }
function render () { function render() {
if (!isMobileDevice() && mouseMoved) calculateBlend(clientMouseX, clientMouseY, true); if (!isMobileDevice() && mouseMoved) calculateBlend(clientMouseX, clientMouseY, true);
timeKeeper.update(); timeKeeper.update();
@ -126,7 +126,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.4; renderer.camera.viewportWidth = bounds.x * 1.4;
renderer.camera.viewportHeight = bounds.y * 1.4; renderer.camera.viewportHeight = bounds.y * 1.4;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

16
spine-ts/spine-webgl/demos/clipping.js
View File

@ -1,4 +1,4 @@
var clippingDemo = function(canvas, bgColor) { var clippingDemo = function (canvas, bgColor) {
var gl, renderer, assetManager; var gl, renderer, assetManager;
var skeleton, state, bounds; var skeleton, state, bounds;
var timeKeeper; var timeKeeper;
@ -6,16 +6,16 @@ var clippingDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
@ -67,7 +67,7 @@ var clippingDemo = function(canvas, bgColor) {
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
$("#clipping-drawtriangles").click(function() { $("#clipping-drawtriangles").click(function () {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked; renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked; renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
renderer.skeletonDebugRenderer.drawClipping = this.checked; renderer.skeletonDebugRenderer.drawClipping = this.checked;
@ -75,7 +75,7 @@ var clippingDemo = function(canvas, bgColor) {
}) })
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -93,7 +93,7 @@ var clippingDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.6; renderer.camera.viewportWidth = bounds.x * 1.6;
renderer.camera.viewportHeight = bounds.y * 1.6; renderer.camera.viewportHeight = bounds.y * 1.6;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

30
spine-ts/spine-webgl/demos/hoverboard.js
View File

@ -1,4 +1,4 @@
var hoverboardDemo = function(canvas, bgColor) { var hoverboardDemo = function (canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -10,23 +10,23 @@ var hoverboardDemo = function(canvas, bgColor) {
var target = null; var target = null;
var hoverTargets = []; var hoverTargets = [];
var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"]; var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
var isPlaying = true; var isPlaying = true;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
@ -51,12 +51,12 @@ var hoverboardDemo = function(canvas, bgColor) {
setupInput(); setupInput();
} }
function setupUI () { function setupUI() {
var checkbox = $("#hoverboard-drawbones"); var checkbox = $("#hoverboard-drawbones");
renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() { checkbox.change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });
@ -92,17 +92,17 @@ var hoverboardDemo = function(canvas, bgColor) {
}); });
} }
function setupInput () { function setupInput() {
input.addListener({ input.addListener({
down: function(x, y) { down: function (x, y) {
isPlaying = false; isPlaying = false;
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y); target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
}, },
up: function(x, y) { up: function (x, y) {
if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click(); if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
target = null; target = null;
}, },
dragged: function(x, y) { dragged: function (x, y) {
spineDemos.dragged(canvas, renderer, target, x, y); spineDemos.dragged(canvas, renderer, target, x, y);
}, },
moved: function (x, y) { moved: function (x, y) {
@ -111,7 +111,7 @@ var hoverboardDemo = function(canvas, bgColor) {
}); });
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -121,7 +121,7 @@ var hoverboardDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

18
spine-ts/spine-webgl/demos/imagechanges.js
View File

@ -1,4 +1,4 @@
var imageChangesDemo = function(canvas, bgColor) { var imageChangesDemo = function (canvas, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
@ -10,16 +10,16 @@ var imageChangesDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]); skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"]) skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI(); setupUI();
@ -58,7 +58,7 @@ var imageChangesDemo = function(canvas, bgColor) {
if (skeletonName === activeSkeleton) option.attr("selected", "selected"); if (skeletonName === activeSkeleton) option.attr("selected", "selected");
list.append(option); list.append(option);
} }
list.change(function() { list.change(function () {
activeSkeleton = $("#imagechanges-skeleton option:selected").text(); activeSkeleton = $("#imagechanges-skeleton option:selected").text();
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration; var animationDuration = active.state.getCurrent(0).animation.duration;
@ -83,7 +83,7 @@ var imageChangesDemo = function(canvas, bgColor) {
skeleton.getBounds(offset, size, []); skeleton.getBounds(offset, size, []);
var regions = []; var regions = [];
for(var i = 0; i < sequenceSlots.length; i++) { for (var i = 0; i < sequenceSlots.length; i++) {
var slot = skeleton.findSlot(sequenceSlots[i]); var slot = skeleton.findSlot(sequenceSlots[i]);
sequenceSlots[i] = slot; sequenceSlots[i] = slot;
var index = slot.data.index; var index = slot.data.index;
@ -104,7 +104,7 @@ var imageChangesDemo = function(canvas, bgColor) {
}; };
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -127,7 +127,7 @@ var imageChangesDemo = function(canvas, bgColor) {
} }
renderer.camera.viewportWidth = size.x * 2.4 / zoom; renderer.camera.viewportWidth = size.x * 2.4 / zoom;
renderer.camera.viewportHeight = size.y * 1.4 / zoom; renderer.camera.viewportHeight = size.y * 1.4 / zoom;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

20
spine-ts/spine-webgl/demos/meshes.js
View File

@ -1,4 +1,4 @@
var meshesDemo = function(canvas, bgColor) { var meshesDemo = function (canvas, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, bounds; var skeleton, bounds;
var timeKeeper; var timeKeeper;
@ -8,17 +8,17 @@ var meshesDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
timeKeeper.update(); timeKeeper.update();
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation"); skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation"); skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
@ -59,7 +59,7 @@ var meshesDemo = function(canvas, bgColor) {
if (skeletonName === activeSkeleton) option.attr("selected", "selected"); if (skeletonName === activeSkeleton) option.attr("selected", "selected");
list.append(option); list.append(option);
} }
list.change(function() { list.change(function () {
activeSkeleton = $("#meshes-skeleton option:selected").text(); activeSkeleton = $("#meshes-skeleton option:selected").text();
var active = skeletons[activeSkeleton]; var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration; var animationDuration = active.state.getCurrent(0).animation.duration;
@ -67,13 +67,13 @@ var meshesDemo = function(canvas, bgColor) {
}) })
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
$("#meshes-drawbonescheckbox").click(function() { $("#meshes-drawbonescheckbox").click(function () {
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}) })
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
$("#meshes-drawmeshtrianglescheckbox").click(function() { $("#meshes-drawmeshtrianglescheckbox").click(function () {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked; renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked; renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
}) })
@ -105,7 +105,7 @@ var meshesDemo = function(canvas, bgColor) {
}; };
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -119,7 +119,7 @@ var meshesDemo = function(canvas, bgColor) {
renderer.camera.position.y = offset.y + size.y / 2 + 20; renderer.camera.position.y = offset.y + size.y / 2 + 20;
renderer.camera.viewportWidth = size.x * 1.1; renderer.camera.viewportWidth = size.x * 1.1;
renderer.camera.viewportHeight = size.y * 1.1; renderer.camera.viewportHeight = size.y * 1.1;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

38
spine-ts/spine-webgl/demos/skins.js
View File

@ -1,4 +1,4 @@
var skinsDemo = function(canvas, bgColor) { var skinsDemo = function (canvas, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds; var skeleton, state, offset, bounds;
var timeKeeper; var timeKeeper;
@ -7,17 +7,17 @@ var skinsDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("heroes.atlas"); assetManager.loadTextureAtlas("heroes.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("heroes.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("heroes.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").heroes); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").heroes);
@ -38,13 +38,13 @@ var skinsDemo = function(canvas, bgColor) {
setupInput(); setupInput();
} }
function setupInput (){ function setupInput() {
input.addListener({ input.addListener({
down: function(x, y) { down: function (x, y) {
swingSword(); swingSword();
}, },
up: function(x, y) { }, up: function (x, y) { },
dragged: function(x, y) { }, dragged: function (x, y) { },
moved: function (x, y) { } moved: function (x, y) { }
}); });
} }
@ -103,7 +103,7 @@ var skinsDemo = function(canvas, bgColor) {
} }
list.append(option); list.append(option);
} }
list.change(function() { list.change(function () {
activeSkin = $("#skins-skin option:selected").text(); activeSkin = $("#skins-skin option:selected").text();
skeleton.setSkinByName(activeSkin); skeleton.setSkinByName(activeSkin);
skeleton.setSlotsToSetupPose(); skeleton.setSlotsToSetupPose();
@ -115,7 +115,7 @@ var skinsDemo = function(canvas, bgColor) {
randomizeSkins = document.getElementById("skins-randomizeskins"); randomizeSkins = document.getElementById("skins-randomizeskins");
} }
function setSkin (skin) { function setSkin(skin) {
var slot = skeleton.findSlot("item_near"); var slot = skeleton.findSlot("item_near");
var weapon = slot.getAttachment(); var weapon = slot.getAttachment();
skeleton.setSkin(skin); skeleton.setSkin(skin);
@ -123,26 +123,26 @@ var skinsDemo = function(canvas, bgColor) {
slot.setAttachment(weapon); slot.setAttachment(weapon);
} }
function swingSword () { function swingSword() {
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0); state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
} }
function randomizeSkin () { function randomizeSkin() {
var result; var result;
var count = 0; var count = 0;
for (var skin in skeleton.data.skins) { for (var skin in skeleton.data.skins) {
if (skeleton.data.skins[skin].name === "default") continue; if (skeleton.data.skins[skin].name === "default") continue;
if (Math.random() < 1/++count) { if (Math.random() < 1 / ++count) {
result = skeleton.data.skins[skin]; result = skeleton.data.skins[skin];
} }
} }
setSkin(result); setSkin(result);
$("#skins-skin option").filter(function() { $("#skins-skin option").filter(function () {
return ($(this).text() == result.name); return ($(this).text() == result.name);
}).prop("selected", true); }).prop("selected", true);
} }
function randomizeAttachments () { function randomizeAttachments() {
var skins = []; var skins = [];
for (var skin in skeleton.data.skins) { for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin]; skin = skeleton.data.skins[skin];
@ -162,7 +162,7 @@ var skinsDemo = function(canvas, bgColor) {
randomizeSkins.checked = false; randomizeSkins.checked = false;
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -178,7 +178,7 @@ var skinsDemo = function(canvas, bgColor) {
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.camera.viewportWidth = bounds.x * 3; renderer.camera.viewportWidth = bounds.x * 3;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

32
spine-ts/spine-webgl/demos/spritesheets.js
View File

@ -1,4 +1,4 @@
var spritesheetsDemo = function(canvas, bgColor) { var spritesheetsDemo = function (canvas, bgColor) {
var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8); var SKELETON_ATLAS_COLOR = new spine.Color(0, 0.8, 0, 0.8);
var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8); var FRAME_ATLAS_COLOR = new spine.Color(0.8, 0, 0, 0.8);
@ -13,17 +13,17 @@ var spritesheetsDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").raptor); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").raptor);
@ -55,20 +55,20 @@ var spritesheetsDemo = function(canvas, bgColor) {
$("#spritesheets-overlay").addClass("overlay"); $("#spritesheets-overlay").addClass("overlay");
} }
function setupUI () { function setupUI() {
timeSlider = $("#spritesheets-timeslider").data("slider"); timeSlider = $("#spritesheets-timeslider").data("slider");
timeSlider.set(0.5); timeSlider.set(0.5);
timeSliderLabel = $("#spritesheets-timeslider-label")[0]; timeSliderLabel = $("#spritesheets-timeslider-label")[0];
} }
function setupInput () { function setupInput() {
input.addListener({ input.addListener({
down: function(x, y) { down: function (x, y) {
setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump"); setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump");
}, },
up: function(x, y) { }, up: function (x, y) { },
moved: function(x, y) { }, moved: function (x, y) { },
dragged: function(x, y) { } dragged: function (x, y) { }
}); });
$("#spritesheets-roar").click(function () { $("#spritesheets-roar").click(function () {
setAnimation("roar"); setAnimation("roar");
@ -78,20 +78,20 @@ var spritesheetsDemo = function(canvas, bgColor) {
}); });
} }
function setAnimation (name) { function setAnimation(name) {
animationState.setAnimation(0, name, false); animationState.setAnimation(0, name, false);
animationState.addAnimation(0, "walk", true, 0); animationState.addAnimation(0, "walk", true, 0);
} }
function resize () { function resize() {
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25; renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
renderer.camera.position.y = offset.y + viewportHeight / 2 - 100; renderer.camera.position.y = offset.y + viewportHeight / 2 - 100;
renderer.camera.viewportWidth = viewportWidth * 1.2; renderer.camera.viewportWidth = viewportWidth * 1.2;
renderer.camera.viewportHeight = viewportHeight * 1.2; renderer.camera.viewportHeight = viewportHeight * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;

34
spine-ts/spine-webgl/demos/stretchyman.js
View File

@ -1,4 +1,4 @@
var stretchymanDemo = function(canvas, bgColor) { var stretchymanDemo = function (canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -17,23 +17,23 @@ var stretchymanDemo = function(canvas, bgColor) {
"head controller", "head controller",
"hip controller" "hip controller"
]; ];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
var kneePos = new spine.Vector2(); var kneePos = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0; var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman);
@ -61,21 +61,21 @@ var stretchymanDemo = function(canvas, bgColor) {
var checkbox = $("#stretchyman-drawbones"); var checkbox = $("#stretchyman-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() { checkbox.change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });
} }
function setupInput (){ function setupInput() {
input.addListener({ input.addListener({
down: function(x, y) { down: function (x, y) {
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y); target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
}, },
up: function(x, y) { up: function (x, y) {
target = null; target = null;
}, },
dragged: function(x, y) { dragged: function (x, y) {
spineDemos.dragged(canvas, renderer, target, x, y); spineDemos.dragged(canvas, renderer, target, x, y);
if (target && target.data.name === "head controller") { if (target && target.data.name === "head controller") {
var hipControl = skeleton.findBone("hip controller"); var hipControl = skeleton.findBone("hip controller");
@ -89,7 +89,7 @@ var stretchymanDemo = function(canvas, bgColor) {
}); });
} }
function center (middleBone, hipBone, footBone, amount, dir) { function center(middleBone, hipBone, footBone, amount, dir) {
temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0) temp.set(footBone.worldX + skeleton.x, footBone.worldY + skeleton.y, 0)
.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0)); .sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
var dist = Math.sqrt(temp.x * temp.x + temp.y * temp.y); var dist = Math.sqrt(temp.x * temp.x + temp.y * temp.y);
@ -101,15 +101,15 @@ var stretchymanDemo = function(canvas, bgColor) {
middleBone.children[0].y = (22 + Math.max(0, amount - dist * 0.3)) * dir; middleBone.children[0].y = (22 + Math.max(0, amount - dist * 0.3)) * dir;
} }
function rotate (handBone, elbowBone) { function rotate(handBone, elbowBone) {
// can do all this in world space cause handBone is essentially in world space // can do all this in world space cause handBone is essentially in world space
var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize(); var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180; var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180;
if (v.y < 0) angle = 360 - angle; if (v.y < 0) angle = 360 - angle;
handBone.rotation = angle; handBone.rotation = angle;
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -130,7 +130,7 @@ var stretchymanDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.5; renderer.camera.viewportHeight = bounds.y * 1.5;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

16
spine-ts/spine-webgl/demos/tank.js
View File

@ -1,4 +1,4 @@
var tankDemo = function(canvas, bgColor) { var tankDemo = function (canvas, bgColor) {
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds; var skeleton, state, offset, bounds;
var timeKeeper; var timeKeeper;
@ -6,16 +6,16 @@ var tankDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").tank); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").tank);
@ -65,13 +65,13 @@ var tankDemo = function(canvas, bgColor) {
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
$("#tank-drawbones").change(function() { $("#tank-drawbones").change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -94,7 +94,7 @@ var tankDemo = function(canvas, bgColor) {
renderer.camera.position.y = bounds.y - 505; renderer.camera.position.y = bounds.y - 505;
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

28
spine-ts/spine-webgl/demos/transforms.js
View File

@ -1,4 +1,4 @@
var transformsDemo = function(canvas, bgColor) { var transformsDemo = function (canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -11,23 +11,23 @@ var transformsDemo = function(canvas, bgColor) {
var target = null; var target = null;
var hoverTargets = [null, null, null]; var hoverTargets = [null, null, null];
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"]; var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0; var lastRotation = 0;
var mix, lastOffset = 0, lastMix = 0.5; var mix, lastOffset = 0, lastMix = 0.5;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms);
@ -80,23 +80,23 @@ var transformsDemo = function(canvas, bgColor) {
} }
function setupInput() { function setupInput() {
var getRotation = function(x, y) { var getRotation = function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
var wheel1 = skeleton.findBone("wheel1overlay"); var wheel1 = skeleton.findBone("wheel1overlay");
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize(); var v = coords.sub(new spine.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees; var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
if (v.y < 0) angle = 360 - angle; if (v.y < 0) angle = 360 - angle;
return angle; return angle;
} }
input.addListener({ input.addListener({
down: function(x, y) { down: function (x, y) {
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y); target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
if (target === rotateHandle) lastRotation = getRotation(x, y); if (target === rotateHandle) lastRotation = getRotation(x, y);
}, },
up: function(x, y) { up: function (x, y) {
target = null; target = null;
}, },
dragged: function(x, y) { dragged: function (x, y) {
if (target === rotateHandle) { if (target === rotateHandle) {
var rotation = getRotation(x, y); var rotation = getRotation(x, y);
var delta = rotation - lastRotation; var delta = rotation - lastRotation;
@ -111,14 +111,14 @@ var transformsDemo = function(canvas, bgColor) {
}) })
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.6; renderer.camera.viewportWidth = bounds.x * 1.6;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

20
spine-ts/spine-webgl/demos/transitions.js
View File

@ -1,4 +1,4 @@
var transitionsDemo = function(canvas, loadingComplete, bgColor) { var transitionsDemo = function (canvas, loadingComplete, bgColor) {
var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1); var OUTLINE_COLOR = new spine.Color(0, 0.8, 0, 1);
var canvas, gl, renderer, input, assetManager; var canvas, gl, renderer, input, assetManager;
@ -8,13 +8,13 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
timeSlider = $("#transitions-timeslider").data("slider"); timeSlider = $("#transitions-timeslider").data("slider");
@ -22,7 +22,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
timeSliderLabel = $("#transitions-timeslider-label")[0]; timeSliderLabel = $("#transitions-timeslider-label")[0];
} }
function loadingComplete () { function loadingComplete() {
skeleton = loadSkeleton("spineboy"); skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data); skeletonNoMix = new spine.Skeleton(skeleton.data);
state = createState(0.25); state = createState(0.25);
@ -51,14 +51,14 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
}); });
} }
function createState (mix) { function createState(mix) {
var stateData = new spine.AnimationStateData(skeleton.data); var stateData = new spine.AnimationStateData(skeleton.data);
stateData.defaultMix = mix; stateData.defaultMix = mix;
var state = new spine.AnimationState(stateData); var state = new spine.AnimationState(stateData);
return state; return state;
} }
function setAnimations (state, delay, first) { function setAnimations(state, delay, first) {
state.addAnimation(0, "idle", true, first); state.addAnimation(0, "idle", true, first);
state.addAnimation(0, "walk", true, 0.6); state.addAnimation(0, "walk", true, 0.6);
state.addAnimation(0, "jump", false, 1); state.addAnimation(0, "jump", false, 1);
@ -84,7 +84,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
return skeleton; return skeleton;
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta * timeSlider.get(); var delta = timeKeeper.delta * timeSlider.get();
if (timeSliderLabel) { if (timeSliderLabel) {
@ -100,7 +100,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
renderer.camera.position.y = offset.y + size.y / 2 - 40; renderer.camera.position.y = offset.y + size.y / 2 - 40;
renderer.camera.viewportWidth = size.x * 2; renderer.camera.viewportWidth = size.x * 2;
renderer.camera.viewportHeight = size.y * 2; renderer.camera.viewportHeight = size.y * 2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

26
spine-ts/spine-webgl/demos/utils.js
View File

@ -31,7 +31,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
(function () { (function () {
var timeKeeper = new spine.TimeKeeper(); var timeKeeper = new spine.TimeKeeper();
function loop () { function loop() {
timeKeeper.update(); timeKeeper.update();
if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond); if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
requestAnimationFrame(loop); requestAnimationFrame(loop);
@ -73,11 +73,11 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
demo.visible = (vertInView && horInView); demo.visible = (vertInView && horInView);
} }
function createCanvases (numCanvases) { function createCanvases(numCanvases) {
for (var i = 0; i < numCanvases; i++) { for (var i = 0; i < numCanvases; i++) {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
canvas.width = 1; canvas.height = 1; canvas.width = 1; canvas.height = 1;
canvas.context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); canvas.context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
canvas.id = "canvas-" + i; canvas.id = "canvas-" + i;
spineDemos.canvases.push(canvas); spineDemos.canvases.push(canvas);
} }
@ -99,9 +99,9 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
demo.placeholder = placeholder; demo.placeholder = placeholder;
demo.canvas = canvas; demo.canvas = canvas;
demo.visible = false; demo.visible = false;
var renderer = new spine.webgl.SceneRenderer(canvas, canvas.context.gl); var renderer = new spine.SceneRenderer(canvas, canvas.context.gl);
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer); demo.loadingScreen = new spine.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function() { $(window).on('DOMContentLoaded load resize scroll', function () {
checkElementVisible(demo); checkElementVisible(demo);
renderDemo(demo); renderDemo(demo);
}); });
@ -109,8 +109,8 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
spineDemos.demos.push(demo); spineDemos.demos.push(demo);
} }
var coords = new spine.webgl.Vector3(); var coords = new spine.Vector3();
var mouse = new spine.webgl.Vector3(); var mouse = new spine.Vector3();
spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) { spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) {
mouse.set(x, canvas.clientHeight - y, 0) mouse.set(x, canvas.clientHeight - y, 0)
var bestDistance = 24, index = 0; var bestDistance = 24, index = 0;
@ -131,7 +131,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
return best; return best;
}; };
var position = new spine.webgl.Vector3(); var position = new spine.Vector3();
spineDemos.dragged = function (canvas, renderer, target, x, y) { spineDemos.dragged = function (canvas, renderer, target, x, y) {
if (target) { if (target) {
x = spine.MathUtils.clamp(x, 0, canvas.clientWidth) x = spine.MathUtils.clamp(x, 0, canvas.clientWidth)
@ -149,7 +149,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
}; };
loadSliders = function () { loadSliders = function () {
$(window).resize(function() { $(window).resize(function () {
$(".slider").each(function () { $(".slider").each(function () {
$(this).data("slider").resized(); $(this).data("slider").resized();
}); });
@ -164,7 +164,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
var hw = handle.width(), value = 0, object, lastX; var hw = handle.width(), value = 0, object, lastX;
handle = handle[0].style; handle = handle[0].style;
positionHandle(0); positionHandle(0);
function positionHandle (percent) { function positionHandle(percent) {
var w = div.width(); var w = div.width();
var x = Math.round((w - hw - 3) * percent + 1); var x = Math.round((w - hw - 3) * percent + 1);
if (x != lastX) { if (x != lastX) {
@ -179,14 +179,14 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
} }
value = percent; value = percent;
} }
function mouseEvent (e) { function mouseEvent(e) {
var x = e.pageX; var x = e.pageX;
if (!x && e.originalEvent.touches) x = e.originalEvent.touches[0].pageX; if (!x && e.originalEvent.touches) x = e.originalEvent.touches[0].pageX;
var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2))); var percent = Math.max(0, Math.min(1, (x - div.offset().left - hw / 2) / (div.width() - hw - 2)));
positionHandle(percent); positionHandle(percent);
if (object.changed) object.changed(percent); if (object.changed) object.changed(percent);
} }
function clearEvents () { function clearEvents() {
$(document).off("mouseup.slider mousemove.slider touchmove.slider touchend.slider"); $(document).off("mouseup.slider mousemove.slider touchmove.slider touchend.slider");
} }
div.on("mousedown touchstart", function (e) { div.on("mousedown touchstart", function (e) {

26
spine-ts/spine-webgl/demos/vine.js
View File

@ -1,4 +1,4 @@
var vineDemo = function(canvas, bgColor) { var vineDemo = function (canvas, bgColor) {
var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5); var COLOR_INNER = new spine.Color(0.8, 0, 0, 0.5);
var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8); var COLOR_OUTER = new spine.Color(0.8, 0, 0, 0.8);
var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5); var COLOR_INNER_SELECTED = new spine.Color(0.0, 0, 0.8, 0.5);
@ -10,22 +10,22 @@ var vineDemo = function(canvas, bgColor) {
var target = null; var target = null;
var hoverTargets = [null, null, null, null, null, null]; var hoverTargets = [null, null, null, null, null, null];
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"]; var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
var playButton, timeLine, isPlaying = true, playTime = 0; var playButton, timeLine, isPlaying = true, playTime = 0;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
function loadingComplete () { function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas")); var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader); var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine); var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine);
@ -78,7 +78,7 @@ var vineDemo = function(canvas, bgColor) {
renderer.skeletonDebugRenderer.drawPaths = false; renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
var checkbox = $("#vine-drawbones"); var checkbox = $("#vine-drawbones");
checkbox.change(function() { checkbox.change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked; renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked; renderer.skeletonDebugRenderer.drawBones = this.checked;
}); });
@ -86,13 +86,13 @@ var vineDemo = function(canvas, bgColor) {
function setupInput() { function setupInput() {
input.addListener({ input.addListener({
down: function(x, y) { down: function (x, y) {
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y); target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
}, },
up: function(x, y) { up: function (x, y) {
target = null; target = null;
}, },
dragged: function(x, y) { dragged: function (x, y) {
spineDemos.dragged(canvas, renderer, target, x, y); spineDemos.dragged(canvas, renderer, target, x, y);
}, },
moved: function (x, y) { moved: function (x, y) {
@ -101,7 +101,7 @@ var vineDemo = function(canvas, bgColor) {
}); });
} }
function render () { function render() {
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -121,7 +121,7 @@ var vineDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

82
spine-ts/spine-webgl/example/barebones.html
View File

@ -1,26 +1,39 @@
<html> <html>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<script> <script>
var canvas; var canvas;
var gl; var gl;
var shader; var shader;
var batcher; var batcher;
var mvp = new spine.webgl.Matrix4(); var mvp = new spine.Matrix4();
var assetManager; var assetManager;
var skeletonRenderer; var skeletonRenderer;
var lastFrameTime; var lastFrameTime;
var spineboy; var spineboy;
function init () { function init() {
// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when // Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
// loading textures. That is handled separately by PolygonBatcher. // loading textures. That is handled separately by PolygonBatcher.
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
@ -34,20 +47,20 @@ function init () {
} }
// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager. // Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
shader = spine.webgl.Shader.newTwoColoredTextured(gl); shader = spine.Shader.newTwoColoredTextured(gl);
batcher = new spine.webgl.PolygonBatcher(gl); batcher = new spine.PolygonBatcher(gl);
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1); mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl); skeletonRenderer = new spine.SkeletonRenderer(gl);
assetManager = new spine.webgl.AssetManager(gl); assetManager = new spine.AssetManager(gl);
// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png // Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
// file for the atlas. We then wait until all resources are loaded in the load() method. // file for the atlas. We then wait until all resources are loaded in the load() method.
assetManager.loadBinary("assets/spineboy-pro.skel"); assetManager.loadBinary("assets/spineboy-pro.skel");
assetManager.loadTextureAtlas("assets/spineboy-pma.atlas"); assetManager.loadTextureAtlas("assets/spineboy-pma.atlas");
requestAnimationFrame(load); requestAnimationFrame(load);
} }
function load () { function load() {
// Wait until the AssetManager has loaded all resources, then load the skeletons. // Wait until the AssetManager has loaded all resources, then load the skeletons.
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
spineboy = loadSpineboy("run", true); spineboy = loadSpineboy("run", true);
@ -56,9 +69,9 @@ function load () {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function loadSpineboy (initialAnimation, premultipliedAlpha) { function loadSpineboy(initialAnimation, premultipliedAlpha) {
// Load the texture atlas from the AssetManager. // Load the texture atlas from the AssetManager.
var atlas = assetManager.require("assets/spineboy-pma.atlas"); var atlas = assetManager.require("assets/spineboy-pma.atlas");
@ -81,18 +94,18 @@ function loadSpineboy (initialAnimation, premultipliedAlpha) {
// Pack everything up and return to caller. // Pack everything up and return to caller.
return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha }; return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
} }
function calculateSetupPoseBounds (skeleton) { function calculateSetupPoseBounds(skeleton) {
skeleton.setToSetupPose(); skeleton.setToSetupPose();
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
var size = new spine.Vector2(); var size = new spine.Vector2();
skeleton.getBounds(offset, size, []); skeleton.getBounds(offset, size, []);
return { offset: offset, size: size }; return { offset: offset, size: size };
} }
function render () { function render() {
var now = Date.now() / 1000; var now = Date.now() / 1000;
var delta = now - lastFrameTime; var delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
@ -113,8 +126,8 @@ function render () {
// Bind the shader and set the texture and model-view-projection matrix. // Bind the shader and set the texture and model-view-projection matrix.
shader.bind(); shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0); shader.setUniformi(spine.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values); shader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
// Start the batch and tell the SkeletonRenderer to render the active skeleton. // Start the batch and tell the SkeletonRenderer to render the active skeleton.
batcher.begin(shader); batcher.begin(shader);
@ -125,9 +138,9 @@ function render () {
shader.unbind(); shader.unbind();
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function resize () { function resize() {
var w = canvas.clientWidth; var w = canvas.clientWidth;
var h = canvas.clientHeight; var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) { if (canvas.width != w || canvas.height != h) {
@ -148,10 +161,11 @@ function resize () {
mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height); mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
gl.viewport(0, 0, canvas.width, canvas.height); gl.viewport(0, 0, canvas.width, canvas.height);
} }
init(); init();
</script> </script>
</body> </body>
</html> </html>

160
spine-ts/spine-webgl/example/index.html
View File

@ -2,45 +2,58 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<center> <center>
<div style="color: #fff; position: fixed; top: 0; width: 100%"> <div style="color: #fff; position: fixed; top: 0; width: 100%">
<span>Format:</span><select id="formatList"></select> <span>Format:</span><select id="formatList"></select>
<span>Skeleton:</span><select id="skeletonList"></select> <span>Skeleton:</span><select id="skeletonList"></select>
<span>Animation:</span><select id="animationList"></select> <span>Animation:</span><select id="animationList"></select>
<span>Skin:</span><select id="skinList"></select> <span>Skin:</span><select id="skinList"></select>
<span>Vertex Effect:</span><select id="effectList"></select> <span>Vertex Effect:</span><select id="effectList"></select>
<span>Debug:</span><input type="checkbox" id="debug"> <span>Debug:</span><input type="checkbox" id="debug">
</div> </div>
</center> </center>
<script> <script>
var canvas; var canvas;
var gl; var gl;
var shader; var shader;
var batcher; var batcher;
var mvp = new spine.webgl.Matrix4(); var mvp = new spine.Matrix4();
var skeletonRenderer; var skeletonRenderer;
var assetManager; var assetManager;
var debugRenderer; var debugRenderer;
var shapes; var shapes;
var lastFrameTime; var lastFrameTime;
var skeletons = {}; var skeletons = {};
var format = "JSON"; var format = "JSON";
var activeSkeleton = "spineboy"; var activeSkeleton = "spineboy";
var pow2 = new spine.Pow(2); var pow2 = new spine.Pow(2);
var swirlEffect = new spine.SwirlEffect(0); var swirlEffect = new spine.SwirlEffect(0);
var jitterEffect = new spine.JitterEffect(20, 20); var jitterEffect = new spine.JitterEffect(20, 20);
var swirlTime = 0; var swirlTime = 0;
function init () { function init() {
// Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when // Setup canvas and WebGL context. We pass alpha: false to canvas.getContext() so we don't use premultiplied alpha when
// loading textures. That is handled separately by PolygonBatcher. // loading textures. That is handled separately by PolygonBatcher.
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
@ -54,21 +67,21 @@ function init () {
} }
// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager. // Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
shader = spine.webgl.Shader.newTwoColoredTextured(gl); shader = spine.Shader.newTwoColoredTextured(gl);
batcher = new spine.webgl.PolygonBatcher(gl); batcher = new spine.PolygonBatcher(gl);
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1); mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl); skeletonRenderer = new spine.SkeletonRenderer(gl);
assetManager = new spine.webgl.AssetManager(gl, "assets/"); assetManager = new spine.AssetManager(gl, "assets/");
// Create a debug renderer and the ShapeRenderer it needs to render lines. // Create a debug renderer and the ShapeRenderer it needs to render lines.
debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl); debugRenderer = new spine.SkeletonDebugRenderer(gl);
debugRenderer.drawRegionAttachments = true; debugRenderer.drawRegionAttachments = true;
debugRenderer.drawBoundingBoxes = true; debugRenderer.drawBoundingBoxes = true;
debugRenderer.drawMeshHull = true; debugRenderer.drawMeshHull = true;
debugRenderer.drawMeshTriangles = true; debugRenderer.drawMeshTriangles = true;
debugRenderer.drawPaths = true; debugRenderer.drawPaths = true;
debugShader = spine.webgl.Shader.newColored(gl); debugShader = spine.Shader.newColored(gl);
shapes = new spine.webgl.ShapeRenderer(gl); shapes = new spine.ShapeRenderer(gl);
// Tell AssetManager to load the resources for each skeleton, including the exported data file, the .atlas file and the .png // Tell AssetManager to load the resources for each skeleton, including the exported data file, the .atlas file and the .png
// file for the atlas. We then wait until all resources are loaded in the load() method. // file for the atlas. We then wait until all resources are loaded in the load() method.
@ -97,9 +110,9 @@ function init () {
assetManager.loadText("mix-and-match-pro.json"); assetManager.loadText("mix-and-match-pro.json");
assetManager.loadTextureAtlas("mix-and-match-pma.atlas"); assetManager.loadTextureAtlas("mix-and-match-pma.atlas");
requestAnimationFrame(load); requestAnimationFrame(load);
} }
function load () { function load() {
// Wait until the AssetManager has loaded all resources, then load the skeletons. // Wait until the AssetManager has loaded all resources, then load the skeletons.
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
skeletons = { skeletons = {
@ -141,13 +154,13 @@ function load () {
requestAnimationFrame(render); // Loading is done, call render every frame. requestAnimationFrame(render); // Loading is done, call render every frame.
} else } else
requestAnimationFrame(load); requestAnimationFrame(load);
} }
function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) { function loadSkeleton(name, initialAnimation, premultipliedAlpha, skin) {
if (skin === undefined) skin = "default"; if (skin === undefined) skin = "default";
// Load the texture atlas using name.atlas from the AssetManager. // Load the texture atlas using name.atlas from the AssetManager.
var atlas = assetManager.require(name.replace(/(?:-ess|-pro)\.(skel|json)/, "") + (premultipliedAlpha ? "-pma": "") + ".atlas"); var atlas = assetManager.require(name.replace(/(?:-ess|-pro)\.(skel|json)/, "") + (premultipliedAlpha ? "-pma" : "") + ".atlas");
// Create an AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments // Create an AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
var atlasLoader = new spine.AtlasAttachmentLoader(atlas); var atlasLoader = new spine.AtlasAttachmentLoader(atlas);
@ -181,44 +194,44 @@ function loadSkeleton (name, initialAnimation, premultipliedAlpha, skin) {
} else } else
animationState.setAnimation(0, initialAnimation, true); animationState.setAnimation(0, initialAnimation, true);
function log (message) { function log(message) {
if ($('#debug').is(':checked')) console.log(message); if ($('#debug').is(':checked')) console.log(message);
} }
animationState.addListener({ animationState.addListener({
start: function(track) { start: function (track) {
log("Animation on track " + track.trackIndex + " started"); log("Animation on track " + track.trackIndex + " started");
}, },
interrupt: function(track) { interrupt: function (track) {
log("Animation on track " + track.trackIndex + " interrupted"); log("Animation on track " + track.trackIndex + " interrupted");
}, },
end: function(track) { end: function (track) {
log("Animation on track " + track.trackIndex + " ended"); log("Animation on track " + track.trackIndex + " ended");
}, },
disposed: function(track) { disposed: function (track) {
log("Animation on track " + track.trackIndex + " disposed"); log("Animation on track " + track.trackIndex + " disposed");
}, },
complete: function(track) { complete: function (track) {
log("Animation on track " + track.trackIndex + " completed"); log("Animation on track " + track.trackIndex + " completed");
}, },
event: function(track, event) { event: function (track, event) {
log("Event on track " + track.trackIndex + ": " + JSON.stringify(event)); log("Event on track " + track.trackIndex + ": " + JSON.stringify(event));
} }
}) })
// Pack everything up and return to caller. // Pack everything up and return to caller.
return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha }; return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
} }
function calculateSetupPoseBounds(skeleton) { function calculateSetupPoseBounds(skeleton) {
skeleton.setToSetupPose(); skeleton.setToSetupPose();
skeleton.updateWorldTransform(); skeleton.updateWorldTransform();
var offset = new spine.Vector2(); var offset = new spine.Vector2();
var size = new spine.Vector2(); var size = new spine.Vector2();
skeleton.getBounds(offset, size, []); skeleton.getBounds(offset, size, []);
return { offset: offset, size: size }; return { offset: offset, size: size };
} }
function setupUI () { function setupUI() {
var formatList = $("#formatList"); var formatList = $("#formatList");
formatList.append($("<option>Binary</option>")); formatList.append($("<option>Binary</option>"));
formatList.append($("<option>JSON</option>")); formatList.append($("<option>JSON</option>"));
@ -237,7 +250,7 @@ function setupUI () {
option.attr("value", effectName).text(effectName); option.attr("value", effectName).text(effectName);
effectList.append(option); effectList.append(option);
} }
var setupAnimationUI = function() { var setupAnimationUI = function () {
var animationList = $("#animationList"); var animationList = $("#animationList");
animationList.empty(); animationList.empty();
var skeleton = skeletons[activeSkeleton][format].skeleton; var skeleton = skeletons[activeSkeleton][format].skeleton;
@ -251,7 +264,7 @@ function setupUI () {
animationList.append(option); animationList.append(option);
} }
animationList.change(function() { animationList.change(function () {
var state = skeletons[activeSkeleton][format].state; var state = skeletons[activeSkeleton][format].state;
var skeleton = skeletons[activeSkeleton][format].skeleton; var skeleton = skeletons[activeSkeleton][format].skeleton;
var animationName = $("#animationList option:selected").text(); var animationName = $("#animationList option:selected").text();
@ -260,7 +273,7 @@ function setupUI () {
}) })
} }
var setupSkinUI = function() { var setupSkinUI = function () {
var skinList = $("#skinList"); var skinList = $("#skinList");
skinList.empty(); skinList.empty();
var skeleton = skeletons[activeSkeleton][format].skeleton; var skeleton = skeletons[activeSkeleton][format].skeleton;
@ -273,7 +286,7 @@ function setupUI () {
skinList.append(option); skinList.append(option);
} }
skinList.change(function() { skinList.change(function () {
var skeleton = skeletons[activeSkeleton][format].skeleton; var skeleton = skeletons[activeSkeleton][format].skeleton;
var skinName = $("#skinList option:selected").text(); var skinName = $("#skinList option:selected").text();
skeleton.setSkinByName(skinName); skeleton.setSkinByName(skinName);
@ -281,13 +294,13 @@ function setupUI () {
}) })
} }
skeletonList.change(function() { skeletonList.change(function () {
activeSkeleton = $("#skeletonList option:selected").text(); activeSkeleton = $("#skeletonList option:selected").text();
setupAnimationUI(); setupAnimationUI();
setupSkinUI(); setupSkinUI();
}) })
formatList.change(function() { formatList.change(function () {
format = $("#formatList option:selected").text(); format = $("#formatList option:selected").text();
setupAnimationUI(); setupAnimationUI();
setupSkinUI(); setupSkinUI();
@ -295,9 +308,9 @@ function setupUI () {
setupAnimationUI(); setupAnimationUI();
setupSkinUI(); setupSkinUI();
} }
function render () { function render() {
var now = Date.now() / 1000; var now = Date.now() / 1000;
var delta = now - lastFrameTime; var delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
@ -319,8 +332,8 @@ function render () {
// Bind the shader and set the texture and model-view-projection matrix. // Bind the shader and set the texture and model-view-projection matrix.
shader.bind(); shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0); shader.setUniformi(spine.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values); shader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
// Start the batch and tell the SkeletonRenderer to render the active skeleton. // Start the batch and tell the SkeletonRenderer to render the active skeleton.
batcher.begin(shader); batcher.begin(shader);
@ -331,7 +344,7 @@ function render () {
} else if (effect == "Swirl") { } else if (effect == "Swirl") {
swirlTime += delta; swirlTime += delta;
var percent = swirlTime % 2; var percent = swirlTime % 2;
if (percent > 1) percent = 1 - (percent -1 ); if (percent > 1) percent = 1 - (percent - 1);
swirlEffect.angle = pow2.apply(-60, 60, percent); swirlEffect.angle = pow2.apply(-60, 60, percent);
swirlEffect.centerX = bounds.offset.x + bounds.size.x / 2; swirlEffect.centerX = bounds.offset.x + bounds.size.x / 2;
swirlEffect.centerY = bounds.offset.y + bounds.size.y / 2; swirlEffect.centerY = bounds.offset.y + bounds.size.y / 2;
@ -350,7 +363,7 @@ function render () {
var debug = $('#debug').is(':checked'); var debug = $('#debug').is(':checked');
if (debug) { if (debug) {
debugShader.bind(); debugShader.bind();
debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values); debugShader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
debugRenderer.premultipliedAlpha = premultipliedAlpha; debugRenderer.premultipliedAlpha = premultipliedAlpha;
shapes.begin(debugShader); shapes.begin(debugShader);
debugRenderer.draw(shapes, skeleton); debugRenderer.draw(shapes, skeleton);
@ -359,9 +372,9 @@ function render () {
} }
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function resize () { function resize() {
var w = canvas.clientWidth; var w = canvas.clientWidth;
var h = canvas.clientHeight; var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) { if (canvas.width != w || canvas.height != h) {
@ -382,10 +395,11 @@ function resize () {
mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height); mvp.ortho2d(centerX - width / 2, centerY - height / 2, width, height);
gl.viewport(0, 0, canvas.width, canvas.height); gl.viewport(0, 0, canvas.width, canvas.height);
} }
init(); init();
</script> </script>
</body> </body>
</html> </html>

23
spine-ts/spine-webgl/src/index.ts
View File

@ -13,27 +13,4 @@ export * from './SkeletonDebugRenderer';
export * from './SkeletonRenderer'; export * from './SkeletonRenderer';
export * from './Vector3'; export * from './Vector3';
export * from './WebGL'; export * from './WebGL';
export * from "@esotericsoftware/spine-core"; export * from "@esotericsoftware/spine-core";
// Before modularization, we would expose spine-core on the global
// `spine` object, and spine-webgl on the global `spine.webgl` object.
// This was used by clients when including spine-webgl via <script src="spine-webgl.js">
//
// Now with modularization and using esbuild for bundling, we need to emulate this old
// behaviour as to not break old clients.
//
// We pass `--global-name=spine` to esbuild. This will create an object containing
// all exports and assign it to the global variable called `spine`.
//
// That solves half the issue. We also need to assign the exports object to
// `spine.webgl`. esbuild creates a local variable called `scr_exports` pointing
// to the exports object. We get to it via eval, then assign it to itself, on a new
// property called `webgl`. The client can then access the APIs through `spine` and
// `spine.webgl` as before (with the caveat that both spine-core and spine-webgl are
// now in `spine` and `spine.webgl`).
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
let exports = eval("src_exports");
if (exports) exports.webgl = exports;

41
spine-ts/spine-webgl/tests/test-additive-animation-blending.html
View File

@ -1,12 +1,15 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head>
<head>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
input, label { input,
label {
display: block; display: block;
} }
#controls { #controls {
position: absolute; position: absolute;
} }
@ -17,8 +20,9 @@
left: 0; left: 0;
} }
</style> </style>
</head> </head>
<body>
<body>
<canvas id="canvas" style="width: 640px; height: 480px;"></canvas> <canvas id="canvas" style="width: 640px; height: 480px;"></canvas>
<div id="controls"> <div id="controls">
<label>Up</label><input type="range" id="up" min="0" max="100" value="0"></input> <label>Up</label><input type="range" id="up" min="0" max="100" value="0"></input>
@ -26,16 +30,16 @@
<label>Left</label><input type="range" id="left" min="0" max="100" value="0"></input> <label>Left</label><input type="range" id="left" min="0" max="100" value="0"></input>
<label>Right</label><input type="range" id="right" min="0" max="100" value="0"></input> <label>Right</label><input type="range" id="right" min="0" max="100" value="0"></input>
</div> </div>
</body> </body>
<script> <script>
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
var gl = context.gl; var gl = context.gl;
var time = new spine.TimeKeeper(); var time = new spine.TimeKeeper();
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); var assetManager = new spine.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context); var renderer = new spine.SceneRenderer(canvas, context);
var skeleton, animationState; var skeleton, animationState;
var upEntry, downEntry, leftEntry, rightEntry; var upEntry, downEntry, leftEntry, rightEntry;
@ -43,7 +47,7 @@
assetManager.loadText("owl-pma.atlas"); assetManager.loadText("owl-pma.atlas");
assetManager.loadText("owl-pro.json"); assetManager.loadText("owl-pro.json");
function load () { function load() {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("owl-pma.atlas")); var atlas = new spine.TextureAtlas(assetManager.get("owl-pma.atlas"));
atlas.setTextures(assetManager); atlas.setTextures(assetManager);
@ -77,7 +81,7 @@
} }
} }
function render () { function render() {
time.update(); time.update();
animationState.update(time.delta); animationState.update(time.delta);
skeleton.setToSetupPose(); // Or key all bones used in the additive animations in a lower track, like idle. skeleton.setToSetupPose(); // Or key all bones used in the additive animations in a lower track, like idle.
@ -88,7 +92,7 @@
gl.clearColor(0.3, 0.3, 0.3, 1); gl.clearColor(0.3, 0.3, 0.3, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton); renderer.drawSkeleton(skeleton);
renderer.end(); renderer.end();
@ -96,22 +100,23 @@
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function setupUI () { function setupUI() {
$("#up").on("input", function() { $("#up").on("input", function () {
upEntry.alpha = $(this).val() / 100; upEntry.alpha = $(this).val() / 100;
}); });
$("#down").on("input", function() { $("#down").on("input", function () {
downEntry.alpha = $(this).val() / 100; downEntry.alpha = $(this).val() / 100;
}); });
$("#left").on("input", function() { $("#left").on("input", function () {
leftEntry.alpha = $(this).val() / 100; leftEntry.alpha = $(this).val() / 100;
}); });
$("#right").on("input", function() { $("#right").on("input", function () {
rightEntry.alpha = $(this).val() / 100; rightEntry.alpha = $(this).val() / 100;
}); });
} }
setupUI(); setupUI();
load(); load();
</script> </script>
</html> </html>

34
spine-ts/spine-webgl/tests/test-atlas-loading.html
View File

@ -1,26 +1,27 @@
<html> <html>
<body> <body>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<canvas width="640" height="480"></canvas> <canvas width="640" height="480"></canvas>
</body> </body>
<script> <script>
var canvas = document.getElementsByTagName("canvas")[0]; var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas); var context = new spine.ManagedWebGLRenderingContext(canvas);
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); var assetManager = new spine.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context); var renderer = new spine.SceneRenderer(canvas, context);
var time = new spine.TimeKeeper(); var time = new spine.TimeKeeper();
var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context)); var loadingScreen = new spine.LoadingScreen(new spine.SceneRenderer(canvas, context));
var skeleton = null; var skeleton = null;
var animationState = null; var animationState = null;
assetManager.loadText("spineboy-pro.json"); assetManager.loadText("spineboy-pro.json");
assetManager.loadTextureAtlas("spineboy-pma.atlas"); assetManager.loadTextureAtlas("spineboy-pma.atlas");
requestAnimationFrame(load); requestAnimationFrame(load);
function load () { function load() {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get("spineboy-pma.atlas"); var atlas = assetManager.get("spineboy-pma.atlas");
var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas)); var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
@ -47,9 +48,9 @@ function load () {
loadingScreen.draw(false); loadingScreen.draw(false);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render () { function render() {
context.gl.clearColor(0.9, 0.9, 0.9, 1); context.gl.clearColor(0.9, 0.9, 0.9, 1);
context.gl.clear(context.gl.COLOR_BUFFER_BIT); context.gl.clear(context.gl.COLOR_BUFFER_BIT);
@ -65,6 +66,7 @@ function render () {
loadingScreen.draw(true); loadingScreen.draw(true);
requestAnimationFrame(render); requestAnimationFrame(render);
} }
</script> </script>
</html> </html>

68
spine-ts/spine-webgl/tests/test-binary.html
View File

@ -2,36 +2,49 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
<script> <script>
var FILE = "spineboy-pro"; var FILE = "spineboy-pro";
var ANIMATION = "walk"; var ANIMATION = "walk";
var SCALE = 0.5; var SCALE = 0.5;
var canvas, context, gl, renderer, input, assetManager; var canvas, context, gl, renderer, input, assetManager;
var skeletons = []; var skeletons = [];
var timeKeeper; var timeKeeper;
var label = document.getElementById("label"); var label = document.getElementById("label");
var updateMean = new spine.WindowedMean(); var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean(); var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadBinary(FILE + ".skel"); assetManager.loadBinary(FILE + ".skel");
@ -39,11 +52,11 @@ function init() {
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load); requestAnimationFrame(load);
} }
var run = true; var run = true;
function load() { function load() {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
@ -80,9 +93,9 @@ function load() {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render() { function render() {
var start = Date.now() var start = Date.now()
timeKeeper.update(); timeKeeper.update();
var delta = 0.016; // timeKeeper.delta; var delta = 0.016; // timeKeeper.delta;
@ -100,7 +113,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -112,8 +125,9 @@ function render() {
renderMean.addValue(Date.now() - start); renderMean.addValue(Date.now() - start);
label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" + label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n"); "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
} }
init(); init();
</script> </script>
</html> </html>

68
spine-ts/spine-webgl/tests/test-mix-and-match.html
View File

@ -2,47 +2,60 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
<script> <script>
var FILE = "mix-and-match-pro"; var FILE = "mix-and-match-pro";
var ANIMATION = "dance"; var ANIMATION = "dance";
var SCALE = 0.5; var SCALE = 0.5;
var canvas, context, gl, renderer, input, assetManager; var canvas, context, gl, renderer, input, assetManager;
var skeletons = []; var skeletons = [];
var timeKeeper; var timeKeeper;
var label = document.getElementById("label"); var label = document.getElementById("label");
var updateMean = new spine.WindowedMean(); var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean(); var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadBinary(FILE + ".skel"); assetManager.loadBinary(FILE + ".skel");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load); requestAnimationFrame(load);
} }
var run = true; var run = true;
function load() { function load() {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
@ -79,9 +92,9 @@ function load() {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render() { function render() {
var start = Date.now() var start = Date.now()
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -99,7 +112,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -111,8 +124,9 @@ function render() {
renderMean.addValue(Date.now() - start); renderMean.addValue(Date.now() - start);
label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" + label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n"); "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
} }
init(); init();
</script> </script>
</html> </html>

90
spine-ts/spine-webgl/tests/test-pma-tintblack.html
View File

@ -1,12 +1,24 @@
<html> <html>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { width: 640px ;height: 640px; } padding: 0;
</style> }
<body>
body,
html {
height: 100%
}
canvas {
width: 640px;
height: 640px;
}
</style>
<body>
<canvas id="canvas" style="background: #ff00ff;"></canvas> <canvas id="canvas" style="background: #ff00ff;"></canvas>
<div> <div>
<div><label>Light: </label><input type="text" value="ffffffff" id="light"></div> <div><label>Light: </label><input type="text" value="ffffffff" id="light"></div>
@ -14,32 +26,32 @@
<div><label>PMA blend:</label><input type="checkbox" id="pmaBlend"></div> <div><label>PMA blend:</label><input type="checkbox" id="pmaBlend"></div>
<div><label>Ivan's shader:</label><input type="checkbox" id="ivan"></div> <div><label>Ivan's shader:</label><input type="checkbox" id="ivan"></div>
</div> </div>
</body> </body>
<script> <script>
$("#light").change(function() { $("#light").change(function () {
setColors(); setColors();
}); });
$("#dark").change(function() { $("#dark").change(function () {
setColors(); setColors();
}); });
$("#pmaBlend").change(function() { $("#pmaBlend").change(function () {
setColors(); setColors();
}); });
function setColors() { function setColors() {
var light = $("#light").val(); var light = $("#light").val();
var r = parseInt(light.substr(0,2),16) / 255; var r = parseInt(light.substr(0, 2), 16) / 255;
var g = parseInt(light.substr(2,2),16) / 255; var g = parseInt(light.substr(2, 2), 16) / 255;
var b = parseInt(light.substr(4,2),16) / 255; var b = parseInt(light.substr(4, 2), 16) / 255;
var a = parseInt(light.substr(6,2),16) / 255; var a = parseInt(light.substr(6, 2), 16) / 255;
var dark = $("#dark").val(); var dark = $("#dark").val();
var dr = parseInt(dark.substr(0,2),16) / 255; var dr = parseInt(dark.substr(0, 2), 16) / 255;
var dg = parseInt(dark.substr(2,2),16) / 255; var dg = parseInt(dark.substr(2, 2), 16) / 255;
var db = parseInt(dark.substr(4,2),16) / 255; var db = parseInt(dark.substr(4, 2), 16) / 255;
var pma = $("#pmaBlend").prop("checked"); var pma = $("#pmaBlend").prop("checked");
if (pma) { if (pma) {
@ -55,45 +67,45 @@
da = 0; da = 0;
} }
for (var i = 0, j = 2, k = 8; i < 4; i++, j+=12, k+=12) { for (var i = 0, j = 2, k = 8; i < 4; i++, j += 12, k += 12) {
vertices[j] = r; vertices[j] = r;
vertices[j+1] = g; vertices[j + 1] = g;
vertices[j+2] = b; vertices[j + 2] = b;
vertices[j+3] = a; vertices[j + 3] = a;
vertices[k] = dr; vertices[k] = dr;
vertices[k+1] = dg; vertices[k + 1] = dg;
vertices[k+2] = db; vertices[k + 2] = db;
vertices[k+3] = da; vertices[k + 3] = da;
} }
} }
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
var gl = context.gl; var gl = context.gl;
var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, var vertices = [-1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
-1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0]; -1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];
var indices = [ 0, 1, 2, 2, 3, 0 ]; var indices = [0, 1, 2, 2, 3, 0];
var shader = spine.webgl.Shader.newTwoColoredTextured(context); var shader = spine.Shader.newTwoColoredTextured(context);
var ivanShader = loadIvanShader(context, shader); var ivanShader = loadIvanShader(context, shader);
var assetManager = new spine.webgl.AssetManager(context); var assetManager = new spine.AssetManager(context);
assetManager.loadTexture("../example/assets/spineboy.png"); assetManager.loadTexture("../example/assets/spineboy.png");
assetManager.loadTexture("../example/assets/spineboy-pma.png"); assetManager.loadTexture("../example/assets/spineboy-pma.png");
var camMatrix = new spine.webgl.Matrix4(); var camMatrix = new spine.Matrix4();
var batcher = new spine.webgl.PolygonBatcher(context, true); var batcher = new spine.PolygonBatcher(context, true);
requestAnimationFrame(load); requestAnimationFrame(load);
function load () { function load() {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
texture = assetManager.get("../example/assets/spineboy.png"); texture = assetManager.get("../example/assets/spineboy.png");
texturePma = assetManager.get("../example/assets/spineboy-pma.png"); texturePma = assetManager.get("../example/assets/spineboy-pma.png");
@ -110,7 +122,7 @@
var s = ivan ? ivanShader : shader; var s = ivan ? ivanShader : shader;
s.bind(); s.bind();
s.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values); s.setUniform4x4f(spine.Shader.MVP_MATRIX, camMatrix.values);
s.setUniformi("u_texture", 0); s.setUniformi("u_texture", 0);
if (texture != null) { if (texture != null) {
batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA) batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
@ -123,7 +135,7 @@
requestAnimationFrame(render); requestAnimationFrame(render);
} }
function loadIvanShader (context, shader) { function loadIvanShader(context, shader) {
var vs = shader.getVertexShaderSource(); var vs = shader.getVertexShaderSource();
let fs = ` let fs = `
@ -144,6 +156,6 @@
} }
`; `;
return new spine.webgl.Shader(context, vs, fs); return new spine.Shader(context, vs, fs);
} }
</script> </script>

72
spine-ts/spine-webgl/tests/test-rig.html
View File

@ -2,54 +2,67 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
<script> <script>
var FILE = "spineboy-pro"; var FILE = "spineboy-pro";
var ANIMATION = "idle"; var ANIMATION = "idle";
var SCALE = 0.5; var SCALE = 0.5;
var canvas, context, gl, renderer, input, assetManager; var canvas, context, gl, renderer, input, assetManager;
var skeletons = []; var skeletons = [];
var timeKeeper; var timeKeeper;
var label = document.getElementById("label"); var label = document.getElementById("label");
var updateMean = new spine.WindowedMean(); var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean(); var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadText(FILE + ".json"); assetManager.loadText(FILE + ".json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load); requestAnimationFrame(load);
} }
var run = true; var run = true;
function switchAnimation() { function switchAnimation() {
var skel = skeletons[0]; var skel = skeletons[0];
skel.state.setAnimation(0, run ? "run" : "idle", true); skel.state.setAnimation(0, run ? "run" : "idle", true);
run = !run; run = !run;
setTimeout(switchAnimation, 300); setTimeout(switchAnimation, 300);
} }
function load() { function load() {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
@ -72,9 +85,9 @@ function load() {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render() { function render() {
var start = Date.now() var start = Date.now()
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -92,7 +105,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -104,8 +117,9 @@ function render() {
renderMean.addValue(Date.now() - start); renderMean.addValue(Date.now() - start);
label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" + label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n"); "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
} }
init(); init();
</script> </script>
</html> </html>

62
spine-ts/spine-webgl/tests/test-simple.html
View File

@ -1,44 +1,57 @@
<html> <html>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
<script> <script>
var FILE = "spineboy-pro"; var FILE = "spineboy-pro";
var ANIMATION = "walk"; var ANIMATION = "walk";
var SCALE = 0.5; var SCALE = 0.5;
var canvas, context, gl, renderer, input, assetManager; var canvas, context, gl, renderer, input, assetManager;
var timeKeeper; var timeKeeper;
var skeleton; var skeleton;
var animationState; var animationState;
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadBinary(FILE + ".skel"); assetManager.loadBinary(FILE + ".skel");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load); requestAnimationFrame(load);
} }
var run = true; var run = true;
function load() { function load() {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
@ -60,9 +73,9 @@ function load() {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render() { function render() {
var start = Date.now() var start = Date.now()
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -74,14 +87,15 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.end(); renderer.end();
requestAnimationFrame(render) requestAnimationFrame(render)
} }
init(); init();
</script> </script>
</html> </html>

68
spine-ts/spine-webgl/tests/test-skins.html
View File

@ -2,47 +2,60 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
<script> <script>
var FILE = "goblins-pro"; var FILE = "goblins-pro";
var ANIMATION = "walk"; var ANIMATION = "walk";
var SCALE = 0.5; var SCALE = 0.5;
var canvas, context, gl, renderer, input, assetManager; var canvas, context, gl, renderer, input, assetManager;
var skeletons = []; var skeletons = [];
var timeKeeper; var timeKeeper;
var label = document.getElementById("label"); var label = document.getElementById("label");
var updateMean = new spine.WindowedMean(); var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean(); var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadText(FILE + ".json"); assetManager.loadText(FILE + ".json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load); requestAnimationFrame(load);
} }
var run = true; var run = true;
function load() { function load() {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
@ -69,9 +82,9 @@ function load() {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render() { function render() {
var start = Date.now() var start = Date.now()
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -89,7 +102,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -101,8 +114,9 @@ function render() {
renderMean.addValue(Date.now() - start); renderMean.addValue(Date.now() - start);
label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" + label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n"); "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
} }
init(); init();
</script> </script>
</html> </html>

46
spine-ts/spine-webgl/tests/test-slot-range.html
View File

@ -1,35 +1,36 @@
<html> <html>
<body> <body>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<canvas width="640" height="480"></canvas> <canvas width="640" height="480"></canvas>
</body> </body>
<script> <script>
/* /*
This test illustrates how to render one skeleton in the This test illustrates how to render one skeleton in the
middle of rendering another skeleton. This technique can middle of rendering another skeleton. This technique can
be used to e.g. render different weapons on a character that be used to e.g. render different weapons on a character that
are themselves animated. are themselves animated.
*/ */
var canvas = document.getElementsByTagName("canvas")[0]; var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas); var context = new spine.ManagedWebGLRenderingContext(canvas);
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); var assetManager = new spine.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context); var renderer = new spine.SceneRenderer(canvas, context);
var time = new spine.TimeKeeper(); var time = new spine.TimeKeeper();
var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context)); var loadingScreen = new spine.LoadingScreen(new spine.SceneRenderer(canvas, context));
var spineBoy; var spineBoy;
var vine; var vine;
assetManager.loadText("spineboy-pro.json"); assetManager.loadText("spineboy-pro.json");
assetManager.loadTextureAtlas("spineboy-pma.atlas"); assetManager.loadTextureAtlas("spineboy-pma.atlas");
assetManager.loadText("vine-pro.json"); assetManager.loadText("vine-pro.json");
assetManager.loadTextureAtlas("vine-pma.atlas"); assetManager.loadTextureAtlas("vine-pma.atlas");
requestAnimationFrame(load); requestAnimationFrame(load);
function loadSkeleton(json, atlas, scale) { function loadSkeleton(json, atlas, scale) {
var atlas = assetManager.get(atlas); var atlas = assetManager.get(atlas);
var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas)); var skeletonJson = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
skeletonJson.scale = scale; skeletonJson.scale = scale;
@ -40,9 +41,9 @@ function loadSkeleton(json, atlas, scale) {
animationState = new spine.AnimationState(animationStateData); animationState = new spine.AnimationState(animationStateData);
return { skeleton: skeleton, animationState: animationState }; return { skeleton: skeleton, animationState: animationState };
} }
function load () { function load() {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
spineBoy = loadSkeleton("spineboy-pro.json", "spineboy-pma.atlas", 1); spineBoy = loadSkeleton("spineboy-pro.json", "spineboy-pma.atlas", 1);
vine = loadSkeleton("vine-pro.json", "vine-pma.atlas", 0.3); vine = loadSkeleton("vine-pro.json", "vine-pma.atlas", 0.3);
@ -64,9 +65,9 @@ function load () {
loadingScreen.draw(false); loadingScreen.draw(false);
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render () { function render() {
context.gl.clearColor(0.9, 0.9, 0.9, 1); context.gl.clearColor(0.9, 0.9, 0.9, 1);
context.gl.clear(context.gl.COLOR_BUFFER_BIT); context.gl.clear(context.gl.COLOR_BUFFER_BIT);
@ -109,6 +110,7 @@ function render () {
loadingScreen.draw(true); loadingScreen.draw(true);
requestAnimationFrame(render); requestAnimationFrame(render);
} }
</script> </script>
</html> </html>

74
spine-ts/spine-webgl/tests/test.html
View File

@ -2,38 +2,51 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
<script> <script>
var FILE = "coin-pro"; var FILE = "coin-pro";
var ANIMATION = "animation"; var ANIMATION = "animation";
var NUM_SKELETONS = 1; var NUM_SKELETONS = 1;
var SCALE = 0.5; var SCALE = 0.5;
var canvas, context, gl, renderer, input, assetManager; var canvas, context, gl, renderer, input, assetManager;
var skeletons = []; var skeletons = [];
var timeKeeper; var timeKeeper;
var label = document.getElementById("label"); var label = document.getElementById("label");
var updateMean = new spine.WindowedMean(); var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean(); var renderMean = new spine.WindowedMean();
var swirlEffect = new spine.SwirlEffect(); var swirlEffect = new spine.SwirlEffect();
var swirlTime = 0; var swirlTime = 0;
var interpolation = new spine.Pow(2); var interpolation = new spine.Pow(2);
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
@ -45,17 +58,17 @@ function init() {
swirlEffect.centerY = 200; swirlEffect.centerY = 200;
swirlEffect.radius = 500; swirlEffect.radius = 500;
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas");
assetManager.loadText(FILE + ".json"); assetManager.loadText(FILE + ".json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load); requestAnimationFrame(load);
} }
function load() { function load() {
timeKeeper.update(); timeKeeper.update();
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas"); var atlas = assetManager.get(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas");
@ -85,9 +98,9 @@ function load() {
} else { } else {
requestAnimationFrame(load); requestAnimationFrame(load);
} }
} }
function render() { function render() {
var start = Date.now() var start = Date.now()
timeKeeper.update(); timeKeeper.update();
var delta = timeKeeper.delta; var delta = timeKeeper.delta;
@ -111,7 +124,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -124,8 +137,9 @@ function render() {
renderMean.addValue(Date.now() - start); renderMean.addValue(Date.now() - start);
label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" + label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n"); "Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
} }
init(); init();
</script> </script>
</html> </html>

67
spine-ts/spine-webgl/tests/test2.html
View File

@ -2,55 +2,68 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: #ff00ff;"></canvas> <canvas id="canvas" style="background: #ff00ff;"></canvas>
</body> </body>
<script> <script>
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
var gl = context.gl; var gl = context.gl;
var vertices = [ -1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, var vertices = [-1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, -1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
0, 1, 1, 1, 1, 1, 0.5, 1, 0, 0, 0, 0]; 0, 1, 1, 1, 1, 1, 0.5, 1, 0, 0, 0, 0];
var indices = [ 0, 1, 2 ]; var indices = [0, 1, 2];
var mesh = new spine.webgl.Mesh(context, var mesh = new spine.Mesh(context,
[new spine.webgl.Position2Attribute(), new spine.webgl.ColorAttribute(), new spine.webgl.TexCoordAttribute()], [new spine.Position2Attribute(), new spine.ColorAttribute(), new spine.TexCoordAttribute()],
10920, 10920 * 3); 10920, 10920 * 3);
mesh.setVertices(vertices); mesh.setVertices(vertices);
mesh.setIndices(indices); mesh.setIndices(indices);
var shader = spine.webgl.Shader.newTwoColoredTextured(context); var shader = spine.Shader.newTwoColoredTextured(context);
var assetManager = new spine.webgl.AssetManager(context); var assetManager = new spine.AssetManager(context);
assetManager.loadTexture("../example/assets/spineboy.png"); assetManager.loadTexture("../example/assets/spineboy.png");
var camMatrix = new spine.webgl.Matrix4(); var camMatrix = new spine.Matrix4();
var batcher = new spine.webgl.PolygonBatcher(context, true); var batcher = new spine.PolygonBatcher(context, true);
requestAnimationFrame(load); requestAnimationFrame(load);
function load () { function load() {
if (assetManager.isLoadingComplete()) { if (assetManager.isLoadingComplete()) {
texture = assetManager.get("../example/assets/spineboy.png"); texture = assetManager.get("../example/assets/spineboy.png");
requestAnimationFrame(render); requestAnimationFrame(render);
} else requestAnimationFrame(load); } else requestAnimationFrame(load);
} }
function render() { function render() {
gl.clearColor(1, 0, 0, 1); gl.clearColor(1, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
shader.bind(); shader.bind();
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values); shader.setUniform4x4f(spine.Shader.MVP_MATRIX, camMatrix.values);
shader.setUniformi("u_texture", 0); shader.setUniformi("u_texture", 0);
if (texture != null) { if (texture != null) {
/*gl.enable(gl.BLEND); /*gl.enable(gl.BLEND);
@ -66,5 +79,5 @@ function render() {
shader.unbind(); shader.unbind();
requestAnimationFrame(render); requestAnimationFrame(render);
} }
</script> </script>