CODEWITHSUNDEEP
jsontypescriptpixi.jsparcel
Stormbringer
Stormbringer

Reputation: 31

loading texture atlas with PIXI Js and parcel bundler

I'm new with JS programming and pixi JS. I try to load a texture atlas from json like tutorial module here : https://github.com/kittykatattack/learningPixi#spriteproperties

I use typescript, node js and parcel bundler as simpler as possible. My problem is that my texture atlas won't load even if i use PIXI.loader. I have tried an example directly in html file and i haven't got any problem.

I use : PIXI 5.3.3 (latest release), parcel 1.12.4, Typescript 4.0.3

My index.ts:

import textPack from "./assets/textPack.json"
...
let loader = PIXI.loader.shared
loader.add("./assets/textPack.json")
      .load(setup)

function setup {
     let id = loader.resources["./assets/textPack.json"].textures
     let soldier = new PIXI.Sprite(id["soldier.png"])
     app.stage.addChild(soldier)
}

here is my package.json

{
  "name": "parcel-tuto",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-asset-copier": "^1.1.0",
    "pixi-sound": "^3.0.5",
    "pixi.js": "^5.3.3",
    "typescript": "^4.0.3"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "./node_modules/.bin/parcel index.html"
  },
  "assetsPath": "src/assets/",
  "keywords": ["assets"],
  "author": "",
  "license": "ISC"
}

Typescript return : TS2532: Object is possibly 'undefined'. The .json and .png associate are not copied into the parcel dist folder

A console.log onto loader.resources['...'] say :

json datas :  
Resource {_flags: 2, name: "./assets/textPack.json", url: "./assets/textPack.json", extension: "json", data: null, …}
children: Array(0)
length: 0
__proto__: Array(0)
crossOrigin: ""
data: null
error: Error: Error trying to parse loaded json: SyntaxError: Unexpected token < in JSON at position 0 at Resource.abort (http://localhost:1234/src.f10117fe.js:28599:18) at Resource._xhrOnLoad (http://localhost:1234/src.f10117fe.js:29046:18)
extension: "json"
loadType: 1
metadata: {}
name: "./assets/textPack.json"
...

At the end nothing work. Have you encountered this issue before ?

Thank's for your help.

Upvotes: 3

Views: 3768

Answers (1)

quietcoder
quietcoder

Reputation: 155

you can import both image and json and use it like this

import altasA from "./altas/a.json";
import altasAImage from "./altas/a.png";


PIXI.Loader.shared.add(altasAImage).load(() => {
  const sheet = new Spritesheet(
    PIXI.Loader.shared.resources[altasAImage].texture.baseTexture,
    altasA
  );
  sheet.parse((...args) => {
    console.log("args", args);
  });
});

Upvotes: 1

Related Questions