Initiating the process of loading a texture atlas using PIXI Js and parcel bundler

I've recently started working with JS programming and pixi JS. I'm attempting to load a texture atlas from a json file following this tutorial module: https://github.com/kittykatattack/learningPixi#spriteproperties

For my setup, I am using typescript, node js, and parcel bundler to keep things simple. However, I am facing an issue where my texture atlas is not loading even though I am using PIXI.loader. Strangely, when I tried a similar example directly in an HTML file, it worked without any problems.

The versions of the tools I am using are: PIXI 5.3.3 (latest release), parcel 1.12.4, Typescript 4.0.3

This is 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 configuration:

{
  "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"
}

When I run Typescript, I get the error message TS2532: Object is possibly 'undefined'. Moreover, the .json and .png files associated with the atlas are not being copied into the parcel dist folder.

A console.log on loader.resources['...'] shows the JSON data parsing error as follows:

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"
...

In summary, nothing seems to be working as expected. Has anyone encountered a similar issue before?

Thank you for your assistance.

jsontypescriptpixi.jsparcel

Answer №1

By including image and JSON files, you can utilize them in the following manner:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Python to retrieve data from YQL and store it into a MySQL

I am completely new to the concepts mentioned. My goal is to retrieve financial data from YQL and store it in MySQL using a Python script. To achieve this, I created the following .py file: import mysql.connector import yahoo.yql cnx = mysql.connector.co ...

pythonmysqlsqljson

Attempting to grasp the concept of Typescript generics

I have a function defined as follows: interface ExtraModels extends Model { unknown: string } const write = async (data: ExtraModels[]) => { console.log(data[0].unknown) } This function is currently working. However, I want to modify it to: cons ...

typescriptgenerics

The attribute 'date' is not found within the class 'EmployeeScheduleExceptionModel', however, it is present in the parent class from which it inherits

I am working on a TypeScript project and I have defined my configurations in the tsconfig.json file as shown below: { "include": ["src*"], "compilerOptions": { "target": "es2021", &q ...

typescriptinheritancejestjsts-jest

Decoding JSON data within a Flatlist component in React Native

As a newcomer to React Native, I am currently working on developing an Ecommerce application. For the backend, I am using Woocommerce (Wordpress) and trying to integrate the Woocommerce API response into my React Native App. However, I am facing an issue w ...

javascriptjsonreact-nativereact-native-flatlist

Converting XML into an Array Using PHP

I attempted to parse an XML string using PHP. Here is an example of the XML: <?xml version="1.0"?> <root> <Log> <Item> <name>![CDATA[James]]</name> <address>![CDATA[Korea]]< ...

phpjsonxml

There seems to be a bug in the reducer within the store (using react, redux toolkit, and TypeScript)

Utilizing redux with typescript, I aim to create a reducer that will modify the state of the store, and my defined types are as follows: interface IArticle { id: number, title: string, body: string, } type ArticleState = { articles: IArticle[] } ...

reactjstypescriptredux

The Angular4 HTTP POST method fails to send data to the web API

Whenever I make a http post request, it keeps returning an error message saying "data does not pass correctly". I have tried passing the data through the body and also attempted using json.stringify(). Additionally, I experimented with setting the content ...

angulartypescriptasp.net-web-api

Transferring information between Puppeteer and a Vue JS Component

When my app's data flow starts with a backend API request that triggers a Vue component using puppeteer, is there a way to transfer that data from Backend (express) to the vue component without requiring the Vue component to make an additional backend ...

typescriptexpressvuejs2puppeteerpuppeteer-cluster

No JSON data retrieved by Ajax in Controller

I'm facing an issue with my controller where the String formData is null when I try to catch the post data. This results in me not being able to use the Anti Forgery Attribute as it seems like all the data is lost. Could it be that using serializeArra ...

jqueryajaxjsonasp.net-mvc-3

Updating a component in Angular 4.3.1 from within an observable callback

My Project Journey I am currently immersing myself in learning Angular by working on a personal project: developing a game that involves routing, services, and more. One of the requirements is to hide the header on the landing page (route for '/&apos ...

javascriptangulartypescript

Is there a more effective method for merging two JSON files in Python?

Two json files with the same structure are available. The json entries do not have nesting, and they consist of strings as keys and integers as values. I am looking to merge both json files into a single file by concatenating them. There may be instances w ...

pythonjson

Enhancing Pixi.js functionality with TypeScript: Utilizing 'none' Module Settings

My project is a 100% JavaScript application that operates in the browser, consisting of around 20 JS files with all function names in the global scope. Whenever I make changes to a JS file, I can simply refresh the page and see the updates immediately. Ho ...

javascripttypescriptpixi.js

Retrieving data using the GetJSON method consistently returns identical values

Here is the code I have written: $(document).ready(function () { $.getJSON("data.json", function (data) { var user_Data = ""; $.each(data, function (key, value) { user_Data += '<p class="user">' + value.na ...

javascriptjqueryjson

Child components in Angular may fail to detect changes in input properties

In my parent component, I have a property named documents which is an Array used to pass document objects to a child component. However, when I add a new document to the documents array, the child component's view does not update. Can someone point o ...

angulartypescript

What could be preventing my CSV file from being saved empty?

I am currently working on a function that processes the results of a web scraping operation I conducted on an online t-shirt store. Every t-shirt is represented as an object, featuring attributes such as title, price, imgUrl, URL, and time. These objects ...

javascriptjsonnode.jscsv

Guide to integrating an environmental variable into a json configuration file?

I've come across a JSON file that has the following structure: { "firstname": "John", "lastname": "Doe", "age": 25, "profile": "/home/John/Pictures/john.png" } However, I would like to make it more generic instead of specific to just John. M ...

jsonenvironment-variableskey

Using regular expressions, you can locate and replace the second-to-last instance of a dot character in an email address

I'm looking to replace the second last occurrence of a character in a given string. The length of the strings may vary but the delimiter is always the same. Here are some examples along with my attempted solutions: Input 1: james.sam.uri.stackoverflo ...

javascriptjavaregextypescriptalgorithm

Creating an interface or type in Typescript with a nested object property that uses keys from the same interface

I am looking to create an interface or type that can restrict the nested object properties based on keys defined in the main interface. class MyClass implements MyInterface { prop1: string; promp2: number; nestedObj: { prop1: string; // Allowed a ...

typescripttypescript-generics

Is there a way to incorporate a dropdown feature into a search bar using Ant Design?

I'm currently working on a project that requires me to incorporate two drop-down menus inside the search box. Despite following the guidelines provided in the documentation (https://ant.design/components/input), I encountered a problem when trying to ...

cssreactjstypescriptantd

Adding JSON objects to an HTML body with pure JavaScript - no need for jQuery!

I have my website content stored in a 'content.json' file, resulting in an empty body in my HTML index. Currently, I am able to console.log all the elements from 'script.js' and view all the divs declared in 'content.json' wit ...

javascripthtmljson