Understanding Pixi.js v5.x Loaders

[jSwtch]

Looking at the github basic usage example => Why is the ticker nested inside the loader?

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader.add('bunny', 'bunny.png').load((loader, resources) => {
    const bunny = new PIXI.Sprite(resources.bunny.texture);

    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    app.stage.addChild(bunny);

    app.ticker.add(() => {
        bunny.rotation += 0.01;
    });
});

I am comparing to this example (https://pixijs.io/examples/#/demos-basic/tinting.js

PIXI.Sprite.from(...

Is there a significant difference between this syntax?

new PIXI.Sprite(...

Also in this tinting example they are setting:

dude.turningSpeed = 

 I don't seem to be able to set these type of custom properties using the Github basic usage example.

I created this codepen that shows the problem I have of all sprites acting together https://codepen.io/jswtch/pen/gJBaBz?editors=0010

 

 

 

[ivan.popelyshev]

0. difference is that from() creates texture before image is actually loaded. Only when its loaded texture size is changed, contents are uploaded to videomemory. It stores images in cache.

1. app.loader.add("bunny", bunnyURL, {crossOrigin: '*'}) - that was your problem. You can also pass crossOrigin to from() but i dont remember how.

2. you can assign any property, its JS. 'turningSpeed" works only because its actually used somewhere in ticker handler in the same example.

[ivan.popelyshev]

Also ticker is inside loader callback only because if we add it before loader finishes, any invocation of "bunny" will raise NullPointerException. Its all about async JS coding. Same as in other libraries.

[jSwtch]

52 minutes ago, ivan.popelyshev said:

0. difference is that from() creates texture before image is actually loaded. Only when its loaded texture size is changed, contents are uploaded to videomemory. It stores images in cache

Is this from method generally preferred?

 

 

[themoonrat]

The preference should be to preload via the loader where possible.