Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
devklick opened this issue Nov 17, 2023 · 1 comment

Comments

@devklick
Copy link

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.

@bigtimebuddy bigtimebuddy transferred this issue from pixijs/pixijs Nov 17, 2023
@devklick
Copy link
Author

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' });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant