UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-13 10:38:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Demo asset update, demos clean up.

Browse Source
This commit is contained in:
Nathan Sweet 2021-06-20 01:07:29 -04:00
parent 1818446ead
commit 2911f9da5e
17 changed files with 34 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
var gl, renderer, input, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var target = null;
var dragging = false;
var handle = new spine.Vector2();
@ -27,7 +27,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

BIN
spine-ts/webgl/demos/assets/atlas1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 827 KiB

After

Width:  |  Height:  |  Size: 792 KiB

BIN
spine-ts/webgl/demos/assets/atlas2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 965 KiB

2
spine-ts/webgl/demos/assets/demos.json
View File

File diff suppressed because one or more lines are too long

BIN
spine-ts/webgl/demos/assets/heroes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 776 KiB

After

Width:  |  Height:  |  Size: 740 KiB

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

@ -8,7 +8,7 @@ var clippingDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -6,7 +6,7 @@ var hoverboardDemo = function(canvas, bgColor) {
var gl, renderer, input, assetManager;
var skeleton, state, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var target = null;
var hoverTargets = [];
var controlBones = ["hoverboard controller", "hip controller", "board target", "crosshair"];
@ -17,7 +17,7 @@ var hoverboardDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -3,7 +3,7 @@ var imageChangesDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var skeletons = {};
var activeSkeleton = "Alien";
var playButton, timeLine, isPlaying = true;
@ -12,7 +12,7 @@ var imageChangesDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -1,7 +1,7 @@
var meshesDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var skeletons = {};
var activeSkeleton = "Orange Girl";
var playButton, timeline, isPlaying = true;
@ -10,7 +10,7 @@ var meshesDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
renderer.skeletonDebugRenderer.drawRegionAttachments = false;
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -1,7 +1,7 @@
var skinsDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, state, offset, bounds;
var timeKeeper, loadingScreen;
var timeKeeper;
var playButton, timeLine, isPlaying = true, playTime = 0;
var randomizeSkins, lastSkinChange = Date.now() / 1000, clickAnim = 0;
@ -9,7 +9,7 @@ var skinsDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -8,14 +8,14 @@ var spritesheetsDemo = function(canvas, bgColor) {
var skeletonAtlas;
var viewportWidth, viewportHeight;
var frames = [], currFrame = 0, frameTime = 0, frameScale = 0, FPS = 30;
var timeKeeper, loadingScreen, input;
var timeKeeper, input;
var playTime = 0, framePlaytime = 0, clickAnim = 0;
if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -6,7 +6,7 @@ var stretchymanDemo = function(canvas, bgColor) {
var canvas, gl, renderer, input, assetManager;
var skeleton, bounds, state;
var timeKeeper, loadingScreen;
var timeKeeper;
var target = null;
var hoverTargets = [];
var controlBones = [
@ -25,7 +25,7 @@ var stretchymanDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -8,7 +8,7 @@ var tankDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -19,7 +19,7 @@ var transformsDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -14,7 +14,7 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
timeSliderLabel = $("#transitions-timeslider-label")[0];
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);

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

@ -44,30 +44,22 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
}
function renderDemo(demo) {
var canvas = demo.canvas;
if (!demo.assetManager.isLoadingComplete()) {
if (demo.visible) {
if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();
demo.placeholder.appendChild(canvas);
}
demo.loadingScreen.draw();
if (demo.visible) {
var canvas = demo.canvas;
if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();
demo.placeholder.appendChild(canvas);
}
} else {
if (!demo.loaded) {
demo.loadingComplete();
demo.loaded = true;
}
if (demo.visible) {
if (canvas.parentElement != demo.placeholder) {
$(canvas).detach();
demo.placeholder.appendChild(canvas);
let complete = demo.assetManager.isLoadingComplete();
if (complete) {
if (!demo.loaded) {
demo.loaded = true;
demo.loadingComplete();
}
if (spineDemos.log) console.log("Rendering " + canvas.id);
if (spineDemos.log) console.log("Rendering: " + canvas.id);
demo.render();
demo.loadingScreen.draw(true);
}
demo.loadingScreen.draw(complete);
}
}
@ -85,7 +77,7 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
for (var i = 0; i < numCanvases; i++) {
var canvas = document.createElement("canvas");
canvas.width = 1; canvas.height = 1;
canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
canvas.context = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
canvas.id = "canvas-" + i;
spineDemos.canvases.push(canvas);
}
@ -107,7 +99,7 @@ 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.ctx.gl);
var renderer = new spine.webgl.SceneRenderer(canvas, canvas.context.gl);
demo.loadingScreen = new spine.webgl.LoadingScreen(renderer);
$(window).on('DOMContentLoaded load resize scroll', function() {
checkElementVisible(demo);

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

@ -17,7 +17,7 @@ var vineDemo = function(canvas, bgColor) {
function init () {
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
gl = canvas.ctx.gl;
gl = canvas.context.gl;
renderer = new spine.webgl.SceneRenderer(canvas, gl);
input = new spine.webgl.Input(canvas);