pixijs / pixijs.com

https://pixijs.com
36 stars 30 forks source link

Feature Request: Improvement of v7 migration guide (Replaces Loader with Assets) #46

Open devklick opened 10 months ago

devklick commented 10 months ago

Description

Not really a feature request, more just a suggestion to consider improving an area of the docs.

In the Replaces Loader with Assets of the v7 migration docs, the example "from" and "to" dont really give a like-for-like comparison. The concept of adding resources to the loader before loading them appears to no longer exist, and the docs doesnt really highlight the alternative approach to use.

I'm assuming that given the old approach of:

import { Loader, Sprite } from 'pixi.js';

const loader = new Loader();
loader.add('background1', 'path/to/assets/background1.jpg');
loader.add('background2', 'path/to/assets/background2.jpg');
loader.load((loader, resources) => {
  const image = Sprite.from(resources.background.texture);
});

The new approach would be:

import { Assets, Sprite } from 'pixi.js';

const texture1 = await Assets.load('path/to/assets/background1.jpg');
const image1 = Sprite.from(texture1);

const texture2 = await Assets.load('path/to/assets/background2.jpg');
const image2 = Sprite.from(texture2);

Is this assumption correct?

If so, I think it would be useful to include this in the docs. If not, then the docs should deffo be improved here as the alternative approach in v7 is not clear.

devklick commented 10 months ago

After some more reading, I've stumbled on this example, which probably more accurately describes a v7 alternative to to the v6 example above.

PIXI.Assets.add('flowerTop', 'https://pixijs.com/assets/flowerTop.png');
PIXI.Assets.add('eggHead', 'https://pixijs.com/assets/eggHead.png');

// Load the assets and get a resolved promise once both are loaded
const texturesPromise = PIXI.Assets.load(['flowerTop', 'eggHead']); // => Promise<{flowerTop: Texture, eggHead: Texture}>

// When the promise resolves, we have the texture!
texturesPromise.then((textures) =>
{
    // create a new Sprite from the resolved loaded Textures
    const flower = PIXI.Sprite.from(textures.flowerTop);
   // ...
});

However note that this implementation of PIXI.Assets.add is deprecated, and the alternative appears to be:

PIXI.Assets.add({ alias: 'flowerTop', src: 'https://pixijs.com/assets/flowerTop.png' });
PIXI.Assets.add({ alias: 'eggHead', src: 'https://pixijs.com/assets/eggHead.png' });