Phaser3 encountering issues while loading files from Multiatlas

Attempting to utilize the multiatlas functionality in Phaser alongside TexturePacker.

Encountering this issue:

VM32201:1 GET http://localhost:8080/bg-sd.json 404 (Not Found)
Texture.js:250 Texture.frame missing: 1/1.png

The JSON file can actually be found at 

http://localhost:8080/dist/img/bg-sd.json
and is accessible. Similarly, 
http://localhost:8080/dist/img/bg-1-sd.png
is also reachable.

I am loading the atlas as follows: 

    scene.load.multiatlas({
        key: 'bg-sd', 
        atlasURL: 'dist/img/bg-sd.json', 
        baseURL: 'dist/img'
    });

The 1/1.png frame is present in the file:

{
    "textures": [
        {
            "image": "bg-1-sd.png",
            "format": "RGBA8888",
            "size": {
                "w": 1924,
                "h": 2039
            },
            "scale": 0.5,
            "frames": [
                {
                    "filename": "1/1.png",
                    "rotated": false,
                    "trimmed": false,
                    "sourceSize": {
                        "w": 960,
                        "h": 540
                    },
                    "spriteSourceSize": {
                        "x": 0,
                        "y": 0,
                        "w": 960,
                        "h": 540
                    },
                    "frame": {
                        "x": 1,
                        "y": 1,
                        "w": 960,
                        "h": 540
                    }
                },

Various combinations of the path and baseURL settings have been attempted, but the file from dist/img remains unable to load.

jsontypescriptwebpackphaser-frameworktexture-atlas

Answer №1

It's possible that providing both a baseURL and an atlasURL could lead to conflicts. The baseURL is concatenated in front of the atlasURL, resulting in loading something like dist/img/dist/img/bg-sd.json.

Have you attempted removing the configuration object and trying something like this instead:

this.load.multiatlas('bd-sd', './dist/img/bg-sd.json');

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

"Exploring the world of asynchronous computations in jQuery Ajax: The next steps post-GET

When using ajax in jQuery with the request type, URL, and success functions, I often receive a JSON response. However, I face the challenge of needing to reformat the JSON arrays into a different structure, which can be computationally expensive. I am seek ...

javascriptajaxjsonjqueryasynchronous

Working with Typescript: Defining the return type of a function that extracts a subset of an object

Currently, I am attempting to create a function that will return a subset of an object's properties. However, I’m facing some issues with my code and I can't pinpoint the problem. const initialState = { count: 0, mounted: false, } type St ...

reactjstypescriptgenericstypessubset

Remove a JSON entity if a specific value within the entity corresponds to a specified value (using jq)

One of the objectives is to remove an entire object from a JSON file that includes a specified key/value pair in a JQ script. For instance, any objects with /unwanted-path/ in the path should be eliminated: input.json: [ { "path": & ...

jsonjqdelete-operator

Using TypeScript with React and Redux to create actions that return promises

Within my React application, I prefer to abstract the Redux implementation from the View logic by encapsulating it in its own package, which I refer to as the SDK package. From this SDK package, I export a set of React Hooks so that any client can easily u ...

javascriptreactjstypescriptredux

Emphasize the text based on the content in Angular

database of customers check customer records customer service module access service details component for user details display view user details component 1 view user details component 2 template file for user details component see HTML template Seek ...

angulartypescripthighlightangular7

When attempting to import an SVG image, a warning is generated stating: "Property `src` does not match. Server:"

I added the file-loader to my next.js project and set up my next.config.js as follows: module.exports = { entry: './src/index.js', webpack: config => { const env = Object.keys(process.env).reduce((acc, curr) => { ...

reactjswebpacknext.js

Incorporating image hyperlinks onto a designated webpage within a JavaScript presentation carousel

Working on an e-commerce website, the client has requested 3 slide shows to run simultaneously displaying specials or promotions. I have successfully set up the 3 slide shows next to each other, but I'm unsure how to incorporate image links that direc ...

javascripthtmljson

Cypress eliminating the "X-CSRFToken" header

There seems to be an issue with the Cypress test runner where it is removing X-CSRFToken from the request header, leading to a 403 Forbidden error. I have compared the headers between a manual run and a Cypress test run, and you can see the difference in t ...

javascripttypescripttestingcypresscsrf-token

Reading and processing Json data with a Rest Client and Object Mapper

Currently, I am working on a REST API using Java 17 with Spring Boot 3.2.2. This API interacts with an external REST API that returns JSON data in a non-traditional format. Instead of returning a JSON object, it provides the response as a JSON string. For ...

javajsonspring-bootjacksonjson-deserialization

Converting a string to a date type within a dynamically generated mat-table

I am working on a mat-table that shows columns for Date, Before Time Period, and After Time Period. Here is the HTML code for it: <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay" > ...

javascripthtmlangulartypescript

Adding an active class on a selected chat list item in Angular - here's how!

We are currently developing a chat component where users can click on the left side chat item to open messages with the selected user. We have implemented an active class that changes the color of the selected chat list item. Our goal is to apply the activ ...

angulartypescriptangular6

What is the best way to create a generic variable and function that utilize the same type?

I am looking for a structure similar to interface propType { value: T action: (value: T) => void } The variable T can be any type, but it must be consistent for both value and action. Using any is not suitable as it could lead to a mismatch in ty ...

typescript

Photo Collection: Incorporating Images

I am currently working on a project to create a photo gallery and I am facing an issue with adding photos. The user should be able to browse for a picture and enter a title for it on a page. Both the image path and title need to be saved in an XML file fro ...

phphtmljsonajaxxml

Importing and Extracting JSON Data Using PHP

I am currently developing a logging system for my PHP software. To collect data, I am utilizing the API from https://ipinfo.io/ As depicted in the screenshot, you can simply use json_decode to read the retrieved information. The only issue lies with the ...

phpjson

Unable to loop through the Array

let Users = [ { name: 'John', id: '1', jp: 'USA' }, { name: 'Jane', id: '2', jp: 'Japan' }, ]; export function DisplayUsers(usersList) { return ( <div> {usersList?.map((user ...

reactjstypescript

What is the method for sending an object to a concealed form within php?

I am faced with a challenge involving an object named $todovalues and a form. The task at hand is to pass the entire todovalues object through the form. Here is how my form is structured - <form action="" method="post"> <input class="todobuttons ...

phpjsonobjectserialization

Encountered an error of 'No overload matches this call' while configuring ContextApi alongside useReducer with Typescript

I am currently setting up ContextApi and useReducer with typescript. I am encountering an error with my "issuesInitialState" variable in useReducer, where I receive the following message: No overload matches this call. Overload 1 of 5, '(reducer: ({ ...

reactjstypescriptreact-context

Supertest and Jest do not allow for sending JSON payloads between requests

Below is the test function I have written: describe("Test to Create a Problem", () => { describe("Create a problem with valid input data", () => { it("Should successfully create a problem", async () => { const ProblemData = { ...

javascripttypescriptexpressjestjssupertest

Struggling with parsing a JSON file in C# and looking for some guidance

I have encountered an issue while working with a JSON file in C#. { "Company": { "ABC": {"ADDRESS" : "123 STREET", "DEF" :"ADDRESS 567", }, }, "Country": { "Country1": "XYZ", ...

c#json

Engage - experiment with incorporating writing functionality for List[Any]

In my project, there is a case class defined as follows: case class A(name: String, values: List[Any]) The "values" field can contain elements of type Long or String. I have been attempting to create a Writes implementation without any luck. Below is th ...

jsonscalaplayframeworkplayframework-2.0