UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Modularize player, add package.json files, fix up module paths.

Browse Source
This commit is contained in:
Mario Zechner 2021-08-25 21:00:17 +02:00
parent 79f0abf765
commit 17c342ac61
33 changed files with 1251 additions and 10010 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8888
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

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

@ -61,6 +61,14 @@
"node": ">=6.9.0"
}
},
"node_modules/@esotericsoftware/spine-canvas": {
"resolved": "spine-canvas",
"link": true
},
"node_modules/@esotericsoftware/spine-core": {
"resolved": "spine-core",
"link": true
},
"node_modules/@esotericsoftware/spine-webgl": {
"resolved": "spine-webgl",
"link": true
@ -5398,13 +5406,17 @@
"spine-canvas": {
"name": "@esotericsoftware/spine-canvas",
"version": "4.0.1",
"extraneous": true,
"license": "LicenseRef-LICENSE"
"license": "LicenseRef-LICENSE",
"devDependencies": {
"npx": "^10.2.2",
"rollup": "^2.56.2",
"rollup-plugin-dts": "^3.0.2",
"typescript": "^4.3.5"
}
},
"spine-core": {
"name": "@esotericsoftware/spine-core",
"version": "4.0.1",
"extraneous": true,
"license": "LicenseRef-LICENSE"
},
"spine-webgl": {
@ -5443,6 +5455,18 @@
"js-tokens": "^4.0.0"
}
},
"@esotericsoftware/spine-canvas": {
"version": "file:spine-canvas",
"requires": {
"npx": "^10.2.2",
"rollup": "^2.56.2",
"rollup-plugin-dts": "^3.0.2",
"typescript": "^4.3.5"
}
},
"@esotericsoftware/spine-core": {
"version": "file:spine-core"
},
"@esotericsoftware/spine-webgl": {
"version": "file:spine-webgl"
},

6
spine-ts/package.json
View File

@ -3,7 +3,11 @@
"version": "4.0.1",
"description": "The official Spine Runtimes for the web.",
"scripts": {
"build": "npx tsc -b --clean; tsc -b; npx rollup -c rollup.config.js --sourcemap;"
"build": "rm -rf build && npm run build:core && npm run build:canvas && npm run build:webgl && npm run build:player",
"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 --sourcemap --outfile=build/spine-player.js --format=iife --global-name=\"spine\""
},
"repository": {
"type": "git",

4
spine-ts/spine-canvas/package.json
View File

@ -3,6 +3,10 @@
"version": "4.0.1",
"description": "The official Spine Runtimes for the web.",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist/**/*"
],
"scripts": {},
"repository": {
"type": "git",

2
spine-ts/spine-canvas/src/AssetManager.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { AssetManagerBase, Downloader } from "spine-core";
import { AssetManagerBase, Downloader } from "@esotericsoftware/spine-core"
import { CanvasTexture } from "./CanvasTexture";
export class AssetManager extends AssetManagerBase {

2
spine-ts/spine-canvas/src/CanvasTexture.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Texture, TextureFilter, TextureWrap } from "spine-core";
import { Texture, TextureFilter, TextureWrap } from "@esotericsoftware/spine-core";
export class CanvasTexture extends Texture {
constructor(image: HTMLImageElement) {

2
spine-ts/spine-canvas/src/SkeletonRenderer.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Utils, Color, Skeleton, RegionAttachment, TextureAtlasRegion, BlendMode, MeshAttachment, Slot } from "spine-core";
import { Utils, Color, Skeleton, RegionAttachment, TextureAtlasRegion, BlendMode, MeshAttachment, Slot } from "@esotericsoftware/spine-core";
import { CanvasTexture } from "./CanvasTexture";
export class SkeletonRenderer {

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

@ -2,7 +2,7 @@ export * from "./AssetManager";
export * from "./CanvasTexture";
export * from "./SkeletonRenderer";
export * from "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.
@ -23,9 +23,5 @@ export * from "spine-core";
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
declare global {
var spine: any;
}
let exports = eval("src_exports");
exports.canvas = exports;
if (exports) exports.canvas = exports;

2
spine-ts/spine-canvas/tsconfig.json
View File

@ -5,7 +5,7 @@
"rootDir": "./src",
"outDir": "./dist",
"paths": {
"spine-core": [
"@esotericsoftware/spine-core": [
"../spine-core/src"
]
}

4
spine-ts/spine-core/package.json
View File

@ -3,6 +3,10 @@
"version": "4.0.1",
"description": "The official Spine Runtimes for the web.",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist/**/*"
],
"scripts": {},
"repository": {
"type": "git",

30
spine-ts/spine-player/package.json Normal file
View File

@ -0,0 +1,30 @@
{
"name": "@esotericsoftware/spine-player",
"version": "4.0.1",
"description": "The official Spine Runtimes for the web.",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist/**/*"
],
"scripts": {},
"repository": {
"type": "git",
"url": "git+https://github.com/esotericsoftware/spine-runtimes.git"
},
"keywords": [
"gamedev",
"animations",
"2d",
"spine",
"game-dev",
"runtimes",
"skeletal"
],
"author": "Esoteric Software LLC",
"license": "LicenseRef-LICENSE",
"bugs": {
"url": "https://github.com/esotericsoftware/spine-runtimes/issues"
},
"homepage": "https://github.com/esotericsoftware/spine-runtimes#readme"
}

2059
spine-ts/spine-player/src/Player.ts
View File

File diff suppressed because one or more lines are too long

106
spine-ts/spine-player/src/PlayerEditor.ts
View File

@ -27,12 +27,11 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
declare function CodeMirror (el: Element, config: any): void;
declare function CodeMirror(el: Element, config: any): void;
module spine {
export class SpinePlayerEditor {
private static DEFAULT_CODE =
`
export class SpinePlayerEditor {
private static DEFAULT_CODE =
`
<script src="https://esotericsoftware.com/files/spine-player/4.0/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/4.0/spine-player.css">
@ -46,72 +45,71 @@ new spine.SpinePlayer("player-container", {
</script>
`.trim();
private prefix: string =
`<html>
private prefix: string =
`<html>
<head>
<style>
body { margin: 0px; }
</style>
</head>
<body>`.trim()
private postfix: string = `</body>`;
private code: any;
private player: HTMLIFrameElement;
private postfix: string = `</body>`;
private code: any;
private player: HTMLIFrameElement;
constructor (parent: HTMLElement) {
this.render(parent);
}
constructor(parent: HTMLElement) {
this.render(parent);
}
private render (parent: HTMLElement) {
let dom = /*html*/`
private render(parent: HTMLElement) {
let dom = /*html*/`
<div class="spine-player-editor-container">
<div class="spine-player-editor-code"></div>
<iframe class="spine-player-editor-player"></iframe>
</div>
`;
parent.innerHTML = dom;
let codeElement = parent.getElementsByClassName("spine-player-editor-code")[0];
this.player = parent.getElementsByClassName("spine-player-editor-player")[0] as HTMLIFrameElement;
parent.innerHTML = dom;
let codeElement = parent.getElementsByClassName("spine-player-editor-code")[0];
this.player = parent.getElementsByClassName("spine-player-editor-player")[0] as HTMLIFrameElement;
requestAnimationFrame(() => {
this.code = CodeMirror(codeElement, {
lineNumbers: true,
tabSize: 3,
indentUnit: 3,
indentWithTabs: true,
scrollBarStyle: "native",
mode: "htmlmixed",
theme: "monokai"
});
this.code.on("change", () => {
this.startPlayer();
});
requestAnimationFrame(() => {
this.code = CodeMirror(codeElement, {
lineNumbers: true,
tabSize: 3,
indentUnit: 3,
indentWithTabs: true,
scrollBarStyle: "native",
mode: "htmlmixed",
theme: "monokai"
});
this.code.on("change", () => {
this.startPlayer();
});
this.setCode(SpinePlayerEditor.DEFAULT_CODE);
})
}
this.setCode(SpinePlayerEditor.DEFAULT_CODE);
})
}
setPreAndPostfix (prefix: string, postfix: string) {
this.prefix = prefix;
this.postfix = postfix;
this.startPlayer()
}
setPreAndPostfix(prefix: string, postfix: string) {
this.prefix = prefix;
this.postfix = postfix;
this.startPlayer()
}
setCode (code: string) {
this.code.setValue(code);
this.startPlayer();
}
setCode(code: string) {
this.code.setValue(code);
this.startPlayer();
}
private timerId = 0;
startPlayer () {
clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
let code = this.code.getDoc().getValue();
code = this.prefix + code + this.postfix;
code = window.btoa(code);
this.player.src = "";
this.player.src = "data:text/html;base64," + code;
}, 500);
}
private timerId = 0;
startPlayer() {
clearTimeout(this.timerId);
this.timerId = setTimeout(() => {
let code = this.code.getDoc().getValue();
code = this.prefix + code + this.postfix;
code = window.btoa(code);
this.player.src = "";
this.player.src = "data:text/html;base64," + code;
}, 500);
}
}

27
spine-ts/spine-player/src/index.ts Normal file
View File

@ -0,0 +1,27 @@
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;

30
spine-ts/spine-player/tsconfig.json Normal file
View File

@ -0,0 +1,30 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"baseUrl": ".",
"rootDir": "./src",
"outDir": "./dist",
"paths": {
"@esotericsoftware/spine-core": [
"../spine-core/src"
],
"@esotericsoftware/spine-webgl": [
"../spine-webgl/src"
]
}
},
"include": [
"**/*.ts"
],
"exclude": [
"dist/**/*.d.ts"
],
"references": [
{
"path": "../spine-core"
},
{
"path": "../spine-webgl"
}
]
}

4
spine-ts/spine-webgl/package.json
View File

@ -3,6 +3,10 @@
"version": "4.0.1",
"description": "The official Spine Runtimes for the web.",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist/**/*"
],
"scripts": {},
"repository": {
"type": "git",

5
spine-ts/spine-webgl/src/AssetManager.ts
View File

@ -27,14 +27,15 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { AssetManagerBase, Downloader } from "spine-core";
import { AssetManagerBase, Downloader } from "@esotericsoftware/spine-core"
import { ManagedWebGLRenderingContext } from "./WebGL";
import { GLTexture } from "./GLTexture";
export class AssetManager extends AssetManagerBase {
constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix: string = "", downloader: Downloader = null) {
super((image: HTMLImageElement | ImageBitmap) => {
return new spine.webgl.GLTexture(context, image);
return new GLTexture(context, image);
}, pathPrefix, downloader);
}
}

2
spine-ts/spine-webgl/src/GLTexture.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Texture, Disposable, Restorable, TextureFilter, TextureWrap } from "spine-core";
import { Texture, Disposable, Restorable, TextureFilter, TextureWrap } from "@esotericsoftware/spine-core";
import { ManagedWebGLRenderingContext } from "./WebGL";
export class GLTexture extends Texture implements Disposable, Restorable {

4
spine-ts/spine-webgl/src/Input.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Pool } from "spine-core";
import { Pool } from "@esotericsoftware/spine-core";
export class Input {
element: HTMLElement;
@ -38,7 +38,7 @@ export class Input {
private listeners = new Array<InputListener>();
touchesPool = new Pool<Touch>(() => {
return new spine.webgl.Touch(0, 0, 0);
return new Touch(0, 0, 0);
});
constructor(element: HTMLElement) {

7
spine-ts/spine-webgl/src/LoadingScreen.ts
View File

@ -27,6 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Color, TimeKeeper } from "@esotericsoftware/spine-core";
import { GLTexture } from "./GLTexture";
import { ResizeMode, SceneRenderer } from "./SceneRenderer";
@ -44,9 +45,9 @@ export class LoadingScreen {
private angle = 0;
private fadeOut = 0;
private fadeIn = 0;
private timeKeeper = new spine.TimeKeeper();
backgroundColor = new spine.Color(0.135, 0.135, 0.135, 1);
private tempColor = new spine.Color();
private timeKeeper = new TimeKeeper();
backgroundColor = new Color(0.135, 0.135, 0.135, 1);
private tempColor = new Color();
constructor(renderer: SceneRenderer) {
this.renderer = renderer;

2
spine-ts/spine-webgl/src/Mesh.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Disposable, Restorable } from "spine-core";
import { Disposable, Restorable } from "@esotericsoftware/spine-core";
import { Shader } from "./Shader";
import { ManagedWebGLRenderingContext } from "./WebGL";

2
spine-ts/spine-webgl/src/PolygonBatcher.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Disposable } from "spine-core";
import { Disposable } from "@esotericsoftware/spine-core";
import { GLTexture } from "./GLTexture";
import { Mesh, Position2Attribute, ColorAttribute, TexCoordAttribute, Color2Attribute } from "./Mesh";
import { Shader } from "./Shader";

2
spine-ts/spine-webgl/src/SceneRenderer.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Color, Disposable, Skeleton, MathUtils, TextureAtlasRegion } from "spine-core";
import { Color, Disposable, Skeleton, MathUtils, TextureAtlasRegion } from "@esotericsoftware/spine-core";
import { OrthoCamera } from "./Camera";
import { GLTexture } from "./GLTexture";
import { PolygonBatcher } from "./PolygonBatcher";

2
spine-ts/spine-webgl/src/Shader.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Disposable, Restorable } from "spine-core";
import { Disposable, Restorable } from "@esotericsoftware/spine-core";
import { ManagedWebGLRenderingContext } from "./WebGL";
export class Shader implements Disposable, Restorable {

2
spine-ts/spine-webgl/src/ShapeRenderer.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Disposable, Color, Vector2, MathUtils } from "spine-core";
import { Disposable, Color, Vector2, MathUtils } from "@esotericsoftware/spine-core";
import { Mesh, Position2Attribute, ColorAttribute } from "./Mesh";
import { Shader } from "./Shader";
import { ManagedWebGLRenderingContext } from "./WebGL";

2
spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Disposable, Color, SkeletonBounds, Utils, Skeleton, RegionAttachment, MeshAttachment, PathAttachment, ClippingAttachment } from "spine-core";
import { Disposable, Color, SkeletonBounds, Utils, Skeleton, RegionAttachment, MeshAttachment, PathAttachment, ClippingAttachment } from "@esotericsoftware/spine-core";
import { ShapeRenderer } from "./ShapeRenderer";
import { ManagedWebGLRenderingContext } from "./WebGL";

4
spine-ts/spine-webgl/src/SkeletonRenderer.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { NumberArrayLike, VertexEffect, Color, SkeletonClipping, Vector2, Utils, Skeleton, BlendMode, RegionAttachment, TextureAtlasRegion, MeshAttachment, ClippingAttachment } from "spine-core";
import { NumberArrayLike, VertexEffect, Color, SkeletonClipping, Vector2, Utils, Skeleton, BlendMode, RegionAttachment, TextureAtlasRegion, MeshAttachment, ClippingAttachment } from "@esotericsoftware/spine-core";
import { GLTexture } from "./GLTexture";
import { PolygonBatcher } from "./PolygonBatcher";
import { ManagedWebGLRenderingContext, WebGLBlendModeConverter } from "./WebGL";
@ -120,7 +120,7 @@ export class SkeletonRenderer {
renderable.numVertices = (mesh.worldVerticesLength >> 1);
renderable.numFloats = renderable.numVertices * clippedVertexSize;
if (renderable.numFloats > renderable.vertices.length) {
renderable.vertices = this.vertices = spine.Utils.newFloatArray(renderable.numFloats);
renderable.vertices = this.vertices = Utils.newFloatArray(renderable.numFloats);
}
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, renderable.vertices, 0, clippedVertexSize);
triangles = mesh.triangles;

2
spine-ts/spine-webgl/src/WebGL.ts
View File

@ -27,7 +27,7 @@
* THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************************************************/
import { Restorable, BlendMode } from "spine-core";
import { Restorable, BlendMode } from "@esotericsoftware/spine-core";
export class ManagedWebGLRenderingContext {
public canvas: HTMLCanvasElement | OffscreenCanvas;

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

@ -14,7 +14,7 @@ export * from './SkeletonRenderer';
export * from './Vector3';
export * from './WebGL';
export * from "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.
@ -35,9 +35,5 @@ export * from "spine-core";
//
// This will break if esbuild renames the variable `src_exports` pointing to
// the exports object.
declare global {
var spine: any;
}
let exports = eval("src_exports");
exports.webgl = exports;
if (exports) exports.webgl = exports;

2
spine-ts/spine-webgl/tsconfig.json
View File

@ -5,7 +5,7 @@
"rootDir": "./src",
"outDir": "./dist",
"paths": {
"spine-core": [
"@esotericsoftware/spine-core": [
"../spine-core/src"
]
}

1
spine-ts/tsconfig.base.json
View File

@ -10,7 +10,6 @@
"ES2015"
],
"declaration": true,
"declarationMap": true,
"composite": true,
"moduleResolution": "node",
}

6
spine-ts/tsconfig.json
View File

@ -6,6 +6,12 @@
},
{
"path": "./spine-canvas"
},
{
"path": "./spine-webgl"
},
{
"path": "./spine-player"
}
]
}