mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-09 08:38:43 +08:00
Beginnings of a Spine player that's more advanced than the existing widget.
This commit is contained in:
badlogic
parent
3dd56a5a4f
commit
d1622c0dab
3278
spine-ts/build/spine-widget.d.ts
vendored
3278
spine-ts/build/spine-widget.d.ts
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -86,11 +86,12 @@ module spine.webgl {
|
||||
let canvas = renderer.canvas;
|
||||
let gl = renderer.context.gl;
|
||||
|
||||
renderer.resize(ResizeMode.Stretch);
|
||||
|
||||
let oldX = renderer.camera.position.x, oldY = renderer.camera.position.y;
|
||||
renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
|
||||
renderer.camera.viewportWidth = canvas.width;
|
||||
renderer.camera.viewportHeight = canvas.height;
|
||||
renderer.resize(ResizeMode.Stretch);
|
||||
|
||||
if (!complete) {
|
||||
gl.clearColor(this.backgroundColor.r, this.backgroundColor.g, this.backgroundColor.b, this.backgroundColor.a);
|
||||
|
||||
98
spine-ts/widget/example/player-test.html
Normal file
98
spine-ts/widget/example/player-test.html
Normal file
@ -0,0 +1,98 @@
|
||||
<html>
|
||||
<script src="../../build/spine-widget.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.spine-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spine-player canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spine-player:hover .spine-player-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-timeline {
|
||||
width: 100%;
|
||||
background: green;
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-timeline-slider {
|
||||
width: 50%;
|
||||
height: 8px;
|
||||
background: #62B0EE;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button {
|
||||
background: none;
|
||||
outline: 0;
|
||||
border: none;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-play {
|
||||
width: 32px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.icon-canvas-transparent,.icon-vs-out{fill:%23252526}.icon-canvas-transparent{opacity:0}.icon-vs-action-green{fill:%2389d185}%3C/style%3E%3C/defs%3E%3Ctitle%3Econtinue%3C/title%3E%3Cpath class='icon-canvas-transparent' d='M16 0v16H0V0z' id='canvas'/%3E%3Cpath class='icon-vs-action-green' d='M4 1.5v13L12.667 8 4 1.5z' id='iconBg'/%3E%3C/svg%3E");
|
||||
fill: white;
|
||||
}
|
||||
|
||||
.spine-player .spine-player-button-icon-pause {
|
||||
width: 32px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E.icon-canvas-transparent,.icon-vs-out{fill:%23252526}.icon-canvas-transparent{opacity:0}.icon-vs-action-blue{fill:%2375beff}%3C/style%3E%3C/defs%3E%3Ctitle%3Epause%3C/title%3E%3Cpath class='icon-canvas-transparent' d='M16 0v16H0V0z' id='canvas'/%3E%3Cpath class='icon-vs-action-blue' d='M4 3h2.5v10H4zm5.5 0v10H12V3z' id='iconBg'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="container" style="width: 100%; height: 100%;"></div>
|
||||
</body>
|
||||
<script>
|
||||
new spine.SpinePlayer(document.getElementById("container"), {
|
||||
jsonUrl: "assets/spineboy-ess.json",
|
||||
atlasUrl: "assets/spineboy.atlas",
|
||||
backgroundColor: "#cccccc",
|
||||
scale: 0.5,
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
224
spine-ts/widget/src/Player.ts
Normal file
224
spine-ts/widget/src/Player.ts
Normal file
@ -0,0 +1,224 @@
|
||||
/******************************************************************************
|
||||
* Spine Runtimes Software License v2.5
|
||||
*
|
||||
* Copyright (c) 2013-2016, Esoteric Software
|
||||
* All rights reserved.
|
||||
*
|
||||
* You are granted a perpetual, non-exclusive, non-sublicensable, and
|
||||
* non-transferable license to use, install, execute, and perform the Spine
|
||||
* Runtimes software and derivative works solely for personal or internal
|
||||
* use. Without the written permission of Esoteric Software (see Section 2 of
|
||||
* the Spine Software License Agreement), you may not (a) modify, translate,
|
||||
* adapt, or develop new applications using the Spine Runtimes or otherwise
|
||||
* create derivative works or improvements of the Spine Runtimes or (b) remove,
|
||||
* delete, alter, or obscure any trademarks or any copyright, trademark, patent,
|
||||
* or other intellectual property or proprietary rights notices on or in the
|
||||
* Software, including any copy thereof. Redistributions in binary or source
|
||||
* form must include this license and terms.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
|
||||
* IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
|
||||
* EVENT SHALL ESOTERIC SOFTWARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
||||
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF
|
||||
* USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
|
||||
* IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
||||
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
||||
* POSSIBILITY OF SUCH DAMAGE.
|
||||
*****************************************************************************/
|
||||
|
||||
module spine {
|
||||
export interface SpinePlayerConfig {
|
||||
jsonUrl: string;
|
||||
atlasUrl: string;
|
||||
animation: string;
|
||||
skin: string;
|
||||
scale: number;
|
||||
x: number;
|
||||
y: number;
|
||||
alpha: boolean;
|
||||
fitToCanvas: boolean;
|
||||
backgroundColor: string;
|
||||
premultipliedAlpha: boolean;
|
||||
success: (widget: SpineWidget) => void;
|
||||
error: (widget: SpineWidget, msg: string) => void;
|
||||
}
|
||||
|
||||
export class SpinePlayer {
|
||||
private sceneRenderer: spine.webgl.SceneRenderer;
|
||||
private canvas: HTMLCanvasElement;
|
||||
private context: spine.webgl.ManagedWebGLRenderingContext;
|
||||
private loadingScreen: spine.webgl.LoadingScreen;
|
||||
private assetManager: spine.webgl.AssetManager;
|
||||
private loaded: boolean;
|
||||
private skeleton: Skeleton;
|
||||
private animationState: AnimationState;
|
||||
|
||||
constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
|
||||
this.validateConfig(config);
|
||||
this.render(parent, config);
|
||||
}
|
||||
|
||||
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig {
|
||||
if (!config) throw new Error("Please pass a configuration to new.spine.SpinePlayer().");
|
||||
if (!config.jsonUrl) throw new Error("Please specify the URL of the skeleton JSON file.");
|
||||
if (!config.atlasUrl) throw new Error("Please specify the URL of the atlas file.");
|
||||
if (!config.scale) config.scale = 1;
|
||||
if (!config.x) config.x = 0;
|
||||
if (!config.y) config.y = 0;
|
||||
if (!config.alpha) config.alpha = false;
|
||||
if (!config.fitToCanvas) config.fitToCanvas = true;
|
||||
if (!config.backgroundColor) config.backgroundColor = "#000000";
|
||||
if (!config.premultipliedAlpha) config.premultipliedAlpha = false;
|
||||
if (!config.success) config.success = (widget) => {};
|
||||
if (!config.error) config.error = (widget, msg) => {};
|
||||
return config;
|
||||
}
|
||||
|
||||
render(parent: HTMLElement, config: SpinePlayerConfig) {
|
||||
parent.innerHTML = /*html*/`
|
||||
<div class="spine-player">
|
||||
<canvas class="spine-player-canvas"></canvas>
|
||||
<div class="spine-player-controls">
|
||||
<div class="spine-player-timeline">
|
||||
<div class="spine-player-timeline-slider"></div>
|
||||
</div>
|
||||
<div class="spine-player-buttons">
|
||||
<button id="spine-player-button-play-pause" class="spine-player-button spine-player-button-icon-play"></button>
|
||||
<div class="spine-player-button-spacer"></div>
|
||||
<button id="spine-player-button-speed" class="spine-player-button">
|
||||
Speed
|
||||
</button>
|
||||
<button id="spine-player-button-animation" class="spine-player-button">
|
||||
Animation
|
||||
</button>
|
||||
<button id="spine-player-button-skin" class="spine-player-button">
|
||||
Skin
|
||||
</button>
|
||||
<button id="spine-player-button-settings" class="spine-player-button">
|
||||
Settings
|
||||
</button>
|
||||
<button id="spine-player-button-fullscreen" class="spine-player-button">
|
||||
Fullscreen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.canvas = findWithClass(parent, "spine-player-canvas")[0] as HTMLCanvasElement;
|
||||
let slider = findWithClass(parent, "spine-player-timeline-slider")[0];
|
||||
let playButton = findWithId(parent, "spine-player-button-play-pause")[0];
|
||||
let animationButton = findWithId(parent, "spine-player-button-animation")[0];
|
||||
let skinButton = findWithId(parent, "spine-player-button-skin")[0];
|
||||
let settingsButton = findWithId(parent, "spine-player-button-settings")[0];
|
||||
let fullscreenButton = findWithId(parent, "spine-player-button-fullscreen")[0];
|
||||
|
||||
|
||||
// Setup the scene renderer and OpenGL context
|
||||
var webglConfig = { alpha: config.alpha };
|
||||
this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
|
||||
|
||||
// Setup the scene renderer and loading screen
|
||||
this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
|
||||
this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer);
|
||||
|
||||
// Load the assets
|
||||
this.assetManager = new spine.webgl.AssetManager(this.context);
|
||||
this.assetManager.loadText(config.jsonUrl);
|
||||
this.assetManager.loadTextureAtlas(config.atlasUrl);
|
||||
|
||||
// Setup rendering loop
|
||||
requestAnimationFrame(() => this.drawFrame());
|
||||
}
|
||||
|
||||
drawFrame () {
|
||||
requestAnimationFrame(() => this.drawFrame());
|
||||
let ctx = this.context;
|
||||
let gl = ctx.gl;
|
||||
|
||||
// Clear the viewport
|
||||
let bg = new Color().setFromString(this.config.backgroundColor);
|
||||
gl.clearColor(bg.r, bg.g, bg.b, bg.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// Display loading screen
|
||||
this.loadingScreen.draw(this.assetManager.isLoadingComplete());
|
||||
|
||||
// Have we finished loading the asset? Then set things up
|
||||
if (this.assetManager.isLoadingComplete() && this.skeleton == null) this.loadSkeleton();
|
||||
|
||||
// Resize the canvas
|
||||
this.sceneRenderer.resize(webgl.ResizeMode.Expand);
|
||||
|
||||
// Update and draw the skeleton
|
||||
if (this.loaded) {
|
||||
this.skeleton.x = this.config.x;
|
||||
this.skeleton.y = this.config.y;
|
||||
this.skeleton.scaleX = this.skeleton.scaleY = this.config.scale;
|
||||
this.skeleton.updateWorldTransform();
|
||||
|
||||
this.sceneRenderer.camera.position.x = 0;
|
||||
this.sceneRenderer.camera.position.y = 0;
|
||||
this.sceneRenderer.begin();
|
||||
this.sceneRenderer.line(0, 0, 200, 0, Color.RED);
|
||||
this.sceneRenderer.line(0, 0, 0, 200, Color.GREEN);
|
||||
this.sceneRenderer.drawSkeleton(this.skeleton, this.config.premultipliedAlpha);
|
||||
this.sceneRenderer.end();
|
||||
}
|
||||
}
|
||||
|
||||
loadSkeleton () {
|
||||
if (this.loaded) return;
|
||||
let atlas = this.assetManager.get(this.config.atlasUrl);
|
||||
|
||||
let jsonText = this.assetManager.get(this.config.jsonUrl);
|
||||
let json = new SkeletonJson(new AtlasAttachmentLoader(atlas));
|
||||
let skeletonData = json.readSkeletonData(jsonText);
|
||||
this.skeleton = new Skeleton(skeletonData);
|
||||
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
private resize () {
|
||||
let canvas = this.canvas;
|
||||
let w = canvas.clientWidth;
|
||||
let h = canvas.clientHeight;
|
||||
|
||||
var devicePixelRatio = window.devicePixelRatio || 1;
|
||||
if (canvas.width != Math.floor(w * devicePixelRatio) || canvas.height != Math.floor(h * devicePixelRatio)) {
|
||||
canvas.width = Math.floor(w * devicePixelRatio);
|
||||
canvas.height = Math.floor(h * devicePixelRatio);
|
||||
}
|
||||
this.context.gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
this.sceneRenderer.camera.setViewport(canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
|
||||
function findWithId(dom: HTMLElement, id: string): HTMLElement[] {
|
||||
let found = new Array<HTMLElement>()
|
||||
let findRecursive = (dom: HTMLElement, id: string, found: HTMLElement[]) => {
|
||||
for(var i = 0; i < dom.children.length; i++) {
|
||||
let child = dom.children[i] as HTMLElement;
|
||||
if (child.id === id) found.push(child);
|
||||
findRecursive(child, id, found);
|
||||
}
|
||||
};
|
||||
findRecursive(dom, id, found);
|
||||
return found;
|
||||
}
|
||||
|
||||
function findWithClass(dom: HTMLElement, className: string): HTMLElement[] {
|
||||
let found = new Array<HTMLElement>()
|
||||
let findRecursive = (dom: HTMLElement, className: string, found: HTMLElement[]) => {
|
||||
for(var i = 0; i < dom.children.length; i++) {
|
||||
let child = dom.children[i] as HTMLElement;
|
||||
if (child.classList.contains(className)) found.push(child);
|
||||
findRecursive(child, className, found);
|
||||
}
|
||||
};
|
||||
findRecursive(dom, className, found);
|
||||
return found;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user