Art, sprites and animation
A game that looks like a collage
Kai and Remy's first Hyper Shards mixed art from everywhere: a shiny 3D-looking ship, cartoon aliens and tiny pixel shards. Each picture was fine on its own. Together, nothing matched, and the game looked unfinished.
Art is the first thing players judge, often from one screenshot on a store page. Most 2D game art is made of sprites: flat pictures the game moves around as one object, like the ship, an alien or Sprig.
Pixel art or vector?
- Pixel artDrawn dot by dot on a small grid, like 32 by 32 pixels. Crisp and retro, and quick for a small team. Scale it up by whole numbers (2x, 3x) with smoothing turned off, or it turns blurry.
- Vector artStored as maths: points, lines and curves. It stays sharp at any size, which is handy for phones with very different screens. SVG is a common vector format.
- Painted artBig, detailed pictures made of pixels. Beautiful, but the files get large fast.
Quick check
Kai scales a 32 by 32 pixel-art ship up to 96 by 96, and it looks blurry. What is the fix?
- Turn off smoothing, so each pixel becomes a sharp 3 by 3 block
- Scale it to 100 by 100 instead
- Save it as a bigger file
Show the answer
Turn off smoothing, so each pixel becomes a sharp 3 by 3 block
Smoothing blends pixels together, which blurs pixel art. With smoothing off (in CSS, image-rendering: pixelated) and a whole-number scale like 3x, every pixel stays a crisp square.
One style, one palette
A style guide is the studio's rule list for art:
- A paletteA fixed set of colours that every sprite uses. The PICO-8 game maker has just 16 colours, and its games still look great.
- Colours that mean thingsIn Hyper Shards, cool blues are the player and hot reds and oranges are danger, everywhere in the game.
- Same light, same linesLight always comes from the same side (often the top left), and outlines are always the same thickness.
- Same pixel sizeNever put a chunky 16-pixel sprite next to a fine 64-pixel one at the same size. Mixed pixel sizes look messy.
Frames and sprite sheets
Animation is a flipbook. Sprig's walk is 6 still pictures, called frames, shown one after another.
Instead of 6 separate files, the frames sit side by side in one image called a sprite sheet. Every frame is 64 by 64 pixels, so frame 3 starts 3 x 64 = 192 pixels from the left. The game cuts out one rectangle at a time. One file loads and draws faster than six.
Animations usually show 8 to 12 drawings a second, even in a game running at 60 frames a second.
Read the code
1// Sprig walks: 6 frames, 64 x 64 pixels each2const FRAMES = 6;3const ANIM_FPS = 10; // drawings per second4function walkFrame(time) { // time in seconds5 return Math.floor(time * ANIM_FPS) % FRAMES;6}7// cut out: x = walkFrame(t) * 64, y = 0
Frames are numbered 0 to 5. Which frame does Sprig show at 1.25 seconds?
- Frame 0
- Frame 2
- Frame 5
- Frame 12
Show the answer
Frame 0
1.25 x 10 = 12.5, and Math.floor rounds down to 12. The % sign gives the remainder after dividing by 6, and 12 / 6 leaves 0, so the walk has looped twice and is back on frame 0. Using time, not frame counts, keeps the walk the same speed on every screen.
Keep images small
A picture has two sizes. The file size is what players download. The memory size is what it takes once the game opens it: every pixel is unpacked to 4 bytes (red, green, blue and transparency).
So a 2,048 by 2,048 picture uses about 16 MB of memory, even if the PNG file is small. Phones run out of memory fast, and then games stutter or crash.
The rule: make sprites the size they are shown. A ship shown at 64 pixels does not need a 1,024-pixel drawing.
Prompting Nano Banana 2
The studio's image tool is Nano Banana 2, Google's AI image model. We use it for concept art and sprite ideas. A good prompt names:
- Subject: a small round alien ship with three glowing eyes.
- Style: pixel art, thick dark outline, flat shading.
- Palette: reds and oranges, or "only these colours" with a list.
- View angle: from directly above, or from the side.
- Background: plain or transparent, so it can sit on any level.
Prompt pick
Remy needs a new alien sprite idea for Hyper Shards. Which prompt is best?
- Cool alien spaceship, make it awesome
- Pixel art alien ship seen from directly above, round body, three glowing eyes, red and orange palette, thick dark outline, transparent background
- A realistic photo of a huge alien mothership over a city at sunset
Show the answer
Pixel art alien ship seen from directly above, round body, three glowing eyes, red and orange palette, thick dark outline, transparent background
The second prompt names the subject, style, palette, view angle and background, which matches a top-down shooter. The first gives the AI almost nothing, and the third is a photo-style scene that would clash with the game.
Consistent, cleaned up and allowed
- Reuse one style promptSave the style, palette and angle words and paste them into every prompt, so 20 aliens look like one family.
- Edit and clean upAI pictures often come out the wrong size, with stray pixels or off-palette colours. Fix them in an editor, and check the background is really transparent.
- Check the termsBefore AI images go into a game we sell, read the tool's latest terms to check commercial use is allowed. Some countries may not give copyright to purely AI-made art.
- Keep a recordNote the tool, date and prompt for each image, and never ask for copies of famous characters.
Bolt says: Next lesson: the asset pipeline, the path every picture and sound takes from the artist to the game.
Fact-checked 9 October 2026
- PICO-8 specs (Lexaloffle) lexaloffle.com
- MDN: image-rendering developer.mozilla.org
- Google: Nano Banana 2 announcement blog.google
- US Copyright Office: AI report Part 2, copyrightability copyright.gov