Как в PIXI JS создать спрайт из Graphics?

Question

[pshevnin]

Здравствуйте, создаю Sprite с текстурой из атрибута Graphics в PIXI JS. Ошибок в консоли нет, но ничего не выводится на экран. Вот код:

//Aplikace

const app = new PIXI.Application({
    backgroundColor: 0xFFFFFF
});
document.body.appendChild(app.view);


let renderer = PIXI.autoDetectRenderer();

generateNewSprite();

function generateNewSprite(){
    // Rectangle + line style 1

    var graphics = new PIXI.Graphics();
    graphics.lineStyle(2, 0xff0000, 1);
    graphics.beginFill(0x650A5A);
    graphics.drawRoundedRect(10, 10, 100, 100);
    graphics.endFill();
    let texture = renderer.generateTexture(graphics);
    texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
    const sprite = new PIXI.Sprite(texture);

    
    sprite.anchor.set(0.5);

    
    sprite.scale.set(3);

    sprite.x = 0;
    sprite.y = 0;

    console.log("sprite x = " + sprite.x);


    // add it to the stage
    app.stage.addChild(sprite);

}

в чём ошибка? Спасибо за ответ!

Answer 1

[StepsOnes]

Проблема может быть в использовании PIXI.autoDetectRenderer() и неинициализированном renderer. Насколько я понимаю, вы используете app для отрисовки спрайта и не должны использовать `renderer`, чтобы генерировать текстуру. Вместо этого вы можете использовать app.renderer, чтобы получить объект PIXI.Renderer.

Попробуйте заменить renderer.generateTexture(graphics) на app.renderer.generateTexture(graphics). Должно выглядеть так:

const app = new PIXI.Application({
    backgroundColor: 0xFFFFFF
});

document.body.appendChild(app.view);

generateNewSprite();

function generateNewSprite() {
    // Rectangle + line style 1

    var graphics = new PIXI.Graphics();
    graphics.lineStyle(2, 0xff0000, 1);
    graphics.beginFill(0x650A5A);
    graphics.drawRoundedRect(10, 10, 100, 100);
    graphics.endFill();
    let texture = app.renderer.generateTexture(graphics);
    texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
    const sprite = new PIXI.Sprite(texture);

    sprite.anchor.set(0.5);
    sprite.scale.set(3);
    sprite.x = 0;
    sprite.y = 0;

    console.log("sprite x = " + sprite.x);

    // add it to the stage
    app.stage.addChild(sprite);
}

Это должно работать и отобразить на экране ваш спрайт, основанный на PIXI.Graphics