Как динамически изменить текстуру PIXI.Sprite, когда PIXI.Sprite достигает определенной позиции - Pixi.js? - PullRequest
Новая
       31

Как динамически изменить текстуру PIXI.Sprite, когда PIXI.Sprite достигает определенной позиции - Pixi.js?

0 голосов
/ 02 октября 2019

У меня есть класс, который расширяет PIXI.Sprite. Здесь я создаю спрайт изначально. Текстура, которую я использую, является таблицей спрайтов, и я создаю спрайты из случайных секций этого spritesheet.png, создавая случайные рамки для текстуры. Там я добавляю 10000 спрайтов и перемещаю их в случайных направлениях. Затем я добавляю класс PIXI.Sprite в другой класс, который расширяет PIXI.ParticleContainer в 10000 раз. 

 createTexture() {
    this.textureWidth = 2048;
    this.rectX = () => {
        let number;
        while (number % 32 !== 0) number = Math.floor(Math.random() * this.textureWidth) + 0;
        return number;
    }
    this.rectY = () => {
        let number;
        while (number % 32 !== 0) number = Math.floor(Math.random() * 128) + 0;
        return number;
    }
    this.initialTexture = PIXI.Texture.from(this.resources[assets.images[0].src].name);
    this.rectangle = new PIXI.Rectangle(this.rectX(), this.rectY(), 32, 32);
    this.initialTexture.frame = this.rectangle;
    this.texture = new PIXI.Texture(this.initialTexture.baseTexture, this.initialTexture.frame);
    this.texture.requiresUpdate = true;
    this.texture.updateUvs();
    this.timesChangedVy = 0;
}

Когда Sprite попадает в границы окна, я вызываю текстуру изменения метода в классе PIXI.Sprite: 

changeTexture() {
    let newTexture = PIXI.Texture.from(this.resources[assets.images[0].src].name);
    let rectangle = new PIXI.Rectangle(this.rectX(), this.rectY(), 32, 32);
    newTexture.frame = rectangle;
    // this.texture.frame = rectangle
    this.texture = newTexture;
    // this.texture = new PIXI.Texture.from(this.resources[assets.images[0].src].name)
    // this.texture._frame = rectangle
    // this.texture.orig = rectangle
    // this._texture = newTexture
    // this.texture = new PIXI.Texture(newTexture.baseTexture, rectangle)
    this.texture.update()
    this.texture.requiresUpdate = true;
    this.texture.updateUvs();
}

Я пробовал разные подходы. Когда я изменяю текстуру console.log после ее изменения, я вижу, что рамка и происхождение были изменены, но новая текстура не отображается.

Кто-нибудь знает, где находится проблема и как я могу ее исправить?

1 Ответ

0 голосов
/ 03 октября 2019

Наконец, я нашел причину, по которой мои спрайты не обновляются при изменении текстуры. Это потому, что я добавляю их как дочерние элементы Pixi.ParticleContainer, который имеет меньшую функциональность, чем Pixi.Container и по умолчанию не обновляет Uvs дочерних элементов. РЕШЕНИЕ - УСТАНОВИТЬ uvs в true при создании PIXI.ParticleContainer. Это выглядит так: новый PIXI.ParticleContainer (10000, {uvs: true}). Это решит проблему изменения текстур, которые не обновляются, и uvs будут загружены и применены. https://pixijs.download/dev/docs/PIXI.ParticleContainer.html

...