ImageResource.ts:182 未捕获(承诺),PIXI 和 Typescript 使用 pixi 和 texturepacker 没有纹理加载
ImageResource.ts:182 Uncaught (in promise), with PIXI and Typescript no texture loads using pixi and texturepacker
我正在尝试使用 PIXI 和 Typescript 做一些非常简单的事情。我决定切换到使用纹理打包器从加载单个 png 文件和 运行 到这个问题。
问题是当尝试访问通过 spritesheet json 文件加载的纹理时,我收到了承诺错误。代码非常简单,我尝试了各种方法,但没有成功。这个例子是最简单的,它使用了来自 CodeAndWeb(Texture packer devs 站点)的例子,但试图将它运行slate 成 typescript 并稍微分离功能。非常感谢任何建议。谢谢
代码沙箱在这里:
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 看起来像这样
{"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$"
}
}
对于遇到此问题的任何人,我都遇到了完全相同的错误。我在 Whosebug 上很难找到解决方案,但最终我想通了。
首先,如果您想使用 public 服务器,则必须启用 COR。然后,它应该可以正常工作。
如果您想使用本地服务器上托管的图像(例如,使用 http-server
包到 运行 本地文件存储库),对于图像源,您必须使用完整的 link – 例如http://127.0.0.1:8001
而不是像 localhost:8001
这样的东西,这将不起作用。您还必须启用 CORs 选项(例如,对于 http-server
,这意味着添加 --cors
标志)
我正在尝试使用 PIXI 和 Typescript 做一些非常简单的事情。我决定切换到使用纹理打包器从加载单个 png 文件和 运行 到这个问题。 问题是当尝试访问通过 spritesheet json 文件加载的纹理时,我收到了承诺错误。代码非常简单,我尝试了各种方法,但没有成功。这个例子是最简单的,它使用了来自 CodeAndWeb(Texture packer devs 站点)的例子,但试图将它运行slate 成 typescript 并稍微分离功能。非常感谢任何建议。谢谢
代码沙箱在这里: 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 看起来像这样
{"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$"
}
}
对于遇到此问题的任何人,我都遇到了完全相同的错误。我在 Whosebug 上很难找到解决方案,但最终我想通了。
首先,如果您想使用 public 服务器,则必须启用 COR。然后,它应该可以正常工作。
如果您想使用本地服务器上托管的图像(例如,使用 http-server
包到 运行 本地文件存储库),对于图像源,您必须使用完整的 link – 例如http://127.0.0.1:8001
而不是像 localhost:8001
这样的东西,这将不起作用。您还必须启用 CORs 选项(例如,对于 http-server
,这意味着添加 --cors
标志)