Как загрузить текстуру на canvas при помощи PIXI.js?

Question

[Павел Михаловский]

Пытаюсь загрузить тексутру, она в папке рядом со скриптом. Выполняю при помощи nodejs, использую фреймворк vue. Получается только поменять цвет фона у canvas.

var canvas = this.$refs['canvas']
    var renderer = new PIXI.CanvasRenderer(this.$refs['canvas'].width, this.$refs['canvas'].height, {view: canvas})
    renderer.backgroundColor = 0x061639
    var stage = new PIXI.Container()
    var texture = PIXI.Texture.fromImage('HertzLamp.png')
    console.log(texture)
    var lamp = new PIXI.Sprite(texture)
    stage.addChild(lamp)
    renderer.render(stage)

Answer 1

[Aleksey Solovyev]

В пикcи есть удобный PIXI.loaders

const loader = PIXI.loader;

loader
  .add('first', '1.jpg')
  .add('second', '2.jpg');

loader.load((loader, resources) => {
  let scene = new PIXI.Container();

  let bg = new PIXI.Sprite(resources.first.texture);

  bg.anchor.x = 0.5;
  bg.anchor.y = 0.5;
  bg.position.x = renderer.width / 2; 
  bg.position.y = renderer.height / 2;

  scene.addChild(bg);
  renderer.render(scene);
}