New Pixi Loader

[Huanzyz]

Hello everyone, I am a student from Vietnam. I bump into some issues on my very first step into Pixi JS and it was two days that i cannot find a way to make it work. Therefore, i decide to seek for help and it means a lot to me if you guys can give me some advices about my problem. Thank you all in advance.
My idea is very simple. I want to load an image and trigger some events when the image start/finish loading, then display it on the canvas.

My image path is an URL.

My problem is:

- the resources doesn't include the texture property (but when i download the image, save it locally and use a local path instead of URL, the texture property appears)
- it works when i use Sprite.from(url) but i cant attach events when start/finish loading like using loader

Wish you have a nice day sir and stay safe

canvas.html

[ivan.popelyshev]

 

never mind

 

Edited July 2, 2020 by ivan.popelyshev

[ivan.popelyshev]

resources.add('tex', url, {crossorigin: '*'});

...

resources['tex']

This should help

[opd]

Hi Huanzyz,

I'm also currently in Vietnam, so happy to help.

There are a few problems with your code:

The file type here is .pnj when it should be .png

const url = "http://deelay.me/2000/https://66.media.tumblr.com/avatar_d319f37438d5_128.pnj";

In your Application declaration, you don't need a comma after the last item.  It should be like this - note, no comma after transparent.

const app = new Application({
      width: 1000,
      height: 600,
      transparent: true
    });

Finally, as Ivan showed, url shouldn't be inside the { }.  Only crossorigin should be and you don't need a comma at the end either .  Like this:

loader.add(url,{crossorigin: 'true'})
.load();

 

Also, as Ivan said, it's good to use an ID in your loader.add, which you then reference in the Sprite:

loader.add('tex',url,{crossOrigin: 'true'})
    .load();

...

const image = new Sprite(resources['tex'].texture);

 

See attached for the full file.

canvas (1).html

[Huanzyz]

Thanks @opd changing pnj to png fix my problem
It's so weird since the url ending with pnj isn't a broken link (it isnt too if i change it to png). Because i copied that url and it displays valid content when accessing directly, i didnt think the url is the cause of problem in the beginning.

The comma problem you mentioned is actually a thing in JS, called trailing comma
Putting url in an object together with other option's properties are the object syntax of the loader (mentioned in the PixiJS tutorial by kittykatattack, the first recommend tutorial in PixiJS official website). Since i'm totally new to PixiJS, i have to go through all these tutorial and follow the instructions. If this way of coding is deprecated, i think PixiJS should have some update in their website.

It's funny cause kittykatattack recommend not to use the id feature in loader.add(). This is what he/she said:
"However, I recommend you don't use this feature! That's because you'll have to remember all names you gave each loaded files, as well as make sure you don't accidentally use the same name more than once. Using the file path name, as we've done in previous examples is simpler and less error prone."

Btw, thank you all for taking your time. It means a lot for me. Wish you all the best fellows.

Edited July 3, 2020 by Huanzyz

[JeremyScott]

Hello guys, Im really sorry for bumping old thread, just searching similar information. If you need any help related with paper tasks just check here more information about it. I also from time to time use help of professional writers from this writing service, ask them if you need any assistance.

Edited April 19, 2022 by JeremyScott