I am trying to do something very simple with PIXI and Typescript. I decided to switch to using texture packer from loading individual png files and ran into this issue. The issue is when trying to access the texture that is loaded through the spritesheet json file I get a promise error. The code is very simple and I have tried various ways of doing this with no luck. This example is the simplest and uses the example from CodeAndWeb (Texture packer devs site) but in an attempt to translate it to typescript and separated the functionality a bit. Any advice is highly appreciated. Thanks.
Code Sandbox here: https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts
import { Container, Sprite, Graphics, Texture, Spritesheet } from "pixi.js";
import * as PIXI from "pixi.js";
// This example is based on the following
// https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5
export class Game extends Container {
static GAME_WIDTH = 320;
static GAME_HEIGHT = 568;
private static _instance: Game;
public app: PIXI.Application | undefined;
constructor() {
super();
window.onload = (): void => {
this.createRenderer();
this.addAssets();
this.startLoadingAssets();
};
console.log('Game Constructed');
}
public static getInstance(): Game {
if (!Game._instance) {
Game._instance = new Game();
}
return Game._instance;
}
private addAssets(): void {
PIXI.Loader.shared.add('game', '../assets/game.json');
console.log('Assets added');
}
private startLoadingAssets(): void {
PIXI.Loader.shared.onComplete.add(() => { this.onAssetsLoaded(); });
// PIXI.Loader.shared.onComplete.add(this.onAssetsLoaded);
PIXI.Loader.shared.load();
console.log('Loading assets');
}
private onAssetsLoaded(): void {
let sprite = new PIXI.Sprite(PIXI.Texture.from("backBoard.png"));
// let sheet = PIXI.Loader.shared.resources["../assets/game.json"];
// let sprite = new PIXI.Sprite(sheet.texture['backBoard,png']);
// this.app?.stage.addChild(sprite);
console.log('AssetsLoaded');
}
private createRenderer(): void {
this.app = new PIXI.Application({
backgroundColor: 0x001320,
})
document.body.appendChild(this.app.view);
console.log('Renderer Created');
}
public initialize(): void {
console.log('Game initialized');
}
}
json looks like this
{"frames": {
"backBoard.png":
{
"frame": {"x":1,"y":1,"w":318,"h":442},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":318,"h":442},
"sourceSize": {"w":318,"h":442}
},
"buttonDisabled.png":
{
"frame": {"x":321,"y":340,"w":30,"h":30},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":30,"h":30},
"sourceSize": {"w":30,"h":30}
},
"buttonDown.png":
{
"frame": {"x":353,"y":344,"w":30,"h":30},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":30,"h":30},
"sourceSize": {"w":30,"h":30}
},
"buttonSmallDisabled.png":
{
"frame": {"x":395,"y":224,"w":22,"h":22},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
"sourceSize": {"w":22,"h":22}
},
"buttonSmallDown.png":
{
"frame": {"x":395,"y":248,"w":22,"h":22},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
"sourceSize": {"w":22,"h":22}
},
"buttonSmallUp.png":
{
"frame": {"x":395,"y":272,"w":22,"h":22},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
"sourceSize": {"w":22,"h":22}
},
"buttonUp.png":
{
"frame": {"x":321,"y":372,"w":30,"h":30},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":30,"h":30},
"sourceSize": {"w":30,"h":30}
},
"coin.png":
{
"frame": {"x":368,"y":311,"w":31,"h":33},
"rotated": true,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":31,"h":33},
"sourceSize": {"w":31,"h":33}
},
"logo.png":
{
"frame": {"x":321,"y":213,"w":125,"h":45},
"rotated": true,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":125,"h":45},
"sourceSize": {"w":125,"h":45}
},
"meter_big.png":
{
"frame": {"x":321,"y":100,"w":92,"h":47},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":92,"h":47},
"sourceSize": {"w":92,"h":47}
},
"meter_small.png":
{
"frame": {"x":368,"y":213,"w":43,"h":25},
"rotated": true,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":43,"h":25},
"sourceSize": {"w":43,"h":25}
},
"meterDisplay.png":
{
"frame": {"x":321,"y":149,"w":89,"h":49},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":89,"h":49},
"sourceSize": {"w":89,"h":49}
},
"meterDisplayBig.png":
{
"frame": {"x":321,"y":1,"w":97,"h":97},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":97,"h":97},
"sourceSize": {"w":97,"h":97}
},
"meterMinus.png":
{
"frame": {"x":368,"y":258,"w":25,"h":25},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":25,"h":25},
"sourceSize": {"w":25,"h":25}
},
"meterPlus.png":
{
"frame": {"x":368,"y":285,"w":24,"h":24},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
"sourceSize": {"w":24,"h":24}
},
"peg.png":
{
"frame": {"x":399,"y":200,"w":11,"h":22},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":11,"h":22},
"sourceSize": {"w":11,"h":22}
},
"target_guide.png":
{
"frame": {"x":321,"y":200,"w":11,"h":76},
"rotated": true,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":11,"h":76},
"sourceSize": {"w":11,"h":76}
}},
"meta": {
"app": "https://www.codeandweb.com/texturepacker",
"version": "1.0",
"image": "cheenko.png",
"format": "RGBA8888",
"size": {"w":419,"h":444},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:507f67780e7f85c65d491493063f25f9:181b9d624fffd3a88b16c67d21e19ad7:3dbd62212b1a89304e8d06008f40f33d$"
}
}
For anyone who comes across this question, I've had the exact same error. It was hard for me to find solutions on StackOverflow, but in the end, I figured it out.
First, if you want to use a public server, it'll have to have CORs enabled. Then, it should work fine.
If you want to use an image hosted on a local server (e.g. using the http-server package to run a local file repository), for the image source, you'll have to use the full link – e.g. http://127.0.0.1:8001 instead of something like localhost:8001, which won't work. You'll also have to enable the CORs option (for instance, for http-server, that would mean adding the --cors flag)