PIXI.js loader shared resources texture detect typo in name

user_4204919 0
Viewed 628

In our game we use typescript, pixi.js, vscode, eslint.

We have a dictionary of image files like this

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

which is loaded like this

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)
}

When we call the item we write it like this

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
        ....
    }
}

This code does not give an error in the compiler even though there is no texture called banner_goldf it should be banner_gold. We accidentally pushed this code and it has caused a bug in the game.

Ideally vscode, tsc or something else should be showing error for cases like this. How can we make sure that it shows error?

pixi.js visual-studio-code typescript
1 Answers

Instead if having a list of definitions, you can define a static variable for each image like so:

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

The images can be loaded with

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

After the images have been loaded, you can store the loaded textures in your static variables

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

You can now reference the textures like:

const texture = Images.icon_player.texture
Admin1
Related