Блог

В нашей игре мы используем 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 или что-то еще должно показывать ошибку в подобных случаях. Как мы можем убедиться, что он показывает ошибку?

Вместо этого, если у вас есть список определений, вы можете определить статическую переменную для каждого изображения следующим образом:

 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