Jump to content

New Pixi Loader


Recommended Posts

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


Link to comment
Share on other sites

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


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


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


See attached for the full file.

canvas (1).html

Link to comment
Share on other sites

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 by Huanzyz
Link to comment
Share on other sites

  • 1 year later...

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 by JeremyScott
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...