mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 01:36:02 +08:00
Removed pma setting from examples.
This commit is contained in:
parent
e222db427b
commit
79277bfe37
@ -93,7 +93,7 @@ class BasicExample extends Phaser.Scene {
|
|||||||
|
|
||||||
async preload() {
|
async preload() {
|
||||||
// manually add the text atlas to the game cache
|
// manually add the text atlas to the game cache
|
||||||
this.game.cache.text.add(this.atlasKey, { data: atlasString, premultipliedAlpha: true });
|
this.game.cache.text.add(this.atlasKey, atlasString);
|
||||||
|
|
||||||
// manually add the json skeleton to the game cache
|
// manually add the json skeleton to the game cache
|
||||||
this.game.cache.json.add("spineboy-data", skeletonJson);
|
this.game.cache.json.add("spineboy-data", skeletonJson);
|
||||||
|
|||||||
@ -48,7 +48,7 @@ declare global {
|
|||||||
export interface LoaderPlugin {
|
export interface LoaderPlugin {
|
||||||
spineJson (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
spineJson (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
||||||
spineBinary (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
spineBinary (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
||||||
spineAtlas (key: string, url: string, premultipliedAlpha?: boolean, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
spineAtlas (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -93,7 +93,7 @@ class BasicExample extends Phaser.Scene {
|
|||||||
|
|
||||||
async preload() {
|
async preload() {
|
||||||
// manually add the text atlas to the game cache
|
// manually add the text atlas to the game cache
|
||||||
this.game.cache.text.add(this.atlasKey, { data: atlasString, premultipliedAlpha: true });
|
this.game.cache.text.add(this.atlasKey, atlasString);
|
||||||
|
|
||||||
// manually add the json skeleton to the game cache
|
// manually add the json skeleton to the game cache
|
||||||
this.game.cache.json.add("spineboy-data", skeletonJson);
|
this.game.cache.json.add("spineboy-data", skeletonJson);
|
||||||
|
|||||||
@ -48,7 +48,7 @@ declare global {
|
|||||||
export interface LoaderPlugin {
|
export interface LoaderPlugin {
|
||||||
spineJson (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
spineJson (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
||||||
spineBinary (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
spineBinary (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
||||||
spineAtlas (key: string, url: string, premultipliedAlpha?: boolean, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
spineAtlas (key: string, url: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject): LoaderPlugin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -671,7 +671,6 @@ export class Spine extends Container {
|
|||||||
const skeletonColor = skeleton.color;
|
const skeletonColor = skeleton.color;
|
||||||
const slotColor = pose.color;
|
const slotColor = pose.color;
|
||||||
const alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
|
const alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
|
||||||
// cannot premultiply the colors because the default mesh renderer already does that
|
|
||||||
this.lightColor.set(
|
this.lightColor.set(
|
||||||
skeletonColor.r * slotColor.r * attachmentColor.r,
|
skeletonColor.r * slotColor.r * attachmentColor.r,
|
||||||
skeletonColor.g * slotColor.g * attachmentColor.g,
|
skeletonColor.g * slotColor.g * attachmentColor.g,
|
||||||
|
|||||||
@ -27,7 +27,6 @@
|
|||||||
skeleton: "/assets/spineboy-pro.skel",
|
skeleton: "/assets/spineboy-pro.skel",
|
||||||
atlas: "/assets/spineboy-pma.atlas",
|
atlas: "/assets/spineboy-pma.atlas",
|
||||||
animation: "run",
|
animation: "run",
|
||||||
premultipliedAlpha: true,
|
|
||||||
backgroundColor: "#cccccc",
|
backgroundColor: "#cccccc",
|
||||||
viewport: {
|
viewport: {
|
||||||
debugRender: true,
|
debugRender: true,
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
<script>
|
<script>
|
||||||
var code =
|
var code =
|
||||||
'<script src="https://unpkg.com/@esotericsoftware/spine-player@4.3.*/dist/iife/spine-player.js"></' +
|
'<script src="https://unpkg.com/@esotericsoftware/spine-player@4.3.*/dist/iife/spine-player.js"></' +
|
||||||
'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.3.*/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.3/spineboy/export/spineboy-pro.json",\n atlas: "http://esotericsoftware.com/files/examples/4.3/spineboy/export/spineboy.atlas",\n premultipliedAlpha: false\n});\n</' +
|
'script>\n<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.3.*/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.3/spineboy/export/spineboy-pro.json",\n atlas: "http://esotericsoftware.com/files/examples/4.3/spineboy/export/spineboy.atlas"\n});\n</' +
|
||||||
"script>".trim();
|
"script>".trim();
|
||||||
spine.SpinePlayerEditor.DEFAULT_CODE = code;
|
spine.SpinePlayerEditor.DEFAULT_CODE = code;
|
||||||
var player = new spine.SpinePlayerEditor(
|
var player = new spine.SpinePlayerEditor(
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -27,7 +27,6 @@
|
|||||||
skeleton: "/assets/spineboy-pro.skel",
|
skeleton: "/assets/spineboy-pro.skel",
|
||||||
atlas: "/assets/spineboy-pma.atlas",
|
atlas: "/assets/spineboy-pma.atlas",
|
||||||
animation: "run",
|
animation: "run",
|
||||||
premultipliedAlpha: true,
|
|
||||||
backgroundColor: "#cccccc",
|
backgroundColor: "#cccccc",
|
||||||
viewport: {
|
viewport: {
|
||||||
debugRender: true,
|
debugRender: true,
|
||||||
@ -46,7 +45,6 @@
|
|||||||
atlas: "/assets/raptor-pma.atlas",
|
atlas: "/assets/raptor-pma.atlas",
|
||||||
animation: "walk",
|
animation: "walk",
|
||||||
showControls: false,
|
showControls: false,
|
||||||
premultipliedAlpha: true,
|
|
||||||
backgroundColor: "#00000000",
|
backgroundColor: "#00000000",
|
||||||
alpha: true,
|
alpha: true,
|
||||||
preserveDrawingBuffer: true,
|
preserveDrawingBuffer: true,
|
||||||
|
|||||||
@ -44,10 +44,9 @@
|
|||||||
let controls;
|
let controls;
|
||||||
let lastFrameTime = Date.now() / 1000;
|
let lastFrameTime = Date.now() / 1000;
|
||||||
|
|
||||||
let pma = true;
|
|
||||||
let baseUrl = "/assets/";
|
let baseUrl = "/assets/";
|
||||||
let skeletonFile = "celestial-circus-pro.json";
|
let skeletonFile = "celestial-circus-pro.json";
|
||||||
let atlasFile = `celestial-circus${pma ? "-pma" : ""}.atlas`;
|
let atlasFile = `celestial-circus-pma.atlas`;
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
// create the THREE.JS camera, scene and renderer (WebGL)
|
// create the THREE.JS camera, scene and renderer (WebGL)
|
||||||
@ -64,7 +63,7 @@
|
|||||||
controls = new OrbitControls(camera, renderer.domElement);
|
controls = new OrbitControls(camera, renderer.domElement);
|
||||||
|
|
||||||
// load the assets required to display the Raptor model
|
// load the assets required to display the Raptor model
|
||||||
assetManager = new spine.AssetManager(baseUrl, undefined, pma);
|
assetManager = new spine.AssetManager(baseUrl);
|
||||||
assetManager.loadText(skeletonFile);
|
assetManager.loadText(skeletonFile);
|
||||||
assetManager.loadTextureAtlas(atlasFile);
|
assetManager.loadTextureAtlas(atlasFile);
|
||||||
|
|
||||||
|
|||||||
@ -45,8 +45,6 @@
|
|||||||
let controls;
|
let controls;
|
||||||
let lastFrameTime = Date.now() / 1000;
|
let lastFrameTime = Date.now() / 1000;
|
||||||
|
|
||||||
let pma = false;
|
|
||||||
|
|
||||||
let baseUrl = "/assets/";
|
let baseUrl = "/assets/";
|
||||||
let skeletonFile = "raptor-pro.json";
|
let skeletonFile = "raptor-pro.json";
|
||||||
let atlasFile = "raptor.atlas";
|
let atlasFile = "raptor.atlas";
|
||||||
@ -117,7 +115,7 @@
|
|||||||
scene.add(plane)
|
scene.add(plane)
|
||||||
|
|
||||||
// load the assets required to display the Raptor model
|
// load the assets required to display the Raptor model
|
||||||
assetManager = new spine.AssetManager(baseUrl, undefined, pma);
|
assetManager = new spine.AssetManager(baseUrl);
|
||||||
assetManager.loadText(skeletonFile);
|
assetManager.loadText(skeletonFile);
|
||||||
assetManager.loadTextureAtlas(atlasFile);
|
assetManager.loadTextureAtlas(atlasFile);
|
||||||
|
|
||||||
|
|||||||
@ -132,7 +132,7 @@ var additiveBlendingDemo = function (canvas, bgColor) {
|
|||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
|
|
||||||
if (isMobileDevice()) {
|
if (isMobileDevice()) {
|
||||||
gl.lineWidth(2);
|
gl.lineWidth(2);
|
||||||
|
|||||||
@ -99,8 +99,8 @@ var clippingDemo = function (canvas, bgColor) {
|
|||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
renderer.drawSkeletonDebug(skeleton, ["root"]);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -127,8 +127,8 @@ var hoverboardDemo = function (canvas, bgColor) {
|
|||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
renderer.drawSkeletonDebug(skeleton, ["root"]);
|
||||||
gl.lineWidth(2);
|
gl.lineWidth(2);
|
||||||
for (var i = 0; i < controlBones.length; i++) {
|
for (var i = 0; i < controlBones.length; i++) {
|
||||||
var bone = skeleton.findBone(controlBones[i]);
|
var bone = skeleton.findBone(controlBones[i]);
|
||||||
|
|||||||
@ -146,7 +146,7 @@ var imageChangesDemo = function (canvas, bgColor) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
|
|
||||||
var y = offsetY;
|
var y = offsetY;
|
||||||
var slotsWidth = 0, slotsHeight = 0;
|
var slotsWidth = 0, slotsHeight = 0;
|
||||||
|
|||||||
@ -137,7 +137,7 @@ var meshesDemo = function (canvas, bgColor) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeletonDebug(skeleton);
|
renderer.drawSkeletonDebug(skeleton);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -188,7 +188,7 @@ var skinsDemo = function (canvas, bgColor) {
|
|||||||
skeleton.updateWorldTransform(spine.Physics.update);
|
skeleton.updateWorldTransform(spine.Physics.update);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
var texture = assetManager.get("heroes.png");
|
var texture = assetManager.get("heroes.png");
|
||||||
var width = bounds.x * 1.25;
|
var width = bounds.x * 1.25;
|
||||||
var scale = width / texture.getImage().width;
|
var scale = width / texture.getImage().width;
|
||||||
|
|||||||
@ -129,8 +129,8 @@ var spritesheetsDemo = function (canvas, bgColor) {
|
|||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
var frame = frames[currFrame];
|
var frame = frames[currFrame];
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeleton(skeletonSeq, true);
|
renderer.drawSkeleton(skeletonSeq);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -136,8 +136,8 @@ var stretchymanDemo = function (canvas, bgColor) {
|
|||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
|
renderer.drawSkeletonDebug(skeleton, ["root"]);
|
||||||
gl.lineWidth(2);
|
gl.lineWidth(2);
|
||||||
for (var i = 0; i < controlBones.length; i++) {
|
for (var i = 0; i < controlBones.length; i++) {
|
||||||
var bone = skeleton.findBone(controlBones[i]);
|
var bone = skeleton.findBone(controlBones[i]);
|
||||||
|
|||||||
@ -100,8 +100,8 @@ var tankDemo = function (canvas, bgColor) {
|
|||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeletonDebug(skeleton, true);
|
renderer.drawSkeletonDebug(skeleton);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -124,8 +124,8 @@ var transformsDemo = function (canvas, bgColor) {
|
|||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
|
renderer.drawSkeletonDebug(skeleton, ["root", "rotate-handle"]);
|
||||||
gl.lineWidth(2);
|
gl.lineWidth(2);
|
||||||
for (var i = 0; i < controlBones.length; i++) {
|
for (var i = 0; i < controlBones.length; i++) {
|
||||||
var bone = skeleton.findBone(controlBones[i]);
|
var bone = skeleton.findBone(controlBones[i]);
|
||||||
|
|||||||
@ -111,14 +111,14 @@ var transitionsDemo = function (canvas, loadingComplete, bgColor) {
|
|||||||
skeleton.updateWorldTransform(spine.Physics.update);
|
skeleton.updateWorldTransform(spine.Physics.update);
|
||||||
skeleton.x = -200;
|
skeleton.x = -200;
|
||||||
skeleton.y = -100;
|
skeleton.y = -100;
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
|
|
||||||
stateNoMix.update(delta);
|
stateNoMix.update(delta);
|
||||||
stateNoMix.apply(skeletonNoMix);
|
stateNoMix.apply(skeletonNoMix);
|
||||||
skeletonNoMix.updateWorldTransform(spine.Physics.update);
|
skeletonNoMix.updateWorldTransform(spine.Physics.update);
|
||||||
skeletonNoMix.x = size.x + 45;
|
skeletonNoMix.x = size.x + 45;
|
||||||
skeletonNoMix.y = -100;
|
skeletonNoMix.y = -100;
|
||||||
renderer.drawSkeleton(skeletonNoMix, true);
|
renderer.drawSkeleton(skeletonNoMix);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -127,7 +127,7 @@ var vineDemo = function (canvas, bgColor) {
|
|||||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(skeleton, true);
|
renderer.drawSkeleton(skeleton);
|
||||||
renderer.drawSkeletonDebug(skeleton);
|
renderer.drawSkeletonDebug(skeleton);
|
||||||
gl.lineWidth(2);
|
gl.lineWidth(2);
|
||||||
for (var i = 0; i < controlBones.length; i++) {
|
for (var i = 0; i < controlBones.length; i++) {
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
// Begin rendering.
|
// Begin rendering.
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
// Draw the skeleton
|
// Draw the skeleton
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
// Complete rendering.
|
// Complete rendering.
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -71,7 +71,7 @@
|
|||||||
// Begin rendering.
|
// Begin rendering.
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
// Draw the skeleton
|
// Draw the skeleton
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
// Complete rendering.
|
// Complete rendering.
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -109,7 +109,7 @@
|
|||||||
canvas.clear(0.2, 0.2, 0.2, 1);
|
canvas.clear(0.2, 0.2, 0.2, 1);
|
||||||
|
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
|
|
||||||
// Draw a circle with a radius of 20 pixels around each draggable bone
|
// Draw a circle with a radius of 20 pixels around each draggable bone
|
||||||
let boneColor = new spine.Color(1, 0, 0, 0.5);
|
let boneColor = new spine.Color(1, 0, 0, 0.5);
|
||||||
|
|||||||
@ -87,7 +87,7 @@
|
|||||||
// Begin rendering.
|
// Begin rendering.
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
// Draw the skeleton
|
// Draw the skeleton
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
// Complete rendering.
|
// Complete rendering.
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,8 +24,6 @@
|
|||||||
<select id="animations"></select>
|
<select id="animations"></select>
|
||||||
<label style="margin-right: 0.5em">Skins</label>
|
<label style="margin-right: 0.5em">Skins</label>
|
||||||
<select id="skins"></select>
|
<select id="skins"></select>
|
||||||
<label>PMA</label>
|
|
||||||
<input type="checkbox" id="pma" checked />
|
|
||||||
</div>
|
</div>
|
||||||
<script src="drag-and-drop.js"></script>
|
<script src="drag-and-drop.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -3,7 +3,6 @@ class App {
|
|||||||
this.skeleton = null;
|
this.skeleton = null;
|
||||||
this.animationState = null;
|
this.animationState = null;
|
||||||
this.canvas = null;
|
this.canvas = null;
|
||||||
this.pma = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
loadAssets(canvas) {
|
loadAssets(canvas) {
|
||||||
@ -24,12 +23,6 @@ class App {
|
|||||||
this.animationState.setAnimation(0, animationSelectBox.value, true);
|
this.animationState.setAnimation(0, animationSelectBox.value, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Setup listener for the PMA checkbox
|
|
||||||
let pmaCheckbox = document.body.querySelector("#pma");
|
|
||||||
pmaCheckbox.onchange = () => {
|
|
||||||
this.pma = pmaCheckbox.checked;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setup the drag and drop listener
|
// Setup the drag and drop listener
|
||||||
new FileDragAndDrop(canvas.htmlCanvas, (files) => this.onDrop(files))
|
new FileDragAndDrop(canvas.htmlCanvas, (files) => this.onDrop(files))
|
||||||
|
|
||||||
@ -163,7 +156,7 @@ class App {
|
|||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.line(-10000, 0, 10000, 0, spine.Color.RED);
|
renderer.line(-10000, 0, 10000, 0, spine.Color.RED);
|
||||||
renderer.line(0, -10000, 0, 10000, spine.Color.GREEN);
|
renderer.line(0, -10000, 0, 10000, spine.Color.GREEN);
|
||||||
renderer.drawSkeleton(this.skeleton, this.pma);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -173,7 +173,7 @@
|
|||||||
// Clear the canvas and render the skeleton
|
// Clear the canvas and render the skeleton
|
||||||
canvas.clear(0.5, 0.5, 0.5, 1);
|
canvas.clear(0.5, 0.5, 0.5, 1);
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
|
|
||||||
// Get the image data and convert it to an img element
|
// Get the image data and convert it to an img element
|
||||||
@ -236,7 +236,7 @@
|
|||||||
|
|
||||||
canvas.clear(0.2, 0.2, 0.2, 1);
|
canvas.clear(0.2, 0.2, 0.2, 1);
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -117,36 +117,36 @@
|
|||||||
if (assetManager.isLoadingComplete()) {
|
if (assetManager.isLoadingComplete()) {
|
||||||
skeletons = {
|
skeletons = {
|
||||||
coin: {
|
coin: {
|
||||||
Binary: loadSkeleton("coin-pro.skel", "animation", true),
|
Binary: loadSkeleton("coin-pro.skel", "animation"),
|
||||||
JSON: loadSkeleton("coin-pro.json", "animation", true)
|
JSON: loadSkeleton("coin-pro.json", "animation")
|
||||||
},
|
},
|
||||||
goblins: {
|
goblins: {
|
||||||
Binary: loadSkeleton("goblins-pro.skel", "walk", true, "goblin"),
|
Binary: loadSkeleton("goblins-pro.skel", "walk", "goblin"),
|
||||||
JSON: loadSkeleton("goblins-pro.json", "walk", true, "goblin")
|
JSON: loadSkeleton("goblins-pro.json", "walk", "goblin")
|
||||||
},
|
},
|
||||||
"mix-and-match-pro": {
|
"mix-and-match-pro": {
|
||||||
Binary: loadSkeleton("mix-and-match-pro.skel", "dance", true, "full-skins/girl-blue-cape"),
|
Binary: loadSkeleton("mix-and-match-pro.skel", "dance", "full-skins/girl-blue-cape"),
|
||||||
JSON: loadSkeleton("mix-and-match-pro.json", "dance", true, "full-skins/girl-blue-cape")
|
JSON: loadSkeleton("mix-and-match-pro.json", "dance", "full-skins/girl-blue-cape")
|
||||||
},
|
},
|
||||||
raptor: {
|
raptor: {
|
||||||
Binary: loadSkeleton("raptor-pro.skel", "walk", true),
|
Binary: loadSkeleton("raptor-pro.skel", "walk"),
|
||||||
JSON: loadSkeleton("raptor-pro.json", "walk", true)
|
JSON: loadSkeleton("raptor-pro.json", "walk")
|
||||||
},
|
},
|
||||||
spineboy: {
|
spineboy: {
|
||||||
Binary: loadSkeleton("spineboy-pro.skel", "run", true),
|
Binary: loadSkeleton("spineboy-pro.skel", "run"),
|
||||||
JSON: loadSkeleton("spineboy-pro.json", "run", true)
|
JSON: loadSkeleton("spineboy-pro.json", "run")
|
||||||
},
|
},
|
||||||
stretchyman: {
|
stretchyman: {
|
||||||
Binary: loadSkeleton("stretchyman-pro.skel", "sneak", true),
|
Binary: loadSkeleton("stretchyman-pro.skel", "sneak"),
|
||||||
JSON: loadSkeleton("stretchyman-pro.json", "sneak", true)
|
JSON: loadSkeleton("stretchyman-pro.json", "sneak")
|
||||||
},
|
},
|
||||||
tank: {
|
tank: {
|
||||||
Binary: loadSkeleton("tank-pro.skel", "drive", true),
|
Binary: loadSkeleton("tank-pro.skel", "drive"),
|
||||||
JSON: loadSkeleton("tank-pro.json", "drive", true)
|
JSON: loadSkeleton("tank-pro.json", "drive")
|
||||||
},
|
},
|
||||||
vine: {
|
vine: {
|
||||||
Binary: loadSkeleton("vine-pro.skel", "grow", true),
|
Binary: loadSkeleton("vine-pro.skel", "grow"),
|
||||||
JSON: loadSkeleton("vine-pro.json", "grow", true)
|
JSON: loadSkeleton("vine-pro.json", "grow")
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
setupUI();
|
setupUI();
|
||||||
@ -156,11 +156,11 @@
|
|||||||
requestAnimationFrame(load);
|
requestAnimationFrame(load);
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadSkeleton(name, initialAnimation, premultipliedAlpha, skin) {
|
function loadSkeleton(name, initialAnimation, skin) {
|
||||||
if (skin === undefined) skin = "default";
|
if (skin === undefined) skin = "default";
|
||||||
|
|
||||||
// Load the texture atlas using name.atlas from the AssetManager.
|
// Load the texture atlas using name.atlas from the AssetManager.
|
||||||
let atlas = assetManager.require(name.replace(/(?:-ess|-pro)\.(skel|json)/, "") + (premultipliedAlpha ? "-pma" : "") + ".atlas");
|
let atlas = assetManager.require(name.replace(/(?:-ess|-pro)\.(skel|json)/, "") + "-pma.atlas");
|
||||||
|
|
||||||
// Create an AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
// Create an AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
|
||||||
let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
|
||||||
@ -219,7 +219,7 @@
|
|||||||
})
|
})
|
||||||
|
|
||||||
// Pack everything up and return to caller.
|
// Pack everything up and return to caller.
|
||||||
return { skeleton: skeleton, state: animationState, bounds: bounds, premultipliedAlpha: premultipliedAlpha };
|
return { skeleton: skeleton, state: animationState, bounds: bounds };
|
||||||
}
|
}
|
||||||
|
|
||||||
function calculateSetupPoseBounds(skeleton) {
|
function calculateSetupPoseBounds(skeleton) {
|
||||||
@ -318,7 +318,6 @@
|
|||||||
let skeleton = skeletons[activeSkeleton][format].skeleton;
|
let skeleton = skeletons[activeSkeleton][format].skeleton;
|
||||||
let state = skeletons[activeSkeleton][format].state;
|
let state = skeletons[activeSkeleton][format].state;
|
||||||
let bounds = skeletons[activeSkeleton][format].bounds;
|
let bounds = skeletons[activeSkeleton][format].bounds;
|
||||||
let premultipliedAlpha = skeletons[activeSkeleton][format].premultipliedAlpha;
|
|
||||||
state.update(delta);
|
state.update(delta);
|
||||||
state.apply(skeleton);
|
state.apply(skeleton);
|
||||||
skeleton.updateWorldTransform(spine.Physics.update);
|
skeleton.updateWorldTransform(spine.Physics.update);
|
||||||
@ -331,7 +330,6 @@
|
|||||||
// 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);
|
||||||
|
|
||||||
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
|
|
||||||
skeletonRenderer.draw(batcher, skeleton);
|
skeletonRenderer.draw(batcher, skeleton);
|
||||||
batcher.end();
|
batcher.end();
|
||||||
|
|
||||||
@ -342,7 +340,6 @@
|
|||||||
if (debug) {
|
if (debug) {
|
||||||
debugShader.bind();
|
debugShader.bind();
|
||||||
debugShader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
|
debugShader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
|
||||||
debugRenderer.premultipliedAlpha = premultipliedAlpha;
|
|
||||||
shapes.begin(debugShader);
|
shapes.begin(debugShader);
|
||||||
debugRenderer.draw(shapes, skeleton);
|
debugRenderer.draw(shapes, skeleton);
|
||||||
shapes.end();
|
shapes.end();
|
||||||
|
|||||||
@ -37,7 +37,7 @@
|
|||||||
|
|
||||||
// Create the skeleton
|
// Create the skeleton
|
||||||
let skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
let skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||||
skeletonBinary.scale = 0.5;
|
skeletonBinary.scale = 1;
|
||||||
let skeletonData = skeletonBinary.readSkeletonData(assetManager.require("mix-and-match-pro.skel"));
|
let skeletonData = skeletonBinary.readSkeletonData(assetManager.require("mix-and-match-pro.skel"));
|
||||||
this.skeleton = new spine.Skeleton(skeletonData);
|
this.skeleton = new spine.Skeleton(skeletonData);
|
||||||
|
|
||||||
@ -74,7 +74,7 @@
|
|||||||
renderer.resize(spine.ResizeMode.Expand);
|
renderer.resize(spine.ResizeMode.Expand);
|
||||||
canvas.clear(0.2, 0.2, 0.2, 1);
|
canvas.clear(0.2, 0.2, 0.2, 1);
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -41,7 +41,7 @@
|
|||||||
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||||
|
|
||||||
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
||||||
skeletonBinary.scale = 0.2;
|
skeletonBinary.scale = 0.4;
|
||||||
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("/assets/sack-pro.skel"));
|
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("/assets/sack-pro.skel"));
|
||||||
this.skeleton = new spine.Skeleton(skeletonData);
|
this.skeleton = new spine.Skeleton(skeletonData);
|
||||||
|
|
||||||
@ -72,7 +72,7 @@
|
|||||||
// Begin rendering.
|
// Begin rendering.
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
// Draw the skeleton
|
// Draw the skeleton
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
// Complete rendering.
|
// Complete rendering.
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -124,7 +124,7 @@
|
|||||||
// Begin rendering.
|
// Begin rendering.
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
// Draw the skeleton
|
// Draw the skeleton
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
// Complete rendering.
|
// Complete rendering.
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -42,7 +42,7 @@
|
|||||||
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
||||||
|
|
||||||
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
// Set the scale to apply during parsing, parse the file, and create a new skeleton.
|
||||||
skeletonBinary.scale = 0.5;
|
skeletonBinary.scale = 0.4;
|
||||||
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("/assets/snowglobe-pro.skel"));
|
var skeletonData = skeletonBinary.readSkeletonData(assetManager.require("/assets/snowglobe-pro.skel"));
|
||||||
this.skeleton = new spine.Skeleton(skeletonData);
|
this.skeleton = new spine.Skeleton(skeletonData);
|
||||||
|
|
||||||
@ -74,7 +74,7 @@
|
|||||||
// Begin rendering.
|
// Begin rendering.
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
// Draw the skeleton
|
// Draw the skeleton
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
// Complete rendering.
|
// Complete rendering.
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -73,7 +73,7 @@
|
|||||||
// Begin rendering.
|
// Begin rendering.
|
||||||
renderer.begin();
|
renderer.begin();
|
||||||
// Draw the skeleton
|
// Draw the skeleton
|
||||||
renderer.drawSkeleton(this.skeleton, true);
|
renderer.drawSkeleton(this.skeleton);
|
||||||
// Complete rendering.
|
// Complete rendering.
|
||||||
renderer.end();
|
renderer.end();
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user