Melody Pop
Melody Pop
Melody Pop
2D Bubble-Shooter
2D Bubble-Shooter
2D Bubble-Shooter
Overview
Melody Pop is a 2D bubble shooter built in p5.js where you play a guitarist who blasts sparks to pop floating music-note bubbles, each one adding a sound to your song. Our team of three made it as a final class project; I designed and developed the game and illustrated its background art.
Melody Pop is a 2D bubble shooter built in p5.js where you play a guitarist who blasts sparks to pop floating music-note bubbles, each one adding a sound to your song. Our team of three made it as a final class project; I designed and developed the game and illustrated its background art.
Melody Pop is a 2D bubble shooter built in p5.js where you play a guitarist who blasts sparks to pop floating music-note bubbles, each one adding a sound to your song. Our team of three made it as a final class project; I designed and developed the game and illustrated its background art.
Built with
p5.js
JavaScript
Adobe Illustrator
Role
Game Designer, Developer & Background Illustrator
Scope
Game design, development, illustration, graphic design
Team
Team of 3
Platform
Web browser (p5.js)
Context
Final class project
Visual design
The Look of Melody Pop
The Look of Melody Pop
The Look of Melody Pop
01 / 04
From Concept to Reality
From Concept to Reality
From Concept to Reality
Early sketches of the layout, HUD and controls, including the score bar, line guide and guitar “gun”, that shaped the final game.
Early sketches of the layout, HUD and controls, including the score bar, line guide and guitar “gun”, that shaped the final game.
1 / 4
1 / 4
Concept sketch: layout, HUD and controls
Concept sketch: layout, HUD and controls
2 / 4
Background, step 1: textured gradient base
2 / 4
Background, step 1: textured gradient base
3 / 4
Background, step 2: speaker stacks added
3 / 4
Background, step 2: speaker stacks added
4 / 4
Final background: cables and score panel
4 / 4
Final background: cables and score panel
02 / 04
Typography
Typography
Typography
I selected the game’s two typefaces: one for the logo and titles, and one for secondary text.
I selected the game’s two typefaces: one for the logo and titles, and one for secondary text.
Title Font: DT Noted
Secondary Font: Still Time
03 / 04
Note Bubbles
Note Bubbles
Note Bubbles
The music-note bubbles players pop, in six colour variants for visual variety.
The music-note bubbles players pop, in six colour variants for visual variety.
04 / 04
Player Character
Player Character
Player Character
The guitarist’s two animation states: idle, and shooting sparks from the guitar.
The guitarist’s two animation states: idle, and shooting sparks from the guitar.
Idle
Shoot
