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

[ts] Remove old namespaces, dev build

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

2
spine-ts/README.md
View File

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

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because it is too large Load Diff

23
spine-ts/package.json
View File

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

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

@ -2,10 +2,23 @@
<script src="../../build/spine-canvas.js"></script> <script src="../../build/spine-canvas.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
</body> </body>
@ -26,13 +39,13 @@ function init () {
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
context = canvas.getContext("2d"); context = canvas.getContext("2d");
skeletonRenderer = new spine.canvas.SkeletonRenderer(context); skeletonRenderer = new spine.SkeletonRenderer(context);
// enable debug rendering // enable debug rendering
skeletonRenderer.debugRendering = true; skeletonRenderer.debugRendering = true;
// enable the triangle renderer, supports meshes, but may produce artifacts in some browsers // enable the triangle renderer, supports meshes, but may produce artifacts in some browsers
skeletonRenderer.triangleRendering = false; skeletonRenderer.triangleRendering = false;
assetManager = new spine.canvas.AssetManager("assets/"); assetManager = new spine.AssetManager("assets/");
assetManager.loadText(skelName + ".json"); assetManager.loadText(skelName + ".json");
assetManager.loadText(skelName.replace("-pro", "").replace("-ess", "") + ".atlas"); assetManager.loadText(skelName.replace("-pro", "").replace("-ess", "") + ".atlas");
@ -164,4 +177,5 @@ function resize () {
}()); }());
</script> </script>
</html> </html>

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

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

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

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

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

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

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

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

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

@ -11,7 +11,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
var target = null; var target = null;
var dragging = false; var dragging = false;
var handle = new spine.Vector2(); var handle = new spine.Vector2();
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
var isPlaying = true; var isPlaying = true;
var left, right, up, down; var left, right, up, down;
@ -27,8 +27,8 @@ var additiveBlendingDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
@ -91,7 +91,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
mouseMoved = true; mouseMoved = true;
}, false); }, false);
} else { } else {
var input = new spine.webgl.Input(canvas); var input = new spine.Input(canvas);
input.addListener({ input.addListener({
down: function (x, y) { down: function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
@ -126,7 +126,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.4; renderer.camera.viewportWidth = bounds.x * 1.4;
renderer.camera.viewportHeight = bounds.y * 1.4; renderer.camera.viewportHeight = bounds.y * 1.4;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -8,8 +8,8 @@ var clippingDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
@ -93,7 +93,7 @@ var clippingDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.6; renderer.camera.viewportWidth = bounds.x * 1.6;
renderer.camera.viewportHeight = bounds.y * 1.6; renderer.camera.viewportHeight = bounds.y * 1.6;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -10,7 +10,7 @@ var hoverboardDemo = function(canvas, bgColor) {
var target = null; var target = null;
var hoverTargets = []; var hoverTargets = [];
var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"]; var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
var isPlaying = true; var isPlaying = true;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
@ -18,11 +18,11 @@ var hoverboardDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
@ -121,7 +121,7 @@ var hoverboardDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -12,8 +12,8 @@ var imageChangesDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
@ -127,7 +127,7 @@ var imageChangesDemo = function(canvas, bgColor) {
} }
renderer.camera.viewportWidth = size.x * 2.4 / zoom; renderer.camera.viewportWidth = size.x * 2.4 / zoom;
renderer.camera.viewportHeight = size.y * 1.4 / zoom; renderer.camera.viewportHeight = size.y * 1.4 / zoom;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -10,9 +10,9 @@ var meshesDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false; renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
@ -119,7 +119,7 @@ var meshesDemo = function(canvas, bgColor) {
renderer.camera.position.y = offset.y + size.y / 2 + 20; renderer.camera.position.y = offset.y + size.y / 2 + 20;
renderer.camera.viewportWidth = size.x * 1.1; renderer.camera.viewportWidth = size.x * 1.1;
renderer.camera.viewportHeight = size.y * 1.1; renderer.camera.viewportHeight = size.y * 1.1;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -9,11 +9,11 @@ var skinsDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("heroes.atlas"); assetManager.loadTextureAtlas("heroes.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
@ -178,7 +178,7 @@ var skinsDemo = function(canvas, bgColor) {
renderer.camera.position.y = offset.y + bounds.y / 2; renderer.camera.position.y = offset.y + bounds.y / 2;
renderer.camera.viewportWidth = bounds.x * 3; renderer.camera.viewportWidth = bounds.x * 3;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -15,12 +15,12 @@ var spritesheetsDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
} }
function loadingComplete() { function loadingComplete() {
@ -88,7 +88,7 @@ var spritesheetsDemo = function(canvas, bgColor) {
renderer.camera.position.y = offset.y + viewportHeight / 2 - 100; renderer.camera.position.y = offset.y + viewportHeight / 2 - 100;
renderer.camera.viewportWidth = viewportWidth * 1.2; renderer.camera.viewportWidth = viewportWidth * 1.2;
renderer.camera.viewportHeight = viewportHeight * 1.2; renderer.camera.viewportHeight = viewportHeight * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
} }
function render() { function render() {

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

@ -17,7 +17,7 @@ var stretchymanDemo = function(canvas, bgColor) {
"head controller", "head controller",
"hip controller" "hip controller"
]; ];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.webgl.Vector3(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2(), temp3 = new spine.Vector3();
var kneePos = new spine.Vector2(); var kneePos = new spine.Vector2();
var playButton, timeLine, spacing, isPlaying = true, playTime = 0; var playButton, timeLine, spacing, isPlaying = true, playTime = 0;
@ -25,12 +25,12 @@ var stretchymanDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
} }
function loadingComplete() { function loadingComplete() {
@ -103,7 +103,7 @@ var stretchymanDemo = function(canvas, bgColor) {
function rotate(handBone, elbowBone) { function rotate(handBone, elbowBone) {
// can do all this in world space cause handBone is essentially in world space // can do all this in world space cause handBone is essentially in world space
var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.webgl.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize(); var v = coords.set(handBone.worldX, handBone.worldY, 0).sub(new spine.Vector3(elbowBone.worldX, elbowBone.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180; var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees + 180;
if (v.y < 0) angle = 360 - angle; if (v.y < 0) angle = 360 - angle;
handBone.rotation = angle; handBone.rotation = angle;
@ -130,7 +130,7 @@ var stretchymanDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.5; renderer.camera.viewportHeight = bounds.y * 1.5;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -8,8 +8,8 @@ var tankDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
@ -94,7 +94,7 @@ var tankDemo = function(canvas, bgColor) {
renderer.camera.position.y = bounds.y - 505; renderer.camera.position.y = bounds.y - 505;
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -11,7 +11,7 @@ var transformsDemo = function(canvas, bgColor) {
var target = null; var target = null;
var hoverTargets = [null, null, null]; var hoverTargets = [null, null, null];
var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"]; var controlBones = ["wheel2overlay", "wheel3overlay", "rotate-handle"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
var lastRotation = 0; var lastRotation = 0;
var mix, lastOffset = 0, lastMix = 0.5; var mix, lastOffset = 0, lastMix = 0.5;
@ -19,11 +19,11 @@ var transformsDemo = function(canvas, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
} }
@ -83,7 +83,7 @@ var transformsDemo = function(canvas, bgColor) {
var getRotation = function (x, y) { var getRotation = function (x, y) {
renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight); renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
var wheel1 = skeleton.findBone("wheel1overlay"); var wheel1 = skeleton.findBone("wheel1overlay");
var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize(); var v = coords.sub(new spine.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees; var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
if (v.y < 0) angle = 360 - angle; if (v.y < 0) angle = 360 - angle;
return angle; return angle;
@ -118,7 +118,7 @@ var transformsDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.6; renderer.camera.viewportWidth = bounds.x * 1.6;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -10,11 +10,11 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas1.atlas"); assetManager.loadTextureAtlas("atlas1.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
timeSlider = $("#transitions-timeslider").data("slider"); timeSlider = $("#transitions-timeslider").data("slider");
@ -100,7 +100,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
renderer.camera.position.y = offset.y + size.y / 2 - 40; renderer.camera.position.y = offset.y + size.y / 2 - 40;
renderer.camera.viewportWidth = size.x * 2; renderer.camera.viewportWidth = size.x * 2;
renderer.camera.viewportHeight = size.y * 2; renderer.camera.viewportHeight = size.y * 2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -77,7 +77,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
for (var i = 0; i < numCanvases; i++) { for (var i = 0; i < numCanvases; i++) {
var canvas = document.createElement("canvas"); var canvas = document.createElement("canvas");
canvas.width = 1; canvas.height = 1; canvas.width = 1; canvas.height = 1;
canvas.context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); canvas.context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
canvas.id = "canvas-" + i; canvas.id = "canvas-" + i;
spineDemos.canvases.push(canvas); spineDemos.canvases.push(canvas);
} }
@ -99,8 +99,8 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
demo.placeholder = placeholder; demo.placeholder = placeholder;
demo.canvas = canvas; demo.canvas = canvas;
demo.visible = false; demo.visible = false;
var renderer = new spine.webgl.SceneRenderer(canvas, canvas.context.gl); var renderer = new spine.SceneRenderer(canvas, canvas.context.gl);
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer); demo.loadingScreen = new spine.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function () { $(window).on('DOMContentLoaded load resize scroll', function () {
checkElementVisible(demo); checkElementVisible(demo);
renderDemo(demo); renderDemo(demo);
@ -109,8 +109,8 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
spineDemos.demos.push(demo); spineDemos.demos.push(demo);
} }
var coords = new spine.webgl.Vector3(); var coords = new spine.Vector3();
var mouse = new spine.webgl.Vector3(); var mouse = new spine.Vector3();
spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) { spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) {
mouse.set(x, canvas.clientHeight - y, 0) mouse.set(x, canvas.clientHeight - y, 0)
var bestDistance = 24, index = 0; var bestDistance = 24, index = 0;
@ -131,7 +131,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
return best; return best;
}; };
var position = new spine.webgl.Vector3(); var position = new spine.Vector3();
spineDemos.dragged = function (canvas, renderer, target, x, y) { spineDemos.dragged = function (canvas, renderer, target, x, y) {
if (target) { if (target) {
x = spine.MathUtils.clamp(x, 0, canvas.clientWidth) x = spine.MathUtils.clamp(x, 0, canvas.clientWidth)

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

@ -10,16 +10,16 @@ var vineDemo = function(canvas, bgColor) {
var target = null; var target = null;
var hoverTargets = [null, null, null, null, null, null]; var hoverTargets = [null, null, null, null, null, null];
var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"]; var controlBones = ["base", "vine-control1", "vine-control2", "vine-control3", "vine-control4"];
var coords = new spine.webgl.Vector3(), temp = new spine.webgl.Vector3(), temp2 = new spine.Vector2(); var coords = new spine.Vector3(), temp = new spine.Vector3(), temp2 = new spine.Vector2();
var playButton, timeLine, isPlaying = true, playTime = 0; var playButton, timeLine, isPlaying = true, playTime = 0;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1); if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init() { function init() {
gl = canvas.context.gl; gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl); renderer = new spine.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader); assetManager = new spine.AssetManager(gl, spineDemos.path, spineDemos.downloader);
assetManager.loadTextureAtlas("atlas2.atlas"); assetManager.loadTextureAtlas("atlas2.atlas");
assetManager.loadJson("demos.json"); assetManager.loadJson("demos.json");
timeKeeper = new spine.TimeKeeper(); timeKeeper = new spine.TimeKeeper();
@ -121,7 +121,7 @@ var vineDemo = function(canvas, bgColor) {
renderer.camera.viewportWidth = bounds.x * 1.2; renderer.camera.viewportWidth = bounds.x * 1.2;
renderer.camera.viewportHeight = bounds.y * 1.2; renderer.camera.viewportHeight = bounds.y * 1.2;
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a); gl.clearColor(bgColor.r, bgColor.g, bgColor.b, bgColor.a);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);

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

@ -1,10 +1,23 @@
<html> <html>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<script> <script>
@ -13,7 +26,7 @@ var canvas;
var gl; var gl;
var shader; var shader;
var batcher; var batcher;
var mvp = new spine.webgl.Matrix4(); var mvp = new spine.Matrix4();
var assetManager; var assetManager;
var skeletonRenderer; var skeletonRenderer;
@ -34,11 +47,11 @@ function init () {
} }
// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager. // Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
shader = spine.webgl.Shader.newTwoColoredTextured(gl); shader = spine.Shader.newTwoColoredTextured(gl);
batcher = new spine.webgl.PolygonBatcher(gl); batcher = new spine.PolygonBatcher(gl);
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1); mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl); skeletonRenderer = new spine.SkeletonRenderer(gl);
assetManager = new spine.webgl.AssetManager(gl); assetManager = new spine.AssetManager(gl);
// Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png // Tell AssetManager to load the resources for each skeleton, including the exported .skel file, the .atlas file and the .png
// file for the atlas. We then wait until all resources are loaded in the load() method. // file for the atlas. We then wait until all resources are loaded in the load() method.
@ -113,8 +126,8 @@ function render () {
// Bind the shader and set the texture and model-view-projection matrix. // Bind the shader and set the texture and model-view-projection matrix.
shader.bind(); shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0); shader.setUniformi(spine.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values); shader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
// Start the batch and tell the SkeletonRenderer to render the active skeleton. // Start the batch and tell the SkeletonRenderer to render the active skeleton.
batcher.begin(shader); batcher.begin(shader);
@ -154,4 +167,5 @@ init();
</script> </script>
</body> </body>
</html> </html>

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

@ -2,10 +2,23 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<center> <center>
@ -24,7 +37,7 @@ var canvas;
var gl; var gl;
var shader; var shader;
var batcher; var batcher;
var mvp = new spine.webgl.Matrix4(); var mvp = new spine.Matrix4();
var skeletonRenderer; var skeletonRenderer;
var assetManager; var assetManager;
@ -54,21 +67,21 @@ function init () {
} }
// Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager. // Create a simple shader, mesh, model-view-projection matrix, SkeletonRenderer, and AssetManager.
shader = spine.webgl.Shader.newTwoColoredTextured(gl); shader = spine.Shader.newTwoColoredTextured(gl);
batcher = new spine.webgl.PolygonBatcher(gl); batcher = new spine.PolygonBatcher(gl);
mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1); mvp.ortho2d(0, 0, canvas.width - 1, canvas.height - 1);
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl); skeletonRenderer = new spine.SkeletonRenderer(gl);
assetManager = new spine.webgl.AssetManager(gl, "assets/"); assetManager = new spine.AssetManager(gl, "assets/");
// Create a debug renderer and the ShapeRenderer it needs to render lines. // Create a debug renderer and the ShapeRenderer it needs to render lines.
debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl); debugRenderer = new spine.SkeletonDebugRenderer(gl);
debugRenderer.drawRegionAttachments = true; debugRenderer.drawRegionAttachments = true;
debugRenderer.drawBoundingBoxes = true; debugRenderer.drawBoundingBoxes = true;
debugRenderer.drawMeshHull = true; debugRenderer.drawMeshHull = true;
debugRenderer.drawMeshTriangles = true; debugRenderer.drawMeshTriangles = true;
debugRenderer.drawPaths = true; debugRenderer.drawPaths = true;
debugShader = spine.webgl.Shader.newColored(gl); debugShader = spine.Shader.newColored(gl);
shapes = new spine.webgl.ShapeRenderer(gl); shapes = new spine.ShapeRenderer(gl);
// Tell AssetManager to load the resources for each skeleton, including the exported data file, the .atlas file and the .png // Tell AssetManager to load the resources for each skeleton, including the exported data file, the .atlas file and the .png
// file for the atlas. We then wait until all resources are loaded in the load() method. // file for the atlas. We then wait until all resources are loaded in the load() method.
@ -319,8 +332,8 @@ function render () {
// Bind the shader and set the texture and model-view-projection matrix. // Bind the shader and set the texture and model-view-projection matrix.
shader.bind(); shader.bind();
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0); shader.setUniformi(spine.Shader.SAMPLER, 0);
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values); shader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
// Start the batch and tell the SkeletonRenderer to render the active skeleton. // Start the batch and tell the SkeletonRenderer to render the active skeleton.
batcher.begin(shader); batcher.begin(shader);
@ -350,7 +363,7 @@ function render () {
var debug = $('#debug').is(':checked'); var debug = $('#debug').is(':checked');
if (debug) { if (debug) {
debugShader.bind(); debugShader.bind();
debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values); debugShader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
debugRenderer.premultipliedAlpha = premultipliedAlpha; debugRenderer.premultipliedAlpha = premultipliedAlpha;
shapes.begin(debugShader); shapes.begin(debugShader);
debugRenderer.draw(shapes, skeleton); debugRenderer.draw(shapes, skeleton);
@ -388,4 +401,5 @@ init();
</script> </script>
</body> </body>
</html> </html>

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

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

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

@ -1,12 +1,15 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
input, label { input,
label {
display: block; display: block;
} }
#controls { #controls {
position: absolute; position: absolute;
} }
@ -18,6 +21,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<canvas id="canvas" style="width: 640px; height: 480px;"></canvas> <canvas id="canvas" style="width: 640px; height: 480px;"></canvas>
<div id="controls"> <div id="controls">
@ -30,12 +34,12 @@
<script> <script>
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
var gl = context.gl; var gl = context.gl;
var time = new spine.TimeKeeper(); var time = new spine.TimeKeeper();
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); var assetManager = new spine.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context); var renderer = new spine.SceneRenderer(canvas, context);
var skeleton, animationState; var skeleton, animationState;
var upEntry, downEntry, leftEntry, rightEntry; var upEntry, downEntry, leftEntry, rightEntry;
@ -88,7 +92,7 @@
gl.clearColor(0.3, 0.3, 0.3, 1); gl.clearColor(0.3, 0.3, 0.3, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton); renderer.drawSkeleton(skeleton);
renderer.end(); renderer.end();
@ -114,4 +118,5 @@
setupUI(); setupUI();
load(); load();
</script> </script>
</html> </html>

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

@ -1,4 +1,5 @@
<html> <html>
<body> <body>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<canvas width="640" height="480"></canvas> <canvas width="640" height="480"></canvas>
@ -6,11 +7,11 @@
<script> <script>
var canvas = document.getElementsByTagName("canvas")[0]; var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas); var context = new spine.ManagedWebGLRenderingContext(canvas);
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); var assetManager = new spine.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context); var renderer = new spine.SceneRenderer(canvas, context);
var time = new spine.TimeKeeper(); var time = new spine.TimeKeeper();
var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context)); var loadingScreen = new spine.LoadingScreen(new spine.SceneRenderer(canvas, context));
var skeleton = null; var skeleton = null;
var animationState = null; var animationState = null;
@ -67,4 +68,5 @@ function render () {
requestAnimationFrame(render); requestAnimationFrame(render);
} }
</script> </script>
</html> </html>

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

@ -2,10 +2,23 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
@ -26,12 +39,12 @@ var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadBinary(FILE + ".skel"); assetManager.loadBinary(FILE + ".skel");
@ -100,7 +113,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -116,4 +129,5 @@ function render() {
init(); init();
</script> </script>
</html> </html>

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

@ -2,10 +2,23 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
@ -26,12 +39,12 @@ var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadBinary(FILE + ".skel"); assetManager.loadBinary(FILE + ".skel");
@ -99,7 +112,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -115,4 +128,5 @@ function render() {
init(); init();
</script> </script>
</html> </html>

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

@ -2,10 +2,22 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { width: 640px ;height: 640px; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
width: 640px;
height: 640px;
}
</style> </style>
<body> <body>
<canvas id="canvas" style="background: #ff00ff;"></canvas> <canvas id="canvas" style="background: #ff00ff;"></canvas>
<div> <div>
@ -71,7 +83,7 @@
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); var context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
var gl = context.gl; var gl = context.gl;
var vertices = [-1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, var vertices = [-1, -1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
@ -80,16 +92,16 @@
-1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0]; -1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];
var indices = [0, 1, 2, 2, 3, 0]; var indices = [0, 1, 2, 2, 3, 0];
var shader = spine.webgl.Shader.newTwoColoredTextured(context); var shader = spine.Shader.newTwoColoredTextured(context);
var ivanShader = loadIvanShader(context, shader); var ivanShader = loadIvanShader(context, shader);
var assetManager = new spine.webgl.AssetManager(context); var assetManager = new spine.AssetManager(context);
assetManager.loadTexture("../example/assets/spineboy.png"); assetManager.loadTexture("../example/assets/spineboy.png");
assetManager.loadTexture("../example/assets/spineboy-pma.png"); assetManager.loadTexture("../example/assets/spineboy-pma.png");
var camMatrix = new spine.webgl.Matrix4(); var camMatrix = new spine.Matrix4();
var batcher = new spine.webgl.PolygonBatcher(context, true); var batcher = new spine.PolygonBatcher(context, true);
requestAnimationFrame(load); requestAnimationFrame(load);
@ -110,7 +122,7 @@
var s = ivan ? ivanShader : shader; var s = ivan ? ivanShader : shader;
s.bind(); s.bind();
s.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, camMatrix.values); s.setUniform4x4f(spine.Shader.MVP_MATRIX, camMatrix.values);
s.setUniformi("u_texture", 0); s.setUniformi("u_texture", 0);
if (texture != null) { if (texture != null) {
batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA) batcher.setBlendMode(pma ? context.gl.ONE : context.gl.SRC_ALPHA, context.gl.ONE_MINUS_SRC_ALPHA)
@ -144,6 +156,6 @@
} }
`; `;
return new spine.webgl.Shader(context, vs, fs); return new spine.Shader(context, vs, fs);
} }
</script> </script>

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

@ -2,10 +2,23 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
@ -26,12 +39,12 @@ var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadText(FILE + ".json"); assetManager.loadText(FILE + ".json");
@ -92,7 +105,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -108,4 +121,5 @@ function render() {
init(); init();
</script> </script>
</html> </html>

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

@ -1,10 +1,23 @@
<html> <html>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
</body> </body>
@ -22,12 +35,12 @@ var animationState;
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadBinary(FILE + ".skel"); assetManager.loadBinary(FILE + ".skel");
@ -74,7 +87,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
renderer.drawSkeleton(skeleton, true); renderer.drawSkeleton(skeleton, true);
renderer.end(); renderer.end();
@ -84,4 +97,5 @@ function render() {
init(); init();
</script> </script>
</html> </html>

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

@ -2,10 +2,23 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
@ -26,12 +39,12 @@ var renderMean = new spine.WindowedMean();
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-ess", "") + "-pma.atlas");
assetManager.loadText(FILE + ".json"); assetManager.loadText(FILE + ".json");
@ -89,7 +102,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -105,4 +118,5 @@ function render() {
init(); init();
</script> </script>
</html> </html>

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

@ -1,4 +1,5 @@
<html> <html>
<body> <body>
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<canvas width="640" height="480"></canvas> <canvas width="640" height="480"></canvas>
@ -12,11 +13,11 @@
*/ */
var canvas = document.getElementsByTagName("canvas")[0]; var canvas = document.getElementsByTagName("canvas")[0];
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
var context = new spine.webgl.ManagedWebGLRenderingContext(canvas); var context = new spine.ManagedWebGLRenderingContext(canvas);
var assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); var assetManager = new spine.AssetManager(context, "../example/assets/");
var renderer = new spine.webgl.SceneRenderer(canvas, context); var renderer = new spine.SceneRenderer(canvas, context);
var time = new spine.TimeKeeper(); var time = new spine.TimeKeeper();
var loadingScreen = new spine.webgl.LoadingScreen(new spine.webgl.SceneRenderer(canvas, context)); var loadingScreen = new spine.LoadingScreen(new spine.SceneRenderer(canvas, context));
var spineBoy; var spineBoy;
var vine; var vine;
@ -111,4 +112,5 @@ function render () {
requestAnimationFrame(render); requestAnimationFrame(render);
} }
</script> </script>
</html> </html>

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

@ -2,10 +2,23 @@
<script src="../../build/spine-webgl.js"></script> <script src="../../build/spine-webgl.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<style> <style>
* { margin: 0; padding: 0; } * {
body, html { height: 100% } margin: 0;
canvas { position: absolute; width: 100% ;height: 100%; } padding: 0;
}
body,
html {
height: 100%
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
</style> </style>
<body> <body>
<div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div> <div id="label" style="position: absolute; top: 0; left: 0; color: #fff; z-index: 10"></div>
<canvas id="canvas" style="background: red;"></canvas> <canvas id="canvas" style="background: red;"></canvas>
@ -30,10 +43,10 @@ var interpolation = new spine.Pow(2);
function init() { function init() {
canvas = document.getElementById("canvas"); canvas = document.getElementById("canvas");
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false }); context = new spine.ManagedWebGLRenderingContext(canvas, { alpha: false });
gl = context.gl; gl = context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, context); renderer = new spine.SceneRenderer(canvas, context);
renderer.skeletonDebugRenderer.drawBones = false; renderer.skeletonDebugRenderer.drawBones = false;
renderer.skeletonDebugRenderer.drawMeshTriangles = false; renderer.skeletonDebugRenderer.drawMeshTriangles = false;
renderer.skeletonDebugRenderer.drawMeshHull = false; renderer.skeletonDebugRenderer.drawMeshHull = false;
@ -45,8 +58,8 @@ function init() {
swirlEffect.centerY = 200; swirlEffect.centerY = 200;
swirlEffect.radius = 500; swirlEffect.radius = 500;
assetManager = new spine.webgl.AssetManager(context, "../example/assets/"); assetManager = new spine.AssetManager(context, "../example/assets/");
input = new spine.webgl.Input(canvas); input = new spine.Input(canvas);
assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas"); assetManager.loadTextureAtlas(FILE.replace("-pro", "").replace("-oss", "") + "-pma.atlas");
assetManager.loadText(FILE + ".json"); assetManager.loadText(FILE + ".json");
@ -111,7 +124,7 @@ function render() {
gl.clearColor(0.2, 0.2, 0.2, 1); gl.clearColor(0.2, 0.2, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
renderer.resize(spine.webgl.ResizeMode.Fit); renderer.resize(spine.ResizeMode.Fit);
renderer.begin(); renderer.begin();
for (var i = 0; i < skeletons.length; i++) { for (var i = 0; i < skeletons.length; i++) {
var skeleton = skeletons[i].skeleton; var skeleton = skeletons[i].skeleton;
@ -128,4 +141,5 @@ function render() {
init(); init();
</script> </script>
</html> </html>

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

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