Interactive Prototype-Group:Lucky Seven
From CS 160 Fall 2008
Contents |
Group Members, contributions
The roles of each team member for this assignment are as follows:
- Michael Boulos Edited the wiki, Worked on the prototype overview, did half of the presentation, ReadMe
- Yuta Morimoto Worked on the flex part of the game (initial screen, and transition screens, submitting high score)
- Antony Setiawan Worked on the main game play in Flash
- James Yeh Edited the wiki: Worked on the Revised interface design, tasks and problem solutions, worked on half of the presentation
We all contributed in the programming by having regular meetings to check the design and contribute in the logical areas, like how will we create the health bar and how will the food travel through the stomach (ie: worked on the algorithms together) but the implementors were Yuta and Antony
Problem and Solution Overview
In the high pressure environment of a university, many students are so caught up in their work that they overlook the importance of maintaining a balanced diet. Compounding this problem is the fact that many of these students also lack the knowledge of which foods contribute to a healthy diet, and as a result select foods based only two criteria: cheapness and accessibility. Unfortunately, what is cheap and convenient is usually also unhealthy, creating a dilemma in which the students end up gaining weight and reinforcing the concept of the “Freshman 15”. Our proposed solution to this problem is to create a game that is both fun and educational such that it will inform players (i.e. students) about what kinds of foods are contribute to a healthy diet, and show them how their bodily organs suffer when they takes in too much unhealthy food. Our game will be a defense-type game; the goal of the game will be to defend a body from unhealthy food entering it (while allowing in the healthy food). Through our gameplay, our user will be exposed to many different types of foods, and as he or she plays the game more, he will become more familiar to which selections of foods contribute to an ideal healthy diet. Gameplay is very important to our goal, as we want our players to have fun, so that they will play our game more often and therefore better retain our message.
Tasks
Playing the Game (Hard difficulty)
This task involves performing the main goal of our game: the gameplay (i.e. defend the body against attacks from unhealthy food). This is done in the main gameplay screen, in which waves of foods will enter the stomach; the player must selectively allow a healthy combination of foods to pass through the stomach, while eliminating the rest of the (unhealthy) food by clicking on it. Once a food exits the stomach (through the bottom of the screen), it will be absorbed by the intestines and its calorie, fat, carbohydrates, and protein amounts will be added to the total nutrition for that wave. If too much or too little food passes through the stomach, the health bar below the heart will go down-once it hits zero, the game has ended. Since each wave represents a day, the goal of each wave is to allow the desired daily values of the respective nutrients into the body. Additionally, the stomach, liver, and heart can be upgraded to aid in gameplay (upgrading these organs is our next task).
Upgrading Organs (Moderate difficulty)
At the end of each wave, the gameplay screen will switch to the upgrade screen. This screen contains the pictures of three organs—heart, liver, and stomach—that can be upgraded by allocating points (acquired during gameply) to those organs. When the mouse rolls over the picture of each organ, text in the upper right of the screen will display information about the organ, its effects in the game, and how many points are needed to upgrade the organ to each level. Upgrading the organ is categorized as a moderate task because the player can't just upgrade whichever organ that is shown on the screen; each organ has a different, positive effect on gameplay. The player has to thoroughly think about which organ to upgrade, as the player can't undo the upgrade once it is done. Once the user is done upgrading the organs, he or she can choose to either start the next wave or go to the menu.
Submitting a High Score (Easy difficulty)
Submitting score should be easy and pretty straightforward. There are two conditions that have to be satisfied for a player to submit his/her score: either the player quits in the middle of the game or the player loses the game. If the player wants to quit in the middle of the game, the player must click the menu button (available in the gameplay and upgrade screens) and choose the appropriate option to submit his or her score. In addition, if the player dies (the health bar goes to zero), the player will automatically be given an option to submit his or her highscore. The actual process of submitting the score is done by typing a nickname or initials and clicking submit button.
Revised Interface Design
Changes resulting from low-fi testing
The low-fidelity testing that we performed earlier was a key mechanism in helping us improve our design for our game. After we tested our prototype with users and evaluated their feedback, we agreed upon several changes in our game design:
- The "pause" button in the game screen needed to be changed to a "menu" button, so that no confusion happens while looking at a way to exit the game. We also decided to add a "menu" button to the upgrade screen, so that the game menu would be accessible at all times.
- We decided to rename the "quit" button in the menu pop-up screen to "exit (submit score)". This is because our test users had quite a bit of difficulty realizing that they either had to quit the game or lose the game to submit a high score. By renaming "exit" to show the user that they will submit their highscore when they quit, our users should be able to figure out how to submit a high score more easily.
- After testing with our users, we felt that a keyboard control scheme was not necessary. Thus, we took out the keyboard option from our settings screen, and only left the user to adjust the mouse sensitivity. However, we also added four additional fields in the settings screen to allow users to enter their age, height, weight, and level of physical activity. This data is used to determine what the amount of target calories should be for each (daily) wave.
- The stomach needs to be larger, since it is the only clickable area and the focus of the game. In addition, based on the feedback from our test users, we felt it was not necessary to allow the users to click on the food after it exited the stomach and entered the intestines. This way, we can show less of the intestines and more of the stomach; this makes the playable area of the gameplay screen larger.
- Originally, we had the food enter the stomach one at a time; however, this greatly diminishes the level of difficulty and interactivity involved in the game. We decided many different pieces of food to enter the stomach in successive fashion, so that the next piece of food does not have to wait for the stomach to be empty before it can enter. This way, the player will have to focus on many different types of food at once, and will be forced to make quick decisions about which foods to eliminate and which to allow through the stomach.
- Instead of having the nutrition facts chart displayed for each food, we decided to opt for a simpler interface of displaying a bar chart corresponding to the total wave values of each of four nutrients: calories, fat, carbohydrates, and protein. When we were testing our lo-fi prototype, many of our users did not look at the nutrition facts, and we figured that reading the nutrition facts of each food as it comes in would distract attention from the actual gameplay and prevent the quick decision-making that is required from the player. By using a bar chart to display the percentage of the daily value of nutrients that have been taken in, the user can see how much of each nutrient is required to satisfy the daily goal. In addition, when the user hovers his mouse over a food (which will be traveling through the stomach), the nutrition bar chart will display an extra bar to show how much the calorie/carb/protein/fat totals will be incremented by letting that one food pass through the stomach. Thus, as the user rolls his mouse over each food, he can look at the additional amounts of nutrients the food would add and decide if the food contributes to a healthy or unhealthy diet. Finally, the name of each food will also be displayed on mouse-over, to provide for increase recognition.
- Since some of our users were confused about what the functionalities of the organs were, in the upgrade screen we will provide information on each of the organs whenever the user does a mouse rollover on any particular organ. Originally, our users had to click an "info" button to see the info, but the mouse rollover function lets the user instantly see organ details without having to search for an "info" button.
Sketches or Scripts of Unimplemented portions on interface
We were able to implement the screens for every portion of our interface. The only parts that are missing are the functionalities of changing the settings and playing the instruction video.
Changing the settings includes adjusting the sensitivity of the mouse, in addition to setting the height, weight, age, and physical activity of the user. These characteristics affect the total amount of calories/fat/carbs/protein that is set as the target goal for each wave. Currently, our settings screen is included in our prototype, but the buttons are only images that don't actually do anything.
The Instruction video was one of our wizard of oz techniques (described in the next section). In essence, we will be providing them a detailed overview of how to play the game; this includes adjusting the settings, the basics of gameplay, upgrading organs, and submitting a high score. The format of this video was probably be a video of one of our group members demo-ing the game, with background commentary added in.
In addition, we wish to implement online submission for highscores, but due to time constraints, our current highscore table only stores local scores. In the online implementation, player would submit scores to a web server, and the high score list would output the top score of everyone across the internet.
Storyboard of tasks (annotated screenshots or scripts)
Task 1: Playing the game
Playing the game is our hardest task. To play the game, the user must first start on the main menu. Then they will click "instructions" and play the instructions video, to learn how to play the game. Then, the user will click "back" to go back to the main menu. Finally, they will click "start game" to start the gameplay. In order to complete the gameplay task correctly, the user must, by rolling the mouse over to a food item and looking at its calorie/fat/carb/protein amounts, decide if the food contributes to a healthy or unhealthy diet. Based on that decision, the user can them eliminate to food by clicking on it (if it is unhealthy) or chose to let the food pass through the stomach (if it is healthy). If the user survives one way (i.e. the health bar does not go to zero), he or she will have completed the task and will be brought to the upgrade screen, our next task.
Task 2: Upgrade Organs
Our second task is upgrading organs. Since the upgrade screen can only be reached at the end of a wave, the storyboard for this task involves starting the game from the main menu first. Then, assuming the user survives the first wave, the user will be brought to the upgrade screen once the wave ends. In this screen, the user can hover his mouse over the organs and a text box will pop up and display information about the organ. After deciding which organ to upgrade, the user can choose to upgrade that organ by clicking on the "upgrade" button under the organ. If the player has at least enough points as the amount needed to perform the upgrade, the level of the organ will rise. Finally, the user can choose to start the next wave by clicking the "next wave" button.
Task 3 Submit High Score
Submitting a high score is our third and easiest task. To submit a high score, the user must either quit the game from the (in-game) menu or lose the game during a wave. If either case happens, the game will check if the user has a high score; if he/she does, the user will be able to enter their name in the "submit high score" screen. Once the highscore is submitted, it will appear in the online highscore database.
Prototype overview
Main Menu
This is the main menu screen of the game. There are five buttons: Start, Instructions, Settings, View Score, and Quit. "Start" will start a new game, and initiate the gameplay. "Settings" will take the user to the settings screen. "View score" will bring the user to the list of top score (we hope to have an online implementation of this). "Quit" will close the game.
Settings Screen
The settings screen includes a scroll bar to control mouse sensitivity. In addition, the user may enter his height, weight, age, and level of physical activity. While the settings screen exists in our prototype, the buttons are currently not implemented (this is a wizard of oz technique) because it was not involved with any of our representative tasks (and also because of time constraints).
Instructions Window
The Instruction window contains only two things: the instruction movie, and a back button to return to the menu.
The Instruction video was one of our wizard of oz techniques because creating a comprehensive video covering the details of gameplay would take more time than we had available for this assignment (we were more focused on creating a working implementation of our gameplay). We figured that since we would be expaining how the game works/is played during our presentation of the prototype anyway, this portion of the prototype wasn't necessary for this phase of the design.
In-Game Window
The gaming window consists of an image of the stomach and other major body organs. Each of the major body organs - heart, liver, and stomach will be presented as a picture in the in game screen. The life bar on the very top left is the health bar for the heart; once the health bar reaches 0, the game is over. In addition, there are 4 other bars below the life bar to display the level of nutrition that the body has taken in for that wave. The 4 bars will tell you how much your "body" has absorbed of each of the four major nutrients - calories, protein, carbohydrates, and fat - and how much will be added if you choose to absorb the food that your mouse is currently hovering over. For example, for the current calorie count we will have a bar chart that is in blue and the new food coming into the stomach will be in orange and will be added after the blue bar, if the food is passed the bar will become blue (the previous count and the food that just passed through) and the the next food will do the same, the goal is to reach the calorie count and not over shoot our calorie count, this will also be implemented for fat, carbohydrates, and protein. This will force the user to keep track of how bad this food might harm the body. If the user chooses to allow only healthy foods through the stomach, then the four bars will be incremented in equal proportions and and the different nutrient levels will not be unbalanced; however, if the user chooses to let a unhealthy food through, the food may be high in calories and fat but low in protein and carbs (just an example).
Foods will enter through the top of the screen and go into the stomach. If the food is not eliminated while it is in the stomach, it will exit the screen, and the nutrients associated with the food will be added to the totals (the four bars in the top left). In addition, if a user takes in a food that is unhealthy, the heart will take damage (the life bar will go down), but if the food that just exited the stomach is considered healthy, the food will not take away life. Thus, the user must infer if the food contributes to a healthy or unhealthy diet by looking at the calories, fats, carbs, and protein levels of the food. Also if the user hovers over a type of food the name of the food will pop up right below the food icon - this will be a positive feed back to the user on which icon they are selecting, since some food objects might overlap. Also we'll present the current score on the bottom of the screen, which will act as a positive reinforcer to the player and will be integrated with our update organs screen, where the user can spend points to upgrade organs, thus enhancing gameplay. There will also be a menu button on the bottom left of the screen, which allows the user to proceed to the pause window.
Pause Window
The pause window has four buttons: Resume, Settings, Instructions, and Quit. If user chooses the resume button, user is back to the windows before user visit this window. If user chooses the setting button, user proceed setting window. If user chooses the Instruction button, user proceed Instruction window. If user chooses the quit button, the game will end.
Upgrade Screen
The upgrade screen will have the three organs, Liver, Stomach and heart. Under each organ the points needed to upgrade that organ. And a button above the number of points, if they want to upgrade then they can press that which made it more concrete of how the upgrade process works. Also, there is an info button to the top right each organ. Clicking on any of the three info buttons will bring up a pop-up screen showing information about the organ including it's in-game function, its function in reality, and and the upgrade costs for successive levels. Also if they click on the menu, it will prompt them with the menu screen, if they click on the next wave they will continue to play the game. So the user has the option to: 1)Upgrade Organs, 2)Continue Playing, and 3)See other Options (ie: Menu )
Submission of High Score
After the user has died, s/he will be asked for his nickname to submit the high score. in this screen the user can choose to either submit a high score or don't submit and go back to the main menu. If the user submits his high score it will be submitted to an online server (currently the eecs server), and then they will see the list of high scores that has been posted earlier including their submission. After they are done, they can click on "main menu" to go back to the main menu. If they choose not to submit the high score they we will go to the main menu.
What was left out and why
We included every screen/window of our game into our prototype, but we left out the following functionalities:
Settings screen:
We included the buttons into this screen, but so far we cannot adjust mouse sensitivity or set age/height/weight/age. We didn't include these features because we felt they were fine details of the game that we did not have to implement for this phase of the design, and also because they did not affect completion of our representative tasks. Also, making the target calories (i.e. goal calories for each wave) correspond to the user's physical characteristics would take quite a bit of effort (we would have to create appropriate tables).
Instruction video:
We figured that since we would be explaining how the game works/is played during our presentation of the prototype anyway, this portion of the prototype wasn't necessary for this phase of the design.
Prototype screenshots or scripts
Prototype This prototype can play be only online.
Read Me
