UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-04 14:24:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts] Add support across all runtimes for premultiplying non-PMA textures on upload.

Browse Source
This commit is contained in:
Davide Tantillo 2025-12-12 10:58:13 +01:00
parent 86981a0935
commit 632fb227b6
56 changed files with 296 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
CHANGELOG.md
View File

@ -758,6 +758,8 @@
- Added `Skeleton` properties `windX`, `windY`, `gravityX`, `gravityY` to allow rotating physics force directions
- Added `SequenceTimeline` for sequence animation
- Added `allowMissingRegions` parameter to `AtlasAttachmentLoader` constructor to support skeletons exported with per-skin atlases
- Added `TextureLoader` type with optional `pma?: boolean` parameter to `AssetManagerBase`. `AssetManagerBase` now tracks and passes PMA metadata from atlas pages to texture loaders, allowing runtimes to automatically premultiply textures on upload
- Added `SkeletonRendererCore` class to reduce complexity of runtime-specific render code
- **Breaking changes**
- `Bone` now extends `PosedActive` with separate pose, constrained, and applied states
@ -869,6 +871,12 @@
- **Breaking changes**
- Updated to use new TypeScript/JavaScript runtime
- `GLTexture` constructor now requires `pma: boolean` parameter (automatically read from atlas page metadata)
- Removed `GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL` static property
- `SkeletonRenderer` and `SkeletonDebugRenderer` no longer have `premultipliedAlpha` property - PMA is handled automatically
- `SceneRenderer.drawSkeleton()` and `drawSkeletonDebug()` no longer take `premultipliedAlpha` parameter
- `PolygonBatcher.setBlendMode()` no longer takes `premultipliedAlpha` parameter
- `LoadingScreen` no longer accepts PMA parameters
### Canvas backend
@ -885,11 +893,13 @@
- **Breaking changes**
- Updated to use new TypeScript/JavaScript runtime
- `AssetManager` constructor no longer takes `pma` parameter - PMA is handled automatically
### Player
- **Breaking changes**
- Updated to use new TypeScript/JavaScript runtime
- Removed `premultipliedAlpha` option from `SpinePlayerConfig` - PMA is now handled automatically
### Pixi v7
@ -917,17 +927,22 @@
- **Breaking changes**
- Updated to use new TypeScript/JavaScript runtime
- `SpinePlugin.spineAtlas()` loader no longer takes `premultipliedAlpha` parameter - PMA is handled automatically
- `SpinePlugin.createSkeleton()` no longer takes `premultipliedAlpha` parameter
### Phaser v4
- **Breaking changes**
- Updated to use new TypeScript/JavaScript runtime
- `SpinePlugin.spineAtlas()` loader no longer takes `premultipliedAlpha` parameter - PMA is handled automatically
- `SpinePlugin.createSkeleton()` no longer takes `premultipliedAlpha` parameter
### Web Components
- **Breaking changes**
- Updated to use new TypeScript/JavaScript runtime
- Updated skeleton and overlay component implementations
- Removed `pma` property from `SpineWebComponentSkeleton` - PMA is handled automatically
# 4.2

49
spine-ts/spine-core/src/AssetManagerBase.ts
View File

@ -35,20 +35,19 @@ type AssetData = (Uint8Array | string | Texture | TextureAtlas | object) & Parti
type AssetCallback<T extends AssetData> = (path: string, data: T) => void;
type ErrorCallback = (path: string, message: string) => void;
export type TextureLoader = (image: HTMLImageElement | ImageBitmap, pma?: boolean) => Texture;
export class AssetManagerBase implements Disposable {
private pathPrefix: string = "";
private textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture;
private downloader: Downloader;
private cache: AssetCache;
private errors: StringMap<string> = {};
private toLoad = 0;
private loaded = 0;
private texturePmaInfo: Record<string, boolean> = {};
constructor (textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture, pathPrefix: string = "", downloader = new Downloader(), cache = new AssetCache()) {
this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix;
this.downloader = downloader;
this.cache = cache;
constructor (
private textureLoader: TextureLoader,
private pathPrefix: string = "",
private downloader = new Downloader(),
private cache = new AssetCache()) {
}
private start (path: string): string {
@ -175,6 +174,7 @@ export class AssetManagerBase implements Disposable {
if (this.reuseAssets(path, success, error)) return;
const pma = this.texturePmaInfo[path];
this.cache.assetsLoaded[path] = new Promise<Texture>((resolve, reject) => {
const isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
const isWebWorker = !isBrowser; // && typeof importScripts !== 'undefined';
@ -188,7 +188,7 @@ export class AssetManagerBase implements Disposable {
return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
}).then((bitmap) => {
if (bitmap) {
const texture = this.createTexture(path, bitmap);
const texture = this.createTexture(path, pma, bitmap);
this.success(success, path, texture);
resolve(texture);
};
@ -197,7 +197,7 @@ export class AssetManagerBase implements Disposable {
const image = new Image();
image.crossOrigin = "anonymous";
image.onload = () => {
const texture = this.createTexture(path, image);
const texture = this.createTexture(path, pma, image);
this.success(success, path, texture);
resolve(texture);
};
@ -216,7 +216,7 @@ export class AssetManagerBase implements Disposable {
path: string,
success: AssetCallback<TextureAtlas> = () => { },
error: ErrorCallback = () => { },
fileAlias?: { [keyword: string]: string }
fileAlias?: Record<string, string>
) {
const index = path.lastIndexOf("/");
const parent = index >= 0 ? path.substring(0, index + 1) : "";
@ -227,10 +227,11 @@ export class AssetManagerBase implements Disposable {
this.cache.assetsLoaded[path] = new Promise<TextureAtlas>((resolve, reject) => {
this.downloader.downloadText(path, (atlasText: string): void => {
try {
const atlas = this.createTextureAtlas(path, atlasText);
const atlas = this.createTextureAtlas(atlasText, parent, path, fileAlias);
let toLoad = atlas.pages.length, abort = false;
for (const page of atlas.pages) {
this.loadTexture(!fileAlias ? parent + page.name : fileAlias[page.name],
this.loadTexture(
this.texturePath(parent, page.name, fileAlias),
(imagePath: string, texture: Texture) => {
if (!abort) {
page.setTexture(texture);
@ -268,6 +269,8 @@ export class AssetManagerBase implements Disposable {
success: AssetCallback<TextureAtlas> = () => { },
error: ErrorCallback = () => { },
) {
const index = path.lastIndexOf("/");
const parent = index >= 0 ? path.substring(0, index + 1) : "";
path = this.start(path);
if (this.reuseAssets(path, success, error)) return;
@ -275,7 +278,7 @@ export class AssetManagerBase implements Disposable {
this.cache.assetsLoaded[path] = new Promise<TextureAtlas>((resolve, reject) => {
this.downloader.downloadText(path, (atlasText: string): void => {
try {
const atlas = this.createTextureAtlas(path, atlasText);
const atlas = this.createTextureAtlas(atlasText, parent, path);
this.success(success, path, atlas);
resolve(atlas);
} catch (e) {
@ -291,7 +294,6 @@ export class AssetManagerBase implements Disposable {
});
}
// Promisified versions of load function
async loadBinaryAsync (path: string) {
return new Promise((resolve, reject) => {
this.loadBinary(path,
@ -413,7 +415,7 @@ export class AssetManagerBase implements Disposable {
}
}
private createTextureAtlas (path: string, atlasText: string): TextureAtlas {
private createTextureAtlas (atlasText: string, parentPath: string, path: string, fileAlias?: Record<string, string>): TextureAtlas {
const atlas = new TextureAtlas(atlasText);
atlas.dispose = () => {
if (this.cache.assetsRefCount[path] <= 0) return;
@ -422,17 +424,26 @@ export class AssetManagerBase implements Disposable {
page.texture?.dispose();
}
}
for (const page of atlas.pages) {
const texturePath = this.texturePath(parentPath, page.name, fileAlias);
this.texturePmaInfo[this.pathPrefix + texturePath] = page.pma;
}
return atlas;
}
private createTexture (path: string, image: HTMLImageElement | ImageBitmap): Texture {
const texture = this.textureLoader(image);
private createTexture (path: string, pma: boolean, image: HTMLImageElement | ImageBitmap): Texture {
const texture = this.textureLoader(image, pma);
const textureDispose = texture.dispose.bind(texture);
texture.dispose = () => {
if (this.disposeAssetInternal(path)) textureDispose();
}
return texture;
}
private texturePath (parentPath: string, pageName: string, fileAlias?: Record<string, string>) {
if (!fileAlias) return parentPath + pageName;
return fileAlias[pageName];
}
}
export class AssetCache {

68
spine-ts/spine-core/src/SkeletonClipping.ts
View File

@ -324,7 +324,7 @@ export class SkeletonClipping {
return clipOutputItems != null;
}
public clipTrianglesUnpacked (vertices: NumberArrayLike, triangles: NumberArrayLike | Uint32Array, trianglesLength: number, uvs: NumberArrayLike) {
public clipTrianglesUnpacked (vertices: NumberArrayLike, triangles: NumberArrayLike | Uint32Array, trianglesLength: number, uvs: NumberArrayLike, stride = 2) {
const clipOutput = this.clipOutput;
let clippedVertices = this._clippedVerticesTyped, clippedUVs = this._clippedUVsTyped, clippedTriangles = this._clippedTrianglesTyped;
// biome-ignore lint/style/noNonNullAssertion: clipStart define it
@ -343,17 +343,23 @@ export class SkeletonClipping {
let clipped = false;
for (let i = 0; i < trianglesLength; i += 3) {
let v = triangles[i] << 1;
let t = triangles[i];
let v = t * stride;
const x1 = vertices[v], y1 = vertices[v + 1];
const u1 = uvs[v], v1 = uvs[v + 1];
let uv = t << 1;
const u1 = uvs[uv], v1 = uvs[uv + 1];
v = triangles[i + 1] << 1;
t = triangles[i + 1];
v = t * stride;
const x2 = vertices[v], y2 = vertices[v + 1];
const u2 = uvs[v], v2 = uvs[v + 1];
uv = t << 1;
const u2 = uvs[uv], v2 = uvs[uv + 1];
v = triangles[i + 2] << 1;
t = triangles[i + 2];
v = t * stride;
const x3 = vertices[v], y3 = vertices[v + 1];
const u3 = uvs[v], v3 = uvs[v + 1];
uv = t << 1;
const u3 = uvs[uv], v3 = uvs[uv + 1];
for (let p = 0; p < polygonsCount; p++) {
let s = this.clippedVerticesLength;
@ -367,20 +373,22 @@ export class SkeletonClipping {
let clipOutputCount = clipOutputLength >> 1;
const clipOutputItems = this.clipOutput;
const newLength = s + clipOutputCount * 2;
const newLength = s + clipOutputCount * stride;
if (clippedVertices.length < newLength) {
this._clippedVerticesTyped = new Float32Array(newLength * 2);
this._clippedVerticesTyped.set(clippedVertices.subarray(0, s));
this._clippedUVsTyped = new Float32Array(newLength * 2);
this._clippedUVsTyped.set(clippedUVs.subarray(0, s));
this._clippedUVsTyped = new Float32Array((this.clippedUVsLength + clipOutputCount * 2) * 2);
this._clippedUVsTyped.set(clippedUVs.subarray(0, this.clippedUVsLength));
clippedVertices = this._clippedVerticesTyped;
clippedUVs = this._clippedUVsTyped;
}
const clippedVerticesItems = clippedVertices;
const clippedUVsItems = clippedUVs;
this.clippedVerticesLength = newLength;
this.clippedUVsLength = newLength;
for (let ii = 0; ii < clipOutputLength; ii += 2, s += 2) {
let uvIndex = this.clippedUVsLength;
this.clippedUVsLength = uvIndex + clipOutputCount * 2;
for (let ii = 0; ii < clipOutputLength; ii += 2, s += stride, uvIndex += 2) {
const x = clipOutputItems[ii], y = clipOutputItems[ii + 1];
clippedVerticesItems[s] = x;
clippedVerticesItems[s + 1] = y;
@ -388,8 +396,8 @@ export class SkeletonClipping {
const a = (d0 * c0 + d1 * c1) * d;
const b = (d4 * c0 + d2 * c1) * d;
const c = 1 - a - b;
clippedUVsItems[s] = u1 * a + u2 * b + u3 * c;
clippedUVsItems[s + 1] = v1 * a + v2 * b + v3 * c;
clippedUVsItems[uvIndex] = u1 * a + u2 * b + u3 * c;
clippedUVsItems[uvIndex + 1] = v1 * a + v2 * b + v3 * c;
}
s = this.clippedTrianglesLength;
@ -411,7 +419,7 @@ export class SkeletonClipping {
} else {
let newLength = s + 3 * 2;
let newLength = s + 3 * stride;
if (clippedVertices.length < newLength) {
this._clippedVerticesTyped = new Float32Array(newLength * 2);
this._clippedVerticesTyped.set(clippedVertices.subarray(0, s));
@ -419,25 +427,27 @@ export class SkeletonClipping {
}
clippedVertices[s] = x1;
clippedVertices[s + 1] = y1;
clippedVertices[s + 2] = x2;
clippedVertices[s + 3] = y2;
clippedVertices[s + 4] = x3;
clippedVertices[s + 5] = y3;
clippedVertices[s + stride] = x2;
clippedVertices[s + stride + 1] = y2;
clippedVertices[s + stride * 2] = x3;
clippedVertices[s + stride * 2 + 1] = y3;
if (clippedUVs.length < newLength) {
this._clippedUVsTyped = new Float32Array(newLength * 2);
this._clippedUVsTyped.set(clippedUVs.subarray(0, s));
let uvLength = this.clippedUVsLength + 3 * 2;
if (clippedUVs.length < uvLength) {
this._clippedUVsTyped = new Float32Array(uvLength * 2);
this._clippedUVsTyped.set(clippedUVs.subarray(0, this.clippedUVsLength));
clippedUVs = this._clippedUVsTyped;
}
clippedUVs[s] = u1;
clippedUVs[s + 1] = v1;
clippedUVs[s + 2] = u2;
clippedUVs[s + 3] = v2;
clippedUVs[s + 4] = u3;
clippedUVs[s + 5] = v3;
let uvIndex = this.clippedUVsLength;
clippedUVs[uvIndex] = u1;
clippedUVs[uvIndex + 1] = v1;
clippedUVs[uvIndex + 2] = u2;
clippedUVs[uvIndex + 3] = v2;
clippedUVs[uvIndex + 4] = u3;
clippedUVs[uvIndex + 5] = v3;
this.clippedVerticesLength = newLength;
this.clippedUVsLength = newLength;
this.clippedUVsLength = uvLength;
s = this.clippedTrianglesLength;
newLength = s + 3;

99
spine-ts/spine-core/src/SkeletonRendererCore.ts
View File

@ -40,7 +40,7 @@ export class SkeletonRendererCore {
private clipping = new SkeletonClipping();
private renderCommands: RenderCommand[] = [];
render (skeleton: Skeleton): RenderCommand | undefined {
render (skeleton: Skeleton, pma = false, inColor?: [number, number, number, number], stride = 2): RenderCommand | undefined {
this.commandPool.reset();
this.renderCommands.length = 0;
@ -56,8 +56,8 @@ export class SkeletonRendererCore {
}
const slotApplied = slot.applied;
const color = slotApplied.color;
const alpha = color.a;
const slotColor = slotApplied.color;
const alpha = slotColor.a;
if ((alpha === 0 || !slot.bone.active) && !(attachment instanceof ClippingAttachment)) {
clipper.clipEnd(slot);
continue;
@ -80,7 +80,7 @@ export class SkeletonRendererCore {
continue;
}
attachment.computeWorldVertices(slot, this.worldVertices, 0, 2);
attachment.computeWorldVertices(slot, this.worldVertices, 0, stride);
vertices = this.worldVertices;
verticesCount = 4;
uvs = attachment.uvs as Float32Array;
@ -99,7 +99,7 @@ export class SkeletonRendererCore {
if (this.worldVertices.length < attachment.worldVerticesLength)
this.worldVertices = new Float32Array(attachment.worldVerticesLength);
attachment.computeWorldVertices(skeleton, slot, 0, attachment.worldVerticesLength, this.worldVertices, 0, 2);
attachment.computeWorldVertices(skeleton, slot, 0, attachment.worldVerticesLength, this.worldVertices, 0, stride);
vertices = this.worldVertices;
verticesCount = attachment.worldVerticesLength >> 1;
uvs = attachment.uvs as Float32Array;
@ -115,38 +115,71 @@ export class SkeletonRendererCore {
}
const skelColor = skeleton.color;
const r = Math.floor(skelColor.r * slotApplied.color.r * attachmentColor.r * 255);
const g = Math.floor(skelColor.g * slotApplied.color.g * attachmentColor.g * 255);
const b = Math.floor(skelColor.b * slotApplied.color.b * attachmentColor.b * 255);
const a = Math.floor(skelColor.a * slotApplied.color.a * attachmentColor.a * 255);
let color: number, darkColor: number;
if (pma) {
let a: number;
if (inColor) {
a = Math.floor(inColor[3] * skelColor.a * slotColor.a * attachmentColor.a * 255);
const r = Math.floor(a * inColor[0] * skelColor.r * slotColor.r * attachmentColor.r);
const g = Math.floor(a * inColor[1] * skelColor.g * slotColor.g * attachmentColor.g);
const b = Math.floor(a * inColor[2] * skelColor.b * slotColor.b * attachmentColor.b);
color = (a << 24) | (r << 16) | (g << 8) | b;
} else {
a = Math.floor(skelColor.a * slotColor.a * attachmentColor.a * 255);
const r = Math.floor(a * skelColor.r * slotColor.r * attachmentColor.r);
const g = Math.floor(a * skelColor.g * slotColor.g * attachmentColor.g);
const b = Math.floor(a * skelColor.b * slotColor.b * attachmentColor.b);
color = (a << 24) | (r << 16) | (g << 8) | b;
}
let darkColor = 0xff000000;
if (slotApplied.darkColor) {
const { r, g, b } = slotApplied.darkColor;
darkColor = 0xff000000 |
(Math.floor(r * 255) << 16) |
(Math.floor(g * 255) << 8) |
Math.floor(b * 255);
darkColor = 0xff000000;
if (slotApplied.darkColor) {
const { r, g, b } = slotApplied.darkColor;
darkColor = 0xff000000 |
(Math.floor(r * a) << 16) |
(Math.floor(g * a) << 8) |
Math.floor(b * a);
}
} else {
if (inColor) {
const a = Math.floor(inColor[3] * skelColor.a * slotColor.a * attachmentColor.a * 255);
const r = Math.floor(inColor[0] * skelColor.r * slotColor.r * attachmentColor.r * 255);
const g = Math.floor(inColor[1] * skelColor.g * slotColor.g * attachmentColor.g * 255);
const b = Math.floor(inColor[2] * skelColor.b * slotColor.b * attachmentColor.b * 255);
color = (a << 24) | (r << 16) | (g << 8) | b;
} else {
const a = Math.floor(skelColor.a * slotColor.a * attachmentColor.a * 255);
const r = Math.floor(skelColor.r * slotColor.r * attachmentColor.r * 255);
const g = Math.floor(skelColor.g * slotColor.g * attachmentColor.g * 255);
const b = Math.floor(skelColor.b * slotColor.b * attachmentColor.b * 255);
color = (a << 24) | (r << 16) | (g << 8) | b;
}
darkColor = 0;
if (slotApplied.darkColor) {
const { r, g, b } = slotApplied.darkColor;
darkColor = (Math.floor(r * 255) << 16) | (Math.floor(g * 255) << 8) | Math.floor(b * 255);
}
}
if (clipper.isClipping()) {
clipper.clipTrianglesUnpacked(vertices, indices, indicesCount, uvs);
clipper.clipTrianglesUnpacked(vertices, indices, indicesCount, uvs, stride);
vertices = clipper.clippedVerticesTyped;
verticesCount = clipper.clippedVerticesLength >> 1;
verticesCount = clipper.clippedVerticesLength / stride;
uvs = clipper.clippedUVsTyped;
indices = clipper.clippedTrianglesTyped;
indicesCount = clipper.clippedTrianglesLength;
}
const cmd = this.commandPool.getCommand(verticesCount, indicesCount);
const cmd = this.commandPool.getCommand(verticesCount, indicesCount, stride);
cmd.blendMode = slot.data.blendMode;
cmd.texture = texture;
cmd.positions.set(vertices.subarray(0, verticesCount << 1));
cmd.positions.set(vertices.subarray(0, verticesCount * stride));
cmd.uvs.set(uvs.subarray(0, verticesCount << 1));
for (let j = 0; j < verticesCount; j++) {
cmd.colors[j] = (a << 24) | (r << 16) | (g << 8) | b;
cmd.colors[j] = color;
cmd.darkColors[j] = darkColor;
}
@ -161,14 +194,14 @@ export class SkeletonRendererCore {
}
clipper.clipEnd();
return this.batchCommands();
return this.batchCommands(stride);
}
private batchSubCommands (commands: RenderCommand[], first: number, last: number,
numVertices: number, numIndices: number): RenderCommand {
numVertices: number, numIndices: number, stride: number): RenderCommand {
const firstCmd = commands[first];
const batched = this.commandPool.getCommand(numVertices, numIndices);
const batched = this.commandPool.getCommand(numVertices, numIndices, stride);
batched.blendMode = firstCmd.blendMode;
batched.texture = firstCmd.texture;
@ -183,7 +216,7 @@ export class SkeletonRendererCore {
const cmd = commands[i];
batched.positions.set(cmd.positions, positionsOffset);
positionsOffset += cmd.numVertices << 1;
positionsOffset += cmd.numVertices * stride;
batched.uvs.set(cmd.uvs, uvsOffset);
uvsOffset += cmd.numVertices << 1;
@ -203,7 +236,7 @@ export class SkeletonRendererCore {
return batched;
}
private batchCommands (): RenderCommand | undefined {
private batchCommands (stride: number): RenderCommand | undefined {
if (this.renderCommands.length === 0) return undefined;
let root: RenderCommand | undefined;
@ -234,7 +267,7 @@ export class SkeletonRendererCore {
numIndices += cmd.numIndices;
} else {
const batched = this.batchSubCommands(this.renderCommands, startIndex, i - 1,
numVertices, numIndices);
numVertices, numIndices, stride);
if (!last) {
root = last = batched;
@ -257,6 +290,8 @@ export class SkeletonRendererCore {
}
}
// values with under score is the original sized array, bigger than necessary
// values without under score is a view of the orignal array, sized as needed
interface RenderCommand {
positions: Float32Array;
uvs: Float32Array;
@ -280,17 +315,17 @@ class CommandPool {
private pool: RenderCommand[] = [];
private inUse: RenderCommand[] = [];
getCommand (numVertices: number, numIndices: number): RenderCommand {
getCommand (numVertices: number, numIndices: number, stride: number): RenderCommand {
let cmd: RenderCommand | undefined;
for (const c of this.pool) {
if (c._positions.length >= numVertices << 1 && c._indices.length >= numIndices) {
if (c._positions.length >= numVertices * stride && c._indices.length >= numIndices) {
cmd = c;
break;
}
}
if (!cmd) {
const _positions = new Float32Array(numVertices << 1);
const _positions = new Float32Array(numVertices * stride);
const _uvs = new Float32Array(numVertices << 1);
const _colors = new Uint32Array(numVertices);
const _darkColors = new Uint32Array(numVertices);
@ -317,8 +352,8 @@ class CommandPool {
cmd.numVertices = numVertices;
cmd.numIndices = numIndices;
cmd.positions = cmd._positions.subarray(0, numVertices << 1);
cmd.uvs = cmd._uvs.subarray(0, numVertices * 2);
cmd.positions = cmd._positions.subarray(0, numVertices * stride);
cmd.uvs = cmd._uvs.subarray(0, numVertices << 1);
cmd.colors = cmd._colors.subarray(0, numVertices);
cmd.darkColors = cmd._darkColors.subarray(0, numVertices);
cmd.indices = cmd._indices.subarray(0, numIndices);

2
spine-ts/spine-phaser-v3/example/inline-loading.html
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);

3
spine-ts/spine-phaser-v3/src/SpineGameObject.ts
View File

@ -226,7 +226,6 @@ export class SpineGameObject extends DepthMixin(
animationState: AnimationState;
beforeUpdateWorldTransforms: (object: SpineGameObject) => void = () => { };
afterUpdateWorldTransforms: (object: SpineGameObject) => void = () => { };
private premultipliedAlpha = false;
private offsetX = 0;
private offsetY = 0;
@ -243,7 +242,6 @@ export class SpineGameObject extends DepthMixin(
super(scene, (window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE);
this.setPosition(x, y);
this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey);
this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey);
this.animationStateData = new AnimationStateData(this.skeleton.data);
this.animationState = new AnimationState(this.animationStateData);
@ -374,7 +372,6 @@ export class SpineGameObject extends DepthMixin(
sceneRenderer.drawSkeleton(
src.skeleton,
src.premultipliedAlpha,
-1,
-1,
(vertices, numVertices, stride) => {

51
spine-ts/spine-phaser-v3/src/SpinePlugin.ts
View File

@ -58,7 +58,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje
* The scene's {@link LoaderPlugin} (`Scene.load`) gets these additional functions:
* * `spineBinary(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`.
* * `spineJson(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`.
* * `spineAtlas(key: string, url: string, premultipliedAlpha: boolean = true, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images.
* * `spineAtlas(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images.
*
* The scene's {@link GameObjectFactory} (`Scene.add`) gets these additional functions:
* * `spine(x: number, y: number, dataKey: string, atlasKey: string, boundsProvider: SpineGameObjectBoundsProvider = SetupPoseBoundsProvider())`:
@ -70,7 +70,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje
* The plugin has additional public methods to work with Spine Runtime core API objects:
* * `getAtlas(atlasKey: string)`: returns the {@link TextureAtlas} instance for the given atlas key.
* * `getSkeletonData(skeletonDataKey: string)`: returns the {@link SkeletonData} instance for the given skeleton data key.
* * `createSkeleton(skeletonDataKey: string, atlasKey: string, premultipliedAlpha: boolean = true)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key.
* * `createSkeleton(skeletonDataKey: string, atlasKey: string)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key.
* * `isPremultipliedAlpha(atlasKey: string)`: returns `true` if the atlas with the given key has premultiplied alpha.
*/
export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
@ -119,9 +119,8 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
const atlasFileCallback = function (this: Phaser.Loader.LoaderPlugin, key: string,
url: string,
premultipliedAlpha: boolean,
xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
const file = new SpineAtlasFile(this, key, url, premultipliedAlpha, xhrSettings);
const file = new SpineAtlasFile(this, key, url, xhrSettings);
this.addFile(file.files);
return this;
};
@ -225,35 +224,26 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
/** Returns the TextureAtlas instance for the given key */
getAtlas (atlasKey: string) {
let atlas: TextureAtlas;
if (this.atlasCache.exists(atlasKey)) {
atlas = this.atlasCache.get(atlasKey);
if (this.atlasCache.exists(atlasKey)) return this.atlasCache.get(atlasKey);
const atlas = new TextureAtlas(this.game.cache.text.get(atlasKey));
if (this.isWebGL && this.gl) {
const gl = this.gl;
for (const atlasPage of atlas.pages)
atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, atlasPage.pma, false));
} else {
const atlasFile = this.game.cache.text.get(atlasKey) as { data: string, premultipliedAlpha: boolean };
atlas = new TextureAtlas(atlasFile.data);
if (this.isWebGL && this.gl) {
const gl = this.gl;
const phaserUnpackPmaValue = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL);
if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
for (const atlasPage of atlas.pages) {
atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, false));
}
if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
} else {
for (const atlasPage of atlas.pages) {
atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap));
}
}
this.atlasCache.add(atlasKey, atlas);
for (const atlasPage of atlas.pages)
atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap));
}
this.atlasCache.add(atlasKey, atlas);
return atlas;
}
/** Returns whether the TextureAtlas uses premultiplied alpha */
isAtlasPremultiplied (atlasKey: string) {
const atlasFile = this.game.cache.text.get(atlasKey);
if (!atlasFile) return false;
return atlasFile.premultipliedAlpha;
const atlas: TextureAtlas = this.atlasCache.get(atlasKey);
if (!atlas || atlas.pages.length === 0) return false;
return atlas.pages[0].pma;
}
/** Returns the SkeletonData instance for the given data and atlas key */
@ -337,17 +327,15 @@ class SpineSkeletonDataFile extends Phaser.Loader.MultiFile {
interface SpineAtlasFileConfig {
key: string;
url: string;
premultipliedAlpha?: boolean;
xhrSettings?: Phaser.Types.Loader.XHRSettingsObject;
}
class SpineAtlasFile extends Phaser.Loader.MultiFile {
constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, public premultipliedAlpha?: boolean, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) {
constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) {
if (typeof key !== "string") {
const config = key;
key = config.key;
url = config.url;
premultipliedAlpha = config.premultipliedAlpha;
xhrSettings = config.xhrSettings;
}
@ -406,11 +394,6 @@ class SpineAtlasFile extends Phaser.Loader.MultiFile {
textureManager.addImage(file.key, file.data);
}
} else {
this.premultipliedAlpha = this.premultipliedAlpha ?? (file.data.indexOf("pma: true") >= 0 || file.data.indexOf("pma:true") >= 0);
file.data = {
data: file.data,
premultipliedAlpha: this.premultipliedAlpha,
};
file.addToCache();
}
}

2
spine-ts/spine-phaser-v3/src/index.ts
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;
}
}

2
spine-ts/spine-phaser-v4/example/inline-loading.html
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);

3
spine-ts/spine-phaser-v4/src/SpineGameObject.ts
View File

@ -226,7 +226,6 @@ export class SpineGameObject extends DepthMixin(
animationState: AnimationState;
beforeUpdateWorldTransforms: (object: SpineGameObject) => void = () => { };
afterUpdateWorldTransforms: (object: SpineGameObject) => void = () => { };
private premultipliedAlpha = false;
private offsetX = 0;
private offsetY = 0;
@ -243,7 +242,6 @@ export class SpineGameObject extends DepthMixin(
super(scene, (window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE);
this.setPosition(x, y);
this.premultipliedAlpha = this.plugin.isAtlasPremultiplied(atlasKey);
this.skeleton = this.plugin.createSkeleton(dataKey, atlasKey);
this.animationStateData = new AnimationStateData(this.skeleton.data);
this.animationState = new AnimationState(this.animationStateData);
@ -393,7 +391,6 @@ export class SpineGameObject extends DepthMixin(
sceneRenderer.drawSkeleton(
src.skeleton,
src.premultipliedAlpha,
-1,
-1,
(vertices, numVertices, stride) => {

52
spine-ts/spine-phaser-v4/src/SpinePlugin.ts
View File

@ -58,7 +58,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje
* The scene's {@link LoaderPlugin} (`Scene.load`) gets these additional functions:
* * `spineBinary(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`.
* * `spineJson(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a skeleton binary `.skel` file from the `url`.
* * `spineAtlas(key: string, url: string, premultipliedAlpha: boolean = true, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images.
* * `spineAtlas(key: string, url: string, xhrSettings?: XHRSettingsObject)`: loads a texture atlas `.atlas` file from the `url` as well as its correponding texture atlas page images.
*
* The scene's {@link GameObjectFactory} (`Scene.add`) gets these additional functions:
* * `spine(x: number, y: number, dataKey: string, atlasKey: string, boundsProvider: SpineGameObjectBoundsProvider = SetupPoseBoundsProvider())`:
@ -70,8 +70,7 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje
* The plugin has additional public methods to work with Spine Runtime core API objects:
* * `getAtlas(atlasKey: string)`: returns the {@link TextureAtlas} instance for the given atlas key.
* * `getSkeletonData(skeletonDataKey: string)`: returns the {@link SkeletonData} instance for the given skeleton data key.
* * `createSkeleton(skeletonDataKey: string, atlasKey: string, premultipliedAlpha: boolean = true)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key.
* * `isPremultipliedAlpha(atlasKey: string)`: returns `true` if the atlas with the given key has premultiplied alpha.
* * `createSkeleton(atlasKey: string)`: creates a new {@link Skeleton} instance from the given skeleton data and atlas key.
*/
export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
game: Phaser.Game;
@ -116,9 +115,8 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
const atlasFileCallback = function (this: Phaser.Loader.LoaderPlugin, key: string,
url: string,
premultipliedAlpha: boolean,
xhrSettings: Phaser.Types.Loader.XHRSettingsObject) {
const file = new SpineAtlasFile(this, key, url, premultipliedAlpha, xhrSettings);
const file = new SpineAtlasFile(this, key, url, xhrSettings);
this.addFile(file.files);
return this;
};
@ -204,35 +202,26 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin {
/** Returns the TextureAtlas instance for the given key */
getAtlas (atlasKey: string) {
let atlas: TextureAtlas;
if (this.atlasCache.exists(atlasKey)) {
atlas = this.atlasCache.get(atlasKey);
if (this.atlasCache.exists(atlasKey)) return this.atlasCache.get(atlasKey);
const atlas = new TextureAtlas(this.game.cache.text.get(atlasKey));
if (this.isWebGL && this.gl) {
const gl = this.gl;
for (const atlasPage of atlas.pages)
atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, atlasPage.pma, false));
} else {
const atlasFile = this.game.cache.text.get(atlasKey) as { data: string, premultipliedAlpha: boolean };
atlas = new TextureAtlas(atlasFile.data);
if (this.isWebGL && this.gl) {
const gl = this.gl;
const phaserUnpackPmaValue = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL);
if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
for (const atlasPage of atlas.pages) {
atlasPage.setTexture(new GLTexture(gl, this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap, false));
}
if (phaserUnpackPmaValue) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
} else {
for (const atlasPage of atlas.pages) {
atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap));
}
}
this.atlasCache.add(atlasKey, atlas);
for (const atlasPage of atlas.pages)
atlasPage.setTexture(new CanvasTexture(this.game.textures.get(`${atlasKey}!${atlasPage.name}`).getSourceImage() as HTMLImageElement | ImageBitmap));
}
this.atlasCache.add(atlasKey, atlas);
return atlas;
}
/** Returns whether the TextureAtlas uses premultiplied alpha */
isAtlasPremultiplied (atlasKey: string) {
const atlasFile = this.game.cache.text.get(atlasKey);
if (!atlasFile) return false;
return atlasFile.premultipliedAlpha;
const atlas: TextureAtlas = this.atlasCache.get(atlasKey);
if (!atlas || atlas.pages.length === 0) return false;
return atlas.pages[0].pma;
}
/** Returns the SkeletonData instance for the given data and atlas key */
@ -326,17 +315,15 @@ class SpineSkeletonDataFile extends Phaser.Loader.MultiFile {
interface SpineAtlasFileConfig {
key: string;
url: string;
premultipliedAlpha?: boolean;
xhrSettings?: Phaser.Types.Loader.XHRSettingsObject;
}
class SpineAtlasFile extends Phaser.Loader.MultiFile {
constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, public premultipliedAlpha?: boolean, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) {
constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) {
if (typeof key !== "string") {
const config = key;
key = config.key;
url = config.url;
premultipliedAlpha = config.premultipliedAlpha;
xhrSettings = config.xhrSettings;
}
@ -395,11 +382,6 @@ class SpineAtlasFile extends Phaser.Loader.MultiFile {
textureManager.addImage(file.key, file.data);
}
} else {
this.premultipliedAlpha = this.premultipliedAlpha ?? (file.data.indexOf("pma: true") >= 0 || file.data.indexOf("pma:true") >= 0);
file.data = {
data: file.data,
premultipliedAlpha: this.premultipliedAlpha,
};
file.addToCache();
}
}

2
spine-ts/spine-phaser-v4/src/index.ts
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;
}
}

1
spine-ts/spine-pixi-v7/src/Spine.ts
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,

1
spine-ts/spine-player/example/dispose.html
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,

2
spine-ts/spine-player/example/editor.html
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(

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
spine-ts/spine-player/example/example.html
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,

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

@ -66,9 +66,6 @@ export interface SpinePlayerConfig {
/* Optional: List of skin names from which the user can choose. Default: all skins */
skins?: string[]
/* Optional: Whether the skeleton's atlas images use premultiplied alpha. Default: true */
premultipliedAlpha?: boolean
/* Optional: Whether to show the player controls. When false, no external CSS file is needed. Default: true */
showControls?: boolean
@ -311,7 +308,6 @@ export class SpinePlayer implements Disposable {
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;
if (config.premultipliedAlpha === void 0) config.premultipliedAlpha = true;
if (config.preserveDrawingBuffer === void 0) config.preserveDrawingBuffer = false;
if (config.mipmaps === void 0) config.mipmaps = true;
if (config.interactive === void 0) config.interactive = true;
@ -919,7 +915,7 @@ export class SpinePlayer implements Disposable {
}
// Draw the skeleton and debug output.
renderer.drawSkeleton(skeleton, config.premultipliedAlpha);
renderer.drawSkeleton(skeleton);
if (Number(renderer.skeletonDebugRenderer.drawBones = config.debug!.bones! ?? false)
+ Number(renderer.skeletonDebugRenderer.drawBoundingBoxes = config.debug!.bounds! ?? false)
+ Number(renderer.skeletonDebugRenderer.drawClipping = config.debug!.clipping! ?? false)
@ -928,7 +924,7 @@ export class SpinePlayer implements Disposable {
+ Number(renderer.skeletonDebugRenderer.drawRegionAttachments = config.debug!.regions! ?? false)
+ Number(renderer.skeletonDebugRenderer.drawMeshTriangles = config.debug!.meshes! ?? false) > 0
) {
renderer.drawSkeletonDebug(skeleton, config.premultipliedAlpha);
renderer.drawSkeletonDebug(skeleton);
}
// Draw the control bones.

5
spine-ts/spine-threejs/example/physics.html
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);

4
spine-ts/spine-threejs/example/shadows.html
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);

10
spine-ts/spine-threejs/src/AssetManager.ts
View File

@ -31,9 +31,11 @@ import { AssetManagerBase, Downloader } from "@esotericsoftware/spine-core"
import { ThreeJsTexture } from "./ThreeJsTexture.js";
export class AssetManager extends AssetManagerBase {
constructor (pathPrefix: string = "", downloader: Downloader = new Downloader(), pma = false) {
super((image: HTMLImageElement | ImageBitmap) => {
return new ThreeJsTexture(image, pma);
}, pathPrefix, downloader);
constructor (pathPrefix: string = "", downloader: Downloader = new Downloader()) {
super(
(image: HTMLImageElement | ImageBitmap, pma = false) => new ThreeJsTexture(image, pma),
pathPrefix,
downloader,
);
}
}

4
spine-ts/spine-webcomponents/src/SpineWebComponentOverlay.ts
View File

@ -499,7 +499,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
const tempVector = new Vector3();
for (const widget of this.widgets) {
const { skeleton, pma, bounds, debug, offsetX, offsetY, dragX, dragY, fit, spinner, loading, clip, drag } = widget;
const { skeleton, bounds, debug, offsetX, offsetY, dragX, dragY, fit, spinner, loading, clip, drag } = widget;
if (widget.isOffScreenAndWasMoved()) continue;
const elementRef = widget.getHostElement();
@ -614,7 +614,7 @@ export class SpineWebComponentOverlay extends HTMLElement implements OverlayAttr
widget.worldX = worldOffsetX;
widget.worldY = worldOffsetY;
renderer.drawSkeleton(skeleton, pma, -1, -1, (vertices, size, vertexSize) => {
renderer.drawSkeleton(skeleton, -1, -1, (vertices, size, vertexSize) => {
for (let i = 0; i < size; i += vertexSize) {
vertices[i] = vertices[i] + worldOffsetX;
vertices[i + 1] = vertices[i + 1] + worldOffsetY;

9
spine-ts/spine-webcomponents/src/SpineWebComponentSkeleton.ts
View File

@ -132,7 +132,6 @@ interface WidgetPublicProperties {
// Usage of this properties is discouraged because they can be made private in the future
interface WidgetInternalProperties {
pma: boolean
dprScale: number
dragging: boolean
dragX: number
@ -648,13 +647,6 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
*/
public dragging = false;
/**
* @internal
* If true, the widget has texture with premultiplied alpha
* Do not rely on this properties. It might be made private in the future.
*/
public pma = false;
/**
* If true, indicate {@link dispose} has been called and the widget cannot be used anymore
*/
@ -972,7 +964,6 @@ export class SpineWebComponentSkeleton extends HTMLElement implements Disposable
]);
const atlas = this.overlay.assetManager.require(atlasPath) as TextureAtlas;
this.pma = atlas.pages[0]?.pma
const atlasLoader = new AtlasAttachmentLoader(atlas);

2
spine-ts/spine-webgl/demos/additiveblending.js
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);

4
spine-ts/spine-webgl/demos/clipping.js
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();
}

4
spine-ts/spine-webgl/demos/hoverboard.js
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]);

2
spine-ts/spine-webgl/demos/imagechanges.js
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;

2
spine-ts/spine-webgl/demos/meshes.js
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();
}

2
spine-ts/spine-webgl/demos/skins.js
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;

4
spine-ts/spine-webgl/demos/spritesheets.js
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();
}

4
spine-ts/spine-webgl/demos/stretchyman.js
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]);

4
spine-ts/spine-webgl/demos/tank.js
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();
}

4
spine-ts/spine-webgl/demos/transforms.js
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]);

4
spine-ts/spine-webgl/demos/transitions.js
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();
}

2
spine-ts/spine-webgl/demos/vine.js
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++) {

2
spine-ts/spine-webgl/example/barebones-dragon.html
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();
}

2
spine-ts/spine-webgl/example/barebones.html
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();
}

2
spine-ts/spine-webgl/example/bone-dragging.html
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);

2
spine-ts/spine-webgl/example/custom-attachment.html
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();
}

2
spine-ts/spine-webgl/example/drag-and-drop.html
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>

9
spine-ts/spine-webgl/example/drag-and-drop.js
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();
}
}

4
spine-ts/spine-webgl/example/dress-up.html
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();
}
}

41
spine-ts/spine-webgl/example/index.html
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();

4
spine-ts/spine-webgl/example/mix-and-match.html
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();
}
}

4
spine-ts/spine-webgl/example/physics.html
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();
}

2
spine-ts/spine-webgl/example/physics2.html
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();
}

4
spine-ts/spine-webgl/example/physics3.html
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();
}

2
spine-ts/spine-webgl/example/physics4.html
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();
}

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

@ -33,8 +33,10 @@ import type { ManagedWebGLRenderingContext } from "./WebGL.js";
export class AssetManager extends AssetManagerBase {
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix: string = "", downloader: Downloader = new Downloader()) {
super((image: HTMLImageElement | ImageBitmap) => {
return new GLTexture(context, image);
}, pathPrefix, downloader);
super(
(image: HTMLImageElement | ImageBitmap, pma = false) => new GLTexture(context, image, pma),
pathPrefix,
downloader,
);
}
}

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

@ -34,13 +34,13 @@ export class GLTexture extends Texture implements Disposable, Restorable {
context: ManagedWebGLRenderingContext;
private texture: WebGLTexture | null = null;
private boundUnit = 0;
private useMipMaps = false;
private pma: boolean;
private useMipMaps: boolean;
public static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL = false;
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps: boolean = false) {
constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, pma: boolean, useMipMaps: boolean = false) {
super(image);
this.context = context instanceof ManagedWebGLRenderingContext ? context : new ManagedWebGLRenderingContext(context);
this.pma = pma;
this.useMipMaps = useMipMaps;
this.restore();
this.context.addRestorable(this);
@ -90,13 +90,15 @@ export class GLTexture extends Texture implements Disposable, Restorable {
const gl = this.context.gl;
if (!this.texture) this.texture = this.context.gl.createTexture();
this.bind();
if (GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL) gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
const previousUnpackPmaValue = gl.getParameter(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !this.pma);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, useMipMaps ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
if (useMipMaps) gl.generateMipmap(gl.TEXTURE_2D);
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, previousUnpackPmaValue);
}
restore () {

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

@ -88,7 +88,7 @@ export class LoadingScreen implements Disposable {
renderer.resize(ResizeMode.Expand);
renderer.camera.position.set(canvas.width / 2, canvas.height / 2, 0);
renderer.batcher.setBlendMode(BlendMode.Normal, true);
renderer.batcher.setBlendMode(BlendMode.Normal);
if (complete) {
this.fadeOut += this.timeKeeper.delta * (this.timeKeeper.totalTime < 1 ? 2 : 1);
@ -116,8 +116,8 @@ export class LoadingScreen implements Disposable {
tempColor.set(a, a, a, a);
if (!this.logo) {
this.logo = new GLTexture(renderer.context, logoImage);
this.spinner = new GLTexture(renderer.context, spinnerImage);
this.logo = new GLTexture(renderer.context, logoImage, true);
this.spinner = new GLTexture(renderer.context, spinnerImage, true);
}
renderer.camera.zoom = Math.max(1, spinnerSize / canvas.height);
renderer.begin();
@ -131,11 +131,11 @@ export class LoadingScreen implements Disposable {
this.timeKeeper.update();
const renderer = this.renderer;
renderer.batcher.setBlendMode(BlendMode.Normal, true);
renderer.batcher.setBlendMode(BlendMode.Normal);
if (!this.logo) {
this.logo = new GLTexture(renderer.context, logoImage);
this.spinner = new GLTexture(renderer.context, spinnerImage);
this.logo = new GLTexture(renderer.context, logoImage, true);
this.spinner = new GLTexture(renderer.context, spinnerImage, true);
}
const shiftedX = x - logoWidth / 2;

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

@ -35,10 +35,7 @@ import { ManagedWebGLRenderingContext } from "./WebGL.js";
const GL_ONE = 1;
const GL_ONE_MINUS_SRC_COLOR = 0x0301;
const GL_SRC_ALPHA = 0x0302;
const GL_ONE_MINUS_SRC_ALPHA = 0x0303;
// biome-ignore lint/correctness/noUnusedVariables: intentional
const GL_ONE_MINUS_DST_ALPHA = 0x0305;
const GL_DST_COLOR = 0x0306;
export class PolygonBatcher implements Disposable {
@ -88,16 +85,16 @@ export class PolygonBatcher implements Disposable {
}
}
private static blendModesGL: { srcRgb: number, srcRgbPma: number, dstRgb: number, srcAlpha: number }[] = [
{ srcRgb: GL_SRC_ALPHA, srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE },
{ srcRgb: GL_SRC_ALPHA, srcRgbPma: GL_ONE, dstRgb: GL_ONE, srcAlpha: GL_ONE },
{ srcRgb: GL_DST_COLOR, srcRgbPma: GL_DST_COLOR, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE },
{ srcRgb: GL_ONE, srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_COLOR, srcAlpha: GL_ONE }
private static blendModesGL: { srcRgbPma: number, dstRgb: number, srcAlpha: number }[] = [
{ srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE },
{ srcRgbPma: GL_ONE, dstRgb: GL_ONE, srcAlpha: GL_ONE },
{ srcRgbPma: GL_DST_COLOR, dstRgb: GL_ONE_MINUS_SRC_ALPHA, srcAlpha: GL_ONE },
{ srcRgbPma: GL_ONE, dstRgb: GL_ONE_MINUS_SRC_COLOR, srcAlpha: GL_ONE }
]
setBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean) {
setBlendMode (blendMode: BlendMode) {
const blendModeGL = PolygonBatcher.blendModesGL[blendMode];
const srcColorBlend = premultipliedAlpha ? blendModeGL.srcRgbPma : blendModeGL.srcRgb;
const srcColorBlend = blendModeGL.srcRgbPma;
const srcAlphaBlend = blendModeGL.srcAlpha;
const dstBlend = blendModeGL.dstRgb;

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

@ -87,15 +87,13 @@ export class SceneRenderer implements Disposable {
this.enableRenderer(this.batcher);
}
drawSkeleton (skeleton: Skeleton, premultipliedAlpha = false, slotRangeStart = -1, slotRangeEnd = -1, transform: VertexTransformer | null = null) {
drawSkeleton (skeleton: Skeleton, slotRangeStart = -1, slotRangeEnd = -1, transform: VertexTransformer | null = null) {
this.enableRenderer(this.batcher);
this.skeletonRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonRenderer.draw(this.batcher, skeleton, slotRangeStart, slotRangeEnd, transform);
}
drawSkeletonDebug (skeleton: Skeleton, premultipliedAlpha = false, ignoredBones?: Array<string>) {
drawSkeletonDebug (skeleton: Skeleton, ignoredBones?: Array<string>) {
this.enableRenderer(this.shapes);
this.skeletonDebugRenderer.premultipliedAlpha = premultipliedAlpha;
this.skeletonDebugRenderer.draw(this.shapes, skeleton, ignoredBones);
}

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

@ -47,7 +47,6 @@ export class SkeletonDebugRenderer implements Disposable {
drawPaths = true;
drawSkeletonXY = false;
drawClipping = true;
premultipliedAlpha = false;
scale = 1;
boneWidth = 2;
@ -66,8 +65,7 @@ export class SkeletonDebugRenderer implements Disposable {
const skeletonX = skeleton.x;
const skeletonY = skeleton.y;
const gl = this.context.gl;
const srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA;
shapes.setBlendMode(srcFunc, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
shapes.setBlendMode(gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
const bones = skeleton.bones;
if (this.drawBones) {

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

@ -42,7 +42,6 @@ export type VertexTransformer = (vertices: NumberArrayLike, numVertices: number,
export class SkeletonRenderer {
static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
premultipliedAlpha = false;
private tempColor = new Color();
private tempColor2 = new Color();
private vertices: NumberArrayLike;
@ -64,7 +63,6 @@ export class SkeletonRenderer {
draw (batcher: PolygonBatcher, skeleton: Skeleton, slotRangeStart: number = -1, slotRangeEnd: number = -1, transformer: VertexTransformer | null = null) {
const clipper = this.clipper;
const premultipliedAlpha = this.premultipliedAlpha;
const twoColorTint = this.twoColorTint;
let blendMode: BlendMode | null = null;
@ -134,33 +132,25 @@ export class SkeletonRenderer {
if (texture) {
const slotColor = pose.color;
const finalColor = this.tempColor;
finalColor.r = skeletonColor.r * slotColor.r * attachmentColor.r;
finalColor.g = skeletonColor.g * slotColor.g * attachmentColor.g;
finalColor.b = skeletonColor.b * slotColor.b * attachmentColor.b;
finalColor.a = skeletonColor.a * slotColor.a * attachmentColor.a;
if (premultipliedAlpha) {
finalColor.r *= finalColor.a;
finalColor.g *= finalColor.a;
finalColor.b *= finalColor.a;
}
const alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
finalColor.r = skeletonColor.r * slotColor.r * attachmentColor.r * alpha;
finalColor.g = skeletonColor.g * slotColor.g * attachmentColor.g * alpha;
finalColor.b = skeletonColor.b * slotColor.b * attachmentColor.b * alpha;
finalColor.a = alpha;
const darkColor = this.tempColor2;
if (!pose.darkColor)
darkColor.set(0, 0, 0, 1.0);
else {
if (premultipliedAlpha) {
darkColor.r = pose.darkColor.r * finalColor.a;
darkColor.g = pose.darkColor.g * finalColor.a;
darkColor.b = pose.darkColor.b * finalColor.a;
} else {
darkColor.setFromColor(pose.darkColor);
}
darkColor.a = premultipliedAlpha ? 1.0 : 0.0;
darkColor.r = pose.darkColor.r * alpha;
darkColor.g = pose.darkColor.g * alpha;
darkColor.b = pose.darkColor.b * alpha;
darkColor.a = 1;
}
const slotBlendMode = slot.data.blendMode;
if (slotBlendMode !== blendMode) {
blendMode = slotBlendMode;
batcher.setBlendMode(blendMode, premultipliedAlpha);
batcher.setBlendMode(blendMode);
}
if (clipper.isClipping() && clipper.clipTriangles(renderable.vertices, triangles, triangles.length, uvs, finalColor, darkColor, twoColorTint, vertexSize)) {
@ -175,7 +165,7 @@ export class SkeletonRenderer {
verts[v] = finalColor.r;
verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b;
verts[v + 3] = finalColor.a;
verts[v + 3] = alpha;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
}
@ -184,7 +174,7 @@ export class SkeletonRenderer {
verts[v] = finalColor.r;
verts[v + 1] = finalColor.g;
verts[v + 2] = finalColor.b;
verts[v + 3] = finalColor.a;
verts[v + 3] = alpha;
verts[v + 4] = uvs[u];
verts[v + 5] = uvs[u + 1];
verts[v + 6] = darkColor.r;