So the other day I wasted some time looking for bugs on my code because I was looking at the wrong place. Namely, I was trying to get a simple logo display for the remake of Macabre Hollow and was just getting a blank screen instead.

The reasons for my predicament were (from most immediate to least immediate reason):

• Banner sprite was being created with an undefined texture
• I was attempting to access my banner logo with the wrong path
• My text editor didn't see a problem with it, because the underlying data structure declared an index for name -> PIXI.Texture
• My compiler accepted it because nobody really had any reason to see a problem with it
• PIXI.js lets you create Sprites with undefined textures, they're just invisible, sizeless objects

So, my code was set to catch me using defined types other than PIXI.Texture, but it was also set up to tell the editor not to look too hard into it.

Today I spent a bit of time ensuring no further time is spent typo-ing names of textures:

Now I get on my editor:

• Linter warnings for trying to access spritesheetName.bogusName
• Helpful suggestions for image names to use when typing spritesheetName.

As useful as I think the tool is, the source for the tool itself is rather trash, so I'm not releasing it as its own tool in the current form. So I'll just share the relevant section of make-graphics.sh here (Linux shell script):

```shell

Spritesheet constant type annotation and declaration

generateSpritesheetConstant() { spritesheet=${1} printf "Generating typescript spritesheet definition for ${spritesheet}..."

files=$(cd graphics/"${spritesheet}" && ls ./*.png)

outputFile="work/${folder}.ts" { echo "" echo "export const ${spritesheet}: {" } >> "${outputFile}"

# Field types for file in ${files} do trimmed=$(echo "${file}" | sed "s/.png//" | sed "s!./!!") echo " ${trimmed}: undefined | PIXI.Texture;" >> "${outputFile}" done

echo "} = {" >> "${outputFile}"

# Field values for file in ${files} do trimmed=$(echo "${file}" | sed "s/.png//" | sed "s!./!!") echo " ${trimmed}: undefined," >> "${outputFile}" done

echo "};" >> "${outputFile}" echo "Done" }

for folder in ${folders} do generateSpritesheetConstant "${folder}" done

Combining spritesheets onto a single file

spritesheetFile="./src/spritesheet.ts" rm -f --verbose "${spritesheetFile}"

{ echo "// Auto-generated file, do not edit directly but run make-graphics.sh instead" echo "" echo "// External libraries" echo 'import * as PIXI from "pixi.js";' cat work/* } >> "${spritesheetFile}" echo "Generated ${spritesheetFile}"

```

This is what heaven looks like: