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