CODEWITHSUNDEEP
pixi.js
Ray
Ray

Reputation: 99

PIXI V5 PIXI.Loader() Can't not add to image container

I uses PIXI V5, but Can't not add to image container ...

const app = new PIXI.Application({
  view: document.getElementById('main'),
});

const container = new PIXI.Container();
app.stage.addChild(container);


const loader = new PIXI.Loader();
loader
  .add('imgtest','https://fakeimg.pl/100/')
  .load((loader, resources) => {
    const sprite = new PIXI.Sprite(loader.resources.imgtest.texture);
    container.addChild(sprite);
  });

I Try console.log(loader.resources.imgtest.texture) is undefined...

Upvotes: 0

Views: 4276

Answers (2)

Ivan Dzhurov
Ivan Dzhurov

Reputation: 197

Pixi v5 does not use the same api as the previous versions and they already have a loader within the application class that you can access with PIXI.Loader.shared. You can assign it to a variable, but I just use the below in my application:

PIXI.Loader.shared
    .add('myImage', 'assets/myImage.png')
    .load((loader, resources) => {
        const sprite = new PIXI.Sprite(resources.myImage.texture);
        container.addChild(sprite);
 });

With this syntax, you map the image to the id you give it as the first argument.

Upvotes: 2

matt_w
matt_w

Reputation: 1116

The loaded texture wouldn't have been available when the stage was initially rendered, so add: const renderer = PIXI.autoDetectRenderer(); and call renderer.render(container); once the image is loaded.

By the way you can use new PIXI.Sprite(resources.imgtest.texture), omitting loader.

Also, I'm not sure if a generated image with no .png or jpg extension will work via pixi.

Upvotes: 0

Related Questions