diff --git a/spine-ts/index.html b/spine-ts/index.html index c038070d1..f7c99f4c3 100644 --- a/spine-ts/index.html +++ b/spine-ts/index.html @@ -1,79 +1,161 @@ + + + + spine-ts Examples + + - - - - spine-ts Examples - - - - -

spine-ts Examples

- - - - \ No newline at end of file + +

spine-ts Examples

+ + + diff --git a/spine-ts/spine-phaser/example/custom-spine-object-type.html b/spine-ts/spine-phaser/example/custom-spine-object-type.html new file mode 100644 index 000000000..f20882e0a --- /dev/null +++ b/spine-ts/spine-phaser/example/custom-spine-object-type.html @@ -0,0 +1,49 @@ + + + + + + + + + + Spine Phaser Example + + + +

Custom object factor name

+ + + + \ No newline at end of file diff --git a/spine-ts/spine-phaser/src/SpineGameObject.ts b/spine-ts/spine-phaser/src/SpineGameObject.ts index 346975129..cadfdbaff 100644 --- a/spine-ts/spine-phaser/src/SpineGameObject.ts +++ b/spine-ts/spine-phaser/src/SpineGameObject.ts @@ -29,90 +29,138 @@ import { SPINE_GAME_OBJECT_TYPE } from "./keys"; import { SpinePlugin } from "./SpinePlugin"; -import { ComputedSizeMixin, DepthMixin, FlipMixin, ScrollFactorMixin, TransformMixin, VisibleMixin, AlphaMixin, OriginMixin } from "./mixins"; -import { AnimationState, AnimationStateData, Bone, MathUtils, Skeleton, Skin, Vector2 } from "@esotericsoftware/spine-core"; +import { + ComputedSizeMixin, + DepthMixin, + FlipMixin, + ScrollFactorMixin, + TransformMixin, + VisibleMixin, + AlphaMixin, + OriginMixin, +} from "./mixins"; +import { + AnimationState, + AnimationStateData, + Bone, + MathUtils, + Skeleton, + Skin, + Vector2, +} from "@esotericsoftware/spine-core"; class BaseSpineGameObject extends Phaser.GameObjects.GameObject { - constructor (scene: Phaser.Scene, type: string) { - super(scene, type); - } + constructor(scene: Phaser.Scene, type: string) { + super(scene, type); + } } /** A bounds provider calculates the bounding box for a skeleton, which is then assigned as the size of the SpineGameObject. */ export interface SpineGameObjectBoundsProvider { - // Returns the bounding box for the skeleton, in skeleton space. - calculateBounds (gameObject: SpineGameObject): { x: number, y: number, width: number, height: number }; + // Returns the bounding box for the skeleton, in skeleton space. + calculateBounds(gameObject: SpineGameObject): { + x: number; + y: number; + width: number; + height: number; + }; } /** A bounds provider that calculates the bounding box from the setup pose. */ export class SetupPoseBoundsProvider implements SpineGameObjectBoundsProvider { - calculateBounds (gameObject: SpineGameObject) { - if (!gameObject.skeleton) return { x: 0, y: 0, width: 0, height: 0 }; - // Make a copy of animation state and skeleton as this might be called while - // the skeleton in the GameObject has already been heavily modified. We can not - // reconstruct that state. - const skeleton = new Skeleton(gameObject.skeleton.data); - skeleton.setToSetupPose(); - skeleton.updateWorldTransform(); - const bounds = skeleton.getBoundsRect(); - return bounds.width == Number.NEGATIVE_INFINITY ? { x: 0, y: 0, width: 0, height: 0 } : bounds; - } + calculateBounds(gameObject: SpineGameObject) { + if (!gameObject.skeleton) return { x: 0, y: 0, width: 0, height: 0 }; + // Make a copy of animation state and skeleton as this might be called while + // the skeleton in the GameObject has already been heavily modified. We can not + // reconstruct that state. + const skeleton = new Skeleton(gameObject.skeleton.data); + skeleton.setToSetupPose(); + skeleton.updateWorldTransform(); + const bounds = skeleton.getBoundsRect(); + return bounds.width == Number.NEGATIVE_INFINITY + ? { x: 0, y: 0, width: 0, height: 0 } + : bounds; + } } /** A bounds provider that calculates the bounding box by taking the maximumg bounding box for a combination of skins and specific animation. */ -export class SkinsAndAnimationBoundsProvider implements SpineGameObjectBoundsProvider { - /** - * @param animation The animation to use for calculating the bounds. If null, the setup pose is used. - * @param skins The skins to use for calculating the bounds. If empty, the default skin is used. - * @param timeStep The time step to use for calculating the bounds. A smaller time step means more precision, but slower calculation. - */ - constructor (private animation: string | null, private skins: string[] = [], private timeStep: number = 0.05) { - } +export class SkinsAndAnimationBoundsProvider + implements SpineGameObjectBoundsProvider +{ + /** + * @param animation The animation to use for calculating the bounds. If null, the setup pose is used. + * @param skins The skins to use for calculating the bounds. If empty, the default skin is used. + * @param timeStep The time step to use for calculating the bounds. A smaller time step means more precision, but slower calculation. + */ + constructor( + private animation: string | null, + private skins: string[] = [], + private timeStep: number = 0.05 + ) {} - calculateBounds (gameObject: SpineGameObject): { x: number; y: number; width: number; height: number; } { - if (!gameObject.skeleton || !gameObject.animationState) return { x: 0, y: 0, width: 0, height: 0 }; - // Make a copy of animation state and skeleton as this might be called while - // the skeleton in the GameObject has already been heavily modified. We can not - // reconstruct that state. - const animationState = new AnimationState(gameObject.animationState.data); - const skeleton = new Skeleton(gameObject.skeleton.data); - const data = skeleton.data; - if (this.skins.length > 0) { - let customSkin = new Skin("custom-skin"); - for (const skinName of this.skins) { - const skin = data.findSkin(skinName); - if (skin == null) continue; - customSkin.addSkin(skin); - } - skeleton.setSkin(customSkin); - } - skeleton.setToSetupPose(); + calculateBounds(gameObject: SpineGameObject): { + x: number; + y: number; + width: number; + height: number; + } { + if (!gameObject.skeleton || !gameObject.animationState) + return { x: 0, y: 0, width: 0, height: 0 }; + // Make a copy of animation state and skeleton as this might be called while + // the skeleton in the GameObject has already been heavily modified. We can not + // reconstruct that state. + const animationState = new AnimationState(gameObject.animationState.data); + const skeleton = new Skeleton(gameObject.skeleton.data); + const data = skeleton.data; + if (this.skins.length > 0) { + let customSkin = new Skin("custom-skin"); + for (const skinName of this.skins) { + const skin = data.findSkin(skinName); + if (skin == null) continue; + customSkin.addSkin(skin); + } + skeleton.setSkin(customSkin); + } + skeleton.setToSetupPose(); - const animation = this.animation != null ? data.findAnimation(this.animation!) : null; - if (animation == null) { - skeleton.updateWorldTransform(); - const bounds = skeleton.getBoundsRect(); - return bounds.width == Number.NEGATIVE_INFINITY ? { x: 0, y: 0, width: 0, height: 0 } : bounds; - } else { - let minX = Number.POSITIVE_INFINITY, minY = Number.POSITIVE_INFINITY, maxX = Number.NEGATIVE_INFINITY, maxY = Number.NEGATIVE_INFINITY; - animationState.clearTracks(); - animationState.setAnimationWith(0, animation, false); - const steps = Math.max(animation.duration / this.timeStep, 1.0); - for (let i = 0; i < steps; i++) { - animationState.update(i > 0 ? this.timeStep : 0); - animationState.apply(skeleton); - skeleton.updateWorldTransform(); + const animation = + this.animation != null ? data.findAnimation(this.animation!) : null; + if (animation == null) { + skeleton.updateWorldTransform(); + const bounds = skeleton.getBoundsRect(); + return bounds.width == Number.NEGATIVE_INFINITY + ? { x: 0, y: 0, width: 0, height: 0 } + : bounds; + } else { + let minX = Number.POSITIVE_INFINITY, + minY = Number.POSITIVE_INFINITY, + maxX = Number.NEGATIVE_INFINITY, + maxY = Number.NEGATIVE_INFINITY; + animationState.clearTracks(); + animationState.setAnimationWith(0, animation, false); + const steps = Math.max(animation.duration / this.timeStep, 1.0); + for (let i = 0; i < steps; i++) { + animationState.update(i > 0 ? this.timeStep : 0); + animationState.apply(skeleton); + skeleton.updateWorldTransform(); - const bounds = skeleton.getBoundsRect(); - minX = Math.min(minX, bounds.x); - minY = Math.min(minY, bounds.y); - maxX = Math.max(maxX, minX + bounds.width); - maxY = Math.max(maxY, minY + bounds.height); - } - const bounds = { x: minX, y: minY, width: maxX - minX, height: maxY - minY }; - return bounds.width == Number.NEGATIVE_INFINITY ? { x: 0, y: 0, width: 0, height: 0 } : bounds; - } - } + const bounds = skeleton.getBoundsRect(); + minX = Math.min(minX, bounds.x); + minY = Math.min(minY, bounds.y); + maxX = Math.max(maxX, minX + bounds.width); + maxY = Math.max(maxY, minY + bounds.height); + } + const bounds = { + x: minX, + y: minY, + width: maxX - minX, + height: maxY - minY, + }; + return bounds.width == Number.NEGATIVE_INFINITY + ? { x: 0, y: 0, width: 0, height: 0 } + : bounds; + } + } } /** @@ -136,147 +184,215 @@ export class SkinsAndAnimationBoundsProvider implements SpineGameObjectBoundsPro * * See {@link skeletonToPhaserWorldCoordinates}, {@link phaserWorldCoordinatesToSkeleton}, and {@link phaserWorldCoordinatesToBoneLocal.} */ -export class SpineGameObject extends DepthMixin(OriginMixin(ComputedSizeMixin(FlipMixin(ScrollFactorMixin(TransformMixin(VisibleMixin(AlphaMixin(BaseSpineGameObject)))))))) { - blendMode = -1; - skeleton: Skeleton; - animationStateData: AnimationStateData; - animationState: AnimationState; - beforeUpdateWorldTransforms: (object: SpineGameObject) => void = () => { }; - afterUpdateWorldTransforms: (object: SpineGameObject) => void = () => { }; - private premultipliedAlpha = false; +export class SpineGameObject extends DepthMixin( + OriginMixin( + ComputedSizeMixin( + FlipMixin( + ScrollFactorMixin( + TransformMixin(VisibleMixin(AlphaMixin(BaseSpineGameObject))) + ) + ) + ) + ) +) { + blendMode = -1; + skeleton: Skeleton; + animationStateData: AnimationStateData; + animationState: AnimationState; + beforeUpdateWorldTransforms: (object: SpineGameObject) => void = () => {}; + afterUpdateWorldTransforms: (object: SpineGameObject) => void = () => {}; + private premultipliedAlpha = false; - constructor (scene: Phaser.Scene, private plugin: SpinePlugin, x: number, y: number, dataKey: string, atlasKey: string, public boundsProvider: SpineGameObjectBoundsProvider = new SetupPoseBoundsProvider()) { - super(scene, SPINE_GAME_OBJECT_TYPE); - this.setPosition(x, y); + constructor( + scene: Phaser.Scene, + private plugin: SpinePlugin, + x: number, + y: number, + dataKey: string, + atlasKey: string, + public boundsProvider: SpineGameObjectBoundsProvider = new SetupPoseBoundsProvider() + ) { + 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); - this.skeleton.updateWorldTransform(); - this.updateSize(); - } + 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); + this.skeleton.updateWorldTransform(); + this.updateSize(); + } - updateSize () { - if (!this.skeleton) return; - let bounds = this.boundsProvider.calculateBounds(this); - // For some reason the TS compiler and the ComputedSize mixin don't work well together and we have - // to cast to any. - let self = this as any; - self.width = bounds.width; - self.height = bounds.height; - this.displayOriginX = -bounds.x; - this.displayOriginY = -bounds.y; - } + updateSize() { + if (!this.skeleton) return; + let bounds = this.boundsProvider.calculateBounds(this); + // For some reason the TS compiler and the ComputedSize mixin don't work well together and we have + // to cast to any. + let self = this as any; + self.width = bounds.width; + self.height = bounds.height; + this.displayOriginX = -bounds.x; + this.displayOriginY = -bounds.y; + } - /** Converts a point from the skeleton coordinate system to the Phaser world coordinate system. */ - skeletonToPhaserWorldCoordinates (point: { x: number, y: number }) { - let transform = this.getWorldTransformMatrix(); - let a = transform.a, b = transform.b, c = transform.c, d = transform.d, tx = transform.tx, ty = transform.ty; - let x = point.x - let y = point.y - point.x = x * a + y * c + tx; - point.y = x * b + y * d + ty; - } + /** Converts a point from the skeleton coordinate system to the Phaser world coordinate system. */ + skeletonToPhaserWorldCoordinates(point: { x: number; y: number }) { + let transform = this.getWorldTransformMatrix(); + let a = transform.a, + b = transform.b, + c = transform.c, + d = transform.d, + tx = transform.tx, + ty = transform.ty; + let x = point.x; + let y = point.y; + point.x = x * a + y * c + tx; + point.y = x * b + y * d + ty; + } - /** Converts a point from the Phaser world coordinate system to the skeleton coordinate system. */ - phaserWorldCoordinatesToSkeleton (point: { x: number, y: number }) { - let transform = this.getWorldTransformMatrix(); - transform = transform.invert(); - let a = transform.a, b = transform.b, c = transform.c, d = transform.d, tx = transform.tx, ty = transform.ty; - let x = point.x - let y = point.y - point.x = x * a + y * c + tx; - point.y = x * b + y * d + ty; - } + /** Converts a point from the Phaser world coordinate system to the skeleton coordinate system. */ + phaserWorldCoordinatesToSkeleton(point: { x: number; y: number }) { + let transform = this.getWorldTransformMatrix(); + transform = transform.invert(); + let a = transform.a, + b = transform.b, + c = transform.c, + d = transform.d, + tx = transform.tx, + ty = transform.ty; + let x = point.x; + let y = point.y; + point.x = x * a + y * c + tx; + point.y = x * b + y * d + ty; + } - /** Converts a point from the Phaser world coordinate system to the bone's local coordinate system. */ - phaserWorldCoordinatesToBone (point: { x: number, y: number }, bone: Bone) { - this.phaserWorldCoordinatesToSkeleton(point); - if (bone.parent) { - bone.parent.worldToLocal(point as Vector2); - } else { - bone.worldToLocal(point as Vector2); - } - } + /** Converts a point from the Phaser world coordinate system to the bone's local coordinate system. */ + phaserWorldCoordinatesToBone(point: { x: number; y: number }, bone: Bone) { + this.phaserWorldCoordinatesToSkeleton(point); + if (bone.parent) { + bone.parent.worldToLocal(point as Vector2); + } else { + bone.worldToLocal(point as Vector2); + } + } - /** - * Updates the {@link AnimationState}, applies it to the {@link Skeleton}, then updates the world transforms of all bones. - * @param delta The time delta in milliseconds - */ - updatePose (delta: number) { - this.animationState.update(delta / 1000); - this.animationState.apply(this.skeleton); - this.beforeUpdateWorldTransforms(this); - this.skeleton.updateWorldTransform(); - this.afterUpdateWorldTransforms(this); - } + /** + * Updates the {@link AnimationState}, applies it to the {@link Skeleton}, then updates the world transforms of all bones. + * @param delta The time delta in milliseconds + */ + updatePose(delta: number) { + this.animationState.update(delta / 1000); + this.animationState.apply(this.skeleton); + this.beforeUpdateWorldTransforms(this); + this.skeleton.updateWorldTransform(); + this.afterUpdateWorldTransforms(this); + } - preUpdate (time: number, delta: number) { - if (!this.skeleton || !this.animationState) return; - this.updatePose(delta); - } + preUpdate(time: number, delta: number) { + if (!this.skeleton || !this.animationState) return; + this.updatePose(delta); + } - preDestroy () { - // FIXME tear down any event emitters - } + preDestroy() { + // FIXME tear down any event emitters + } - willRender (camera: Phaser.Cameras.Scene2D.Camera) { - if (!this.visible) return false; + willRender(camera: Phaser.Cameras.Scene2D.Camera) { + if (!this.visible) return false; - var GameObjectRenderMask = 0xf; - var result = (!this.skeleton || !(GameObjectRenderMask !== this.renderFlags || (this.cameraFilter !== 0 && (this.cameraFilter & camera.id)))); + var GameObjectRenderMask = 0xf; + var result = !this.skeleton || !(GameObjectRenderMask !== this.renderFlags || (this.cameraFilter !== 0 && this.cameraFilter & camera.id)); - return result; - } + if (!result && this.parentContainer && this.plugin.webGLRenderer) { + var sceneRenderer = this.plugin.webGLRenderer; - renderWebGL (renderer: Phaser.Renderer.WebGL.WebGLRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) { - if (!this.skeleton || !this.animationState || !this.plugin.webGLRenderer) return; + if (this.plugin.gl && this.plugin.phaserRenderer instanceof Phaser.Renderer.WebGL.WebGLRenderer && sceneRenderer.batcher.isDrawing) { + sceneRenderer.end(); + this.plugin.phaserRenderer.pipelines.rebind(); + } + } - let sceneRenderer = this.plugin.webGLRenderer; - if (renderer.newType) { - renderer.pipelines.clear(); - sceneRenderer.begin(); - } + return result; + } - camera.addToRenderList(src); - let transform = Phaser.GameObjects.GetCalcMatrix(src, camera, parentMatrix).calc; - let a = transform.a, b = transform.b, c = transform.c, d = transform.d, tx = transform.tx, ty = transform.ty; - sceneRenderer.drawSkeleton(this.skeleton, this.premultipliedAlpha, -1, -1, (vertices, numVertices, stride) => { - for (let i = 0; i < numVertices; i += stride) { - let vx = vertices[i]; - let vy = vertices[i + 1]; - vertices[i] = vx * a + vy * c + tx; - vertices[i + 1] = vx * b + vy * d + ty; - } - }); + renderWebGL( + renderer: Phaser.Renderer.WebGL.WebGLRenderer, + src: SpineGameObject, + camera: Phaser.Cameras.Scene2D.Camera, + parentMatrix: Phaser.GameObjects.Components.TransformMatrix + ) { + if (!this.skeleton || !this.animationState || !this.plugin.webGLRenderer) + return; - if (!renderer.nextTypeMatch) { - sceneRenderer.end(); - renderer.pipelines.rebind(); - } - } + let sceneRenderer = this.plugin.webGLRenderer; + if (renderer.newType) { + renderer.pipelines.clear(); + sceneRenderer.begin(); + } - renderCanvas (renderer: Phaser.Renderer.Canvas.CanvasRenderer, src: SpineGameObject, camera: Phaser.Cameras.Scene2D.Camera, parentMatrix: Phaser.GameObjects.Components.TransformMatrix) { - if (!this.skeleton || !this.animationState || !this.plugin.canvasRenderer) return; + camera.addToRenderList(src); + let transform = Phaser.GameObjects.GetCalcMatrix( + src, + camera, + parentMatrix + ).calc; + let a = transform.a, + b = transform.b, + c = transform.c, + d = transform.d, + tx = transform.tx, + ty = transform.ty; + sceneRenderer.drawSkeleton( + this.skeleton, + this.premultipliedAlpha, + -1, + -1, + (vertices, numVertices, stride) => { + for (let i = 0; i < numVertices; i += stride) { + let vx = vertices[i]; + let vy = vertices[i + 1]; + vertices[i] = vx * a + vy * c + tx; + vertices[i + 1] = vx * b + vy * d + ty; + } + } + ); - let context = renderer.currentContext; - let skeletonRenderer = this.plugin.canvasRenderer; - (skeletonRenderer as any).ctx = context; + if (!renderer.nextTypeMatch) { + sceneRenderer.end(); + renderer.pipelines.rebind(); + } + } - camera.addToRenderList(src); - let transform = Phaser.GameObjects.GetCalcMatrix(src, camera, parentMatrix).calc; - let skeleton = this.skeleton; - skeleton.x = transform.tx; - skeleton.y = transform.ty; - skeleton.scaleX = transform.scaleX; - skeleton.scaleY = transform.scaleY; - let root = skeleton.getRootBone()!; - root.rotation = -MathUtils.radiansToDegrees * transform.rotationNormalized; - this.skeleton.updateWorldTransform(); + renderCanvas( + renderer: Phaser.Renderer.Canvas.CanvasRenderer, + src: SpineGameObject, + camera: Phaser.Cameras.Scene2D.Camera, + parentMatrix: Phaser.GameObjects.Components.TransformMatrix + ) { + if (!this.skeleton || !this.animationState || !this.plugin.canvasRenderer) + return; - context.save(); - skeletonRenderer.draw(skeleton); - context.restore(); - } + let context = renderer.currentContext; + let skeletonRenderer = this.plugin.canvasRenderer; + (skeletonRenderer as any).ctx = context; + + camera.addToRenderList(src); + let transform = Phaser.GameObjects.GetCalcMatrix( + src, + camera, + parentMatrix + ).calc; + let skeleton = this.skeleton; + skeleton.x = transform.tx; + skeleton.y = transform.ty; + skeleton.scaleX = transform.scaleX; + skeleton.scaleY = transform.scaleY; + let root = skeleton.getRootBone()!; + root.rotation = -MathUtils.radiansToDegrees * transform.rotationNormalized; + this.skeleton.updateWorldTransform(); + + context.save(); + skeletonRenderer.draw(skeleton); + context.restore(); + } } diff --git a/spine-ts/spine-phaser/src/SpinePlugin.ts b/spine-ts/spine-phaser/src/SpinePlugin.ts index 7ce5c4515..d28a1334c 100644 --- a/spine-ts/spine-phaser/src/SpinePlugin.ts +++ b/spine-ts/spine-phaser/src/SpinePlugin.ts @@ -28,7 +28,7 @@ *****************************************************************************/ import Phaser from "phaser"; -import { SPINE_ATLAS_CACHE_KEY, SPINE_CONTAINER_TYPE, SPINE_GAME_OBJECT_TYPE, SPINE_SKELETON_DATA_FILE_TYPE, SPINE_ATLAS_FILE_TYPE, SPINE_SKELETON_FILE_CACHE_KEY as SPINE_SKELETON_DATA_CACHE_KEY } from "./keys"; +import { SPINE_ATLAS_CACHE_KEY, SPINE_GAME_OBJECT_TYPE, SPINE_SKELETON_DATA_FILE_TYPE, SPINE_ATLAS_FILE_TYPE, SPINE_SKELETON_FILE_CACHE_KEY as SPINE_SKELETON_DATA_CACHE_KEY } from "./keys"; import { AtlasAttachmentLoader, GLTexture, SceneRenderer, Skeleton, SkeletonBinary, SkeletonData, SkeletonJson, TextureAtlas } from "@esotericsoftware/spine-webgl" import { SpineGameObject, SpineGameObjectBoundsProvider } from "./SpineGameObject"; import { CanvasTexture, SkeletonRenderer } from "@esotericsoftware/spine-canvas"; @@ -74,9 +74,10 @@ export interface SpineGameObjectConfig extends Phaser.Types.GameObjects.GameObje export class SpinePlugin extends Phaser.Plugins.ScenePlugin { game: Phaser.Game; private isWebGL: boolean; - private gl: WebGLRenderingContext | null; + gl: WebGLRenderingContext | null; webGLRenderer: SceneRenderer | null; canvasRenderer: SkeletonRenderer | null; + phaserRenderer: Phaser.Renderer.Canvas.CanvasRenderer | Phaser.Renderer.WebGL.WebGLRenderer; private skeletonDataCache: Phaser.Cache.BaseCache; private atlasCache: Phaser.Cache.BaseCache; @@ -85,6 +86,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { this.game = pluginManager.game; this.isWebGL = this.game.config.renderType === 2; this.gl = this.isWebGL ? (this.game.renderer as Phaser.Renderer.WebGL.WebGLRenderer).gl : null; + this.phaserRenderer = this.game.renderer; this.webGLRenderer = null; this.canvasRenderer = null; this.skeletonDataCache = this.game.cache.addCustom(SPINE_SKELETON_DATA_CACHE_KEY); @@ -136,7 +138,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { } return Phaser.GameObjects.BuildGameObject(this.scene, gameObject, config); } - pluginManager.registerGameObject(SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject); + pluginManager.registerGameObject((window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE, addSpineGameObject, makeSpineGameObject); } boot () { @@ -186,8 +188,7 @@ export class SpinePlugin extends Phaser.Plugins.ScenePlugin { } gameDestroy () { - this.pluginManager.removeGameObject(SPINE_GAME_OBJECT_TYPE, true, true); - this.pluginManager.removeGameObject(SPINE_CONTAINER_TYPE, true, true); + this.pluginManager.removeGameObject((window as any).SPINE_GAME_OBJECT_TYPE ? (window as any).SPINE_GAME_OBJECT_TYPE : SPINE_GAME_OBJECT_TYPE, true, true); if (this.webGLRenderer) this.webGLRenderer.dispose(); } @@ -264,15 +265,13 @@ interface SpineSkeletonDataFileConfig { class SpineSkeletonDataFile extends Phaser.Loader.MultiFile { constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineSkeletonDataFileConfig, url?: string, public fileType?: SpineSkeletonDataFileType, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) { - if (typeof key !== "string") { - const config = key; - key = config.key; - url = config.url; + const config = key; + key = config.key; + url = config.url; fileType = config.type === "spineJson" ? SpineSkeletonDataFileType.json : SpineSkeletonDataFileType.binary; - xhrSettings = config.xhrSettings; - } - + xhrSettings = config.xhrSettings; + } let file = null; let isJson = fileType == SpineSkeletonDataFileType.json; if (isJson) { @@ -311,14 +310,13 @@ interface SpineAtlasFileConfig { class SpineAtlasFile extends Phaser.Loader.MultiFile { constructor (loader: Phaser.Loader.LoaderPlugin, key: string | SpineAtlasFileConfig, url?: string, public premultipliedAlpha: boolean = true, xhrSettings?: Phaser.Types.Loader.XHRSettingsObject) { - if (typeof key !== "string") { - const config = key; - key = config.key; - url = config.url; + const config = key; + key = config.key; + url = config.url; premultipliedAlpha = config.premultipliedAlpha ?? true; - xhrSettings = config.xhrSettings; - } + xhrSettings = config.xhrSettings; + } super(loader, SPINE_ATLAS_FILE_TYPE, key, [ new Phaser.Loader.FileTypes.TextFile(loader, { diff --git a/spine-ts/spine-phaser/src/keys.ts b/spine-ts/spine-phaser/src/keys.ts index c1761f2ea..f8d01d223 100644 --- a/spine-ts/spine-phaser/src/keys.ts +++ b/spine-ts/spine-phaser/src/keys.ts @@ -33,4 +33,3 @@ export const SPINE_LOADER_TYPE = "spine"; export const SPINE_SKELETON_DATA_FILE_TYPE = "spineSkeletonData"; export const SPINE_ATLAS_FILE_TYPE = "spineAtlasData"; export const SPINE_GAME_OBJECT_TYPE = "spine"; -export const SPINE_CONTAINER_TYPE = "spineContainer"; diff --git a/spine-ts/spine-threejs/example/index.html b/spine-ts/spine-threejs/example/index.html index ba95db20d..d6bf3daea 100644 --- a/spine-ts/spine-threejs/example/index.html +++ b/spine-ts/spine-threejs/example/index.html @@ -1,141 +1,150 @@ + + + spine-threejs + + + + + - canvas { - position: absolute; - width: 100%; - height: 100%; - } - + + - - - \ No newline at end of file + init(); + })(); + + + diff --git a/spine-ts/spine-threejs/example/logarithmic-depth-buffer.html b/spine-ts/spine-threejs/example/logarithmic-depth-buffer.html new file mode 100644 index 000000000..ff93dea22 --- /dev/null +++ b/spine-ts/spine-threejs/example/logarithmic-depth-buffer.html @@ -0,0 +1,186 @@ + + + + spine-threejs + + + + + + + + + + diff --git a/spine-ts/spine-threejs/src/SkeletonMesh.ts b/spine-ts/spine-threejs/src/SkeletonMesh.ts index de4476954..5769dc47f 100644 --- a/spine-ts/spine-threejs/src/SkeletonMesh.ts +++ b/spine-ts/spine-threejs/src/SkeletonMesh.ts @@ -27,16 +27,33 @@ * SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. *****************************************************************************/ -import { AnimationState, AnimationStateData, BlendMode, ClippingAttachment, Color, MeshAttachment, NumberArrayLike, RegionAttachment, Skeleton, SkeletonClipping, SkeletonData, TextureAtlasRegion, Utils, Vector2 } from "@esotericsoftware/spine-core"; +import { + AnimationState, + AnimationStateData, + BlendMode, + ClippingAttachment, + Color, + MeshAttachment, + NumberArrayLike, + RegionAttachment, + Skeleton, + SkeletonClipping, + SkeletonData, + TextureAtlasRegion, + Utils, + Vector2, +} from "@esotericsoftware/spine-core"; import { MeshBatcher } from "./MeshBatcher"; import * as THREE from "three"; import { ThreeJsTexture } from "./ThreeJsTexture"; -export type SkeletonMeshMaterialParametersCustomizer = (materialParameters: THREE.ShaderMaterialParameters) => void; +export type SkeletonMeshMaterialParametersCustomizer = ( + materialParameters: THREE.ShaderMaterialParameters +) => void; export class SkeletonMeshMaterial extends THREE.ShaderMaterial { - constructor (customizer: SkeletonMeshMaterialParametersCustomizer) { - let vertexShader = ` + constructor(customizer: SkeletonMeshMaterialParametersCustomizer) { + let vertexShader = ` attribute vec4 color; varying vec2 vUv; varying vec4 vColor; @@ -46,7 +63,7 @@ export class SkeletonMeshMaterial extends THREE.ShaderMaterial { gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); } `; - let fragmentShader = ` + let fragmentShader = ` uniform sampler2D map; #ifdef USE_SPINE_ALPHATEST uniform float alphaTest; @@ -61,212 +78,253 @@ export class SkeletonMeshMaterial extends THREE.ShaderMaterial { } `; - let parameters: THREE.ShaderMaterialParameters = { - uniforms: { - map: { value: null }, - }, - vertexShader: vertexShader, - fragmentShader: fragmentShader, - side: THREE.DoubleSide, - transparent: true, - depthWrite: false, - alphaTest: 0.0 - }; - customizer(parameters); - if (parameters.alphaTest && parameters.alphaTest > 0) { - parameters.defines = { "USE_SPINE_ALPHATEST": 1 }; - if (!parameters.uniforms) parameters.uniforms = {}; - parameters.uniforms["alphaTest"] = { value: parameters.alphaTest }; - } - super(parameters); - }; + let parameters: THREE.ShaderMaterialParameters = { + uniforms: { + map: { value: null }, + }, + vertexShader: vertexShader, + fragmentShader: fragmentShader, + side: THREE.DoubleSide, + transparent: true, + depthWrite: true, + alphaTest: 0.0, + }; + customizer(parameters); + if (parameters.alphaTest && parameters.alphaTest > 0) { + parameters.defines = { USE_SPINE_ALPHATEST: 1 }; + if (!parameters.uniforms) parameters.uniforms = {}; + parameters.uniforms["alphaTest"] = { value: parameters.alphaTest }; + } + super(parameters); + } } export class SkeletonMesh extends THREE.Object3D { - tempPos: Vector2 = new Vector2(); - tempUv: Vector2 = new Vector2(); - tempLight = new Color(); - tempDark = new Color(); - skeleton: Skeleton; - state: AnimationState; - zOffset: number = 0.1; + tempPos: Vector2 = new Vector2(); + tempUv: Vector2 = new Vector2(); + tempLight = new Color(); + tempDark = new Color(); + skeleton: Skeleton; + state: AnimationState; + zOffset: number = 0.1; - private batches = new Array(); - private nextBatchIndex = 0; - private clipper: SkeletonClipping = new SkeletonClipping(); + private batches = new Array(); + private nextBatchIndex = 0; + private clipper: SkeletonClipping = new SkeletonClipping(); - static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; - static VERTEX_SIZE = 2 + 2 + 4; + static QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0]; + static VERTEX_SIZE = 2 + 2 + 4; - private vertices = Utils.newFloatArray(1024); - private tempColor = new Color(); + private vertices = Utils.newFloatArray(1024); + private tempColor = new Color(); - constructor (skeletonData: SkeletonData, private materialCustomerizer: SkeletonMeshMaterialParametersCustomizer = (material) => { }) { - super(); + constructor( + skeletonData: SkeletonData, + private materialCustomerizer: SkeletonMeshMaterialParametersCustomizer = ( + material + ) => {} + ) { + super(); - this.skeleton = new Skeleton(skeletonData); - let animData = new AnimationStateData(skeletonData); - this.state = new AnimationState(animData); - } + this.skeleton = new Skeleton(skeletonData); + let animData = new AnimationStateData(skeletonData); + this.state = new AnimationState(animData); + } - update (deltaTime: number) { - let state = this.state; - let skeleton = this.skeleton; + update(deltaTime: number) { + let state = this.state; + let skeleton = this.skeleton; - state.update(deltaTime); - state.apply(skeleton); - skeleton.updateWorldTransform(); + state.update(deltaTime); + state.apply(skeleton); + skeleton.updateWorldTransform(); - this.updateGeometry(); - } + this.updateGeometry(); + } - dispose () { - for (var i = 0; i < this.batches.length; i++) { - this.batches[i].dispose(); - } - } + dispose() { + for (var i = 0; i < this.batches.length; i++) { + this.batches[i].dispose(); + } + } - private clearBatches () { - for (var i = 0; i < this.batches.length; i++) { - this.batches[i].clear(); - this.batches[i].visible = false; - } - this.nextBatchIndex = 0; - } + private clearBatches() { + for (var i = 0; i < this.batches.length; i++) { + this.batches[i].clear(); + this.batches[i].visible = false; + } + this.nextBatchIndex = 0; + } - private nextBatch () { - if (this.batches.length == this.nextBatchIndex) { - let batch = new MeshBatcher(10920, this.materialCustomerizer); - this.add(batch); - this.batches.push(batch); - } - let batch = this.batches[this.nextBatchIndex++]; - batch.visible = true; - return batch; - } + private nextBatch() { + if (this.batches.length == this.nextBatchIndex) { + let batch = new MeshBatcher(10920, this.materialCustomerizer); + this.add(batch); + this.batches.push(batch); + } + let batch = this.batches[this.nextBatchIndex++]; + batch.visible = true; + return batch; + } - private updateGeometry () { - this.clearBatches(); + private updateGeometry() { + this.clearBatches(); - let tempPos = this.tempPos; - let tempUv = this.tempUv; - let tempLight = this.tempLight; - let tempDark = this.tempDark; - let clipper = this.clipper; + let tempPos = this.tempPos; + let tempUv = this.tempUv; + let tempLight = this.tempLight; + let tempDark = this.tempDark; + let clipper = this.clipper; - let vertices: NumberArrayLike = this.vertices; - let triangles: Array | null = null; - let uvs: NumberArrayLike | null = null; - let drawOrder = this.skeleton.drawOrder; - let batch = this.nextBatch(); - batch.begin(); - let z = 0; - let zOffset = this.zOffset; - for (let i = 0, n = drawOrder.length; i < n; i++) { - let vertexSize = clipper.isClipping() ? 2 : SkeletonMesh.VERTEX_SIZE; - let slot = drawOrder[i]; - if (!slot.bone.active) { - clipper.clipEndWithSlot(slot); - continue; - } - let attachment = slot.getAttachment(); - let attachmentColor: Color | null; - let texture: ThreeJsTexture | null; - let numFloats = 0; - if (attachment instanceof RegionAttachment) { - let region = attachment; - attachmentColor = region.color; - vertices = this.vertices; - numFloats = vertexSize * 4; - region.computeWorldVertices(slot, vertices, 0, vertexSize); - triangles = SkeletonMesh.QUAD_TRIANGLES; - uvs = region.uvs; - texture = region.region!.texture; - } else if (attachment instanceof MeshAttachment) { - let mesh = attachment; - attachmentColor = mesh.color; - vertices = this.vertices; - numFloats = (mesh.worldVerticesLength >> 1) * vertexSize; - if (numFloats > vertices.length) { - vertices = this.vertices = Utils.newFloatArray(numFloats); - } - mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, vertexSize); - triangles = mesh.triangles; - uvs = mesh.uvs; - texture = mesh.region!.texture; - } else if (attachment instanceof ClippingAttachment) { - let clip = (attachment); - clipper.clipStart(slot, clip); - continue; - } else { - clipper.clipEndWithSlot(slot); - continue; - } + let vertices: NumberArrayLike = this.vertices; + let triangles: Array | null = null; + let uvs: NumberArrayLike | null = null; + let drawOrder = this.skeleton.drawOrder; + let batch = this.nextBatch(); + batch.begin(); + let z = 0; + let zOffset = this.zOffset; + for (let i = 0, n = drawOrder.length; i < n; i++) { + let vertexSize = clipper.isClipping() ? 2 : SkeletonMesh.VERTEX_SIZE; + let slot = drawOrder[i]; + if (!slot.bone.active) { + clipper.clipEndWithSlot(slot); + continue; + } + let attachment = slot.getAttachment(); + let attachmentColor: Color | null; + let texture: ThreeJsTexture | null; + let numFloats = 0; + if (attachment instanceof RegionAttachment) { + let region = attachment; + attachmentColor = region.color; + vertices = this.vertices; + numFloats = vertexSize * 4; + region.computeWorldVertices(slot, vertices, 0, vertexSize); + triangles = SkeletonMesh.QUAD_TRIANGLES; + uvs = region.uvs; + texture = region.region!.texture; + } else if (attachment instanceof MeshAttachment) { + let mesh = attachment; + attachmentColor = mesh.color; + vertices = this.vertices; + numFloats = (mesh.worldVerticesLength >> 1) * vertexSize; + if (numFloats > vertices.length) { + vertices = this.vertices = Utils.newFloatArray(numFloats); + } + mesh.computeWorldVertices( + slot, + 0, + mesh.worldVerticesLength, + vertices, + 0, + vertexSize + ); + triangles = mesh.triangles; + uvs = mesh.uvs; + texture = mesh.region!.texture; + } else if (attachment instanceof ClippingAttachment) { + let clip = attachment; + clipper.clipStart(slot, clip); + continue; + } else { + clipper.clipEndWithSlot(slot); + continue; + } - if (texture != null) { - let skeleton = slot.bone.skeleton; - let skeletonColor = skeleton.color; - let slotColor = slot.color; - let alpha = skeletonColor.a * slotColor.a * attachmentColor.a; - let color = this.tempColor; - color.set(skeletonColor.r * slotColor.r * attachmentColor.r, - skeletonColor.g * slotColor.g * attachmentColor.g, - skeletonColor.b * slotColor.b * attachmentColor.b, - alpha); + if (texture != null) { + let skeleton = slot.bone.skeleton; + let skeletonColor = skeleton.color; + let slotColor = slot.color; + let alpha = skeletonColor.a * slotColor.a * attachmentColor.a; + let color = this.tempColor; + color.set( + skeletonColor.r * slotColor.r * attachmentColor.r, + skeletonColor.g * slotColor.g * attachmentColor.g, + skeletonColor.b * slotColor.b * attachmentColor.b, + alpha + ); - let finalVertices: NumberArrayLike; - let finalVerticesLength: number; - let finalIndices: NumberArrayLike; - let finalIndicesLength: number; + let finalVertices: NumberArrayLike; + let finalVerticesLength: number; + let finalIndices: NumberArrayLike; + let finalIndicesLength: number; - if (clipper.isClipping()) { - clipper.clipTriangles(vertices, numFloats, triangles, triangles.length, uvs, color, tempLight, false); - let clippedVertices = clipper.clippedVertices; - let clippedTriangles = clipper.clippedTriangles; - finalVertices = clippedVertices; - finalVerticesLength = clippedVertices.length; - finalIndices = clippedTriangles; - finalIndicesLength = clippedTriangles.length; - } else { - let verts = vertices; - for (let v = 2, u = 0, n = numFloats; v < n; v += vertexSize, u += 2) { - verts[v] = color.r; - verts[v + 1] = color.g; - verts[v + 2] = color.b; - verts[v + 3] = color.a; - verts[v + 4] = uvs[u]; - verts[v + 5] = uvs[u + 1]; - } - finalVertices = vertices; - finalVerticesLength = numFloats; - finalIndices = triangles; - finalIndicesLength = triangles.length; - } + if (clipper.isClipping()) { + clipper.clipTriangles( + vertices, + numFloats, + triangles, + triangles.length, + uvs, + color, + tempLight, + false + ); + let clippedVertices = clipper.clippedVertices; + let clippedTriangles = clipper.clippedTriangles; + finalVertices = clippedVertices; + finalVerticesLength = clippedVertices.length; + finalIndices = clippedTriangles; + finalIndicesLength = clippedTriangles.length; + } else { + let verts = vertices; + for ( + let v = 2, u = 0, n = numFloats; + v < n; + v += vertexSize, u += 2 + ) { + verts[v] = color.r; + verts[v + 1] = color.g; + verts[v + 2] = color.b; + verts[v + 3] = color.a; + verts[v + 4] = uvs[u]; + verts[v + 5] = uvs[u + 1]; + } + finalVertices = vertices; + finalVerticesLength = numFloats; + finalIndices = triangles; + finalIndicesLength = triangles.length; + } - if (finalVerticesLength == 0 || finalIndicesLength == 0) { - clipper.clipEndWithSlot(slot); - continue; - } + if (finalVerticesLength == 0 || finalIndicesLength == 0) { + clipper.clipEndWithSlot(slot); + continue; + } - // Start new batch if this one can't hold vertices/indices - if (!batch.canBatch(finalVerticesLength / SkeletonMesh.VERTEX_SIZE, finalIndicesLength)) { - batch.end(); - batch = this.nextBatch(); - batch.begin(); - } + // Start new batch if this one can't hold vertices/indices + if ( + !batch.canBatch( + finalVerticesLength / SkeletonMesh.VERTEX_SIZE, + finalIndicesLength + ) + ) { + batch.end(); + batch = this.nextBatch(); + batch.begin(); + } - const slotBlendMode = slot.data.blendMode; - const slotTexture = texture.texture; - const materialGroup = batch.findMaterialGroup(slotTexture, slotBlendMode); + const slotBlendMode = slot.data.blendMode; + const slotTexture = texture.texture; + const materialGroup = batch.findMaterialGroup( + slotTexture, + slotBlendMode + ); - batch.addMaterialGroup(finalIndicesLength, materialGroup); - batch.batch(finalVertices, finalVerticesLength, finalIndices, finalIndicesLength, z); - z += zOffset; - } + batch.addMaterialGroup(finalIndicesLength, materialGroup); + batch.batch( + finalVertices, + finalVerticesLength, + finalIndices, + finalIndicesLength, + z + ); + z += zOffset; + } - clipper.clipEndWithSlot(slot); - } - clipper.clipEnd(); - batch.end(); - } + clipper.clipEndWithSlot(slot); + } + clipper.clipEnd(); + batch.end(); + } } diff --git a/spine-ts/spine-webgl/src/LoadingScreen.ts b/spine-ts/spine-webgl/src/LoadingScreen.ts index 4e74a8bec..19c3eb1f5 100644 --- a/spine-ts/spine-webgl/src/LoadingScreen.ts +++ b/spine-ts/spine-webgl/src/LoadingScreen.ts @@ -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(gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + renderer.batcher.setBlendMode(gl.ONE, gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); if (complete) { this.fadeOut += this.timeKeeper.delta * (this.timeKeeper.totalTime < 1 ? 2 : 1); diff --git a/spine-ts/spine-webgl/src/PolygonBatcher.ts b/spine-ts/spine-webgl/src/PolygonBatcher.ts index ac3aafae8..3ce608348 100644 --- a/spine-ts/spine-webgl/src/PolygonBatcher.ts +++ b/spine-ts/spine-webgl/src/PolygonBatcher.ts @@ -39,7 +39,7 @@ export class PolygonBatcher implements Disposable { private context: ManagedWebGLRenderingContext; private drawCalls = 0; private static globalDrawCalls = 0; - private isDrawing = false; + isDrawing = false; private mesh: Mesh; private shader: Shader | null = null; private lastTexture: GLTexture | null = null; @@ -47,7 +47,8 @@ export class PolygonBatcher implements Disposable { private indicesLength = 0; private srcColorBlend: number; private srcAlphaBlend: number; - private dstBlend: number; + private dstColorBlend: number; + private dstAlphaBlend: number; private cullWasEnabled = false; constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, twoColorTint: boolean = true, maxVertices: number = 10920) { @@ -60,7 +61,8 @@ export class PolygonBatcher implements Disposable { let gl = this.context.gl; this.srcColorBlend = gl.SRC_ALPHA; this.srcAlphaBlend = gl.ONE; - this.dstBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstColorBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstAlphaBlend = gl.ONE_MINUS_SRC_ALPHA; } begin (shader: Shader) { @@ -72,7 +74,7 @@ export class PolygonBatcher implements Disposable { let gl = this.context.gl; gl.enable(gl.BLEND); - gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend); + gl.blendFuncSeparate(this.srcColorBlend, this.dstColorBlend, this.srcAlphaBlend, this.dstAlphaBlend); if (PolygonBatcher.disableCulling) { this.cullWasEnabled = gl.isEnabled(gl.CULL_FACE); @@ -80,15 +82,16 @@ export class PolygonBatcher implements Disposable { } } - setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) { - if (this.srcColorBlend == srcColorBlend && this.srcAlphaBlend == srcAlphaBlend && this.dstBlend == dstBlend) return; + setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstColorBlend: number, dstAlphaBlend: number) { + if (this.srcColorBlend == srcColorBlend && this.srcAlphaBlend == srcAlphaBlend && this.dstColorBlend == dstColorBlend && this.dstAlphaBlend == dstAlphaBlend) return; this.srcColorBlend = srcColorBlend; this.srcAlphaBlend = srcAlphaBlend; - this.dstBlend = dstBlend; + this.dstColorBlend = dstColorBlend; + this.dstAlphaBlend = dstAlphaBlend; if (this.isDrawing) { this.flush(); let gl = this.context.gl; - gl.blendFuncSeparate(srcColorBlend, dstBlend, srcAlphaBlend, dstBlend); + gl.blendFuncSeparate(srcColorBlend, dstColorBlend, srcAlphaBlend, dstAlphaBlend); } } diff --git a/spine-ts/spine-webgl/src/ShapeRenderer.ts b/spine-ts/spine-webgl/src/ShapeRenderer.ts index 1bb7c066e..240e86320 100644 --- a/spine-ts/spine-webgl/src/ShapeRenderer.ts +++ b/spine-ts/spine-webgl/src/ShapeRenderer.ts @@ -43,7 +43,8 @@ export class ShapeRenderer implements Disposable { private tmp = new Vector2(); private srcColorBlend: number; private srcAlphaBlend: number; - private dstBlend: number; + private dstColorBlend: number; + private dstAlphaBlend: number; constructor (context: ManagedWebGLRenderingContext | WebGLRenderingContext, maxVertices: number = 10920) { if (maxVertices > 10920) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); @@ -52,7 +53,8 @@ export class ShapeRenderer implements Disposable { let gl = this.context.gl; this.srcColorBlend = gl.SRC_ALPHA; this.srcAlphaBlend = gl.ONE; - this.dstBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstColorBlend = gl.ONE_MINUS_SRC_ALPHA; + this.dstAlphaBlend = gl.ONE_MINUS_SRC_ALPHA; } begin (shader: Shader) { @@ -63,17 +65,18 @@ export class ShapeRenderer implements Disposable { let gl = this.context.gl; gl.enable(gl.BLEND); - gl.blendFuncSeparate(this.srcColorBlend, this.dstBlend, this.srcAlphaBlend, this.dstBlend); + gl.blendFuncSeparate(this.srcColorBlend, this.dstColorBlend, this.srcAlphaBlend, this.dstAlphaBlend); } - setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstBlend: number) { + setBlendMode (srcColorBlend: number, srcAlphaBlend: number, dstColorBlend: number, dstAlphaBlend: number) { this.srcColorBlend = srcColorBlend; this.srcAlphaBlend = srcAlphaBlend; - this.dstBlend = dstBlend; + this.dstColorBlend = dstColorBlend; + this.dstAlphaBlend = dstAlphaBlend; if (this.isDrawing) { this.flush(); let gl = this.context.gl; - gl.blendFuncSeparate(srcColorBlend, dstBlend, srcAlphaBlend, dstBlend); + gl.blendFuncSeparate(srcColorBlend, dstColorBlend, srcAlphaBlend, dstAlphaBlend); } } diff --git a/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts b/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts index ed71b5c7a..7273b6d2b 100644 --- a/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts +++ b/spine-ts/spine-webgl/src/SkeletonDebugRenderer.ts @@ -67,7 +67,7 @@ export class SkeletonDebugRenderer implements Disposable { let skeletonY = skeleton.y; let gl = this.context.gl; let srcFunc = this.premultipliedAlpha ? gl.ONE : gl.SRC_ALPHA; - shapes.setBlendMode(srcFunc, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); + shapes.setBlendMode(srcFunc, gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); let bones = skeleton.bones; if (this.drawBones) { diff --git a/spine-ts/spine-webgl/src/SkeletonRenderer.ts b/spine-ts/spine-webgl/src/SkeletonRenderer.ts index 73b4fc09c..bded0dd82 100644 --- a/spine-ts/spine-webgl/src/SkeletonRenderer.ts +++ b/spine-ts/spine-webgl/src/SkeletonRenderer.ts @@ -168,8 +168,9 @@ export class SkeletonRenderer { blendMode = slotBlendMode; batcher.setBlendMode( WebGLBlendModeConverter.getSourceColorGLBlendMode(blendMode, premultipliedAlpha), - WebGLBlendModeConverter.getSourceAlphaGLBlendMode(blendMode), - WebGLBlendModeConverter.getDestGLBlendMode(blendMode)); + WebGLBlendModeConverter.getSourceAlphaGLBlendMode(blendMode, premultipliedAlpha), + WebGLBlendModeConverter.getDestColorGLBlendMode(blendMode), + WebGLBlendModeConverter.getDestAlphaGLBlendMode(blendMode, premultipliedAlpha) ); } if (clipper.isClipping()) { diff --git a/spine-ts/spine-webgl/src/WebGL.ts b/spine-ts/spine-webgl/src/WebGL.ts index 5f21980ec..ad7326808 100644 --- a/spine-ts/spine-webgl/src/WebGL.ts +++ b/spine-ts/spine-webgl/src/WebGL.ts @@ -71,6 +71,7 @@ const ONE_MINUS_DST_ALPHA = 0x0305; const DST_COLOR = 0x0306; export class WebGLBlendModeConverter { + static getDestGLBlendMode (blendMode: BlendMode) { switch (blendMode) { case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; @@ -81,22 +82,42 @@ export class WebGLBlendModeConverter { } } + static getDestColorGLBlendMode (blendMode: BlendMode) { + switch (blendMode) { + case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Additive: return ONE; + case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Screen: return ONE_MINUS_SRC_COLOR; + default: throw new Error("Unknown blend mode: " + blendMode); + } + } + + static getDestAlphaGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { + switch (blendMode) { + case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Additive: return premultipliedAlpha ? ONE_MINUS_SRC_ALPHA : ONE; + case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA; + case BlendMode.Screen: return ONE_MINUS_SRC_ALPHA; + default: throw new Error("Unknown blend mode: " + blendMode); + } + } + static getSourceColorGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { switch (blendMode) { case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Multiply: return DST_COLOR; - case BlendMode.Screen: return ONE; + case BlendMode.Screen: return premultipliedAlpha ? ONE : SRC_ALPHA; default: throw new Error("Unknown blend mode: " + blendMode); } } - static getSourceAlphaGLBlendMode (blendMode: BlendMode) { + static getSourceAlphaGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) { switch (blendMode) { - case BlendMode.Normal: return ONE; - case BlendMode.Additive: return ONE; - case BlendMode.Multiply: return ONE_MINUS_SRC_ALPHA; - case BlendMode.Screen: return ONE_MINUS_SRC_COLOR; + case BlendMode.Normal: return premultipliedAlpha ? SRC_ALPHA : ONE; + case BlendMode.Additive: return premultipliedAlpha ? SRC_ALPHA : ONE; + case BlendMode.Multiply: return ONE; + case BlendMode.Screen: return ONE; default: throw new Error("Unknown blend mode: " + blendMode); } } diff --git a/spine-ue4/Source/SpineUE4/SpineboyCppPawn.cpp b/spine-ue4/Source/SpineUE4/SpineboyCppPawn.cpp index 395ffcd07..4fd635be0 100644 --- a/spine-ue4/Source/SpineUE4/SpineboyCppPawn.cpp +++ b/spine-ue4/Source/SpineUE4/SpineboyCppPawn.cpp @@ -14,15 +14,15 @@ ASpineboyCppPawn::ASpineboyCppPawn() { // Called when the game starts or when spawned void ASpineboyCppPawn::BeginPlay() { Super::BeginPlay(); - USpineSkeletonAnimationComponent *animation = FindComponentByClass(); - animation->SetAnimation(0, FString("walk"), true); + USpineSkeletonAnimationComponent *animationComponent = FindComponentByClass(); + animationComponent->SetAnimation(0, FString("walk"), true); } // Called every frame void ASpineboyCppPawn::Tick(float DeltaTime) { Super::Tick(DeltaTime); - USpineSkeletonAnimationComponent *animation = FindComponentByClass(); - spine::AnimationState *state = animation->GetAnimationState(); + USpineSkeletonAnimationComponent *animationComponent = FindComponentByClass(); + spine::AnimationState *state = animationComponent->GetAnimationState(); spine::TrackEntry *entry = state->getCurrent(0); if (entry) { GEngine->AddOnScreenDebugMessage(-1, 0.5f, FColor::Yellow, FString(entry->getAnimation()->getName().buffer()));