Magpie Messenger
Can you help the magpie deliver the message?
Design - Games, Illustration
Duration
4 weeks
November 2021
Tools
p5.js
Adobe Photoshop
This project was completed as part of a graduate course in programming concepts for human centered design at the University of Washington in Autumn 2021.
The goal of this project was to incorporate all concepts covered throughout the course (variables, conditionals, functions, parameters, arrays, and loops).
Game Description:
The magpie has a very important message to deliver, but some of the letters are missing! Help the magpie find all of the missing letters in the field to complete the message and successfully deliver his letter.
I created this game as a gift for my partner, James. The letter is a personal note, but I don't mind it being viewed by the public. There's nothing too weird in there :)
Planning:
Before any code implementation, I went through several stages of planning in order to outline and define the flow and main components for the game.
Diagramming
1. Initial Plan
Outlining major stages of the game and their elements. At this point I knew that the game needed an introduction, the main game, and the final/end screens. I also began to brainstorm how the scene for the main game would be created along with the main functions of the game and the main character sprite (magpie).
2. Flow Outline
More detailed outline for the flow and breakdown of the entire game, from the first intro screen to the final ending screen. At this point, I detailed some of the major functions and variables of the game and laid out the whole progression of playing through the game.
Basic Game Mechanics
Screen advancement:
Clickable button
Magpie movement:
WASD keys
Arrow keys
When magpie sprite overlaps with letter sprites:
Remove letter from "missing" inventory Add letter to "found" inventory
Game complete when:
All letters are found (magpie sprite overlaps with letter sprites)
Game Progression
Intro (2 screens):
1. Intro to game
2. Instructions
Main Game (1 screen):
Game is played
Final (2 screens):
1. Completion notice
2. Completed message revealed
Visual Design:
All elements and character sprites were rendered in Adobe Photoshop. I aimed for a style that was whimsical and playful, yet still simple.
Magpie Character Design
Sketches
A magpie was chosen as the main character because it is a bird that both my parter and I like and are interested in. Its simple yet still attractive coloration lent itself well to the game.
Using photos of real magpies as a reference, I sketched out my design. Initially, a front and back view in addition to the side view were included, but were not implemented into the final design, as it was not necessary for the sprite's movements.
I wanted to give the magpie an endearing and inquisitive look without being overly "cutesy". Magpies are intelligent birds, so I wanted him to look bright and clever as well.
Final design & animation sequence
I decided to have the magpie loop through a jumping animation both while it is moving and when it is stationary. The animation is comprised of 5 frames that are continuously cycled through.
Movement
The magpie sprite is mirrored depending on which direction (left or right) was last inputted.
For example, if the player moves left and then up, the sprite will move up but stay facing left. If the player moves left and up at the same time, the sprite will move diagonally while facing left.
Letters
The missing letters were chosen based on their frequency of use in the English language and the overall look of the fragmented message. I wanted the message to look unreadable, but also still provide some semblance of structure.
The letter sprites are hand drawn.
Background & contextual elements
In order to both add interest to the environment and context to show movement as the magpie is navigating around the scene, grass and rocks were added. There are 4 different types of each. Each type is loaded as an animation frame, meaning the grass sprite is comprised of 4 frames, each of a different illustration of grass, and same with the rock sprite.
The grass and rock sprites are placed in the scene at random locations and the displayed frame is selected at random, resulting in a different environment every time the game is loaded or reset.
Intro & ending screen design
All intro and ending screens use the same format, which includes the magpie, a speech bubble, a letter, and a clickable button. The speech bubble contains explanations and contextual information. The letter contains either the message itself, or the game's instructions.
The screens are loaded as complete images that include all elements as a the static image, including text. To streamline the process and make it easier for the player to digest the information, I wanted to find a consistent way to present information that maintains the fun and playful aesthetic of the game.
Click here to open the game in a new window
Note: Music will auto-play when window is opened