Identifying misspelled names in shared resources textures during PIXI.js loading

Question

Identifying misspelled names in shared resources textures during PIXI.js loading

Our game utilizes TypeScript, Pixi.js, VSCode, and ESLint.

We maintain a dictionary of image files as follows:

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

The images are loaded using the following method:

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

To retrieve an image for a player, we use the following code structure:

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

An oversight in our code has led to a bug where banner_goldf should actually be banner_gold. Despite this error, the compiler does not flag it as incorrect. How can we ensure that such errors are caught during development?

typescript visual-studio-code pixi.js

Answer 1

Answer №1

Instead of simply listing definitions, you have the option to define a static variable for each image as follows:

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

To load the images, you can use the following code:

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

Once the images are loaded, you can save the textures in your static variables like so:

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

You can then access the textures using the following code:

const texture = Images.icon_player.texture

Answer 2

Instead of simply listing definitions, you have the option to define a static variable for each image as follows:

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

To load the images, you can use the following code:

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

Once the images are loaded, you can save the textures in your static variables like so:

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

You can then access the textures using the following code:

const texture = Images.icon_player.texture

Identifying misspelled names in shared resources textures during PIXI.js loading

Answer №1

Similar questions

"Choose one specific type in Typescript, there are no in-b

What is the best way to preserve an enumeration value in TypeScript?

Discover the steps to initiate Firefox in Incognito Mode using NodeJS and Selenium!

Retrieve a multitude of nested Records within the returnType that correlate with the number of arguments provided to the function

Utilizing the onscroll feature to trigger a function within a ScrollView

What is the best way to create unit tests for a React component using TypeScript?

Encountering build errors in .xproj file when working with Type Script in ASP.Net Core

Steps to activate zone-conscious bluebird assurances in Angular 8

Unlock the key to connecting the output of one observable to another in rxjs

Difficulty fetching data on the frontend with Typescript, React, Vite, and Express

Generate random entries from an object based on specific criteria and append them to a fresh object using Typescript

Material-UI Slide component is encountering an issue where it is unable to access the style property of an undefined variable

The power of Ionic 2 combined with the Web Audio API

How is it that TypeScript still expects a valid return from an overridden method, even when it cannot be reached?

Error code TS2749 is indicating that the identifier 'XXX' is being interpreted as a value instead of a type. Perhaps you intended to use 'typeof XXX' instead

How to pass an array as parameters in an Angular HTTP GET request to an API

Angular 2 - Beginner's guide to updating the header when navigating to a new route or page

What are the best practices for implementing jquery owlCarousel within an Angular 4 component?

When running in VS Code, the terminal process is terminated with code ELIFECYCLE errno: 137. Closing VS Code fixes the problem

Error in MatSort implementation - Argument cannot be assigned