PIXI.js加载程序共享资源纹理检测名称中的拼写错误

Question

在我们的游戏中，我们使用typescript、pixi.js、vscode、eslint。

我们有一个像这样的图像文件字典

export function getAllImages(): {name: string, extension: string}[] {
return [
{name: 'tile_lumber', extension: '.svg'},
{name: 'tile_brick', extension: '.svg'},
....
]
}

像这个一样加载

export function loadImages() {
for(const img of getAllImages()) {
PIXI.Loader.shared.add(img.name, getImagePath(img.name + img.extension), { crossOrigin: true })
}
PIXI.Loader.shared
.on('progress', loadProgressHandler)
.load(assetsFinishedLoading)
}

当我们调用项目时，我们会这样写

export function getBannerForPlayer(playerColor: PlayerColors): PIXI.Texture {
switch(playerColor) {
case PlayerColors.Bronze: return PIXI.Loader.shared.resources.banner_bronze.texture
case PlayerColors.Silver: return PIXI.Loader.shared.resources.banner_silver.texture
case PlayerColors.Gold: return PIXI.Loader.shared.resources.banner_goldf.texture
....
}
}

此代码不会在编译器中给出错误，即使没有名为banner_goldf的纹理——它应该是banner_gold。我们不小心推送了这个代码，它在游戏中造成了一个错误。

理想情况下，vscode、tsc或其他东西应该在这种情况下显示错误。我们如何确保它显示错误？

Answer 1

相反，如果有一个定义列表，您可以为每个图像定义一个静态变量，如下所示：

export class ImageDefinition {
name: string
extension: string
texture: PIXI.Texture | undefined
}
export class Images {
static icon_player: ImageDefinition = {name: 'icon_player', extension: '.svg', texture: undefined }
}

可以使用加载图像

for(const img in Images) {
const image: ImageDefinition = Images[img]
PIXI.Loader.shared.add(image.name, getImagePath(image.name + image.extension), { crossOrigin: true })
}

加载图像后，您可以将加载的纹理存储在静态变量中

export function assetsFinishedLoading() {
for(const img in Images) {
const image: ImageDefinition = Images[img]
image.texture = PIXI.Loader.shared.resources[image.name].texture
}
}

您现在可以参考纹理，如：

const texture = Images.icon_player.texture