173 lines
8.3 KiB
Markdown
173 lines
8.3 KiB
Markdown
**Name**: Samantha Lopez
|
|
|
|
**ID**: 20266142
|
|
|
|
**Email**: samantha@kaist.ac.kr
|
|
|
|
**Gittea Repo**: [https://git.prototyping.id/20266142/The-Full-Hue](https://git.prototyping.id/20266142/The-Full-Hue)
|
|
|
|
**Video Demo**: [https://youtu.be/UBSl3wiXSGM](https://youtu.be/UBSl3wiXSGM)
|
|
|
|
# Game Description
|
|
_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](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)
|
|
|