The Full Hue is a 2D platformer game based around the themes of color and emotion. The game begins completely gray. Each level is themed around a specific color and its corresponding meaning: orange is warmth and creativity, yellow is joy and anxiety, blue is depth, and so on. The goal is to collect the color fragments scattered across each levels platforms, restoring color to the world one hue at a time.

How to play:

Move utilizing the arrow keys or WASD

Key	Action
`← →` or `A D`	Move left/right
`Space`, `↑`, or `w`	Jump

Collecting Fragments: small glowing fragments are placed on the platforms across each level, to collect them simply walk into them. As they are picked up a small quote appears at the top of the screen and the level's background is gradually tinted to its corresponding color.

Avoid Hazards: Enemies walk back and forth on platform. Tar puddles sit on the ground floor. Coming into contact with either costs the player a life, there are 3 lives per level. Taking damage triggers a short invincibility period with a blinking effect so that the player can recover and reset.

Completing the level: You successfully complete a level by collecting every fragment at that stage. An overlay with a short reflection will be shown upon level completion which will allow you to move to the next level.

Game progress: Levels unlock sequentially as they are completed. Completing a level permanently unlock the next one, making it visible on the level select screen. Locked levels show a ? symbol.

After beating all levels

Once all 10 levels are completed the game enters a free explore mode. The home screen changes to a new message inviting the player to go through the game again now in full color and without obstacles. Re-entering the game levels removes the tar puddles and enemies and the backgrounds are shown in full color. The game becomes a sort of gallery inviting the player to walk through each level again appreciating the art and reading the messages at a more leisurely pace.

Game features

Free-explore mode: After all 10 levels are beat, re-entering levels removes tar and enemies, and the full color backgrounds are shown. The home screen also changes to a new message with a rainbow animated title.

Level visual identities: I illustrated a background image for each level (created grayscale and full color versions), the enemies, tar puddles, heart icon for lives, and the player. Specific color HEX codes where chosen for HUD, quotes, and overlays.

Color tint: The background of each level changes from gray to full color as each fragment is collected, giving the player a visual feedback on their progress.

Browser background: The area outside of the game canvas has animated dots in the game's 10 hex codes. They blink at randomized rates and phases so that the browser doesn't feel empty, I wanted the dots to mimic the twinkling of stars in a night sky.

fragment animations: The fragments bob up and down based on a sine wave (they are offset with a random phase so that they aren't synchronized), spin, and emit a colored glow.

Invincibility: when a player loses a life they gain 1.5s of invincibility. The sprite is hidden every 6 frames to create a blinking feedback without having to animate anything.

Asset creation

I illustrated all the game assets myself to give the game a more indie feel. Please access and view all the art time lapses and final products via this notion link.
- https://www.notion.so/Asset-Creation-The-Full-Hue-34ff941b5e51808da8b1c6204cc0e0ce?source=copy_link

Code organization

The file structure

My files are organized as illustrated below:

Data Flow

UML Diagrams

Game Screen

using Game.svelte I layer four components in a single 800x450 container. The organization is as follows:

component	contents	z-index
GameCanvas	p5 canvas	0
HUD overlay	lives and fragment info display	10
QuoteToast	quote displayed on fragment collection	20
LevelCompleteOverlay	Final level quote & next level button	30

How GameCanvas.svelte runs the game loop

The p5 draw() function is going at 60fps and doing the following each frame:

Draw the background image
allSprites.update() - checks for collisions & handles p5play physics
updates the color tint overlay
fragment.drawGlow() and update() - fragment animation and callback in case of collection
enemy.update() and overlap check - enemy animation and updates lives in case of overlap
tar overlap check - updates lives on overlap
splat effect called when triggered
fall-off-screen check for avatar
allSprites.draw() - render all the sprites using p5play

LevelData.js Organization

{
    id,
    name, 
    color, 
    bg, 
    bgcomplete, 
    playerImg, 
    spawnX, 
    spawnY, 
    platforms: [{x,y,w,h},...],
    fragments: [{x,y,color},...],
    enemies: [{x,y,patrol},...],
    tar: [{x,y},...],
    fragmentQuotes: [{'...','...'}],
    completeQuote: '...',
}

gameCanvas.setup() reads this information and draws the game objects from it. This makes it easier to create new levels, change platform positions, text, etc. by only having to update the information on this file.

Svelte stores = shared states

colorStore.js

Function/variable	purpose
`lives`	player lives (0-3)
`colorOpacity`	controls tint overlay based on fraction of fragments collected
`levelColor`	the hex color of the current level
`fragmentsCollected`	keeps count of the collected fragment number
`unlockedColors`	array of unlocked hex colors per session
`gameCompleted`	`true` when all colors are in `unlockedColors` controls some free-explore mode specifications
`resetLevel()`	resets the level state after 3 lives are exhausted
`completeLevel()`	pushes level color into `unlockedColors`

quoteStore.js

Function/variable	purpose
`fragmentQuote`	controls `QuoteToast` information
`showFragmentQuote()`	controls visibility of `QuoteToast`
`completedQuoteData`	controls `LevelCompleteOverlay` information
`showCOmpletedQuote()/clearCompleteQuote()`	controls overlay visibility

Coding Patterns used

Pattern	Where	what it does
Observer / Stores	`colorStore`, `quoteStore` → UI	When something changes, every part of the screen that uses that information updates automatically
Builder	`levelData.js`	All 10 levels are written in one big list of settings. The game reads that list to build each level
State Machine	`_canJump/_peakReached` in Player, `gameState` in GameCanvas	only allows certain changes in order, the game tracks what is happening so impossible things can't occur, like jumping forever

Areas where improvement can be made

the game progress is tracked by session so refreshing the browser resets things like unlockedColors to empty. Essentially, refreshing resets all game progress.
The tint effect on each level uses a rectangle over the canvas that changes in opacity as fragments are collected. This is not ideal as it simply tints the background image instead of revealing the original background colors, however, it still gets the point across. Ideally an animation of some sort or different approach would look more aesthetically pleasing, due to time I could not work on this further.

Resource Acknowledgement: The following were utilized in the creation of this project

Course notes (ID 30011)
Resources from w3schools.com
p5.js
p5play
svelte
copilot (coding assistance)
claude (coding assistance and spell checker)
Procreate (illustration)
Figma (illustration)