Images are now blackboxes when converting to native js

[Dan B]

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

[ivan.popelyshev]

https://codesandbox.io/s/laughing-hellman-e5jiu

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.

 

[ivan.popelyshev]

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 March 4, 2020 by ivan.popelyshev