UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][pixi-v8] Moved state.apply and UWT right after time updates. (#2679)

Browse Source
This commit is contained in:
Davide 2024-11-13 09:14:28 +01:00 committed by GitHub
parent 6ab5ddf92d
commit 8a8fc74f8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 50 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
spine-ts/spine-pixi-v8/example/control-bones-example.html
View File

@ -53,12 +53,12 @@
// from one animation to the next.
stretchyman.state.data.defaultMix = 0.2;
// Set animation "run" on track 0, looped.
stretchyman.state.setAnimation(0, "idle", true);
// Center the spine object on screen.
stretchyman.x = window.innerWidth / 2;
stretchyman.y = window.innerHeight / 2 + stretchyman.getBounds().height / 2;
// Set animation "run" on track 0, looped.
stretchyman.state.setAnimation(0, "idle", true);
app.stage.addChild(stretchyman);
const controlBoneNames = [

6
spine-ts/spine-pixi-v8/example/index.html
View File

@ -36,13 +36,13 @@
// from one animation to the next.
spineboy.state.data.defaultMix = 0.2;
// Set animation "run" on track 0, looped.
spineboy.state.setAnimation(0, "run", true);
// Center the spine object on screen.
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
// Set animation "run" on track 0, looped.
spineboy.state.setAnimation(0, "run", true);
// Add the display object to the stage.
app.stage.addChild(spineboy);
})();

6
spine-ts/spine-pixi-v8/example/manual-loading.html
View File

@ -43,13 +43,13 @@
// from one animation to the next.
spineboy.state.data.defaultMix = 0.2;
// Set animation "run" on track 0, looped.
spineboy.state.setAnimation(0, "run", true);
// Center the spine object on screen.
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
// Set animation "run" on track 0, looped.
spineboy.state.setAnimation(0, "run", true);
// Add the display object to the stage.
app.stage.addChild(spineboy);
})();

8
spine-ts/spine-pixi-v8/example/mouse-following.html
View File

@ -36,14 +36,14 @@
// from one animation to another.
spineboy.state.data.defaultMix = 0.2;
// Center the Spine object on screen.
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
// Set looping animations "idle" on track 0 and "aim" on track 1.
spineboy.state.setAnimation(0, "idle", true);
spineboy.state.setAnimation(1, "aim", true);
// Center the Spine object on screen.
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
// Add the display object to the stage.
app.stage.addChild(spineboy);
app.stage.hitArea = new PIXI.Rectangle(0, 0, app.view.width, app.view.height);

7
spine-ts/spine-pixi-v8/example/slot-objects.html
View File

@ -35,13 +35,13 @@
// from one animation to the next.
spineboy.state.data.defaultMix = 0.2;
// Set animation "run" on track 0, looped.
spineboy.state.setAnimation(0, "walk", true);
// Center the spine object on screen.
spineboy.x = window.innerWidth / 2;
spineboy.y = window.innerHeight / 2 + spineboy.getBounds().height / 2;
// Set animation "run" on track 0, looped.
spineboy.state.setAnimation(0, "walk", true);
// Add the display object to the stage.
app.stage.addChild(spineboy);
@ -126,6 +126,7 @@
// for clipping attachments having slot objects
setTimeout(() => {
spineboy.state.setAnimation(0, "portal", true)
spineboy.update(0)
const tooth3 = PIXI.Sprite.from('raptor_jaw');
tooth3.scale.set(2);
tooth3.x = -60;

60
spine-ts/spine-pixi-v8/src/Spine.ts
View File

@ -232,6 +232,7 @@ export class Spine extends ViewContainer {
this._autoUpdate = value;
}
private hasNeverUpdated = true;
constructor (options: SpineOptions | SkeletonData) {
if (options instanceof SkeletonData) {
options = {
@ -257,8 +258,6 @@ export class Spine extends ViewContainer {
for (let i = 0; i < slots.length; i++) {
this.attachmentCacheData[i] = Object.create(null);
}
this._updateState(0);
}
/** If {@link Spine.autoUpdate} is `false`, this method allows to update the AnimationState and the Skeleton with the given delta. */
@ -274,7 +273,7 @@ export class Spine extends ViewContainer {
protected internalUpdate (_deltaFrame: any, deltaSeconds?: number): void {
// Because reasons, pixi uses deltaFrames at 60fps.
// We ignore the default deltaFrames and use the deltaSeconds from pixi ticker.
this._updateState(deltaSeconds ?? Ticker.shared.deltaMS / 1000);
this._updateAndApplyState(deltaSeconds ?? Ticker.shared.deltaMS / 1000);
}
get bounds () {
@ -343,36 +342,17 @@ export class Spine extends ViewContainer {
}
/**
* Will update the state based on the specified time, this will not apply the state to the skeleton
* as this is differed until the `applyState` method is called.
* Advance the state and skeleton by the given time, then update slot objects too.
* The container transform is not updated.
*
* @param time the time at which to set the state
* @internal
*/
_updateState (time: number) {
private _updateAndApplyState (time: number) {
this.hasNeverUpdated = false;
this.state.update(time);
this.skeleton.update(time);
this._stateChanged = true;
this._boundsDirty = true;
this.onViewUpdate();
}
/**
* Applies the state to this spine instance.
* - updates the state to the skeleton
* - updates its world transform (spine world transform)
* - validates the attachments - to flag if the attachments have changed this state
* - transforms the attachments - to update the vertices of the attachments based on the new positions
* - update the slot attachments - to update the position, rotation, scale, and visibility of the attached containers
* @internal
*/
_applyState () {
if (!this._stateChanged) return;
this._stateChanged = false;
const { skeleton } = this;
this.state.apply(skeleton);
@ -381,11 +361,27 @@ export class Spine extends ViewContainer {
skeleton.updateWorldTransform(Physics.update);
this.afterUpdateWorldTransforms(this);
this.updateSlotObjects();
this._stateChanged = true;
this._boundsDirty = true;
this.onViewUpdate();
}
/**
* - validates the attachments - to flag if the attachments have changed this state
* - transforms the attachments - to update the vertices of the attachments based on the new positions
* @internal
*/
_validateAndTransformAttachments () {
if (!this._stateChanged) return;
this._stateChanged = false;
this.validateAttachments();
this.transformAttachments();
this.updateSlotObjects();
}
private validateAttachments () {
@ -802,7 +798,11 @@ export class Spine extends ViewContainer {
skeletonBounds.update(this.skeleton, true);
if (skeletonBounds.minX === Infinity) {
this._applyState();
if (this.hasNeverUpdated) {
this._updateAndApplyState(0);
this._boundsDirty = false;
}
this._validateAndTransformAttachments();
const drawOrder = this.skeleton.drawOrder;
const bounds = this._bounds;

6
spine-ts/spine-pixi-v8/src/SpinePipe.ts
View File

@ -66,7 +66,7 @@ export class SpinePipe implements RenderPipe<Spine> {
}
validateRenderable (spine: Spine): boolean {
spine._applyState();
spine._validateAndTransformAttachments();
// if pine attachments have changed, we need to rebuild the batch!
if (spine.spineAttachmentsDirty) {
@ -109,7 +109,7 @@ export class SpinePipe implements RenderPipe<Spine> {
const roundPixels = (this.renderer._roundPixels | spine._roundPixels) as 0 | 1;
spine._applyState();
spine._validateAndTransformAttachments();
for (let i = 0, n = drawOrder.length; i < n; i++) {
const slot = drawOrder[i];
@ -148,7 +148,7 @@ export class SpinePipe implements RenderPipe<Spine> {
// we assume that spine will always change its verts size..
const gpuSpine = this.gpuSpineData[spine.uid];
spine._applyState();
spine._validateAndTransformAttachments();
const drawOrder = spine.skeleton.drawOrder;