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.
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.

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",
"description": "The official Spine Runtimes for the web.",
"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: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: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: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: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: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": "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:modules": "tsc -b -clean && tsc -b",
"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: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: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: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": {
"type": "git",
@ -38,11 +44,10 @@
"spine-webgl"
],
"devDependencies": {
"@rollup/plugin-typescript": "^8.2.5",
"concurrently": "^6.2.1",
"esbuild": "^0.12.22",
"live-server": "^1.2.1",
"npx": "^10.2.2",
"rollup": "^2.56.3",
"rollup-plugin-dts": "^3.0.2",
"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="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<body>
<canvas id="canvas"></canvas>
<canvas id="canvas"></canvas>
</body>
<script>
var lastFrameTime = Date.now() / 1000;
var canvas, context;
var assetManager;
var skeleton, state, bounds;
var skeletonRenderer;
var lastFrameTime = Date.now() / 1000;
var canvas, context;
var assetManager;
var skeleton, state, bounds;
var skeletonRenderer;
var skelName = "spineboy-ess";
var animName = "walk";
var skelName = "spineboy-ess";
var animName = "walk";
function init () {
function init() {
canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
context = canvas.getContext("2d");
skeletonRenderer = new spine.canvas.SkeletonRenderer(context);
skeletonRenderer = new spine.SkeletonRenderer(context);
// enable debug rendering
skeletonRenderer.debugRendering = true;
// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
skeletonRenderer.triangleRendering = false;
assetManager = new spine.canvas.AssetManager("assets/");
assetManager = new spine.AssetManager("assets/");
assetManager.loadText(skelName + ".json");
assetManager.loadText(skelName.replace("-pro", "").replace("-ess", "") + ".atlas");
assetManager.loadTexture(skelName.replace("-pro", "").replace("-ess", "") + ".png");
requestAnimationFrame(load);
}
}
function load () {
function load() {
if (assetManager.isLoadingComplete()) {
var data = loadSkeleton(skelName, animName, "default");
skeleton = data.skeleton;
@ -51,9 +64,9 @@ function load () {
} else {
requestAnimationFrame(load);
}
}
}
function loadSkeleton (name, initialAnimation, skin) {
function loadSkeleton(name, initialAnimation, skin) {
if (skin === undefined) skin = "default";
// 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));
animationState.setAnimation(0, initialAnimation, true);
animationState.addListener({
event: function(trackIndex, event) {
event: function (trackIndex, 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);
},
start: function(trackIndex) {
start: function (trackIndex) {
// console.log("Animation on track " + trackIndex + " started");
},
end: function(trackIndex) {
end: function (trackIndex) {
// console.log("Animation on track " + trackIndex + " ended");
}
})
// Pack everything up and return to caller.
return { skeleton: skeleton, state: animationState, bounds: bounds };
}
}
function calculateBounds(skeleton) {
function calculateBounds(skeleton) {
var data = skeleton.data;
skeleton.setToSetupPose();
skeleton.updateWorldTransform();
@ -104,9 +117,9 @@ function calculateBounds(skeleton) {
var size = new spine.Vector2();
skeleton.getBounds(offset, size, []);
return { offset: offset, size: size };
}
}
function render () {
function render() {
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
lastFrameTime = now;
@ -133,9 +146,9 @@ function render () {
context.stroke();
requestAnimationFrame(render);
}
}
function resize () {
function resize() {
var w = canvas.clientWidth;
var h = canvas.clientHeight;
if (canvas.width != w || canvas.height != h) {
@ -157,11 +170,12 @@ function resize () {
context.scale(1 / scale, 1 / scale);
context.translate(-centerX, -centerY);
context.translate(width / 2, height / 2);
}
}
(function() {
(function () {
init();
}());
}());
</script>
</html>

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

@ -1,27 +1,4 @@
export * from "./AssetManager";
export * from "./CanvasTexture";
export * from "./SkeletonRenderer";
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 './PlayerEditor';
export * from "@esotericsoftware/spine-core";
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;
// load the assets required to display the Raptor model
assetManager = new spine.threejs.AssetManager(baseUrl);
assetManager = new spine.AssetManager(baseUrl);
assetManager.loadText(skeletonFile);
assetManager.loadTextureAtlas(atlasFile);
@ -82,7 +82,7 @@
var skeletonData = skeletonJson.readSkeletonData(assetManager.require(skeletonFile));
// 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;
});
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 './SkeletonMesh';
export * from './ThreeJsTexture';
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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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 dragging = false;
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 left, right, up, down;
@ -25,10 +25,10 @@ var additiveBlendingDemo = function(canvas, bgColor) {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
@ -36,7 +36,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
cursor = document.getElementById("cursor");
}
function loadingComplete () {
function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").owl);
@ -73,17 +73,17 @@ var additiveBlendingDemo = function(canvas, bgColor) {
setupInput();
}
function calculateBlend (x, y, isPageCoords) {
function calculateBlend(x, y, isPageCoords) {
var canvasBounds = canvas.getBoundingClientRect();
var centerX = canvasBounds.x + canvasBounds.width / 2;
var centerY = canvasBounds.y + canvasBounds.height / 2;
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;
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()) {
document.addEventListener("mousemove", function (event) {
clientMouseX = event.clientX;
@ -91,18 +91,18 @@ var additiveBlendingDemo = function(canvas, bgColor) {
mouseMoved = true;
}, false);
} else {
var input = new spine.webgl.Input(canvas);
var input = new spine.Input(canvas);
input.addListener({
down: function(x, y) {
down: function (x, y) {
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) {
dragging = true;
}
},
up: function(x, y) {
up: function (x, y) {
dragging = false;
},
dragged: function(x, y) {
dragged: function (x, y) {
if (dragging && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
handle.x = coords.x;
@ -114,7 +114,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
}
}
function render () {
function render() {
if (!isMobileDevice() && mouseMoved) calculateBlend(clientMouseX, clientMouseY, true);
timeKeeper.update();
@ -126,7 +126,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 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.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 skeleton, state, bounds;
var timeKeeper;
@ -6,16 +6,16 @@ var clippingDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
@ -67,7 +67,7 @@ var clippingDemo = function(canvas, bgColor) {
renderer.skeletonDebugRenderer.drawBones = false;
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
$("#clipping-drawtriangles").click(function() {
$("#clipping-drawtriangles").click(function () {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
renderer.skeletonDebugRenderer.drawClipping = this.checked;
@ -75,7 +75,7 @@ var clippingDemo = function(canvas, bgColor) {
})
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
@ -93,7 +93,7 @@ var clippingDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 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.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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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 hoverTargets = [];
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;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas1.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").spineboy);
@ -51,12 +51,12 @@ var hoverboardDemo = function(canvas, bgColor) {
setupInput();
}
function setupUI () {
function setupUI() {
var checkbox = $("#hoverboard-drawbones");
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() {
checkbox.change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
@ -92,17 +92,17 @@ var hoverboardDemo = function(canvas, bgColor) {
});
}
function setupInput () {
function setupInput() {
input.addListener({
down: function(x, y) {
down: function (x, y) {
isPlaying = false;
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();
target = null;
},
dragged: function(x, y) {
dragged: function (x, y) {
spineDemos.dragged(canvas, renderer, target, x, y);
},
moved: function (x, y) {
@ -111,7 +111,7 @@ var hoverboardDemo = function(canvas, bgColor) {
});
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
@ -121,7 +121,7 @@ var hoverboardDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 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.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 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);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
skeletons["Alien"] = loadSkeleton("alien", "death", ["head", "splat-fg", "splat-bg"]);
skeletons["Dragon"] = loadSkeleton("dragon", "flying", ["R_wing"])
setupUI();
@ -58,7 +58,7 @@ var imageChangesDemo = function(canvas, bgColor) {
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
list.append(option);
}
list.change(function() {
list.change(function () {
activeSkeleton = $("#imagechanges-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
@ -83,7 +83,7 @@ var imageChangesDemo = function(canvas, bgColor) {
skeleton.getBounds(offset, size, []);
var regions = [];
for(var i = 0; i < sequenceSlots.length; i++) {
for (var i = 0; i < sequenceSlots.length; i++) {
var slot = skeleton.findSlot(sequenceSlots[i]);
sequenceSlots[i] = slot;
var index = slot.data.index;
@ -104,7 +104,7 @@ var imageChangesDemo = function(canvas, bgColor) {
};
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
@ -127,7 +127,7 @@ var imageChangesDemo = function(canvas, bgColor) {
}
renderer.camera.viewportWidth = size.x * 2.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.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 skeleton, bounds;
var timeKeeper;
@ -8,17 +8,17 @@ var meshesDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer = new spine.SceneRenderer(canvas, gl);
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.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
timeKeeper.update();
skeletons["Orange Girl"] = loadSkeleton("orangegirl", "animation");
skeletons["Green Girl"] = loadSkeleton("greengirl", "animation");
@ -59,7 +59,7 @@ var meshesDemo = function(canvas, bgColor) {
if (skeletonName === activeSkeleton) option.attr("selected", "selected");
list.append(option);
}
list.change(function() {
list.change(function () {
activeSkeleton = $("#meshes-skeleton option:selected").text();
var active = skeletons[activeSkeleton];
var animationDuration = active.state.getCurrent(0).animation.duration;
@ -67,13 +67,13 @@ var meshesDemo = function(canvas, bgColor) {
})
renderer.skeletonDebugRenderer.drawBones = false;
$("#meshes-drawbonescheckbox").click(function() {
$("#meshes-drawbonescheckbox").click(function () {
renderer.skeletonDebugRenderer.drawBones = this.checked;
})
renderer.skeletonDebugRenderer.drawMeshHull = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false;
$("#meshes-drawmeshtrianglescheckbox").click(function() {
$("#meshes-drawmeshtrianglescheckbox").click(function () {
renderer.skeletonDebugRenderer.drawMeshHull = this.checked;
renderer.skeletonDebugRenderer.drawMeshTriangles = this.checked;
})
@ -105,7 +105,7 @@ var meshesDemo = function(canvas, bgColor) {
};
}
function render () {
function render() {
timeKeeper.update();
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.viewportWidth = size.x * 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.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 skeleton, state, offset, bounds;
var timeKeeper;
@ -7,17 +7,17 @@ var skinsDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("heroes.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("heroes.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").heroes);
@ -38,13 +38,13 @@ var skinsDemo = function(canvas, bgColor) {
setupInput();
}
function setupInput (){
function setupInput() {
input.addListener({
down: function(x, y) {
down: function (x, y) {
swingSword();
},
up: function(x, y) { },
dragged: function(x, y) { },
up: function (x, y) { },
dragged: function (x, y) { },
moved: function (x, y) { }
});
}
@ -103,7 +103,7 @@ var skinsDemo = function(canvas, bgColor) {
}
list.append(option);
}
list.change(function() {
list.change(function () {
activeSkin = $("#skins-skin option:selected").text();
skeleton.setSkinByName(activeSkin);
skeleton.setSlotsToSetupPose();
@ -115,7 +115,7 @@ var skinsDemo = function(canvas, bgColor) {
randomizeSkins = document.getElementById("skins-randomizeskins");
}
function setSkin (skin) {
function setSkin(skin) {
var slot = skeleton.findSlot("item_near");
var weapon = slot.getAttachment();
skeleton.setSkin(skin);
@ -123,26 +123,26 @@ var skinsDemo = function(canvas, bgColor) {
slot.setAttachment(weapon);
}
function swingSword () {
function swingSword() {
state.setAnimation(5, (clickAnim++ % 2 == 0) ? "meleeSwing2" : "meleeSwing1", false, 0);
}
function randomizeSkin () {
function randomizeSkin() {
var result;
var count = 0;
for (var skin in skeleton.data.skins) {
if (skeleton.data.skins[skin].name === "default") continue;
if (Math.random() < 1/++count) {
if (Math.random() < 1 / ++count) {
result = skeleton.data.skins[skin];
}
}
setSkin(result);
$("#skins-skin option").filter(function() {
$("#skins-skin option").filter(function () {
return ($(this).text() == result.name);
}).prop("selected", true);
}
function randomizeAttachments () {
function randomizeAttachments() {
var skins = [];
for (var skin in skeleton.data.skins) {
skin = skeleton.data.skins[skin];
@ -162,7 +162,7 @@ var skinsDemo = function(canvas, bgColor) {
randomizeSkins.checked = false;
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
@ -178,7 +178,7 @@ var skinsDemo = function(canvas, bgColor) {
renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.camera.viewportWidth = bounds.x * 3;
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.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 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);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").raptor);
@ -55,20 +55,20 @@ var spritesheetsDemo = function(canvas, bgColor) {
$("#spritesheets-overlay").addClass("overlay");
}
function setupUI () {
function setupUI() {
timeSlider = $("#spritesheets-timeslider").data("slider");
timeSlider.set(0.5);
timeSliderLabel = $("#spritesheets-timeslider-label")[0];
}
function setupInput () {
function setupInput() {
input.addListener({
down: function(x, y) {
down: function (x, y) {
setAnimation((clickAnim++ % 2 == 0) ? "roar" : "jump");
},
up: function(x, y) { },
moved: function(x, y) { },
dragged: function(x, y) { }
up: function (x, y) { },
moved: function (x, y) { },
dragged: function (x, y) { }
});
$("#spritesheets-roar").click(function () {
setAnimation("roar");
@ -78,20 +78,20 @@ var spritesheetsDemo = function(canvas, bgColor) {
});
}
function setAnimation (name) {
function setAnimation(name) {
animationState.setAnimation(0, name, false);
animationState.addAnimation(0, "walk", true, 0);
}
function resize () {
function resize() {
renderer.camera.position.x = offset.x + viewportWidth / 2 - 25;
renderer.camera.position.y = offset.y + viewportHeight / 2 - 100;
renderer.camera.viewportWidth = viewportWidth * 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();
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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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",
"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 playButton, timeLine, spacing, isPlaying = true, playTime = 0;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
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 skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").stretchyman);
@ -61,21 +61,21 @@ var stretchymanDemo = function(canvas, bgColor) {
var checkbox = $("#stretchyman-drawbones");
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
checkbox.change(function() {
checkbox.change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function setupInput (){
function setupInput() {
input.addListener({
down: function(x, y) {
down: function (x, y) {
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
},
up: function(x, y) {
up: function (x, y) {
target = null;
},
dragged: function(x, y) {
dragged: function (x, y) {
spineDemos.dragged(canvas, renderer, target, x, y);
if (target && target.data.name === "head 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)
.sub(temp3.set(hipBone.worldX + skeleton.x, hipBone.worldY + skeleton.y, 0));
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;
}
function rotate (handBone, elbowBone) {
function rotate(handBone, elbowBone) {
// 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;
if (v.y < 0) angle = 360 - angle;
handBone.rotation = angle;
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
@ -130,7 +130,7 @@ var stretchymanDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.2;
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.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 skeleton, state, offset, bounds;
var timeKeeper;
@ -6,16 +6,16 @@ var tankDemo = function(canvas, bgColor) {
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").tank);
@ -65,13 +65,13 @@ var tankDemo = function(canvas, bgColor) {
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
$("#tank-drawbones").change(function() {
$("#tank-drawbones").change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
@ -94,7 +94,7 @@ var tankDemo = function(canvas, bgColor) {
renderer.camera.position.y = bounds.y - 505;
renderer.camera.viewportWidth = bounds.x * 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.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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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 hoverTargets = [null, null, null];
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 mix, lastOffset = 0, lastMix = 0.5;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").transforms);
@ -80,23 +80,23 @@ var transformsDemo = function(canvas, bgColor) {
}
function setupInput() {
var getRotation = function(x, y) {
var getRotation = function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
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;
if (v.y < 0) angle = 360 - angle;
return angle;
}
input.addListener({
down: function(x, y) {
down: function (x, y) {
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
if (target === rotateHandle) lastRotation = getRotation(x, y);
},
up: function(x, y) {
up: function (x, y) {
target = null;
},
dragged: function(x, y) {
dragged: function (x, y) {
if (target === rotateHandle) {
var rotation = getRotation(x, y);
var delta = rotation - lastRotation;
@ -111,14 +111,14 @@ var transformsDemo = function(canvas, bgColor) {
})
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
skeleton.updateWorldTransform();
renderer.camera.viewportWidth = bounds.x * 1.6;
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.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 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);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas);
input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper();
timeSlider = $("#transitions-timeslider").data("slider");
@ -22,7 +22,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
timeSliderLabel = $("#transitions-timeslider-label")[0];
}
function loadingComplete () {
function loadingComplete() {
skeleton = loadSkeleton("spineboy");
skeletonNoMix = new spine.Skeleton(skeleton.data);
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);
stateData.defaultMix = mix;
var state = new spine.AnimationState(stateData);
return state;
}
function setAnimations (state, delay, first) {
function setAnimations(state, delay, first) {
state.addAnimation(0, "idle", true, first);
state.addAnimation(0, "walk", true, 0.6);
state.addAnimation(0, "jump", false, 1);
@ -84,7 +84,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
return skeleton;
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta * timeSlider.get();
if (timeSliderLabel) {
@ -100,7 +100,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
renderer.camera.position.y = offset.y + size.y / 2 - 40;
renderer.camera.viewportWidth = size.x * 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.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 () {
var timeKeeper = new spine.TimeKeeper();
function loop () {
function loop() {
timeKeeper.update();
if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
requestAnimationFrame(loop);
@ -73,11 +73,11 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
demo.visible = (vertInView && horInView);
}
function createCanvases (numCanvases) {
function createCanvases(numCanvases) {
for (var i = 0; i < numCanvases; i++) {
var canvas = document.createElement("canvas");
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;
spineDemos.canvases.push(canvas);
}
@ -99,9 +99,9 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
demo.placeholder = placeholder;
demo.canvas = canvas;
demo.visible = false;
var renderer = new spine.webgl.SceneRenderer(canvas, canvas.context.gl);
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function() {
var renderer = new spine.SceneRenderer(canvas, canvas.context.gl);
demo.loadingScreen = new spine.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function () {
checkElementVisible(demo);
renderDemo(demo);
});
@ -109,8 +109,8 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
spineDemos.demos.push(demo);
}
var coords = new spine.webgl.Vector3();
var mouse = new spine.webgl.Vector3();
var coords = new spine.Vector3();
var mouse = new spine.Vector3();
spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) {
mouse.set(x, canvas.clientHeight - y, 0)
var bestDistance = 24, index = 0;
@ -131,7 +131,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
return best;
};
var position = new spine.webgl.Vector3();
var position = new spine.Vector3();
spineDemos.dragged = function (canvas, renderer, target, x, y) {
if (target) {
x = spine.MathUtils.clamp(x, 0, canvas.clientWidth)
@ -149,7 +149,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
};
loadSliders = function () {
$(window).resize(function() {
$(window).resize(function () {
$(".slider").each(function () {
$(this).data("slider").resized();
});
@ -164,7 +164,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
var hw = handle.width(), value = 0, object, lastX;
handle = handle[0].style;
positionHandle(0);
function positionHandle (percent) {
function positionHandle(percent) {
var w = div.width();
var x = Math.round((w - hw - 3) * percent + 1);
if (x != lastX) {
@ -179,14 +179,14 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
}
value = percent;
}
function mouseEvent (e) {
function mouseEvent(e) {
var x = e.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)));
positionHandle(percent);
if (object.changed) object.changed(percent);
}
function clearEvents () {
function clearEvents() {
$(document).off("mouseup.slider mousemove.slider touchmove.slider touchend.slider");
}
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_OUTER = new spine.Color(0.8, 0, 0, 0.8);
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 hoverTargets = [null, null, null, null, null, null];
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;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
function init() {
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
renderer = new spine.SceneRenderer(canvas, gl);
input = new spine.Input(canvas);
assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper();
}
function loadingComplete () {
function loadingComplete() {
var atlasLoader = new spine.AtlasAttachmentLoader(assetManager.get("atlas2.atlas"));
var skeletonJson = new spine.SkeletonJson(atlasLoader);
var skeletonData = skeletonJson.readSkeletonData(assetManager.get("demos.json").vine);
@ -78,7 +78,7 @@ var vineDemo = function(canvas, bgColor) {
renderer.skeletonDebugRenderer.drawPaths = false;
renderer.skeletonDebugRenderer.drawBones = false;
var checkbox = $("#vine-drawbones");
checkbox.change(function() {
checkbox.change(function () {
renderer.skeletonDebugRenderer.drawPaths = this.checked;
renderer.skeletonDebugRenderer.drawBones = this.checked;
});
@ -86,13 +86,13 @@ var vineDemo = function(canvas, bgColor) {
function setupInput() {
input.addListener({
down: function(x, y) {
down: function (x, y) {
target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
},
up: function(x, y) {
up: function (x, y) {
target = null;
},
dragged: function(x, y) {
dragged: function (x, y) {
spineDemos.dragged(canvas, renderer, target, x, y);
},
moved: function (x, y) {
@ -101,7 +101,7 @@ var vineDemo = function(canvas, bgColor) {
});
}
function render () {
function render() {
timeKeeper.update();
var delta = timeKeeper.delta;
@ -121,7 +121,7 @@ var vineDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 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.clear(gl.COLOR_BUFFER_BIT);

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

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

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

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

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

@ -13,27 +13,4 @@ export * from './SkeletonDebugRenderer';
export * from './SkeletonRenderer';
export * from './Vector3';
export * from './WebGL';
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>
<html>
<head>
<head>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
input, label {
input,
label {
display: block;
}
#controls {
position: absolute;
}
@ -17,8 +20,9 @@
left: 0;
}
</style>
</head>
<body>
</head>
<body>
<canvas id="canvas" style="width: 640px; height: 480px;"></canvas>
<div id="controls">
<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>Right</label><input type="range" id="right" min="0" max="100" value="0"></input>
</div>
</body>
<script>
</body>
<script>
var canvas = document.getElementById("canvas");
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 time = new spine.TimeKeeper();
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context);
var assetManager = new spine.AssetManager(context, "../example/assets/");
var renderer = new spine.SceneRenderer(canvas, context);
var skeleton, animationState;
var upEntry, downEntry, leftEntry, rightEntry;
@ -43,7 +47,7 @@
assetManager.loadText("owl-pma.atlas");
assetManager.loadText("owl-pro.json");
function load () {
function load() {
if (assetManager.isLoadingComplete()) {
var atlas = new spine.TextureAtlas(assetManager.get("owl-pma.atlas"));
atlas.setTextures(assetManager);
@ -77,7 +81,7 @@
}
}
function render () {
function render() {
time.update();
animationState.update(time.delta);
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.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit);
renderer.resize(spine.ResizeMode.Fit);
renderer.begin();
renderer.drawSkeleton(skeleton);
renderer.end();
@ -96,22 +100,23 @@
requestAnimationFrame(render);
}
function setupUI () {
$("#up").on("input", function() {
function setupUI() {
$("#up").on("input", function () {
upEntry.alpha = $(this).val() / 100;
});
$("#down").on("input", function() {
$("#down").on("input", function () {
downEntry.alpha = $(this).val() / 100;
});
$("#left").on("input", function() {
$("#left").on("input", function () {
leftEntry.alpha = $(this).val() / 100;
});
$("#right").on("input", function() {
$("#right").on("input", function () {
rightEntry.alpha = $(this).val() / 100;
});
}
setupUI();
load();
</script>
</script>
</html>

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

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

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

@ -1,12 +1,24 @@
<html>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { width: 640px ;height: 640px; }
</style>
<body>
<script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%
}
canvas {
width: 640px;
height: 640px;
}
</style>
<body>
<canvas id="canvas" style="background: #ff00ff;"></canvas>
<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>Ivan's shader:</label><input type="checkbox" id="ivan"></div>
</div>
</body>
<script>
</body>
<script>
$("#light").change(function() {
$("#light").change(function () {
setColors();
});
$("#dark").change(function() {
$("#dark").change(function () {
setColors();
});
$("#pmaBlend").change(function() {
$("#pmaBlend").change(function () {
setColors();
});
function setColors() {
var light = $("#light").val();
var r = parseInt(light.substr(0,2),16) / 255;
var g = parseInt(light.substr(2,2),16) / 255;
var b = parseInt(light.substr(4,2),16) / 255;
var a = parseInt(light.substr(6,2),16) / 255;
var r = parseInt(light.substr(0, 2), 16) / 255;
var g = parseInt(light.substr(2, 2), 16) / 255;
var b = parseInt(light.substr(4, 2), 16) / 255;
var a = parseInt(light.substr(6, 2), 16) / 255;
var dark = $("#dark").val();
var dr = parseInt(dark.substr(0,2),16) / 255;
var dg = parseInt(dark.substr(2,2),16) / 255;
var db = parseInt(dark.substr(4,2),16) / 255;
var dr = parseInt(dark.substr(0, 2), 16) / 255;
var dg = parseInt(dark.substr(2, 2), 16) / 255;
var db = parseInt(dark.substr(4, 2), 16) / 255;
var pma = $("#pmaBlend").prop("checked");
if (pma) {
@ -55,45 +67,45 @@
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+1] = g;
vertices[j+2] = b;
vertices[j+3] = a;
vertices[j + 1] = g;
vertices[j + 2] = b;
vertices[j + 3] = a;
vertices[k] = dr;
vertices[k+1] = dg;
vertices[k+2] = db;
vertices[k+3] = da;
vertices[k + 1] = dg;
vertices[k + 2] = db;
vertices[k + 3] = da;
}
}
var canvas = document.getElementById("canvas");
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 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, 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 assetManager = new spine.webgl.AssetManager(context);
var assetManager = new spine.AssetManager(context);
assetManager.loadTexture("../example/assets/spineboy.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);
function load () {
function load() {
if (assetManager.isLoadingComplete()) {
texture = assetManager.get("../example/assets/spineboy.png");
texturePma = assetManager.get("../example/assets/spineboy-pma.png");
@ -110,7 +122,7 @@
var s = ivan ? ivanShader : shader;
s.bind();
s.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values);
s.setUniform4x4f(spine.Shader.MVP_MATRIX, camMatrix.values);
s.setUniformi("u_texture", 0);
if (texture != null) {
batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
@ -123,7 +135,7 @@
requestAnimationFrame(render);
}
function loadIvanShader (context, shader) {
function loadIvanShader(context, shader) {
var vs = shader.getVertexShaderSource();
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="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style>
* { margin: 0; padding: 0; }
body, html { height: 100% }
canvas { position: absolute; width: 100% ;height: 100%; }
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas>
</body>
<script>
var FILE = "spineboy-pro";
var ANIMATION = "idle";
var SCALE = 0.5;
var FILE = "spineboy-pro";
var ANIMATION = "idle";
var SCALE = 0.5;
var canvas, context, gl, renderer, input, assetManager;
var skeletons = [];
var timeKeeper;
var label = document.getElementById("label");
var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean();
var canvas, context, gl, renderer, input, assetManager;
var skeletons = [];
var timeKeeper;
var label = document.getElementById("label");
var updateMean = new spine.WindowedMean();
var renderMean = new spine.WindowedMean();
function init() {
function init() {
canvas = document.getElementById("canvas");
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;
renderer = new spine.webgl.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas);
renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadText(FILE + ".json");
timeKeeper = new spine.TimeKeeper();
requestAnimationFrame(load);
}
}
var run = true;
var run = true;
function switchAnimation() {
function switchAnimation() {
var skel = skeletons[0];
skel.state.setAnimation(0, run ? "run" : "idle", true);
run = !run;
setTimeout(switchAnimation, 300);
}
}
function load() {
function load() {
timeKeeper.update();
if (assetManager.isLoadingComplete()) {
var atlas = assetManager.get(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
@ -72,9 +85,9 @@ function load() {
} else {
requestAnimationFrame(load);
}
}
}
function render() {
function render() {
var start = Date.now()
timeKeeper.update();
var delta = timeKeeper.delta;
@ -92,7 +105,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit);
renderer.resize(spine.ResizeMode.Fit);
renderer.begin();
for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton;
@ -104,8 +117,9 @@ function render() {
renderMean.addValue(Date.now() - start);
label.innerHTML = ("Update time: " + Number(updateMean.getMean()).toFixed(2) + " ms\n" +
"Render time: " + Number(renderMean.getMean()).toFixed(2) + " ms\n");
}
}
init();
init();
</script>
</html>

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

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

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

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

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

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

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

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