Nuxtjs and Pixijs load a JSON in to loader Pixi function

fabsfabs
0
fabsfabs
commented 7 months ago

What problem does this feature solve?

Hi everyone
I'm quite new with nuxtjs and webpack and I'm facing my first big question about it.
How do I load a JSON spritesheet with loader function of Pixijs in Nuxtjs?

What I try to reach is similar to this example provided by Pixijs https://pixijs.io/examples/#/basics/spritesheet.js

What happen to me is that the spritesheet.json file added to the loader doesn't load actually and few errors are displayed.
Screen Shot 2019-01-18 at 14.42.44.png

Here you can find the final result, not in nuxtjs of course
http://fabiobertozzi.it/portfolio/intro.html

The spritesheet animation is this one below (the dissolving grey panel)
Screen Shot 2019-01-18 at 14.45.41 3.png

Certainly I miss some basic knowledge of nuxtjs and webpack.
Anyone can help me?

Many thanks

idea
0
fabsfabs
0
fabsfabs
commented 7 months ago

Hi @manniL but in which way this should help me? Maybe I don't see the solution.
My problem is to load a JSON file inside the pixi loder, something like this:

PIXI.loader .add('spritesheet', require('~/assets/images/sprite/sprites.json')) .add('sprites', require('~/assets/images/sprite/sprites.png')) .load(console.log(PIXI.utils.TextureCache));

the result is this, no trace of sprites.json inside the Texture Cache
screen shot 2019-01-18 at 20 08 33

Anyone?
Thanks

0
manniL
5.7k
manniL
commented 7 months ago

@fabsfabs Whoops. Updated the example. You can put the JSON into static to refer to it easier ☺️

image

0
fabsfabs
0
fabsfabs
commented 7 months ago

Great @manniL thanks a lot for your help! It's works!
By the way, is there anyway to include it inside the optimization that webpack does?

0
manniL
5.7k
manniL
commented 7 months ago

@fabsfabs Pretty sure that is possible somehow but as I don't know Pixi.js very well you have to do some own research. Further info: https://github.com/pixijs/pixi.js/issues/4223#issuecomment-322070554

0
Informations
Feature RequestOpen
#c8507 - Created 7 months ago