The asset pipeline

The folder called final

When you joined, Hyper Shards' art folder held ship.png, ship_new.png, ship FINAL.png and ship FINAL 2.png. Nobody knew which one the game used. Some pictures were 4,096 pixels wide, straight from the art tool, so the game took ages to load on a phone.

An asset is any file a game uses that is not code: pictures, sounds, music, fonts and data. An asset pipeline is the fixed set of steps that turns the files artists make into the files the game loads, the same way every time.

Source files and exported files

• Source filesThe editable originals: a layered drawing, a big Nano Banana 2 image, a WAV recording. The team keeps them, but they never ship to players.
• Exported filesSmall, game-ready copies made from the sources: cut to size, compressed and packed. The game loads only these.
• One direction onlyChanges go into the source, then a fresh export. An exported file can always be deleted and made again.

Every asset exists in two forms.

Texture atlases

A sprite sheet (see the art lesson) holds one animation's frames. A texture atlas packs many different pictures, the ship, every alien, the shards and the buttons, into one big image, plus a JSON file listing where each one sits.

Why? One file downloads faster than sixty. And the GPU draws many sprites in one go, a batch, when they share a few images. PixiJS's docs say a batch can use up to 16 different textures, depending on the device, so they advise sprite sheets. Each batch is one draw call: one order from the CPU to the GPU.

Bolt says: In PixiJS, await Assets.load('atlas.json') loads the JSON and its image together. Tools such as AssetPack, from the PixiJS team, pack the atlas for you.

Pick the right format

• PNGLossless, so every pixel stays exact, with transparency. Works everywhere. A safe pick for pixel art.
• WebPLossy or lossless, with transparency. Google measured lossless WebP files about 26% smaller than PNG.
• AVIFOften smaller still, and works in every current major browser. Older devices lack it, so MDN advises keeping a fallback.
• SVGVector shapes, sharp at any size. Great for icons and buttons, not for painted art.

Lossless compression shrinks a file without changing a single pixel. Lossy compression throws away detail the eye barely notices, for much smaller files. JPEG is lossy and has no transparency, so sprites rarely use it.

Every megabyte counts

The art lesson showed how much memory a picture takes once it is open. Download size matters too: many players load the game over mobile data, and nobody likes a long wait before the title screen. So the pipeline keeps downloads small and loads only what is needed now:

• Sizes: export at the size the game shows, plus a 2x copy for sharp screens. PixiJS can choose: ship@{1,2}x.{png,webp} picks WebP if the browser supports it, and 2x on a high-resolution screen.
• Bundles: group assets by screen. Assets.loadBundle('title') loads the title screen first, and the waves can load in the background.

Names and folders

A pipeline runs on rules, and computers are strict about names. The studio's rules:

• Lowercase letters, numbers and hyphens only. No spaces or capitals: many web servers treat Ship.png and ship.png as two different files.
• General to specific: enemy-beetle-walk-01.png, so related files sort together.
• Two digits for frame numbers (01, 02, up to 10), so frame 10 does not sort before frame 2.
• Sources in art-source/, exports in assets/, never mixed.

Let a script do it

Exporting by hand is slow, and people forget steps. So the studio has a build script that runs with one command, npm run assets. Every time, the same way, it reads art-source/ and:

• packs sprites into atlases
• compresses images to PNG and WebP
• turns WAV sounds into small files: MP3 plays in every major browser, and many games add Opus, a newer format, with MP3 as the backup
• writes a manifest, the list of every file, for the loader

AssetPack has a plugin for each of these steps, and Claude Opus 5.5 can set it up.

Bolt says: The script can check our credits and license list too (see Copyright and licenses in Stage 5): an asset with no line on the list stops the build. Next lesson: sound effects and music, the half of game feel you hear.