I’m going to be generating a lot of images over the coming months and I’ll be using many different apps to generate them.

So far, for my example adventure game, I’ve used Procreate, Adobe Comp, and Affinity Designer on the iPad and Photoshop on the Mac. I’ve also developed an asset management app on the Mac that I use to create the animation JSON data for my engine and that moves the assets into the asset catalog within the game bundle

As files are being generated and stored in multiple different places, it’s becoming apparent that having some sort of clear naming convention is going to be beneficial going forward.

These are my notes, published here partly in the interests of sharing my process, but mostly so I’ll always know where to find them.

General Rules

• Each word in a filename is capitalised to make it easier to read.
• Hyphens separate words as it’s easier to type a hyphen than an underscore on an iOS device.
• Scale and device is specified in the filename so that each asset is correctly sorted into the right bucket (e.g. @2x~iPad , @3x~iPhone , @2x~Mac). Don’t rely on defaults!

Buttons

Button-<Name>(-<State>)<Device>.png

The State component is optional for the image that represents the button’s normal state.

There are three states for buttons: Normal, Active, and Disabled.

Examples:

Button-Arrow-Left@2x~iPad.png
Button-Settings-Active@3x~iPhone.png


Exits

Exit-<Name>(-<State>)<Device>.png


State is optional for the default state. Exits do not always require images.

Examples:

Exit-Cafe-Door-Open@3x~iPhone.png
Exit-Cafe-Door-Open~iPad.png

Inventory

Inventory-<Name><Device>.png

Inventory items are straightforward.

Examples:

Inventory-Key@2x~iPad.png

Items

As are items that don’t have any animation frames.

Item-<Name><Device>.png

Examples:

Item-Flyer@2x~iPhone.png

Rooms

Room-<Name>-[bg|fg](-#)<Device>.png

Texture files for rooms may contain both foreground and background elements and might need to be numbered if they are larger than the allowed texture file size (4096×4096).

Examples:

Room-Start-fg@2x~Mac.png
Room-Square-bg-1@2x~iPad.png
Room-Square-bg-2@2x~iPad.png


Animation Frames

Animations should be sequentially numbered based on their animation type with up to two zeros of padding.

<Name>-<Animation Type>-###<Device>.png

Examples:

Player-Idle-West-001@2x~iPad.png
Player-Idle-West-002@2x~iPad.png


General Sprites

Anything that doesn’t fit into any of the above categories (e.g. the Settings overlay background sprite) should use this convention. The Sprite identifier at the start is there to keep these miscellaneous images grouped together.

Sprite-<Name><Device>.png

Examples:

Sprite-Settings-Background@3x~iPhone.png

Naming is such an important part of development that I think it’s useful to get some conventions nailed down early, but they are also likely to get updated as development continues.