Typescript PIXI.js加载程序共享资源纹理检测名称中的键入错误
在我们的游戏中,我们使用typescript、pixi.js、vscode、eslint 我们有这样的图像文件字典Typescript PIXI.js加载程序共享资源纹理检测名称中的键入错误,typescript,visual-studio-code,pixi.js,Typescript,Visual Studio Code,Pixi.js,在我们的游戏中,我们使用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 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
....
}
}
是这样装的
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
....
}
}
当我们调用项目时,我们这样写
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\u goldf
的纹理,此代码也不会在编译器中给出错误,它应该是banner\u gold
。我们不小心推了这个代码,它在游戏中引起了一个bug
理想情况下,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