Jump to content

Images are now blackboxes when converting to native js

Dan B

Recommended Posts

I am running into a situation when using Pixi my images are only display just as blackboxs.
This is only happening when I converted from using jQuery to Native JS.
I am fairly new to Pixi so not sure what issue is occurring.

Broken Demo using Native JS: https://codesandbox.io/s/friendly-driscoll-1qph8

Working Demo using jQuery: https://codepen.io/Alex440/pen/yWBvBB

Screen Shot 2020-03-03 at 9.13.12 PM.png

Link to comment
Share on other sites


I had to add dependencies and some changes for pixi-v5.

Also I recommend to use "app.loader" instead of just images, your "load" is strange.

Using multiple pixi applications in same page is bad idea, you wont be able to use more than two on some systems, and if you want to create them dynamically you have to take care of destroy. I added destroy() for codesandbox so memory wont be clogged on live reload.

Also, using "wrapper.innerWidth" is your main problem - you have to use clientWidth there.


Link to comment
Share on other sites

Welcome to the forums!

It looks like you are one of people who "bought" our DisplacementFilter demos. That demo is a bit of trap - any modifications require you to know basic stuff about pixi, and people usually just try jquery-ing and stackoverflow-ing their way around.

PixiJS is a WebGL rendering library and its architecture and rules are more close to Flash than to Web apps. If you do not have experience with Flash or other HTML5 renderers - then be patient, look at examples (https://pixijs.io/examples/#/demos-basic/container.js) read this forum posts what other people are doing in it, read wiki (https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide). Read docs ( https://pixijs.download/dev/docs/index.html ) , clone sources if you have good IDE to search classes around ( https://github.com/pixijs/pixi.js/ ) Don't think that it will be easy stroll. 

Edited by ivan.popelyshev
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...