How to Use Aseprite for Browser Game Pixel Art

Aseprite is the de facto standard tool for indie pixel art. It’s pixel-perfect by default, animation-aware, ships with a tileset system, and exports cleanly to formats every browser engine accepts. This tutorial walks through how to use Aseprite for browser game work specifically — what tools matter, how to set up tilesets and animations, and how to export sprite sheets that drop straight into Phaser, PixiJS, or vanilla Canvas.

Why Aseprite specifically

You can do pixel art in Photoshop, Procreate, GIMP, or Piskel. Aseprite is the standard because everything in it is designed for pixel-precise work. Brushes don’t antialias by default. The pencil tool snaps to integer pixels. The timeline treats each frame as a discrete drawing, not a tween. Layers are stack-blendable but the renderer never adds half-pixels. For browser game work — where you’re going to scale sprites by integer factors and want crisp edges — this matters.

The competition is good in different ways (Piskel is free in the browser; Pixaki on iPad has a nice touch UI), but Aseprite is the desktop industry default for a reason.

Canvas setup

Open Aseprite. File → New. The defaults are 32×32 px and indexed color. For browser game work, you usually want a different setup.

• Canvas size: Match your in-game sprite size. Common choices: 16×16 (NES-style), 32×32 (SNES-style), 64×64 (GBA-style). A larger canvas means more detail but also more pixels to paint.
• Color mode: RGBA for full color, or Indexed if you want strict palette control. For modern browser games, RGBA is usually fine. Indexed mode forces a fixed palette which is excellent discipline if you want a cohesive art style.
• Background: Transparent. Browser games composite sprites over backgrounds; a transparent canvas is what every engine expects.

Choosing a palette

Aseprite ships with a palette panel (Window → Palette). The default is a basic RGB swatch. Click the palette presets dropdown for a list of well-known palettes — DB16, DB32, AAP-64, Pico-8, Endesga 32. These are the palettes most indie pixel art communities use.

For browser game work, pick a palette before you draw the first pixel. Switching palettes mid-project is doable in indexed mode (Sprite → Color Mode → Indexed → choose palette → remap) but it’s friction you don’t want.

Drawing your first sprite

The core tools you’ll use 90% of the time:

• Pencil (B): Pixel-perfect brush. Single-pixel by default. Increase brush size in the top toolbar.
• Eraser (E): Removes pixels to transparent.
• Bucket (G): Fills a connected region of the same color.
• Line (L) and Rectangle (U) and Ellipse: Geometric shape tools with pixel-perfect output.
• Color picker (I or Alt-click): Sample a color from the canvas.

Hold Shift while drawing a line for an axis-aligned constraint. Press X to swap foreground and background colors. The keyboard shortcuts feel like Photoshop’s; if you know one, you know the other.

Tilesets for level art

Aseprite has a native tileset system added in version 1.3. Sprite → New Tileset Layer creates a layer where each cell snaps to a fixed grid size. You can paint tiles individually and reuse them across the level.

To create a tileset:

1. Set your canvas size to a multiple of your tile size (e.g., 256×256 for 16×16 tiles).
2. Sprite → New Tileset Layer. Set the tile size.
3. The Tileset panel (Window → Tileset) shows all unique tiles. Paint a new tile by drawing on the canvas; Aseprite auto-deduplicates.
4. Export the tileset as a flat PNG (File → Export Tileset).

This output drops directly into any tile-based level editor (Tiled, the LDtk editor, or your engine’s own tile system). For browser games specifically, the tileset PNG is the texture; your engine references each tile by index.

Animation

The Aseprite timeline (Window → Timeline) is where animation lives. Each frame is a discrete drawing. To animate:

1. Draw your first frame.
2. Click the “+” on the timeline to add a new frame. The previous frame is copied as a starting point (onion-skin shows the previous frame faintly).
3. Modify the new frame.
4. Repeat. Press Enter or click the play button to preview the animation.

Set the frame duration in the timeline (right-click a frame → Frame Properties). 100ms (10 fps) is the floor for old-school feel; 50ms (20 fps) is the standard for smooth pixel animation; 33ms (30 fps) is the smoothest the pixel-art aesthetic typically supports.

Tags for animation states

For a character with multiple animation states (idle, walk, jump, attack), use tags. Right-click on the timeline frame range → New Tag. Name it (e.g., “walk”), set the frame range, choose a direction (forward, reverse, ping-pong).

When you export to a sprite sheet, the tag information ships in the JSON metadata. Your browser engine can then read the JSON and play the correct animation by tag name. This is the single most useful Aseprite feature for game integration.

Exporting to a sprite sheet

File → Export Sprite Sheet. The dialog has several tabs:

• Layout: “Horizontal” puts frames side by side. “Packed” auto-arranges for minimum dead space — usually what you want.
• Sprite: Choose what to export. “All Frames” exports the full animation; “By Tag” exports per tag.
• Output: The PNG path. Check “JSON Data” to export metadata. Choose “Hash” or “Array” format — “Hash” is more readable, “Array” is more compact.

The exported PNG is your texture atlas. The exported JSON describes each frame’s position, size, duration, and tag membership.

Importing into Phaser, PixiJS, and others

For Phaser, the standard import:

this.load.atlas('player', 'player.png', 'player.json');
// ...later...
this.add.sprite(x, y, 'player', 'walk_0');
this.anims.create({
  key: 'walk',
  frames: this.anims.generateFrameNames('player', { prefix: 'walk_', start: 0, end: 5 }),
  frameRate: 12,
  repeat: -1
});

Aseprite’s exported JSON is compatible with Phaser’s “JSON Hash” format. The tags in your Aseprite file map to animation keys in your Phaser scene.

For PixiJS, the analogous setup uses the PIXI.Spritesheet class. For vanilla Canvas, parse the JSON yourself and draw the right rect for the current frame.

CLI export (for asset pipelines)

Aseprite has a command-line interface that lets you script exports. Useful for projects with many .aseprite source files where re-exporting by hand becomes a tax:

aseprite -b player.aseprite --sheet player.png --data player.json --format json-hash --sheet-pack --split-tags

Add this to your Makefile, npm script, or asset build step. Edit a sprite, re-export automatically, the engine picks up the new texture on next reload. The CLI is the single most underrated Aseprite feature for serious browser game pipelines.

Common mistakes

Three things new Aseprite users get wrong consistently:

• Antialiased brushes: The default Pencil is pixel-perfect, but if you use a soft brush you’ll get half-pixel edges that look terrible when scaled. Stick to the Pencil unless you know why you’re using something else.
• Wrong export scale: Browser games often render pixel art at 2x or 3x integer scale. Don’t bake the scale into the source PNG — keep the source at 1x and let the engine scale at render time. Otherwise you can’t easily switch scale factors.
• Forgetting to export by tag: If you don’t check “Split by Tag” in the export dialog (or use –split-tags on CLI), your sprite sheet won’t have per-animation metadata in the JSON. The result: you have to hand-compute frame ranges in code.

Resources

Aseprite’s official documentation at aseprite.org/docs covers every tool and panel. The community has produced extensive tutorial videos — search “Aseprite walk cycle tutorial” or “Aseprite tileset tutorial” for visual walkthroughs. For browser-specific pixel art inspiration, our piece on browser pixel art games covers the field.

Frequently asked questions

Is Aseprite free?

Aseprite costs about $20 on Steam or itch.io. The source code is on GitHub under a license that lets you compile and use it yourself for free. Most users buy the binary because $20 is cheap for a tool you’ll use thousands of times.

Can I use Aseprite on a Chromebook?

Not natively. Aseprite is Windows, macOS, and Linux. On a Chromebook with Linux mode enabled, you can build and run it. Otherwise use a web-based alternative like Piskel.

Does Aseprite work with Phaser out of the box?

Phaser’s loader accepts the JSON Hash format Aseprite exports natively. Set –format json-hash and your sprite sheet drops straight into Phaser’s atlas loader.

What’s the best canvas size for browser pixel art?

16×16 or 32×32 for character sprites. 256×256 or 512×512 for tilesets. Match the resolution your game will render at — bigger is more detail but also more pixels to maintain.

Should I use indexed color or RGBA?

RGBA for flexibility. Indexed if you want strict palette discipline and a cohesive vintage look. Modern browser games can handle either; choose based on aesthetic, not technical constraint.

The takeaway

How to use Aseprite for browser game pixel art boils down to: set up the canvas right, pick a palette early, learn the Pencil, the timeline, and tags, and export to sprite sheet plus JSON for clean engine integration. The CLI makes it pipeline-friendly for serious projects. For a non-pixel browser game break while you’re learning, the Chrome Dino game is right here.