Removed pma setting from examples.

This commit is contained in:
Davide Tantillo 2025-12-11 15:35:31 +01:00
parent e222db427b
commit 79277bfe37
37 changed files with 61 additions and 82 deletions

View File

@ -93,7 +93,7 @@ class BasicExample extends Phaser.Scene {
async preload() {
// 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
this.game.cache.json.add("spineboy-data", skeletonJson);

View File

@ -48,7 +48,7 @@ declare global {
export interface LoaderPlugin {
spineJson (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;
}
}

View File

@ -93,7 +93,7 @@ class BasicExample extends Phaser.Scene {
async preload() {
// 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
this.game.cache.json.add("spineboy-data", skeletonJson);

View File

@ -48,7 +48,7 @@ declare global {
export interface LoaderPlugin {
spineJson (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;
}
}

View File

@ -671,7 +671,6 @@ export class Spine extends Container {
const skeletonColor = skeleton.color;
const slotColor = pose.color;
const alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
// cannot premultiply the colors because the default mesh renderer already does that
this.lightColor.set(
skeletonColor.r * slotColor.r * attachmentColor.r,
skeletonColor.g * slotColor.g * attachmentColor.g,

View File

@ -27,7 +27,6 @@
skeleton: "/assets/spineboy-pro.skel",
atlas: "/assets/spineboy-pma.atlas",
animation: "run",
premultipliedAlpha: true,
backgroundColor: "#cccccc",
viewport: {
debugRender: true,

View File

@ -15,7 +15,7 @@
<script>
var code =
'<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();
spine.SpinePlayerEditor.DEFAULT_CODE = code;
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

View File

@ -27,7 +27,6 @@
skeleton: "/assets/spineboy-pro.skel",
atlas: "/assets/spineboy-pma.atlas",
animation: "run",
premultipliedAlpha: true,
backgroundColor: "#cccccc",
viewport: {
debugRender: true,
@ -46,7 +45,6 @@
atlas: "/assets/raptor-pma.atlas",
animation: "walk",
showControls: false,
premultipliedAlpha: true,
backgroundColor: "#00000000",
alpha: true,
preserveDrawingBuffer: true,

View File

@ -44,10 +44,9 @@
let controls;
let lastFrameTime = Date.now() / 1000;
let pma = true;
let baseUrl = "/assets/";
let skeletonFile = "celestial-circus-pro.json";
let atlasFile = `celestial-circus${pma ? "-pma" : ""}.atlas`;
let atlasFile = `celestial-circus-pma.atlas`;
function init() {
// create the THREE.JS camera, scene and renderer (WebGL)
@ -64,7 +63,7 @@
controls = new OrbitControls(camera, renderer.domElement);
// 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.loadTextureAtlas(atlasFile);

View File

@ -45,8 +45,6 @@
let controls;
let lastFrameTime = Date.now() / 1000;
let pma = false;
let baseUrl = "/assets/";
let skeletonFile = "raptor-pro.json";
let atlasFile = "raptor.atlas";
@ -117,7 +115,7 @@
scene.add(plane)
// 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.loadTextureAtlas(atlasFile);

View File

@ -132,7 +132,7 @@ var additiveBlendingDemo = function (canvas, bgColor) {
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeleton);
if (isMobileDevice()) {
gl.lineWidth(2);

View File

@ -99,8 +99,8 @@ var clippingDemo = function (canvas, bgColor) {
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton, ["root"]);
renderer.end();
}

View File

@ -127,8 +127,8 @@ var hoverboardDemo = function (canvas, bgColor) {
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton, ["root"]);
gl.lineWidth(2);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);

View File

@ -146,7 +146,7 @@ var imageChangesDemo = function (canvas, bgColor) {
}
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeleton);
var y = offsetY;
var slotsWidth = 0, slotsHeight = 0;

View File

@ -137,7 +137,7 @@ var meshesDemo = function (canvas, bgColor) {
}
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton);
renderer.end();
}

View File

@ -188,7 +188,7 @@ var skinsDemo = function (canvas, bgColor) {
skeleton.updateWorldTransform(spine.Physics.update);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeleton);
var texture = assetManager.get("heroes.png");
var width = bounds.x * 1.25;
var scale = width / texture.getImage().width;

View File

@ -129,8 +129,8 @@ var spritesheetsDemo = function (canvas, bgColor) {
renderer.begin();
var frame = frames[currFrame];
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeletonSeq, true);
renderer.drawSkeleton(skeleton);
renderer.drawSkeleton(skeletonSeq);
renderer.end();
}

View File

@ -136,8 +136,8 @@ var stretchymanDemo = function (canvas, bgColor) {
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root"]);
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton, ["root"]);
gl.lineWidth(2);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);

View File

@ -100,8 +100,8 @@ var tankDemo = function (canvas, bgColor) {
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, true);
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton);
renderer.end();
}

View File

@ -124,8 +124,8 @@ var transformsDemo = function (canvas, bgColor) {
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeletonDebug(skeleton, false, ["root", "rotate-handle"]);
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton, ["root", "rotate-handle"]);
gl.lineWidth(2);
for (var i = 0; i < controlBones.length; i++) {
var bone = skeleton.findBone(controlBones[i]);

View File

@ -111,14 +111,14 @@ var transitionsDemo = function (canvas, loadingComplete, bgColor) {
skeleton.updateWorldTransform(spine.Physics.update);
skeleton.x = -200;
skeleton.y = -100;
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeleton);
stateNoMix.update(delta);
stateNoMix.apply(skeletonNoMix);
skeletonNoMix.updateWorldTransform(spine.Physics.update);
skeletonNoMix.x = size.x + 45;
skeletonNoMix.y = -100;
renderer.drawSkeleton(skeletonNoMix, true);
renderer.drawSkeleton(skeletonNoMix);
renderer.end();
}

View File

@ -127,7 +127,7 @@ var vineDemo = function (canvas, bgColor) {
gl.clear(gl.COLOR_BUFFER_BIT);
renderer.begin();
renderer.drawSkeleton(skeleton, true);
renderer.drawSkeleton(skeleton);
renderer.drawSkeletonDebug(skeleton);
gl.lineWidth(2);
for (var i = 0; i < controlBones.length; i++) {

View File

@ -71,7 +71,7 @@
// Begin rendering.
renderer.begin();
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Complete rendering.
renderer.end();
}

View File

@ -71,7 +71,7 @@
// Begin rendering.
renderer.begin();
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Complete rendering.
renderer.end();
}

View File

@ -109,7 +109,7 @@
canvas.clear(0.2, 0.2, 0.2, 1);
renderer.begin();
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Draw a circle with a radius of 20 pixels around each draggable bone
let boneColor = new spine.Color(1, 0, 0, 0.5);

View File

@ -87,7 +87,7 @@
// Begin rendering.
renderer.begin();
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Complete rendering.
renderer.end();
}

View File

@ -24,8 +24,6 @@
<select id="animations"></select>
<label style="margin-right: 0.5em">Skins</label>
<select id="skins"></select>
<label>PMA</label>
<input type="checkbox" id="pma" checked />
</div>
<script src="drag-and-drop.js"></script>
</body>

View File

@ -3,7 +3,6 @@ class App {
this.skeleton = null;
this.animationState = null;
this.canvas = null;
this.pma = true;
}
loadAssets(canvas) {
@ -24,12 +23,6 @@ class App {
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
new FileDragAndDrop(canvas.htmlCanvas, (files) => this.onDrop(files))
@ -163,7 +156,7 @@ class App {
renderer.begin();
renderer.line(-10000, 0, 10000, 0, spine.Color.RED);
renderer.line(0, -10000, 0, 10000, spine.Color.GREEN);
renderer.drawSkeleton(this.skeleton, this.pma);
renderer.drawSkeleton(this.skeleton);
renderer.end();
}
}

View File

@ -173,7 +173,7 @@
// Clear the canvas and render the skeleton
canvas.clear(0.5, 0.5, 0.5, 1);
renderer.begin();
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
renderer.end();
// Get the image data and convert it to an img element
@ -236,7 +236,7 @@
canvas.clear(0.2, 0.2, 0.2, 1);
renderer.begin();
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
renderer.end();
}
}

View File

@ -117,36 +117,36 @@
if (assetManager.isLoadingComplete()) {
skeletons = {
coin: {
Binary: loadSkeleton("coin-pro.skel", "animation", true),
JSON: loadSkeleton("coin-pro.json", "animation", true)
Binary: loadSkeleton("coin-pro.skel", "animation"),
JSON: loadSkeleton("coin-pro.json", "animation")
},
goblins: {
Binary: loadSkeleton("goblins-pro.skel", "walk", true, "goblin"),
JSON: loadSkeleton("goblins-pro.json", "walk", true, "goblin")
Binary: loadSkeleton("goblins-pro.skel", "walk", "goblin"),
JSON: loadSkeleton("goblins-pro.json", "walk", "goblin")
},
"mix-and-match-pro": {
Binary: loadSkeleton("mix-and-match-pro.skel", "dance", true, "full-skins/girl-blue-cape"),
JSON: loadSkeleton("mix-and-match-pro.json", "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", "full-skins/girl-blue-cape")
},
raptor: {
Binary: loadSkeleton("raptor-pro.skel", "walk", true),
JSON: loadSkeleton("raptor-pro.json", "walk", true)
Binary: loadSkeleton("raptor-pro.skel", "walk"),
JSON: loadSkeleton("raptor-pro.json", "walk")
},
spineboy: {
Binary: loadSkeleton("spineboy-pro.skel", "run", true),
JSON: loadSkeleton("spineboy-pro.json", "run", true)
Binary: loadSkeleton("spineboy-pro.skel", "run"),
JSON: loadSkeleton("spineboy-pro.json", "run")
},
stretchyman: {
Binary: loadSkeleton("stretchyman-pro.skel", "sneak", true),
JSON: loadSkeleton("stretchyman-pro.json", "sneak", true)
Binary: loadSkeleton("stretchyman-pro.skel", "sneak"),
JSON: loadSkeleton("stretchyman-pro.json", "sneak")
},
tank: {
Binary: loadSkeleton("tank-pro.skel", "drive", true),
JSON: loadSkeleton("tank-pro.json", "drive", true)
Binary: loadSkeleton("tank-pro.skel", "drive"),
JSON: loadSkeleton("tank-pro.json", "drive")
},
vine: {
Binary: loadSkeleton("vine-pro.skel", "grow", true),
JSON: loadSkeleton("vine-pro.json", "grow", true)
Binary: loadSkeleton("vine-pro.skel", "grow"),
JSON: loadSkeleton("vine-pro.json", "grow")
}
};
setupUI();
@ -156,11 +156,11 @@
requestAnimationFrame(load);
}
function loadSkeleton(name, initialAnimation, premultipliedAlpha, skin) {
function loadSkeleton(name, initialAnimation, skin) {
if (skin === undefined) skin = "default";
// 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
let atlasLoader = new spine.AtlasAttachmentLoader(atlas);
@ -219,7 +219,7 @@
})
// 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) {
@ -318,7 +318,6 @@
let skeleton = skeletons[activeSkeleton][format].skeleton;
let state = skeletons[activeSkeleton][format].state;
let bounds = skeletons[activeSkeleton][format].bounds;
let premultipliedAlpha = skeletons[activeSkeleton][format].premultipliedAlpha;
state.update(delta);
state.apply(skeleton);
skeleton.updateWorldTransform(spine.Physics.update);
@ -331,7 +330,6 @@
// Start the batch and tell the SkeletonRenderer to render the active skeleton.
batcher.begin(shader);
skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
skeletonRenderer.draw(batcher, skeleton);
batcher.end();
@ -342,7 +340,6 @@
if (debug) {
debugShader.bind();
debugShader.setUniform4x4f(spine.Shader.MVP_MATRIX, mvp.values);
debugRenderer.premultipliedAlpha = premultipliedAlpha;
shapes.begin(debugShader);
debugRenderer.draw(shapes, skeleton);
shapes.end();

View File

@ -37,7 +37,7 @@
// Create the skeleton
let skeletonBinary = new spine.SkeletonBinary(atlasLoader);
skeletonBinary.scale = 0.5;
skeletonBinary.scale = 1;
let skeletonData = skeletonBinary.readSkeletonData(assetManager.require("mix-and-match-pro.skel"));
this.skeleton = new spine.Skeleton(skeletonData);
@ -74,7 +74,7 @@
renderer.resize(spine.ResizeMode.Expand);
canvas.clear(0.2, 0.2, 0.2, 1);
renderer.begin();
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
renderer.end();
}
}

View File

@ -41,7 +41,7 @@
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
// 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"));
this.skeleton = new spine.Skeleton(skeletonData);
@ -72,7 +72,7 @@
// Begin rendering.
renderer.begin();
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Complete rendering.
renderer.end();
}

View File

@ -124,7 +124,7 @@
// Begin rendering.
renderer.begin();
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Complete rendering.
renderer.end();
}

View File

@ -42,7 +42,7 @@
var skeletonBinary = new spine.SkeletonBinary(atlasLoader);
// 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"));
this.skeleton = new spine.Skeleton(skeletonData);
@ -74,7 +74,7 @@
// Begin rendering.
renderer.begin();
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Complete rendering.
renderer.end();
}

View File

@ -73,7 +73,7 @@
// Begin rendering.
renderer.begin();
// Draw the skeleton
renderer.drawSkeleton(this.skeleton, true);
renderer.drawSkeleton(this.skeleton);
// Complete rendering.
renderer.end();
}