How to Draw a 16×16 Golden Quarterstaff in Pixel Art
This quarterstaff is only three pixels thick, but its perfect diagonal makes small mistakes obvious. A missing outline cell creates a notch; one misplaced core cell bends the weapon. The safest method is to treat the sprite as three parallel diagonals, then cap and colour the centre line symmetrically.
The exact CC0 reference contains 46 visible pixels and 4 visible
colours. We will build it in four stages. Coordinates use (x, y) from the
top-left.
Explore the complete drawing history
Move through the saved frames before drawing. Show changes reveals that the silhouette is finished first, while the copper, amber, and gold cells all sit on the main diagonal.
Step 1: draw two unbroken diagonal outline rails
Begin with black at x0–1 on row 0. For every row from 1 through 14, place two black pixels around the centre diagonal:
- the left rail is
(y - 1, y); - the right rail is
(y + 1, y).
Finish with black at x14–15 on row 15. The result is a hollow diagonal tube with 32 outline pixels. Checking the rails before adding colour is important:
each interior row must show the exact pattern black, gap, black.
Step 2: seat one copper cap inside each end
Place copper #C07F3A at (1,1) and (14,14). These are not the outermost
pixels—the black pairs on rows 0 and 15 are the physical end caps. The copper
cells sit one step inside them and begin the warm wooden shaft.
The two coordinates mirror each other across the centre of the canvas. If one cap is offset, the staff will look tapered at one end.
Step 3: add matching amber transition cells
Move one diagonal step inward from each copper cell. Add amber #E0993C at (2,2) and (13,13).
This creates the same two-colour transition at both ends: black cap, copper, amber, then gold. The amber cells soften the jump from dark copper to the much brighter centre without widening the one-pixel core.
Step 4: fill the ten-cell golden core
Use gold #FBBD5D on the main diagonal from (3,3) through (12,12). That is
exactly ten cells. Do not include rows 2 or 13; those belong to the amber
transitions.
Read the completed centre line from top-left to bottom-right:
copper → amber → gold × 10 → amber → copper
The sequence is both a colour recipe and a quick accuracy check. Every coloured cell must have one black neighbour above-right and one below-left.
Exact row blueprint
| Rows | Final non-transparent pixels |
|---|---|
| 0 | x0–1 outline |
| 1 | x0 outline, x1 copper, x2 outline |
| 2 | x1 outline, x2 amber, x3 outline |
| 3–12 | x(y−1) outline, xy gold, x(y+1) outline |
| 13 | x12 outline, x13 amber, x14 outline |
| 14 | x13 outline, x14 copper, x15 outline |
| 15 | x14–15 outline |
Watch the colour sequence fill the shaft
The automatic player establishes all 32 outline pixels first. It then adds the two copper caps, the two amber transition cells, and finally the continuous golden centre.
Automatic drawing
Start with an empty 16×16 canvas
Draw the quarterstaff yourself
Build both rails before colouring the centre. Switch to Diff after each stage: gaps in the rails and shifts away from the main diagonal will stand out immediately.
Draw the golden quarterstaff yourself
Rebuild all 46 visible pixels. Use Diff view to catch any break in the two rails or the centered warm-colour sequence.
What this sprite teaches
- A one-pixel diagonal needs two supporting rails. They preserve thickness and make the weapon readable.
- End caps belong outside the material gradient. Black closes the form before copper begins the core.
- Mirrored accents create balance. Copper and amber appear at equal distances from both ends.
- A palette can describe structure. The colour order marks cap, transition, and long central shaft.
- Repetition is an accuracy tool. Rows 3–12 use one rule instead of ten unrelated placements.
The source sprite is by Shade and is released under CC0 on OpenGameArt. The finished tutorial frame matches every source cell exactly.