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

[ts][player] Closes #2536, deprecate jsonURL, skelURL, and atlasURL in favor of skeleton and atlas fields.

Browse Source
This commit is contained in:
Mario Zechner 2024-06-04 10:57:33 +02:00
parent eaaec84aa9
commit a74a5754b4
8 changed files with 115 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -113,6 +113,7 @@
## C#
- **Additions**
- Added [`TrackEntry.AlphaAttachmentThreshold`](http://esotericsoftware.com/spine-api-reference#TrackEntry-alphaAttachmentThreshold).
- **Breaking changes**
@ -176,6 +177,7 @@
- **Restructuring (Non-Breaking)**
### XNA/MonoGame
- **Additions**
- Apply external movement to physics: If you are not directly modifying `Skeleton.X` or `Skeleton.Y`, you can apply external game object movement to skeleton physics as follows:
Add a `Vector2 lastPosition;` member variable to your class interacting with the skeleton. Then call e.g. the following code each frame:
@ -263,6 +265,8 @@
- Added physics support
- Added `scale` field to configuration which defines the scale to load the skeleton at
- Added `updateWorldTransform` field to configuration which expects a function that updates the skeleton. Defaults to player.skeleton.updateWorldTransform(spine.Physics.update)
- Added `skeleton` to `SpinePlayerConfig` to specify the URL of the skeleton .json or .skel file. Deprecated `jsonURL` and `binaryURL`. The old fields can still be used, but will be removed in Spine 4.3
- Added `atlas` to `SpinePlayerConfig` to specify the URL of the .atlas file. Deprecated `atlasURL`. The old field can still be used, but will be removed in Spine 4.3.
### Pixi

4
spine-ts/spine-player/example/dispose.html
View File

@ -24,8 +24,8 @@
function createPlayer() {
return new spine.SpinePlayer("container", {
skelUrl: "assets/spineboy-pro.skel",
atlasUrl: "assets/spineboy-pma.atlas",
skeleton: "assets/spineboy-pro.skel",
atlas: "assets/spineboy-pma.atlas",
animation: "run",
premultipliedAlpha: true,
backgroundColor: "#cccccc",

7
spine-ts/spine-player/example/editor.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -7,13 +8,14 @@
<link rel="stylesheet" href="../../index.css" />
<title>Spine Player Editor</title>
</head>
<body class="flex flex-col w-full h-screen items-center">
<div id="editor" class="w-full h-full flex-grow"></div>
<script>
var code =
'<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/iife/spine-player.js"></' +
'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.css">\n\n<div id="player-container" style="width: 100%; height: 100vh;"></div>\n\n<script>\nnew spine.SpinePlayer("player-container", {\n jsonUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",\n atlasUrl: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas"\n});\n</' +
'<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.js"></' +
'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.1.*/dist/spine-player.css">\n\n<div id="player-container" style="width: 100%; height: 100vh;"></div>\n\n<script>\nnew spine.SpinePlayer("player-container", {\n skeleton: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy-pro.json",\n atlas: "http://esotericsoftware.com/files/examples/4.1/spineboy/export/spineboy.atlas"\n});\n</' +
"script>".trim();
spine.SpinePlayerEditor.DEFAULT_CODE = code;
var player = new spine.SpinePlayerEditor(
@ -21,4 +23,5 @@
);
</script>
</body>
</html>

4
spine-ts/spine-player/example/embedding-binary-example.html
View File

File diff suppressed because one or more lines are too long

4
spine-ts/spine-player/example/embedding-json-example.html
View File

File diff suppressed because one or more lines are too long

8
spine-ts/spine-player/example/example.html
View File

@ -24,8 +24,8 @@
// Creates a new spine player. The debugRender option enables
// rendering of viewports and padding for debugging purposes.
new spine.SpinePlayer("container", {
skelUrl: "assets/spineboy-pro.skel",
atlasUrl: "assets/spineboy-pma.atlas",
skeleton: "assets/spineboy-pro.skel",
atlas: "assets/spineboy-pma.atlas",
animation: "run",
premultipliedAlpha: true,
backgroundColor: "#cccccc",
@ -42,8 +42,8 @@
// so content from the website shines through. Hides the controls.
// Instead, the user can control the animation via buttons.
var jsControlledPlayer = new spine.SpinePlayer("container-raptor", {
jsonUrl: "assets/raptor-pro.json",
atlasUrl: "assets/raptor-pma.atlas",
skeleton: "assets/raptor-pro.json",
atlas: "assets/raptor-pma.atlas",
animation: "walk",
showControls: false,
premultipliedAlpha: true,

7
spine-ts/spine-player/example/physics.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -7,6 +8,7 @@
<link rel="stylesheet" href="../dist/spine-player.css" />
<link rel="stylesheet" href="../../index.css" />
</head>
<body style="margin: 0">
<span class="overlay">Drag the swinging lady</span>
<div id="player" style="width: 100%; height: 100vh"></div>
@ -14,8 +16,8 @@
var mouse = new spine.Vector3(),
last = new spine.Vector3();
new spine.SpinePlayer("player", {
skelUrl: "assets/celestial-circus-pro.skel",
atlasUrl: "assets/celestial-circus-pma.atlas",
skeleton: "assets/celestial-circus-pro.skel",
url: "assets/celestial-circus-pma.atlas",
showControls: true,
animation: "swing",
success: (player) => {
@ -44,4 +46,5 @@
});
</script>
</body>
</html>

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

@ -31,23 +31,29 @@ import { Animation, AnimationState, AnimationStateData, AtlasAttachmentLoader, B
import { AssetManager, GLTexture, Input, LoadingScreen, ManagedWebGLRenderingContext, ResizeMode, SceneRenderer, Vector3 } from "@esotericsoftware/spine-webgl"
export interface SpinePlayerConfig {
/* The URL of the skeleton JSON file (.json). Undefined if binaryUrl is given. */
/* The URL of the skeleton JSON (.json) or binary (.skel) file */
skeleton?: string;
/* @deprecated Use skeleton instead. The URL of the skeleton JSON file (.json). Undefined if binaryUrl is given. */
jsonUrl?: string
/* Optional: The name of a field in the JSON that holds the skeleton data. Default: none */
jsonField?: string
/* The URL of the skeleton binary file (.skel). Undefined if jsonUrl is given. */
/* @deprecated Use skeleton instead. The URL of the skeleton binary file (.skel). Undefined if jsonUrl is given. */
binaryUrl?: string
/* The scale when loading the skeleton data. Default: 1 */
scale?: number
/* The URL of the skeleton atlas file (.atlas). Atlas page images are automatically resolved. */
/* @deprecated Use atlas instead. The URL of the skeleton atlas file (.atlas). Atlas page images are automatically resolved. */
atlasUrl?: string
/* Raw data URIs, mapping a path to base64 encoded raw data. When player's asset manager resolves the jsonUrl, binaryUrl,
atlasUrl, or the image paths referenced in the atlas, it will first look for that path in the raw data URIs. This
/* The URL of the skeleton atlas file (.atlas). Atlas page images are automatically resolved. */
atlas?: string;
/* Raw data URIs, mapping a path to base64 encoded raw data. When player's asset manager resolves the skeleton,
atlas, or the image paths referenced in the atlas, it will first look for that path in the raw data URIs. This
allows embedding assets directly in HTML/JS. Default: none */
rawDataURIs?: StringMap<string>
@ -285,10 +291,14 @@ export class SpinePlayer implements Disposable {
private validateConfig (config: SpinePlayerConfig) {
if (!config) throw new Error("A configuration object must be passed to to new SpinePlayer().");
if ((config as any).skelUrl) config.binaryUrl = (config as any).skelUrl;
if (!config.jsonUrl && !config.binaryUrl) throw new Error("A URL must be specified for the skeleton JSON or binary file.");
if (!config.skeleton && !config.jsonUrl && !config.binaryUrl) throw new Error("A URL must be specified for the skeleton JSON or binary file.");
if (!config.scale) config.scale = 1;
if (!config.atlasUrl) throw new Error("A URL must be specified for the atlas file.");
if (!config.atlas && !config.atlasUrl) throw new Error("A URL must be specified for the atlas file.");
if (config.jsonUrl && !config.skeleton) config.skeleton = config.jsonUrl;
if (config.binaryUrl && !config.skeleton) config.skeleton = config.binaryUrl;
if (config.atlasUrl && !config.atlas) config.atlas = config.atlasUrl;
if (!config.backgroundColor) config.backgroundColor = config.alpha ? "00000000" : "000000";
if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor;
if (config.backgroundImage && !config.backgroundImage.url) config.backgroundImage = undefined;
@ -346,11 +356,11 @@ export class SpinePlayer implements Disposable {
for (let path in config.rawDataURIs)
this.assetManager.setRawDataURI(path, config.rawDataURIs[path]);
}
if (config.jsonUrl)
this.assetManager.loadJson(config.jsonUrl);
if (config.skeleton!.endsWith(".json"))
this.assetManager.loadJson(config.skeleton!);
else
this.assetManager.loadBinary(config.binaryUrl!);
this.assetManager.loadTextureAtlas(config.atlasUrl!);
this.assetManager.loadBinary(config.skeleton!);
this.assetManager.loadTextureAtlas(config.atlas!);
if (config.backgroundImage) this.assetManager.loadTexture(config.backgroundImage.url);
// Setup the UI elements.
@ -442,7 +452,7 @@ export class SpinePlayer implements Disposable {
let config = this.config;
// Configure filtering, don't use mipmaps in WebGL1 if the atlas page is non-POT
let atlas = this.assetManager!.require(config.atlasUrl!) as TextureAtlas;
let atlas = this.assetManager!.require(config.atlas!) as TextureAtlas;
let gl = this.context!.gl, anisotropic = gl.getExtension("EXT_texture_filter_anisotropic");
let isWebGL1 = gl.getParameter(gl.VERSION).indexOf("WebGL 1.0") != -1;
for (let page of atlas.pages) {
@ -466,8 +476,8 @@ export class SpinePlayer implements Disposable {
let skeletonData: SkeletonData;
try {
let loader: any, data: any, attachmentLoader = new AtlasAttachmentLoader(atlas);
if (config.jsonUrl) {
data = this.assetManager!.remove(config.jsonUrl);
if (config.skeleton!.endsWith(".json")) {
data = this.assetManager!.remove(config.skeleton!);
if (!data) throw new Error("Empty JSON data.");
if (config.jsonField) {
data = data[config.jsonField];
@ -475,7 +485,7 @@ export class SpinePlayer implements Disposable {
}
loader = new SkeletonJson(attachmentLoader);
} else {
data = this.assetManager!.remove(config.binaryUrl!);
data = this.assetManager!.remove(config.skeleton!);
loader = new SkeletonBinary(attachmentLoader);
}
loader.scale = config.scale;