Flappy Bird AR

 

 

AR Game Experience with volumetric interactions

 

AR Game Experience

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

 

  

    Flappy Bird AR
         AR Game Experience  
   

  

    Flappy Bird AR
         AR Game Experience  
   

OVERVIEW

OVERVIEW

OVERVIEW

03/2018
Hyperreality Course Midterm

Individual Project 
Platform: iPhone X + Unity + ARKit

An AR Flappy Bird Game 

Flappy Bird AR adopts the mechanism of 2D flappy bird game to a first-person perspective game. With AR technology, this project integrates flappy bird games with real-life scenarios to create a unique gaming experience with volumetric interactions.

An AR Flappy Bird Game 

Flappy Bird AR adopts the mechanism of 2D flappy bird game to a first-person perspective game. With AR technology, this project integrates flappy bird games with real-life scenarios to create a unique gaming experience with volumetric interactions.

An AR Flappy Bird Game 

Flappy Bird AR adopts the mechanism of 2D flappy bird game to a first-person perspective game. With AR technology, this project integrates flappy bird games with real-life scenarios to create a unique gaming experience with volumetric interactions.

 

Design Concept

 

Adapt the mechanism of the flappy bird into a real-life scenario with AR technology

 

 

Design Concept

 

Adapt the mechanism of the flappy bird into a real-life scenario with AR technology

 

RESEARCH

RESEARCH

RESEARCH

Flappy Bird in various platforms

Firstly I did some research on the different platforms and forms of the flappy bird game experience on the internet, analyzing their interactions, user flows, and how they integrate with the media and tech they deployed.

Flappy Bird in various platforms

Firstly I did some research on the different platforms and forms of the flappy bird game experience on the internet, analyzing their interactions, user flows, and how they integrate with the media and tech they deployed.

1

Flappy Bird VR

2

AR Flappy Birds 

Different types of AR games

In addition, I searched for some mobile AR games on the market, figuring out their game genres, techniques and constraints.

Different types of AR games

In addition, I searched for some mobile AR games on the market, figuring out their game genres, techniques and constraints.

RESEARCH INSIGHTS

RESEARCH INSIGHTS

RESEARCH INSIGHTS

Perspective determines canvas size

In first-person perspective AR games, the real world is the canvas, and the virtual world is blending with surroundings. However, in an AR game with the third-person perspective, the canvas is usually held on the planes (e.g., table, picture).

In most cases, their daily activities start in the afternoon and are most active around midnight. Staying up late happens a lot. Also, their dining habits are irregular.

Perspective relates on tech

Third-person perspective AR games rely on marker-based tracking to create canvases on targets, while the first-person perspective games utilize SLAM (Simultaneous Localization and Mapping) tech to construct the virtual world.

Some people overexpose themselves on social media, but it is difficult to attract non-Otakus' attention and interactions.

Touch-screen gestures dominate AR games

Regardless of the technology and perspective, the existing interactive modes mobile AR games are still limited in touch-screen gestures.

In most cases, their daily activities start in the afternoon and are most active around midnight. Staying up late happens a lot. Also, their dining habits are irregular.

Flappy Birds with a single input

Even if Flappy Birds are deployed on different platforms, they take a single click/tap/press gesture as the input. This is just a transplant of the input mechanism of the original 2D game.

Otakus are troubled by social problems, even if they are active in online interactions. Online social activities are hard to replace the satisfaction that social connections bring to them in real life.

                

PORPOSAL

PROPOSAL

PROROSAL

Group 8@3x

First-person Perspective

First-person Perspective

& 

& 

Group 9@3x

Volumetric Interactions

Volumetric Interactions

Based on the above insights, I planned to create a first-person perspective Flappy Bird game and put the virtual pipes into the real surroundings with SLAM technology. Rather than tapping, players need to move or jump in the physical space to pass virtual obstacles. I hope the volumetric interactions can emancipate users from screenized interactions and bring user unique game experience. 

Based on the above insights, I planned to create a first-person perspective Flappy Bird game and put the virtual pipes into the real surroundings. Rather than tapping, players need to move in the physical space to pass virtual obstacles. I hope the volumetric interactions can emancipate users from screenized interactions and bring user unique game experience.

Based on the above insights, I planned to create a first-person perspective Flappy Bird game and put the virtual pipes into the real surroundings. Rather than tapping, players need to move in the physical space to pass virtual obstacles. I hope the volumetric interactions can emancipate users from screenized interactions and bring user unique game experience.

MODELING

To start a look-and-feel prototype, I made a 3d model of the column pipe and arranged them in the Unity. Besides, real-time the score will display in the middle-up of the screen.

model

C4D Model

unity

Prototype in Unity

CHALLENGES

However, when I moved to the functional prototype, I encountered some challenges in user experience design and tech.

1. Anti-Cheating 

In this AR game, virtual pipes are mapping to the real world, so players can cheat by physically bypassing the obstacles. Such cheating behavior will greatly downgrade the gaming experience.

Solution: I created two invisible walls on both sides of the pipes, which helps to fix the player's virtual position in one direction.

ca1@3x
ca2@3x

2. Generative Pipes 

Ideally, the pipes should be infinite. However, for display performance, the number of pipes appear at the same time should be limited. So the generative scope and rules need more considerations.

Solution: always generating the four closest pipes, and pipe will disappear once the player passes it. Otherwise, the player might hit it because the pipe locates in the back.

3. Range of Opening

Unlike design for a 2D interface, AR Design does not have a design guideline of the field of view. Furthermore, the position of pipes cannot be too high or too low, and the opening of pipes must be within a certain range.

Solution: As I took volumetric Interactions, the only viable reference is the human body. I assumed that before users start the game, they will hold smartphones to examine a spare space in front of them. Base on that height of phone, the range of opening is +/- 0.8 meters.

ca3@3x

USABILITY TESTING

RESEARCH

USER TESTING

After solving the above problems and challenges, my first functional prototype was completed. I conducted usability tests with 5 participants. The goal is to test the difficulty of the game, the navigation of the flow and visual elements.

"I expect more feedbacks other than visual scores. I can't see score clearly when I'm jumping."

"I don't know the exact direction of the pipes, sometimes pipe appears in the wall."

"It is fun, but how can I play if I don't have enough space?"

ITERATION

RESEARCH

ITERATION

Based on users' feedback, I iterated the prototype.
I designed a navigation interface that guides the user to find the right direction to place the tube. Meanwhile, users will lift their phone for space searching, and this post will help to calculation range of opening.

In addition, another game mode that allows playing in a limit space was added. In this mode, the player does not need to move through the papes but the tubes will move towards the user. Users can pass the pipes stay where they are.

More feedbacks like sound effect and a failure interface are put in the game. Players can know whether they succeed or fail with these feedbacks.

iter

USER FLOW

USER FLOW

USER FLOW

Artboard@2x

DEMO VIDEOS

DEMO VIDEOS

DEMO VIDEOS

Easy Mode

Stay Mode

OTHER PROJECTS

TOUCHUI/UX Design

BlueVideo Game, UX Design

Rollin'UI/UX Design

Pleasing DiningFront-end Coding of Mobile App

Motion GraphicsMotion Design

OrganizeWebsite

The LampLighterExpressive Game

Computional FormCreative Coding

CeramicsHandwork