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

Question

在我们的游戏中我们使用打字稿，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

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

PIXI.js loader shared resources texture detect typo in name

typescript

visual-studio-code

pixi.js