Experiment 5 – A Little Birdie

main-image-smaller

Team Members

Melissa Roberts

Donato Liontino

Description

We chose to use the book “The Doubleday First Guide to Birds” for our project. We decided we wanted to code a simple video game. Since our book had no narrative to follow, we had a lot of room to interpret it as we like.

We centered our game about bird watching. The game is to be played by four people, each player controls their own character on the screen, which is represented by a pair of binoculars, and their objective is to collect birds from the “play area” and to trade them with each other.

screenshot-23

The game is played with each character looking at the same computer monitor. Upon startup of the page, they can see a stylized game board that is divided into four quadrants which represent the domain for each player’s icon to move in. Four species of bird can be seen flying around the laptop screen:

the scarlet tanager (red)                            the bluejay (blue)

screenshot-16 scarlet_tanager screenshot-18 bluejay

the tree swallow (green)                            and the meadowlark (yellow)

screenshot-15 tree_swallow screenshot-17 meadowlark

Each player uses their own smartphone as a controller, connecting to the webpage for their user by scanning the associated QR code. The object of the game is to collect all 4 of your bird species, at which point you receive a “winning” message, and the rest of the players receive a “losing” message.

img_2920  img_2919

Code

https://github.com/melissatanja/melissatanja.github.io

Rationale for Coding Environment (p5)

We decided to user p5 for a number of reasons. The first reason is the visual concept for our game; our vision was for a 2D playing area creating a “birds eye view” scene. Had we used Unity, we most likely would have created 3D objects in a 3D scene, which wouldn’t have matched our game concept as well. The second reason is the complexity of our game; we were already planning to do a lot of data transfer between multiple devices, so we thought it best to stick to a coding environment we were comfortable with. Neither of us had used Unity before, and that would have added another obstacle to communicating between devices. The third reason was the user & laptop displays; we could have used unity for the laptop display, but the user displays had only buttons and bird-count, and using Unity wouldn’t have added anything. In fact, we weren’t even sure you could use Unity on a phone. Had we used Unity for the laptop environment, we still would have used p5 for the phone environments, and using 2 environments for the project didn’t make sense.

Multiple Users

Challenge: Organizing Sets of Data for Each User in Laptop JS

sketch1

Data transfer was a recurrent problem while creating our game, due to the fact that we had 5 webpages sending information back and forth over 2 channels. Another issue with sending information between so many devices was the lag, resulting in slow and glitchy movement of the user icons (binoculars). To combat this, in future we could slow the movement of the birds to match the speed of the users, and make the birds easier to catch.

user4 user3user2 user1

Bird & User Movement

Challenge: Controls, Glitches

sketch3

The user movement is created by receiving data from each phone’s gyroscope: the angle tilted around the X-axis and the angle tilted around the Y-axis. These angles we rounded and reduced to make the phone less sensitive to movement, for example, your icon wouldn’t jump around if your hands were a little shaky. We then mapped the minimum and maximum phone angles (which we’d constrained to -45 degrees and 45 degrees) to the edges of the quadrant the user icon was to be confined in. Due to the above-mentioned lag in communication between phones and the laptop / playing screen, the user icons did jump back and forth a bit or “teleport”.

binoculars1 binoculars2

We tried to implement a different method for controls, which would add more of a “joystick” feel to the controllers. However, this function did not work well, the constraints were lost, and the icons got stuck at the edges of the playing field. We decided to stick with the lagging controls because it was the less problematic of the two.

Bird Catching & Count

Challenge: Data Transfer / Display, Multiple Users / Multiple Sets of Data

all-user-counts-sending

One of the types of data being sent back and forth between the user webpage and the laptop webpage was the bird-count for each user. The laptop file kept track of the number of scarlet tanagers, bluejays, tree swallows, and meadowlarks that each user had collected, and sent that information back to each user regularly. The bird-count depended on the user icon coming into contact with the bird icons on the laptop screen as well as trading between users, when the user pressed one of the three trade button on their screen. The number of each bird was then displayed on the user’s screen, so the information had to be updated frequently.

birdcount

We had initially planned to include bird sounds, specific to each of the four species, upon catching a bird. However, we ran out of time, but if we expand on the project in the future we would add sound effects to the game. 

Bird Trade

Challenge: Data Transfer / Communicating Between Users Through the Laptop, Standstills

For trade to work, a user presses one of three trade buttons on their screen, each corresponding with another user in the game. The laptop JavaScript file receives data including who pressed the trade button, and which button was pressed, and checks if the users have the birds required for trade.

sketch2 trade-function

For example, if the red user presses the blue button, the trade function checks if the red user has a bluejay to trade and if the blue user has a scarlet tanager to trade. If they both have these birds, the red user receives a scarlet tanager and loses a bluejay, and the blue user receives a bluejay and loses a scarlet tanager. If they do not have the right birds, nothing happens.

An issue we encountered during the critique was trading standstills, which occurred when none of the users had a spare bird to trade with another user. A solution that was suggested during the critique was that there be more than 4 of each bird to be collected, allowing more birds available for trade. Another suggestion was that a function be added to allow the user to set free a bird they had collected, which would return to the laptop screen to be caught by another user.

Win & Start Functions

Challenge: Repeating Alerts

qr_code_t qr_code_s qr_code_m qr_code_b

screenshot-21

The game requires 4 users, each connected to their own webpage. We created QR codes for each user in order to make connected fast & easy – no need to type in a URL or be sent a link. Simply scan & play. To begin playing, each player must press the “start” button, this ensures that everybody begins at the same time. The “start” function was quite successful; it created suspense as well as a rush when the game began.

win img_2925

The “win” function was implemented when a user had collected all 4 of their birds. The winner then received an alert saying “A little birdie told me you won!!!” and at the same time, the other users received an alert saying “Better luck next time, silly goose”. The issue we ran into is that these alerts got stuck in a loop, so when the user pressed “okay” the alert would pop up again, and wouldn’t go away until the user had refreshed the page.

Project Context

pokemon1  pokemon4

While we didn’t follow any tutorials for similar games, we were inspired by the layout and game function of the Pokemon Ruby/Sapphire/Emerald series. We implemented the same “from above” view and adopted a similar game purpose: to catch them all. We also used PubNub’s documentation to learn about the syntax for communicating between multiple devices and over multiple channels, with all devices having keys to both send and receive messages.

Leave a Reply