Lead Programmer of Look & Feel/Graphic Artist: Stephanie Valentine

The look and feel of our "Healthy Mario" activity is light and bright and childlike. The game's bright blues, purples, oranges, and yellows differ from the traditional dark Super Mario Bros. games, but our color scheme is much more kid-friendly. Attention to look and feel is incredibly important because it is the only overarching element throughout the program. If the activity is designed well, the kids using our application will be able to intuitively understand what they see, what they hear, and what they need to do.

The first element of the look and feel I want to share with you is the main landing page. Eventually, there will be seven destinations that a user can navigate to from the landing page: Play Game (from beginning), Continue Game (from last saved point), Quit, Create Avatar, Food Diary, Customize Game, and Graph Activity. In the initial landing page, these options are simply listed one on top of another without any nice way to group them for order of importance or similarity. We decided to change the design of our landing screen, so that the user's avatar (little character that looks like user; more about avatars later) can walk to one of the seven doors and go through it to access the desired functionality. For example, if I wanted to play the game, I would direct my avatar to the door labeled "Play Game". We plan to get a door creak sound to play when a user walks through a door. From a development standpoint, this is going to require some very complex coding. I'll need to animate the avatar, allow him/her to jump, use collision detection to determine which door is selected, and create all of the imagery to make that happen. Here are some screen shots of the landing page. The first is the current landing page; the second is a rough sketch of what we want the new page to look like (notice the top shelf has trophies on it - more about that in future blogs). The avatar starts in the lower left-hand corner.

The second element of our look and feel that I'd like to share with you is my pride and joy: avatars. There are 40 different personas that users can choose from based on four descriptors: gender, skin color, hair color, and eye color. The avatar in the lower-left of the photo above is my avatar. I am a female with light skin, red hair and blue eyes, so my avatar has the same properties! Users can choose their avatars by selecting "Create Avatar" from the landing page. They will then be directed through three or four options pages - one for each descriptor. In the next few weeks, I will implement functionality to add the user's name to the avatar, but that is not done yet. I will need to prompt the user to type in his/her name and then render that text on his/her avatar image. This shouldn't be terribly difficult to code, but it might be challenging to find an artistically pleasing location for the name to display. Below are screenshots from the current version of avatar creation. Here, I am creating a boy, with light skin, brown hair and green eyes.

1.      2.      3.    4.

A third look and feel feature, customizing the game, has an identical interface to the avatar creation (from the development standpoint), though it looks slightly different. Behind the scenes, the customization and avatar menus work through a tree-based data structure. Each option can have up to 4 more options, and those options can have four more options, etc.. Once an option is chosen that has no child options, control returns to the main menu. More will come in future blogs about this customization feature, but simply, the user is able to customize the foods that appear in the game as tokens. These correlate to the Super Mario Bros. coin token. In the traditional version, Mario progresses through the game collecting coins, and when he gets a certain amount, he gets some benefit. Each of our food tokens will have different benefits for the player. We have 4 different food token options for each food group. The images used in our proof-of-concept version were quite ugly, but the new renovated images are much better and have a consistent, professional, animated look. They are only a few hours old, so you're seeing the absolute newest screenshot! This is what one of the customization pages looks like at present, where grapes are being selected. (There are no immediate plans to change the layout, but I cannot promise that this version is final.)

Since we are creating this application specifically for the students in Winona, MO, we want to seed the game with familiar objects. For example, the levels of the game will travel between landmarks in Winona, like the Winona city limits sign, Winona Elementary School, the local public library, etc. We need to add some local pests like raccoons or opossums, and add the St. Louis arch sporadically throughout the levels. The possibilities for local connections are endless! After this iteration of development, the levels could include different terrains, like mountains, valleys, city streets, and more! I do not have time to implement those terrains, but they will definitely be possible!

My last big look-and-feel task is to modify the food diary to use the same bright colors, image style and feel of the rest of the activity. These elements are really inconsistent right now with the rest of the application because they are still in the proof-of-concept stage. The development of the food diary as an integrated functionality is truly minimal, so I will not provide you a screenshot. Suffice it to say that the changes I will make are all cosmetic and should not be greatly challenging, but will undoubtedly be time consuming. Each vector image (like the fruits or avatars above) takes a minimum of fifteen minutes and two different software applications to create. Some images can take much longer, depending on complexity.

Quick fun-fact about our look and feel: there is no mouse interactivity throughout the application. This is one part of the traditional game that we wanted to keep because it greatly simplifies game play. Players can move left or right using the arrow keys, and upward movements require jumping. Currently, pressing the "Z" key makes the avatar jump.

So, that was the tour of our look and feel! There is quite a bit of work to be done, but I think we have made quite a bit of progress already. If you want to follow my progress throughout the next 5 weeks of development, this is what I'll be up to: for the next two weeks, I am going to focus on the new landing page. The week after that, I am going to focus on adding local flavor and adding the user's name to his/her avatar. The week after that, I am going to focus on the food diary. The final week will be last-minute touch ups, and hopefully our activity will look and feel fantastic!

Thanks for reading, and we hope you come back to check up on us soon!