Interactive Prototype-Group:一三三七

From CS 160 Fall 2008

The Prototype

The prototype of our project is an SWF file. It can be downloaded from the link below:
http://www.ninjasandpirates.org/FitWars.swf

NOTE: Let the prototype fully load before using it. Failing to do so will result in unexpected results.

Read Me
The prototype was created in Flash 8. Thus, for best results try to use Flash 8...otherwise there's a possibility there might be some glitches. This prototype was designed to demonstrate the three tasks below. As a result, a few of the other menus are not functioning. Read the report to see why these were left out.

The prototype also uses a number of fonts...these may or may not display correctly. If any text looks out of line, this is probably why.

Walking is emulated by tapping left and right on the keyboard. In real life it would take much longer to complete a course, the tapping and progress you move has been sped up though for the sake of time saving.

Space is used to symbolize an action being done. In the demo, the only action shown is jump. in the real game, of course, the actions will vary both in time to react and the action required. Actions are measured by player motions.

The Team

• Billy Grissom created the Flash application itself!
• Jeffrey Rosen the editor.
• Buda Chiou the prototype overview.
• Alan McCreary the tasks.
• Saliem Than the redesign.

Problem and Solution Overview

A growing number of people in the United States are either overweight or obese. Contributing to this trend is the constant arrival of new video games, which makes the idea of going outside to exercise less appealing. Our solution to this problem involves directly rewarding people for doing real cardiovascular exercise in the form of a game called FitWars. In FitWars, a user plays a fighting video game while running, either against the computer or against another human; in addition, the player earns points for his efforts, and can apply these points to in-game item purchases or transfer points to other video games.

Tasks

Easy Task: Register a Username and Log In

The first task that every user must go through is registration. Registration requires the user to input a username, password, and e-mail address, and to select one of a set of avatars. The user can then immediately log in with that username and password. If the user attempts to log in with a non-registered username, an error message will show up.

Medium Task: Send a Message to Another User

Sending messages to other users is important for the coordination of battles among human players. To send a message to another user, the user must find the message inbox screen and then the "write new message" screen. Upon sending the message, the user will see a confirmation screen.

Hard Task: Play Against Another Person

To play the game against another person, the user must first select the "fight player" button from the main menu. The user can then choose to either enter the username of another person to battle, or to let the computer find a player. In this prototype, the user simulates running by continuously pushing the left and right arrow keys on the keyboard, and simulates jumping by pressing the space bar.

Revised Interface Design

Changes as a result of low-fi testing & rationale behind the changes w/annotated screenshots

Major Changes & Rationales

Most of the rationales behind these changes are based the feedback we got from our low-fi prototype. The changes directly address the problems some of our test users encountered.

• Re-arranged the main menu

changes to the main menu

• • Removed the messages menu button since there already was a button indicating if there were any messages at the top
  • Changed "cpu" to "computer"
  • Check stats changed to manage stats which was combined with points management
  • Added short description when the user mouses over a menu button
  • Added game settings menu button which leads to tutorials
  • Added a screen for the user to select an avatar of their choice. the avatars were fun silly goofy when registering
  • Relocated the back button on most screens to the bottom right corner
  • Improved the pathway pressing the back button would take
• Fight the computer menu
  • Removed the "continue game" menu button and the tutorial button
  • Added view battle records menu button
• Changed the theme from a medieval one to a more fun silly goofy one
• Changed the game play screen from constantly running to one where the running course and mountain background fades out to show just two characters fighting

Goofy avatars

Fighting another avatar, and not shown running along the course

Fight player and fight computer menu screens are similarly changed

Minor Changes

(adding in extra screens to demonstrate tasks in interactive prototype and adding in extra feedback screens etc.)

• Removed the remember me button from the log-in screen
• Added in theme music
• Error message displayed if an avatar isnt selected
• After registering the user is taken back to the log-in page with the log-in information
• Added in a error screen for users trying to log-in without creating an account first
• After logging in the users screen name is saved and displayed
• Searching for a player
  • Removed search again button (for now)
• Messages
  • Removed the clear button
  • Shortened "write new message" to "new message"
  • Back button added to the right top corner
  • Added in screens to display messages
  • Added in screens to respond to messages
  • Added in feedback screens to confirm whether a message was deleted or sent
• User loses the game if too many sequences are missed:
  • You get a chance to hit an enemy. If you pull off the action successfully then you hit him and proceed
  • In order to defeat an enemy you have to pull of 3 actions in a row successfully. This is indicated by the red dots below the course name. each time you pull off a hit, a dot disappears.
  • Of course, in the real game the number of perfect hits needed varies amongst different enemies and difficulties.
  • Should you fail an action, the counter is reset and you take a hit. If you miss a few more then you're dead.
  • If, however, you pull off another hit your counter is reset and the enemy takes a hit. The process cycles and continues until you pull off all the hits in a row or you die.

Storyboards of tasks (annotated screenshots)

Task 1 - Registering and Logging In

The user is presented with a login screen	If they try to login without registering first they get an error message	If they try just clicking the login menu they get the same error message
When clicking on the register button they are taken to a screen where they can enter in their information...	Pick an avatar...	and then is taken back to the main login screen with their information..
once they login they are taken to the main menu

Task 2 - Fighting a Human Player

If they choose to fight a human player...	they can choose to see their game records or start a new battle. If they click on start a new battle they can either.....	search for a specific person to fight....
or be auto-matched and get a loading screen, (they get one regardless)	in either case they are presented with a player to fight	then a screen comes up with the avatar running,
once the avatar hits the first white bar at the bottom of the screen the screen fades and the other avatar shows up	the user is instructed to jump	and if they miss they get an x mark ...
and a punch from the other avatar	if they don't miss they get a check-mark and..	their avatar punches the other avatar
After a series of this and successes they get a feedback screen saying that they defeated minion and can continue to the next level. The user then runs to the next bar and the same thing happens.	Once they get to the very end and complete the course, they get a "battle won" feedback screen detailing the number of points accrued.	If at any point in the course they misses too many sequences of actions they are taken to a game over feedback screen

Task 3 - Creating a message

To create a message once they get to their inbox from the main menu...	a user can either click on create a message, type in their message with the screen that pops up....	then get a confirmation screen when they send a message or...
they can open up a message read it click reply...	then get the same screen for a new message...	and then get the same confirmation screen when they send the message
they can also delete messages by clicking on the x that is on the right side of screen and they will also get a confirmation screen for that too

Sketches for unimplemented portions of the interface

Manage Stats

Points management screen

Stats screen

Visit Shop

Shop screens

Game Settings

Tutorials screens

Prototype Overview

We implemented four parts of the UI for this prototype: the register and login screen, the main menu, and the game UI itself (single player against the computer and multiplayer), and the message sending interface. These parts were the items that we were given the most feedback on and we feel are the most interesting parts of the UI.

We did not implement the shop interface, which allowed users to buy new equipment with the points they earned from playing the game. We also did not implement various similar UI, including the stats interface, which showed the user how his equipment helped his character's attributes. We left out the system that enabled users to transfer their points to the website, and the game settings interface, which includes the tutorial and various settings that affect the game.

We didn’t implement these parts for two reasons. First, according to the Low-Fi Prototyping Test we completed for the last assignment, evaluators had very little had trouble accomplishing the tasks related to these parts, and these parts are tangential to the core of the running game we designed. Therefore, we believed that it was unnecessary to implement these parts in the interface. Rather we focused on elements that we were given a lot of feedback on and that are most critical to our application. The other reason is that making these three interfaces by Flash is very tedious. We will have to draw many graphs, and most notably, the scroll effect for the item lists and the equipments possession screens are very hard to implement using Flash, or any medium for that matter, which made it impossible for us to finish these parts before the due date, and the affordance of these interfaces will be just like the other menus, so we decided to give up these parts for this prototype.

This prototype we made is just a demo to let people know what we are trying to accomplish. For the real game the character will only move if users move instead of using keyboard that we implemented for this prototype. The distance of a users’ movement will detected by the GPS embedded in the iPhone, which obviously cannot be implemented by Flash. The real game will also detect users’ jumping actions by the motion sensor embedded in iPhone, which cannot be implemented by Flash either. Therefore, to make the game works as what it’s supposed to work, it has to be built on iPhone.

In the prototype, we simulated this by having the user press the left and right arrow keys to run, and the space bar to jump.