Как заставить Pixi Particles вести себя правильно, если он задан как дочерний элемент слота внутри анимации позвоночника

Question

protected createParticleAnimation ( data: IAnticipationParticle ): particles.Emitter {
    let particleResource = PIXI.loader.resources[ data.name ].data;
    let particleImages: Array<Texture> = new Array<Texture>();

    let container = new particles.ParticleContainer();
    container.scale.set( 1, -1 );
    let spineAnim = this.anticipationAnimations[ 0 ] as spine.Spine;

    spineAnim.slotContainers.forEach( ( slotContainer: Container ) => {
        if ( slotContainer.name == 'CoinParticles' ) {
            container.position.set( slotContainer.children[ 0 ].x * 2, slotContainer.children[ 0 ].y * 2 );
            slotContainer.addChild( container );
            return;
        }
    } );

    data.images.forEach( ( image: string ) => {
        particleImages.push( PIXI.Texture.fromImage( image ) );
    } );

    let animation = new PIXI.particles.Emitter(
        container,
        particleImages,
        particleResource
    );
    animation.emit = false;
    animation.autoUpdate = true;

    return animation;
}

Поэтому я создаю свою анимацию позвоночника в другой функции, затем создаю эффект частиц, как показано выше, и присоединяю его к slotContainer внутри моей анимации позвоночника. Но когда играет моя анимация позвоночника, частицы всегда следуют позиции родителей и не сохраняют свои мировые координаты.

Я считаю, что это из-за позвоночника, но есть ли у кого-нибудь идеи о том, как обойти это?

Так, например, когда эмиттер перемещает частицы, которые уже были сгенерированы, следуют за позицией х эмиттера

Answer 1

Поэтому мне пришлось переопределить метод updateTransform контейнера pixi.

Я передал эмиттер контейнеру, чтобы он мог обновить свое преобразование. Мне нужно было рассчитать исходную точку спрайта, когда я это сделал. Это нужно вызывать после создания эмиттера, потому что контейнер должен быть передан в создание эмиттера.

Затем вам нужно переместить преобразование контейнеров туда, где оно было изначально, чтобы дети (частицы) могли вести себя правильно. Затем вы перемещаете позицию появления излучателей вместе с родителем.

import { particles, Point } from 'pixi.js';

/**
 * A container to be used when attaching a particle emitter to a spine animation
 */
export class SpineParticleContainer extends particles.ParticleContainer {

    /**The emitter that is drawning to the container */
    protected emitter: particles.Emitter;

    /**The original position of the sprite when the emitter is set */
    protected origin: Point;

    constructor () {
        super();
    }

    /**
     * Sets the containers emittter so it can update the emitters position
     * @param emiter The particle emitter to pass in, this should be the particle emitter assigned to this container already
     */
    public setEmitter ( emiter: particles.Emitter ): void {
        this.emitter = emiter;
        this.origin = new Point( this.parent.worldTransform.tx, this.parent.worldTransform.ty );
    }

    /**Override update transform to reposition the container at its origin position and move the emitter along with the animation */
    public updateTransform () {
        this._boundsID++;
        this.worldAlpha = this.alpha * this.parent.worldAlpha;

        let position = new Point( this.parent.worldTransform.tx, this.parent.worldTransform.ty );
        let newPosition = new Point( this.origin.x - position.x, this.origin.y - position.y );
        this.position.set( newPosition.x, newPosition.y );
        this.transform.updateTransform( this.parent.transform );
        for ( let i = 0, j = this.children.length; i < j; i++ ) {
            const child = this.children[ i ];

            if ( child.visible ) {
                child.updateTransform();
            }
        }

        this.emitter.spawnPos.set( this.parent.worldTransform.tx, this.parent.worldTransform.ty );
    }
}