9.2 — Hex, RGB & Data Abstraction

Hex = binary in groups of 4. One hex digit (0–9, A–F) covers exactly 4 bits: 0000=0 … 1111=F. A byte is therefore exactly TWO hex digits. Nobody reads 1111111111111111 when FF FF says the same thing out loud.

Dec	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Hex	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
Bin	0000	0001	0010	0011	0100	0101	0110	0111	1000	1001	1010	1011	1100	1101	1110	1111

A color is four bytes. Unity's Color32 is R, G, B, A — one byte each, 0–255, so a color is literally a hex number like FFE681FF (full red, a strong green, a little blue, full alpha). When you type new Color32(255, 230, 129, 255) you are writing FFE681FF in decimal cosplay. Here are three colours from your own project and from this page, decoded by hand:

// The coin you collect is drawn from Coin_Animation.png.
// Its busiest colour is #FFE681 → R=ff=255, G=e6=230, B=81=129

// The site you are reading right now is themed blue:
// #6cb2ff → R=6c=108, G=b2=178, B=ff=255  → (108, 178, 255)

// All three of your scenes still carry Unity's default camera
// background, because nobody ever chose anything else:
// (0.192, 0.302, 0.475) as floats → (49, 77, 121) as bytes → #314D79

That last one is worth a second look. The camera shows you a Color — four floats between 0 and 1 — and the machine's idea of the same colour is three bytes. Multiply each float by 255 and round: 0.192 × 255 = 49, which is 0x31. Same colour, two spellings, and the byte one is the one you can count with. The # in CSS means "hex follows," and web colors are 6 hex digits because web alpha is written separately.

Step 1 — decode your game's palette. Every Sprite Renderer in this project is still on its default tint — (1, 1, 1, 1), which is #FFFFFF — so no object in the game is tinted from code. What you see on screen is the artwork and nothing else, which means the art IS the palette. Read three colours out of it with an eyedropper (the Sprite Editor has one, and so does any image editor), and write the hex AND the decimal triple for each:

• the stone ground tileset your cave walls are cut from — a desaturated grey
• the coin sheet, Coin_Animation.png — a bright gold
• the blood on the axe blade — a very dark red

Check your answers write both spellings first

Then compare. Each hex pair is one byte and each byte is a decimal number from 0 to 255, so this is three conversions per colour, not nine.

• stone: #878579 = (135, 133, 121)
• coin gold: #FFE681 = (255, 230, 129)
• axe blood: #8A2000 = (138, 32, 0)

Then pick a fourth colour of your own and do the same. Notice what the hex made visible in one glance: the stone is high in all three channels and low in saturation, the gold is high in R and G with almost no B, and the blood is almost all R. Now you can QUOTE that instead of gesturing at it.

Step 2 — program a palette. Colors as data — the abstraction, in code. These are the three you just read, with the byte values the eyedropper gave you:

public static class Palette
{
    //              what the eyedropper found    hex        Color32
    public static readonly Color32 CAVE_ROCK = new Color32(0x87, 0x85, 0x79, 0xff);
    public static readonly Color32 COIN_GOLD = new Color32(0xff, 0xe6, 0x81, 0xff);
    public static readonly Color32 BLOOD     = new Color32(0x8a, 0x20, 0x00, 0xff);
}

// the hit flash 8.3 asks you to build, written out:
spriteRenderer.color = new Color32(0xff, 0xff, 0xff, 0xff); // white for 0.1s
// phase 3 boss tint:
spriteRenderer.color = Palette.BLOOD;

Why a palette class beats per-object color picking: change ONE line, the whole game's mood shifts — and every object that was reading it changes at the same time, with no object-by-object hunting. That is abstraction — the exam's word, in your repo. It is also the reason the numbers above had to be read off the art rather than guessed: a palette is only worth anything if it is the same colour the artist drew.

Step 3 — the alpha byte. The fourth byte is transparency. 0xff = solid; 0x80 = half-visible (the hit flash above could EASE from 0x80 to 0xff instead of snapping). Every prefab in this project is currently #FFFFFFFF — fully opaque — so pick one and change only the fourth byte. Turret_Projectile.prefab is the clearest to watch: it draws Turret_Bullet.png, whose busiest colour is #008DF0, and dropping its alpha to 0x80 turns that solid blue bullet into a suggestion of one. Note the readability change: transparent threats read as "avoidable" — alpha is communication, not decoration.