Current Courses

Misc

 
HomeCourses

CTIN 401l
Interface Design for Games

Introduction to the aesthetics, terminology and common trends of interface design for games. Topics include 2-D and 3-D spaces and user/camera perspectives.


Class Aggregator

xml

Marble of Doom (Alternative Theme to Delta Drift)

John Banayan

Screen-1.jpg

Sam David

Screen-3.jpg

Alec Stamos

Screen-2.jpg

Adventures in the Middle Kingdom

Book%20Cover%20copy.jpg

Credits%20copy.jpg

Controls%20copy.jpg

HandAssets%20copy.jpg

Credits%20copy.jpg

Delta Shift

main%20screenshot.jpg

gameplay%20screenshot.jpg

HW 09 - In Dog Years

Blade Olson bladeols@usc.edu; Katrina Wolfe kwolfe@usc.edu; Harold Vancol hvancol@usc.edu; Michaela Morris michaemm@usc.edu

Queasy Steve

Basics!

You are Queasy Steve, a lowly matey on a pirate ship that is notorious throughout the land as a particularly dastardly ship. Your captain is like all pirate captains, loud, mean, and impolite. He yells at you constantly to do all of the menial things on the ship, as well as many of the combat functions around the ship.

Guest Lecture by St. John Colon, Lead Artist at Heavy Iron Studios at CTIN 401 class



November 24th 6pm,
7:30pm 2008
Guest Lecture by St. John Colon, Lead Artist at Heavy Iron Studios at CTIN 401 class— at
CSSG 142


Image_illustration_01.jpg

Please join CTIN 401 class tonight - St. John Colon, Lead Artist at Heavy Iron Studios will showcase his innovative work and share his insights on the fast-paced industry. Please contact Tomo Isoyama, isoyama@usc.edu for inquiries.

HW 8 - Poseidon Panic

RC Narma

RC%20Mini%202.jpg

John Banayan

John%20Mini.jpg

Erik Nichols

Untitled-1.jpg






Indiana Jones and The Temple of Broken Legs

Indiana Jones and The Temple of Broken Legs

ss.jpg

Gavan-
A3.bmp
A6.bmp
A7.bmp

Michaela-
A4.bmp
A5.bmp
A12.PNG


Ashley-
A8.PNG
A13.PNG
indiana.PNG

Brian-
A10.PNG
A11.PNG
A9.PNG


hw-8 Fixin' Frankenstein

Mock%20Screenshot.jpg

Components:

Kane_assets.jpg

Designed by Michael Kane.

The basic interface icons that change the mouse cursor.

Hedden_assets.jpg

Designed by Ryan Hedden.

These are the creatures that can be formed and the original frankenstein creature.


Title.jpg

Background.jpg

Designed by Drew Moxon

These shots are the title screen, and a background level image on which a frankenstein creature is placed.
Link to Asset List
Download file




Assignment 04 - Cave Paintings

Rosenfeld-CTIN401.jpg

">cavepaintings.jpg

CavePaintingsAlec.jpg

Homework 7-Sketched

Sketched_Splash.jpg

Sketched_menu.jpg


Sketched_items.jpg

Homework 7 Book of Power

BookOfPower%20Controls.jpg

BookOfPower%20Cutaway.jpg

BookOfPower%20Icons.jpg

BookOfPower%20Nextlevel%20copy.jpg

BookOfPower%20Title.jpg

Download file



HW - 07 In Dog Years

Link to assets list:
Download file

Link to Original Asset Files (PSDs and JPEGs)
Download file

Gavan Wilhite:

ball.jpg The ball that the player (dog) interacts with during gameplay.

leaves.jpgLeaf piles that the player interacts with during gameplay.

sonar.jpg This is what the sonar will look like. The dog in the game is blind so he has to use sonar to find out where he should be going (providing the player with visual representation of the space around him) this is the image that will be shown when the player uses that sonar.

Katrina Wolfe:

cat.jpg This is a cat that the player interacts with in the game, it is an enemy so the player can be injured by inadvertently colliding with the cat.

grass.jpg This is the grass, it's what a lot of the ground in the game is made up of.

health%20copy.jpg This is the health bar, it depicts the player's health in the game. The bar loses and gains color demonstrating the status of the player (blind dog).

Michaela Morris:

bush_michaela.jpg This is a bush, it's an object in the garden.

hole_Michaela.jpg This is a hole, it is something that the player (dog) can dig to find things or hide things in.

michaela_bone.jpg This is the icon for the inventory in the game. It's a bone because dogs can bury their inventory wherever they like (like a bone).

HW-07 Queasy Steve

Art Asset List:
Download file

Erik's png:
View image

Alex's png:
View image

Ryan's png:
View image

Ashley's png:
View image

Homework 7

Shape%20Shift.jpg

Download file

HW06 Pirate Game

Pirate_Wireframe%20copy.png

Pirate_Game%20copy.png

An extreme simplicity was stressed in this interface and game design. There is no text of any kind and only a single button and aiming cursor. The cannon shifts, the wick burns down when the player orders the cannon to fire.

The ladder is a simple button that when activated the player runs to the upper deck. Audio clues (orders from your Pirate Captain) also cue the player in their appropriate action. The boat also shifts during the gameplay action.

Hw06 - Book of Power; Drew

BookOfPower_Moxon_sm.jpg

The basis for Book of Power's graphical interface is a child's story book, with a "page-based" GUI -- everything you can click to go to the next level, break a word up, and move around is on the page of a book and is diegetic in nature. Everything will look as if it is illustrated, and the calligraphy will appear to have been done by hand on the canvas-looking pages.

CTIN 401 Midterm - Sketched: Jonathan Rosenfeld, Gavan Wilhite, Alec Stamos

Sketched.jpg

For the Sketched GUI we decided upon a pen-and-ink visual style. This is a style with heavy black lines and simple shapes. The reason for this is because the game is about an artist and his creation, and the drawings he creates to help his stick figure out. We also picked pen-and-ink because we believed that the GUI style should match the in-game style. The GUI heavily uses symbols to convey the purpose of each element, as lives are represented by stick figures and the ink level is contained inside a pen symbol. This helps keep the GUI uncluttered by unnecessary text, but still quickly acclimate users to the GUI’s functions.


    Explanation of Elements:
  • The wavy line is the health bar. It will diminish when the player gets hit.
  • The circle to the left of the wavy line is the White Out powerup indicator. If that circle is white inside then the powerup is ready for use
  • The stick figures underneath the health bar are the life indicators. This tells the player how many lives they have left.
  • The box on the right side of the screen shows which stamp the drawer can use. This box is only on screen when the player has collected a stamp. The drawer can scroll through the different stamps using the mouse scroll.
  • The pen bar on the right side of the screen is how much ink the drawer has left to use. This will diminish the more the drawer uses ink.

A Dark and Stormy Night
Group: Ryan Hedden, Matthew Lee, Ashley Soriano
484/489: Cynthia Nie, Brandi Wilcox

ONE.png

TWO.PNG

We came up with having the masquerade party placed within the 20s era. The clothing on the characters are somewhat in the same fashion within that era. The mini-map was to reflect a sort of map design if provided for a party guest of that masquerade. With the conversation gui elements, already asked questions and said comments were greyed out (to indicate already chosen). The knife element above the conversation box is a tool that you may select to assassinate the person you are talking to.

HW06 by Blade Olson, R.C. Narma, Brian Abrams, and John Banayan

hw06.jpg

The interface we eventually decided on was largely created by following a "simplistic" aesthetic. The game's rules and environment are fairly straightforward, so we wanted to imitate the minimalism of the game's rules by forming a "clean" interface; there are no visible numbers or words, but players can navigate the game and witness a pseudo-time-limit through the length of the player's aiming-laser, which decreases over time. To give the game a little spice and mimic its dramatic narrative, we added a rocky texture over the game surface and placed cave doors at the corners of the playable game-space to act as "re-do level" and "next level" buttons. It's a casual game, so we opted for a causal interface that didn't require much thought or compete for the player's attention.

HW 5 - John Banayan

1) I got some really good feedback from you guys and I agree with most of the comments I received.

2) Size: I think the size is appropriate; its big enough where someone can read it easily but isn't cluttering up the screen.

Placement:
I placed all "battle" GUI elements on the bottom of the screen and messages on the top.

Overall Color:
The radar definitely needs to change color. The rest of the GUI is using a light, transparent blue and the radar is green. I should make it blue and use that green for the cross in the middle of the radar.

Style: My goal in making this was to create a easy, streamlined interface that looked like it belonged in a Gundam. I think the interface is streamlined and delivers information well but it doesn't look like it belongs in a Gundam. I feel like the interface needs to "glow" more, look more futuristic and pop off the screen more.

3) This was my first time exclusively using vector tools to create something. I used the pen tool to trace a Gundam. I put a stroke around the path and moved on to the other elements. Using the rounded rectangle custom shape tool, I created the entire bottom right box and played with the transparencies, blending options and colors. I made the radar with circles and transparencies and the lock on was more transparent boxes that were altered by playing with the paths.

HW05 - Sandoval

1. I agree with the feedback I received on the GUI elements I created for Gundam. I was able to comprehend the GUI elements; however, I need to make them more universal GUI elements. I was trying to keep a consistency with a color scheme, limiting it to three colors. Another factor was the 3D shadow and shade control. It has to be one other the other which I do agree with.

2) The modification to the GUI elements would be as followed:
Size and Placement: I would change the consistency of each GUI elements to match the general size of the game. I would decrease the size of the weapon/ ammunition control and the health bar. I would keep the placement of each the same since the feedback was quite positive for the positioning of each GUI element.

Radar: I would keep the consistency of the color scheme. However, I would change the white to a gray color. Gray is a universal sign for a GUI that is inactive/not in use. I would keep the same shape of the radar.

Health: I like the use of Gundam as the health bar. The size will be reduced a bit. The only thing I would change would be the color scheme. Once again I would stay with the use of blue; however, I would change the white to gray.

Thruster & Temperature: I do like the placement of these two GUI elements. I keept them close to the radar since I believe these three elements are the most important ones. I would change the black color to a gray in the temperature gauge. The size could be reduced.
Weapon indicator: I do like the use of the gun as a symbol for the selected weapon. The ammunition was quite confusing to comprehend. I would delete the separator between the weapon selection icon. I would just place a number for the ammunition making the GUI much easier to read.

3. Vector tools were quite difficult for me. I have never used Photoshop to this extent. It was challenging to follow all the footsteps needed for this project. I was not familiar with most of Photoshop’s terminology, however, I did learn quite fast. It was hard to save the path effect for each GUI constructed. In my design I used the pen tool, custom shape tool and layering tools, fill effect, etc. The more I use each tool the more familiar I was able to get to a general concept of what each tool can do and how effective each of these tools were to the creation on my GUI elements. Overall it was a great experience.

Asg 02 Recap

--I agree with most criticism received. It wasn’t until I saw my UI on the large screen, that I recognized many of the flaws. While I was working on it they were not apparent, however returning to look at it the next day gave me a fresh objective look.

--Overall the biggest regret/difficulty I had was that my concept called for a style that Photoshop vector graphics couldn’t provide, and yet I still tried to achieve it. I was going for a grunge-realistic style which used real-world instruments as a strong influence.
1. Health Bar: This is my favorite part of the design and perhaps not coincidentally, the only predominantly raster part. I feel that the size, style, and placement of the rest of the GUI is based on this element. The only thing I might do differently is create different versions to better convey the way that the health bar works.
2. Boost Power: I think that the Iconography is very strong with this element; however it may be a bit too large. This is especially true because I almost feel that a boost gauge is redundant. However, to keep with the ‘realistic instrumentation’ feel of the GUI it needs to be fairly large. I ran into the same problem with the style and color as I did with many of my elements. I simply could not convey the style I had envisioned with Photoshop vector graphics and layer styles.
3. Weapon: This is my least favorite element. The problem I had with this element was a combination of limited time and the constraint of Photoshop vector graphics. I had originally envisioned a mechanical cog of sorts that would rotate the current weapon into view. This, however, proved nearly impossible without creating a fully textured 3d model or raster graphic. Rather than completely redesign the element, I made the mistake of making compromise upon compromise. I ended up with a bastardization of my original design that doesn’t work very well. It has much too large of a bevel and looks very ‘Photoshopped’. It is the worst suffer of the vector style problem I had.
4. Radar: I think this element serves its purpose well because it follows a conventional iconography. The size and placement are also conventional and appropriate. Again it suffers the same style problem.


--My understanding of the assignment was that it was to be entirely vector. Thus I did the entire design with shape layers and layer effects (except for a single overlay texture). Therefore the only tools I let myself use was the pen tool, the custom shape too, and the path tools. I feel that this alone was my biggest challenge and singlehandedly hurt my design the most. I believe if this realistically-mechanical style was to actually be implemented in a game it would have to be done as a raster UI.

HW 05- By Michaela Morris

1.
I agree with the critiques I got in class. I think I'm definitely still learning the reins of photoshop, and that is why some of my GUI elements don't look cohesive in nature.

2.
Size: I like the sizes of the GUI elements I used. I think the health is the right size because I think it is a very important element, and I made the ammunition also very large because I wanted players to be aware of the state of their ammo. I also liked the size of my radar, I thought it was appropriately sized on the screen.
Placement of each GUI: I liked the placement of my GUI elements, but I would probably change where I put the health icon and the ammunition. I'd probably switch them with each other, putting the health bar on the bottom left and putting the ammunition on the bottom right instead. This is because I've decided that it's more important for the player to know about the state of their health than whether or not they have enough ammunition left.
Overall color/color scheme: I thought my color scheme was cohesive, but I don't think it looked as professional and properly integrated as I would have liked. I think if I use the gradient tool a bit more that would change things to look a lot more how I would like them to.
Iconography: I thought my shapes were minimalistic and I like them that way. The only one that wasn’t was the health bar because I liked presenting the character with an actual physical representation of them instead of just a health bar. Otherwise, I like how I had the elements.
Style: I don’t think I was able to really establish a style with my GUI elements because I’m still learning how to properly use photoshop. I think I’ll be able to make it more appropriately stylized as I figure out how to more adeptly use the pen tool and the gradient tool. I would make each GUI item look even more robot-esque, sort of futuristic.

3.
I am still really intimidated by the tools in photoshop. I’ve used the pen tool a lot, and I think I’m finally starting to get the hang of it. I also feel confident about the custom tool function (both of which I used in the creation of my GUI) I also used the selection tool and the fill tool. I used the selection tool whenever I wanted to move one of my objects, and the fill tool to color them. I used the pen tool to create my health icon and the custom shape tools for the radar and the thruster/heat bars and the weapon bar. Some of the tools I still can’t get to work just right for me so I stray from using them, but I am beginning to get much more comfortable with photoshop.

HW05 RC Narma

1) The feeling of immersion that my GUI is exactly is what I had in mind. I really wanted to give the player the feeling that he/she was piloting a big robot fighting machine. One way to do this was to build a cockpit as part of the design, but I felt it did not make sense because of the third-person view the game has. So instead, I tried to give it a more abstract cockpit feel.

The use of black to indicate a disabled robo-body part was something that was critiqued. Tomo Isoyama said that gray would probably be a better color. I absolutely agree. Honestly, the use of a black head was completely an accident. I never had intended for it to be disabled, but I accidentally turned it black and didn't have enough time to turn it back. So, I decided to just say that it was disabled.

2) The screen I used while creating my GUI dulled the colors, so when I actually saw my GUI presented in class, I was surprised how bright everything was. Overall, I would turned down the opacity and/or the saturation of all the GUI elements. I find it's a bit brighter and more distracting than I'd like.

Overall, I like the general size and shape of all of the GUI elements. I might like the "target view" that's at the bottom-center to be a bit bigger. It might be a too small to see the target clearly. At the same time, I don't want it to crowd the screen too much.

The GUI isn't symmetric, but I feel it's fairly balanced the way it is currently arranged and sized.

I think I might change the icon for the gun. It doesn't quite match the color scheme of the GUI. I might like it colored and simplified to match. The purple, blue, and green color scheme is meant to have a high tech and futuristic look to it, with just enough contrast between the different elements.

I think I would like little details added across the whole GUI. Maybe small indicators and texts as part of the existing GUI elements can further enhance the nature of its immersion. I think that more details could be added to the minimap, and its icons could be shown a little clearer. The different shades of green indicate distances across the map.

The gundam damage status is meant to indicate damage across the gundam. It's large in the GUI because it's important, and I think it's narrow nature limits it's intrusiveness. The different colors indicate different levels of health. Green is healthy. Red is very damaged.

The ammo and thruster meters are nice and long to clearly indicate ammo and thrust. Their triangular shape is intended to both minimize their intrusiveness as well as to add to the GUI's angular design.

The target lock icon could be a bit bolder with more contrast and could look a bit a bit more interesting. Maybe a different shape might help enhance the immersion, as well.

3) I have good experience in Photoshop, but am not too used to using its vector tools. I'm more comfortable with Illustrator's vector tools, so I had a few minor problems when using them in Photoshop. I used the pen tool and shape tools primarily, and they worked well for me.

Homework 5 by Alec Stamos

1. Yes, I agree with the comments that I got. The color scheme isn't really consistant and some elements are are translucent while others aren't. Some GUI elements have shadow effects while others don't.

2. I would probably keep everything on a blue/green/red color scheme and have all of the elements be flat and slightly transparent.
- Health Bar: I would make this have some transparency.
- Thruster: This would also become slightly transparent.
- Weapon: I'm pretty happy with the weapons display, although I'd probably make the ammo gauge slightly transparent to fit with the rest of the GUI.
- Radar: I would get rid of the shadow effect and make the radar green and slightly transparent.

3. I used the shape tools for the two circles and the pen tool for the ammo gauge and the bars. It was all pretty simple to do once I got the hang of it, but it was difficult to keep track of all of the path layers and what layers the strokes and fills were on.

HW05 by Sam David

1. I think overall the feedback on my design was positive. People thought it was good how i stuck with the color scheme but I did have a slightly off health bar.

2.
- Size: THe overall size of my elements was alright i think. There were no comments that certain things were too big and too small.
- Placement of Each GUI: Placement was a slight issue. I used up every corner of the screen to fit my elements in which made it a little crowded. If i did this again i would try to stick a few more things together.
- Overall Color/color scheme: my overall color was good. A lighter teal green that reflected past gundam colors. However, my health bar stood out too much because it was red and had a bevel emboss on it. I would get rid of this in a future version.
- Iconography (what does the shape/color signify?): I had some problems with the pen tool when designing the thruster controls. If i could redesign this, i would probably do this first. It did not look smooth and was rather choppy.

3. I still have difficulty with the pen tool. I cannot seem to make the edges how i desire them. I also have trouble making the part i traced out with the pen a layer so that it can be manipulated as such.

HW 05 by Lee

1. Aye, I understood the reasoning behind the feedback I received. Color made sense, but perhaps the placement of the items was somewhat off, as one mostly does want to keep the bottom right clear, though games such as Halo do defy that convention for some of their elements. Perhaps I should have better designed the thruster element though, or tried to keep a little closer to the Gundam look.

2. On general notes on size and placement, I would likely keep the health and radar indicators the same, as they were fairly effective and well designed, but I have possible tweaks for the others.

Radar: While I used the head of the Strike Gundam as the template for the radar indicator (since many sensors would be in the head, ne?), I suppose that it was an inefficient use of space, and perhaps I should have remained with a standard square or circle for conservation of sceen space.

Health: I'm satisfied with how that particular one turned out, though perhaps I should have broken the health into the health of the various portions of the gundam instead of overall health. Placement, color, and style I have no color with.

Thruster & Temperature: The placement and design of this particular element was probably off. While I do think it was necessary to have the thruster bar be somewhat large in order to grab attention, perhaps it should not have been immediately under the Health indicator. It had been my opinion that this was appropriate, as the thrusters in the gundam strike are located right under the armored "skirt", but perhaps I was wrong.

Weapon indicator: I liked the use of the gun as the weapon indicator, with percentages because it was indeed an energy weapon - however, on reflection, perhaps it would have been better designed had I actually put in icons for "bullets" remaining, as it would be easier to get a visual assessment of battle conditions based on that. In terms of placement, perhaps I should have moved it closer to the top, so as not to obstruct the viewable area, such as right under the radar.

3. Vector tools were actually fairly simple to use, and I can easily see their power if I was using a tablet. In addition, the scalability and smaller amount of information is a plus if I want to export to something like Flash, say. Primarily, I used the pen tool, as it was the most versatile, creating layers, but also using it to select and deselect areas from work paths, such as when I was working on the gun shape. Fill made it easy to give the strike head radar its appearance, and I'm not sure I used stroke. All in all, it makes for clean, crisp, designs.

HW05 by Blade Olson

HW 05 by Brian Abrams

1) I generally understood the reasoning behind the comments received on my assignment 02. It is relatively evident that the color scheme is not very consistent. The outer glow used on the Health icon and radar do not match. The placement for each of these items seems fine, since you usually want to keep the bottom right side of the screen clear. The size of each element was ok, but I could have made the Health icon noticeably larger than the weapons indicator.

2) As a whole, the definite size of each GUI element seems to work as a system. However, it may not be obvious to the player which GUI info is most important. The health should be a bit larger than the weapons indicator. I would compensate for the unused space in the weapons GUI. I would make the radar a little smaller, too.
The placement of each GUI element seems to work fine. I might end up moving the thruster gauge flush against the radar, as if the two were attached. I wouldn't necessarily move any of the other GUI elements.
The overall color that was intended to be used was an opaque dark grey, metallic kind-of look. I didn't do very well bringing this out. I tried using this scheme on the radar and weapons indicator, but I couldn't figure out how to consistently use it for things like the thruster and the health because I had used gradient fills. The outer glow on the health doesn't seem consistent, nor does the light blue outline of the thruster gauge. I would figure out how to stay consistent even when adding effects to specific GUI elements.
The iconography that I used was OK, referring to the health and the weapons indicator. However, on the radar, perhaps I could have used different shaped enemy indicators instead of dots. Also, perhaps I could have figured out an icon to use for the thruster gauge, since the gradient fill doesn't seem to fit the style/color scheme.
I thought that the style was generally pretty good on my layout. There were some issues with color and consistency, but I liked the hexagon radar and how the thruster gauge is a piece of the radar and can be attached. With some cleaning up of my Photoshop skills, hopefully I can figure out an easy way to keep consistency.

3) My experience with Photoshop was pretty frustrating as it usually is. I had trouble keeping the GUI elements consistent because I couldn't figure out how to adjust the effects of images to meet my needs. Also, it kept rasterizing my images whenever I wanted to fill in an image with a color. As a result, I couldn't get my paths to save. The tool which proved most helpful/simple for me was the Pen Tool, which I have used much before. I also worked with the custom shape tool, and added layer effects (or tried to). The selection tool came in pretty handy as well when trying to edit specific parts of each GUI element.

HW05 by Ryan Hedden

1. I agree with pretty much all of the feedback I got on my assignment 2 presentation. The color scheme and styles of the radar versus the other corner (health, thrust, weapon) did not exactly match up. Also the colors, especially of the GUI elements in the bottom right corner were a little too vibrant and saturated for the visual theme of the game. No one seemed to have much of a problem with the actual shapes or functionality of the elements, and I didn't really either; though I might tweak them slightly to make them more mech/gundam like.

2. For the sizes and placement of the GUI items, I would probably keep these the same, since I liked how they were consolidated and liked having the health be the most prominent feature. Other than that:

Health - I would make it more transparent, make the colors more desaturated, maybe add some slight computer chip-like lines branching off of it as a border to make it look more mech and computerzied

Thruster - Other than desaturating the blue and making it more transparent, I probably would not change anything, I think it is pretty straightforward.

Weapon - I would again desaturate and make more transparent. I also would change the rectangle into maybe a slightly slanted, more dynamic shape. I would make the weapon icon more 2D and overall I would want it to look like a more high tech, LCD-like interface.

Radar - I would take away the bevel and make the radar 2D like the other GUI elements. Again I would desaturate and lower the opacity. I would probably take away the border so it seems more like something that would appear on the gundam pilot's dashboard, and look less like a floating compass.

3. I liked the precision and control that the vector tools gave me, though getting them to look the way I wanted took longer than if I simply painted them in or manipulated existing images. The shapes and colors are also very clean looking, so if I were going for a more organic or gritty-like interface, it would be harder to achieve that. That did not really matter for mine however, as I was going for a digital-looking interface.

Assignment 02 by R.C. Narma

Gundam%20wireframe.jpg

gundamv1.jpg

1. Gundam Damage Status- shown as a figure with the divided parts
2. Radar- units shown with dots
3. Target Lock
4. Target Information
5. Thurster bar shown in green (red when overheated)
6. remaining ammo
7. weapon icon
8. Misc. box, sometimes used for communications.

Assignment 02 recap

Even though we had such a limited time to spend on this assignment, I believe some of you did wonderful jobs expressing your ideas through the visual representations.

As I have said in class, the purpose of this assignment was two-fold - one was to familiarize yourself with vector-based tools in Photoshop, and the other was to achieve visual and semantic consistency within the GUI elements that were overlaid. However, I realize some of you simply did not have enough time and/or patience to adopt to a new set of tools.

As HW05, I would like you to visit all of your peers' blog posts on HW04 and Assignment 02, and think of what you would do differently if you were to redo the assignment 02. Then, please post your ideas as HW05 in the class blog. Please make sure to analyze the following in your blog post. (Please note the due date - WED - 10/15/08)

1. Comment on the feedback(s) you got at the last class meeting and critique

2. Please analyze each GUI element you designed, and explain what you would do differently on each. Please refer to the following formal qualities on GUI elements. Be specific on what you would change.
- Size (definite size on screen, and relative size compared to others) of each GUI
- Placement of Each GUI
- Overall Color/color scheme
- Iconography (what does the shape/color signify?)
- Style

3. Describe your experience on using vector tools on Photoshop - what was challenging, what worked for you, what did not work for you. Be specific to list names of specific tools you have worked with - Pen tool, Custom shape tool, layer effect, selection tool, stroke, fill, etc, and how.

4. If possible, post your new design (JPG) on blog, and submit a new PSD file on MON (10/20/08 - not tomorrow but a week after) - may replace the assignment 02 grade if designed better.

Assignment 2 by Sam David

Assignment2wireframe_SamDavid.png

Assignment2_SamDavid.png

1. Radar: The radar would be similar to the radar found in previous gundam games where you are a dot on the radar and enemies are a different color. By pressing start you would get a better view of the whole radar.
2. Thruster Info: The thruster would go up and down based on how much thruster you have remaining. It would slowly recharge as you don't use it.
3. Health Bar: The health bar would obviously decrease as you take damage.
4. Ammo Remaining: The ammo readout would have the ammo you currently have on the left and the maximum ammo on the right. This would change based on weapon.
5. Weapon Info: The weapon info would simply display what current weapon you are using.

Assignment 02 by Blade Olson

GundamScreen.jpg

assignment02_Olson.jpg

1. Radar
2. Health Bar – Will decrease in a radial fashion with the bar being removed counter-clockwise; slowly turns from green to red as the circle decreases in size.
3. Primary Fire Ammunition
4. Secondary Fire Ammunition
5. Closest Target - arrow that moves around the “Health Bar” ring and locates the closest target to the player.
6. Thrust Bar – Decreases in size (towards the bottom of the screen) as thrust is used. When the thrust is almost depleted, the screen shakes, the bar turns red, and a “Overheat” icon is displayed over the thrust bar.
7. Possible Secondary Fire Targets - can be locked onto and fired upon after entering, or coming close to, the “Targeting Reticule”
8. Targeting Reticule – the aiming reticule for the primary, and secondary, fire. Moves slightly from the center of the screen towards the player’s target.

hw-04 by Kane

assignment2_kane_redo.JPG

GundamWireframe.jpg

1. HEALTH: Robot Icon with color indication of damage to specific body parts, total percentage health overload below icon.
2. THRUSTER: Green bar, lights up glowing blue as it fills up.
3. WEAPON: Weapon icon with ammunition number listed below icon.
4. OVERHEAT: A glowing box around the outside of the radar and thruster icons that glows red when character is overheating.
5. RADAR: A square radar screen with enemies indicated by green triangles. An animated picture of the pilot can be seen behind the radar, and reacts to various stimuli in the game.
6. RETICLE: Aiming reticle indicated the targeted enemies.

Assignment 2 - by Michaela Morris

Gundam%20screenshot%20copy.jpg

Wireframeforgundam.jpg

1 Health bar
2 Radar
3 Thruster and overheat information
4 Weapon and remaining shots information

1. The health bar is the most visible on the GUI because it is the most important piece of information for the player to know. It will be colored and it will be green when the player is not in any danger of dying, but it will begin to turn red as the player gets closer to mortality.
2. The radar is also a very prominent piece of information because it’s really valuable for the player to know where enemies and allies are in the realm of the game, so the more noticeable and helpful we can make it the better.
3. Thruster and overheat information goes on the bottom left of the screen because that way the player can see the information out of their peripheral vision.
4. Weapon and remaining shots information is by the thruster information so that the player can figure both out at the same time and it is information accessible through peripheral vision.

Assignment 02 by Gavan Wilhite

Gundam_SS.jpg

assignment02_Wilhite.jpg

1- Health bar
2- Heat Gauge (looks similar to a Tachometer)
3- Weapon picture and ammo counter
4- Radar indicator (Enemies are red right-side up triangles, allies are green upside-down triangles).
5- Target lock-on indicator

Assignment 02 by Katrina Wolfe

wireframe401.jpg

assignment2_wolfe.jpg

1: Health gauge
2. Thruster/overheat gauge
3. Weapon- drops down when changing weapons
4. Weapon info - bullets, energy
5. Enemy indicator
6. Radar

HW4 by Erik Nichols

hw4wireframe.png
Larger Version:
View image


1: Health Bar (transparent until dmg is taken, then individual pieces redden)
2: Thruster Gauge (dash moves up gauge into red area as thruster is used, then cools down)
3: Ammo Count (current clip/total)
4: Rader (centered on you)
5: Reticle

Assignment 2 By John Banayan

Wireframe2.jpg

1 - Radar: Shows enemies, obstructions and allies in all directions
2 - Information Panel: Appears to deliver important information that may be related to story or the battle your engaged in.
3 - Related Information: Appears to deliver information related to the Gundam such as warning messages or system information
4 - Equipped Weapon Left: The weapon equipped on the players left hand and displays the weapon held and ammo left.
5 - Health: Amount of health left, damaged parts will blink red
6 - Equipped Weapon Right: The weapon equipped on the players right hand and displays the weapon held and ammo left.
7 - Thruster: Shows how much thrust is left by filling and emptying the bar

Assignment02_Banayan_Blog.jpg

I ended up getting rid of number 3, as I worked on it I realized that the information it would give would be better delivered at the top. This way the player looks up for all information needs, and looks down for more battle and health related needs. I also decided to make the thrust indicator a percentage gage, instead of a full bar. The weapon and thrust gage also fill up as the player depletes ammo or thrust.

HW 4 by Alec Stamos

interface%20wireframe_edited.jpg

assignment2_Stamos%20copy.jpg


1. Health bar - Gets less full as you take damage. Also turns red when the character is low on health, otherwise it is green. On the screen, it is grouped with (on the same side of the screen as) the Weapon/ammo area as they are both part of combat.

2. Weapon information - The left part of the circle shows which weapon is currently selected and the right part is a meter that shows how much ammo it currently has.

3. Thruster - This bar goes up as you use the thruster more and down as it cools down. As the thruster heats up, the bar turns red, and when it is cooled down it's blue. It's grouped with (on the same side of the screen as) the radar as they are both involved in navigation/movement.

4. Radar - Has a green triangle in the center to represent the player and red dots to represent the enemies. Also shows locations of other important objects.

Assignment 02 by Hedden

Untitled-1.jpg

gundamwire.jpg

1. Health - A diagram of your Gundam is broken up into several body regions. If a region is damaged, it will change from from yellow to red and flash if it is in critical condition.
2. Weapon - A small icon for the current weapon with the number of remaining ammunition is displayed under the health gauge.
3. Thruster - A vertical blue bar starts as barely visible, then rises upward as the thruster is held down. The color begins blue and becomes increasingly brighter the closer it gets to reaching the top of the gauge. If the bar hits the top of the guage, the thruster has overheated and turns red. It slowly decreases in height and the player cannot use the thruster again until the bar is back at the bottom of the gauge.
4. Radar - The radar is circular with your Gundam always in the center. Enemies appear as red dots around you. If an enemy is locked onto, your radar image will briefly change to a picture of the enemy with its stats before going back to the main map view.

Assignment 02 - by Brian Abrams

gundamwireframe%20use.jpg

GUI Elements:

1 – Health/Energy Bar – Decreases as you take damage. Fades away in 2 seconds of inactivity when you are not taking hits. Remains static when health is below 25%. **Use battery shape, since after all, Gundam is a mech-warrior.
2 – Equipped Weapon (Large) and Secondary weapon (small) w/ Ammo – Displays current weapon and secondary weapon ammo. Ammo remaining is shown by bullet icons with a number displaying how many rounds are left (similar to Halo 3)
3 – Thruster Information – Shows the status of the thruster. Appears when using the thruster. If thruster is overheating, the bar will rise from a cool blue color to a hot red, and will begin flashing when fully overheated.
4 – Radar – Displays your position in relation to enemies and/or mission objectives. Enemies appear as red dots, you are a yellow dot.

GUNDAM%20JPG.jpg

hw04 - by Alex Sandoval

HW4_Sandoval.jpg

1) Health Meter – I have incorporated Gunman as the health meter. Gunman is dark blue, as he gets hit he turns white to get the players attention. Once the player is in danger the color white pulsates like a heart beat to tell the player of their current health condition.

2) Thruster and Overheat Gauges – There are two separate gauges. One gage is for the thruster, which is color coded orange. it is in the form of a battery and it also give the player visual and a percentage of their current power. The second is your overheating gage. This gage is color coded from Blue (Cold) to Black(Hot). As you overhear the gage turn black the text will flash to indicate your overheating status.

3) Weapons and Ammunition – Your weapon is indicated by an Icon. To the left of your weapon you have an icon and a number of ammunition. This gives you a visual as well as number which indicates how many bullets you have left.

4) Radar and Enemy Indication – The radar is a traditional circular icon that displays the distance of your enemies. Your enemies appear orange in the radar. There are four health bars surrounding the radar. Those health bars are for your enemies. It indicated their damage. They turn from blue "power" to "white," which means destruction. You, “Gundam” is indicated by a triangle showing your direction of travel. As your enemies get closer the radar will flash white in the center indicating danger.

Assignment 02 by Lee



Wireframe proposal for a new Gundam game:

1: Health Meter - In the shape of the Gundam one is piloting. At full health, registers as green, but will gradually shift towards red as damage is taken.

2: Thruster & overheat info: Two separate gauges going from blue to red within a larger indicator that itself will turn red if thruster shutdown by overheating imminent

3: Radar and enemy indication: Cutout is in the shape of the gundam head, where the sensors are located. Enemies will appear as dots in a traditional radar field within it.

4: Weapon info & remaining shots: Graphical display of current weapon and shots remaining

Sample:

Hw03 - Perfect Dark 64 by Drew Moxon

perfect-dark-n64.jpg

PerfectDark-Battle_sm.jpg

5091639aaa.jpg

Gameplay video: http://www.youtube.com/watch?v=PRiLoJ4x5j0

Perfect Dark 64 was a revolutionary shooter for its time. While the multi-player didn't quite match that of Goldeneye 64 in most regards, the single player and weapon selection is where it stood out. It is still mimicked to this day in many of the weapons and FPS gameplay concepts it introduced, and Halo's weapons are based heavily off of mechanics which Perfect Dark 64 established. It also pushed the N64 to its max in terms of hardware rendering, and looked great for its time (though it is now hard on the eyes).

In terms of weapon choice, the player could choose between various human and extraterrestrial weapons ranging from scoped pistols, to alien sub-machine guns (Mauler -- inspiration for Halo alien weapons), guns which transformed out of laptops, alien machine guns that could release their clip on one click, automatic shotguns, alien sniper rifles that could see body heat through walls, and even blender-like grinding melee weapons (Reaper).

The story was also somewhat compelling, and the gameplay was superb. The co-operative play worked very well, and provided hours upon hours of fun.

Wireframe:
Wires.png

Wireframe Breakdown:

1. Ammunition in clip - this is always visible on the screen, and at full bar, it is filled to the maximum amount of ammo you can fit in one clip. As you shoot it decreases, when you reload, it fills up.

2. Ammunition total - also persistently visible, and it displays how much total ammo you have for the selected gun. It depletes as you reload (by a clip's-worth of ammunition), and is filled up as you pick up ammo on the ground. There is a maximum number of bullets that you can carry.

3. Gun mode status - displays as a solid red vs. yellow box depending on what mode of firing your gun is in. Each gun has two, and yellow is the secondary/special state. As you switch, letters come out and slide to the left to tell the user what each state does.

4. Text display - alerts player of things like ammunition pickup, shield pickup, gun pickup, or anything that needs to be conveyed through text.

5. Weapon being held - off center, aimed toward the middle point of the screen (6)

6. NO CROSSHAIR - I believe you are able to turn it on, but the good players play without it, and because of the way the gun (5) is angled, it is not too difficult to know where your bullets will be firing

The GUI/HUD has a very square/sharp look to it, which is holistically integrated - text, shapes, and layout all seem to add to this.

hw-03 Doom by Michael Kane

Slide1a.JPG

Slide2a.JPG

http://www.youtube.com/watch?v=yr-lQZzevwA
The first time I played Doom was a long time after it came out…like over 10 years after. I was already experienced in first person shooters and I noticed some things in this one I liked. I felt the game still had the same basic elements of modern shooters that made them fun even though it was dated. Running around, collecting supplies, aiming, firing at the right time, and getting a satisfying result. The aim didn’t really have a vertical axis, the player couldn’t crouch, and the amount of guns was 7, listed on the interface. However, it DID take about 2 seconds for my computer to load start, a minute to learn, a catchy soundtrack that got me pumped up, and although low quality, I felt the graphics and sound were expressive, appropriate and satisfying enough for me.

I also really liked the emoticon character appearing in the interface, which I don’t see in many other FPS games. It really made the moments intense when my guy’s face was covered in blood, gritting his teeth and I fought of hordes of demons with a machine gun. It gave me more of a cinematic image of being able to see both my character dramatically defending himself and the enemies charging forward at the same time. In addition, it loaded on my computer in like 2 seconds, and took about a minute to understand how to play.

WIREFRAME:

1. Relevant messages/items picked up, objectives, etc.
2. Ammo: The current amount of ammunition you have for the equipped gun.
3. Health: Percentage health remaining out of 100%
4. Arms: The current guns in your inventory, labeled by numbers.
5. Character: A visual representation of your character’s facial expression, complete with blood when he is injured and expressions when hurt or firing guns.
6. Armor: The percentage of armor for your character. Similar to health.
7. Keys: The keys you have collected within the level, usually colored card keys.
8. The amount of ammunition you have for all guns listed by gun.
9. Visual representation of your currently equipped weapon.

hw03 - Half-Life 2 by RC Narma

half-life-2-20041121083754240.jpg
hl2wf.jpg


Probably, the first amazing thing I noticed about Half-Life 2 was the amazing graphics. It looked so much more realistic than any game I had ever seen before. Just walking around exploring the world a little bit was particularly breathtaking. The world seemed so interactive. The physics allowed so many things to be picked up and manipulated. The GUI and HUD are particularly simple and unobtrusive. The storyline and gameplay is engaging and energetic. The enemies span anywhere from zombies to giant tripods. The game also one of the most innovative video game weapons of all time, the gravity gun. It allowed the player to pick up all so sort of objects (and eventually people) and launch them at enemies. It is a very fun game in an imaginative dystopian world.



1: Crosshairs: These are used for aiming weapons

2: Auxiliary Power Meter: This shows how of certain things are left (oxygen, battery power, etc.).

3: Health: This shows current health status. 100 is full health. 0 is dead.

4: Suit Power: This shows how much suit power is available (which acts like armor in that it is used up before health).

5: Picked up Items: Weapons, ammo, health, and suit power recently picked up is shown here.

6: Squad Information: Squad information is shown here.

7: Ammo: Ammo available for the weapon is shown here.

8: Weapon Inventory: This pops up when switching weapons and shows available weapons divided by category.

HW03 - Half Life 2 by Jonathan Rosenfeld

hl2.jpg
Gameplay Video

Half Life 2, along with being one of my favorite FPS titles, is also one of my favorite games. One of my favorite things about it was that there weren't any cutscenes so I was never forced to watch something. I could always be messing around with the environment. I also enjoyed the different playstyles. Sometimes I was being chased while other times I had to get through areas with lots of enemies. The story was engaging and I wanted to see how it was resolved.

wireframe.jpg
1. Health indicator: this shows how much health your character has left ranging from 0 (dead) to 100 (full health)
2. Armor indicator: this shows how much armor your character has left ranging from 0 (no armor) to 100 (full armor)
3. Ammo: this has two numbers, one showing how much ammo you have left before you need to reload and another indicating how much ammo you have left overall
4. Auxilary power: this shows how much power your suit has left. This power allows you to use your flashlight, sprint or hold your breath
5. Squad status: this shows how many people are in your squad and what they are doing in relation to you
# Wireframe analysis and the description. (Create wireframe in Photoshop, and number each GUI element, then upload the JPG to the blog. In the body of your blog entry, give description of each GUI element according to the number given in the wireframe).

HW 3: Half Life 2 by Alec Stamos

hl2%20interface%20wireframe.jpg

http://www.youtube.com/watch?v=HnSEqsedCb4

I like Half Life 2 a lot because it creates an extremely immersive experience which it never breaks. It never takes you out of the first person viewpoint and never skips to a cut-scene where you don't have control over your character. The interface is minimalistic and only shows what's needed at the current time. That way it doesn't distract from the gameplay and the game world.

1. Auxiliary/Flashlight energy
2. Health
3. Suit armor
4. Current Ammo
5. Total Ammo

HW 3 - Bioshock by John Banayan

bioshock-1.jpg

Bioshock_Wireframe.jpg

Bioshock uses the unique strengths of the first-person shooter to create the most immersive experience I’ve ever played. Using an exceptionally detailed atmosphere, the game revolves around choice and making you feel like there are consequences to decisions you’ve made, namely choosing to ignore, harvest or save “Little Sisters”. These characters embody an item that could be used to greatly improve/expand your skills but to get all of it you must kill the innocent carriers who are protected by Big Daddy’s, the games roaming boss battles. Using guns and plasmids (genetic modifiers that give the player the ability to start fires, send a swarm of bees, freeze an enemy etc.) you fight your way through an underwater society that has turned on itself and uncover your connection to it. Unlike other FPS’s Bioshock doesn’t rely solely on your ability to shoot at a target, it requires you to plant traps, plan escapes and create strategies. You play the way you want to play and not taking your surroundings or abilities into account will end in an explosive death. This in turn makes my avatar unique to anyone else’s. My character saved all of the little sisters and loved lighting people on fire and then electrocuting them when they jumped into the water. Yours may specialize in setting traps and luring people into them. The player also chooses how invested they can be in the story as most of the story is delivered through audio tapes you find and can listen to as you play. For as long as I can remember, I've wanted to play a game that will give me the freedom to play the way I want to play.

The GUI is minimal and only display’s the information you need to know, when you need it. Thus things like health and ammunition are only on screen when you’re fighting and an arrow helps navigate you through the level when there is a specific objective that needs to be done. Other elements that show up are a radio icon when you’re receiving instructions or a small picture when you’re listening to a tape you just picked up. Cycling though weapons or plasmids is done by either a quick press of the bumpers or holding them until a circle of all available weapons/plasmids pops up. This of course freezes the action on screen and gives you a little time to plan while you’re in battle.

This game helps legitimize gaming as an actual art form because it can’t be done in any other media format without losing what made it special. Of course that doesn’t scare some from trying as there is a Bioshock movie in the works.

Wireframe
1 – First Aid Kits left – These refill the health bar
2 – Health Bar
3 – Eve left – These are the “ammo” for plasmids
4 – Amount of Eve left
5 – Navigation Arrow
6 – Ammo Type 1
7 – Ammo Type 2
8 – Ammo Type 3
9 – Ammo left and what kind of ammo

hw03 - Perfect Dark for the Nintendo 64 by Katrina Wolfe

PerfectDark-Battle.jpg

PerfectDark-Battle%20copy.jpg

http://www.youtube.com/watch?v=PRiLoJ4x5j0

This has always been one of my favorite FPS since I started gaming. The gamplay was fun and engaging, the screen wasn't overwhelming and complicated. The storyline was entertaining and compelling. Once I started it, I couldn't stop until if was finished. Multiplayer was really fun. The GUI was refreshing and had enough, but not too much. I also liked the gun menu, you would pause the game and cycle through the weapons in a quick and easy manner. The health and shield bars were nice because I liked that they weren't always there. The visuals were pretty nice for its time; I remember thinking how great they were. It also holds a special place in my heart because I do like a good female, gun wielding, protagonist.

Wire Frame Interface elements:

Health Bar
Shield Bar
Pops up when you pick up something
This represents the amount of ammo in the clip being used
Represents the total number of bullets available
The number of total bullets available
This is the actual number of bullets left in the clip
Shows what mode the gun is in
Crosshairs



hw03 - Deus EX by Gavan Wilhite

Deus_Ex_1.jpg

Deus_Ex_Wireframe1.jpg

http://www.youtube.com/watch?v=yaQb5bOk9UM

Deus Ex is my favorite FPS game because of the depth and immersion that its RPG elements provide. It provides the customization and replayability of an RPG, while preserving the twitch gameplay and tactical 3D puzzles of a FPS. This game is still the best example of combining non-linear and linear gameplay to date. The game also keeps a consistent and well conceived style throughout the game.

1. Energy bar and localized damage. Localized damage is demonstrated by a figure with each body part colored to represent how much damage it has taken. The energy bar shows how much power JC has remaining to power his augs. This will change color as it gets lower, similarly to the localized damage graphic.
2. A horizontal compass.
3. Weapon display section. This contains an icon for the currently selected weapon, number of remaining clips and remaining ammo in the current clip.
4. Dialog box. This box contains subtitles from both dialog and NPC barks.
5. Quick Inventory. This is a 10 slot bar containing shortcuts to inventory items. Each slot is numbered with its associated hotkey. Slots can contain any usable inventory item including weapons, tools, and consumables.
6. Aug list. This displays all usable Augs and their associated hotkey. Icons will change color if in use.

hw03 - Halo 3 by Brian Abrams

halo%203%20screenshot.jpg


halo%203%20wireframe%20use.jpg

http://www.gametrailers.com/player/25481.html


The reason why I like Halo 3 the most is because I believe that it is an all-around well balanced arcade-like shooter game that allows for different degrees of various emotional aesthetics. Frustration, fellowship, competition, expression, you name it. Halo 3 is an intense, fast paced game that involves a ‘twitch’ mechanic, or twitch gameplay (which is usually my type of game). Also, Halo 3 allows for a great deal of unpredictable instances in gameplay, based on how objects and their properties interact. For example, I might drive a vehicle into an exploding crate and kill myself, but at the same time the exploding crate launched a traffic cone into the face of nearby opponent, killing him instantly. The best part is that such instances can be recorded for future viewing pleasure. What interests me greatly about the Halo series in general is that everyone plays as the same avatar, essentially. Yet, they’re all trying to kill each other. This makes being killed even more frustrating for some odd reason.
Although Halo 3 is geared more towards the hardcore gamer demographic, I believe that it is very easy for anyone (gamer or not) to pick up the game and at least become immediately interested in it. The interface is pretty self-explanatory, assuming you’ve played other FPS games. The only thing that newcomers to the game have trouble absorbing is the idea that there is no health bar, but rather a shield bar which recharges itself when taking cover. However, the game informs the player by means of audio as well as visuals that the characters’ shield is down, providing better feedback to the player without crowding the screen.
All in all, I think that Halo 3 is a game that integrates its mechanics, aesthetics, and resulting dynamics into a great user experience.

Wireframe Description:
1 – Grenade Type/Ammo – Shows you which grenade is equipped (by highlighting) and how many of each is left

2 – Shield Meter – Displays the status of your shields. The meter is empty and flashes red when there is no shield remaining.

3 – Current Weapon and Ammo, and Secondary Weapon (Below) – Displays the weapon equipped at the top of the box, along with the number of shots remaining next to it. Your secondary weapon is displayed as a smaller weapon icon below the equipped weapon.

4 – Action Notification – Appears when you walk up to an object that is operational (i.e. turret, opening a door, or picking up/swapping weapons)

5 –Weapon HUD – Displays different information, depending on which weapon you have equipped. An assault rifle will show how many shots are left in the round, but a sniper rifle will show you the terrain layout as a wireframe

6 – Radar – Displays your position in relation to enemies and/or teammates

7 – Item Equipped – Shows which special item you have equipped (i.e. Shield regenerator, Bubble shield, etc.)


hw03 – Portal by Blade Olson

portalscreenshot.jpg

portalwireframe.jpg

http://www.youtube.com/watch?v=SeZwo_7KdHY&feature=related

Out of all the possible FPS games that I could have chosen as a favorite, this definitely pushes the conventional boundary, and the very definition, of the “first person shooter.” It’s not very often that I sit down and play a game from beginning to end, but Portal invited me into a world I had been dreaming of since I was a child – a game of spatial manipulation. Portal is revolutionary in that it combines skill, puzzle, and common sense to create a game that I believe deserves a genre of its own: the physics-based puzzle game.

I grew up playing adventure games, specifically the point-and-click LucasArts adventures, and since their recession from the industry, I have always thought about a way to revive the genre. Because of their lack of replay value and relatively boring pacing in comparison to other games in the American market (such as Halo or Call of Duty 4), few studios take a gamble at producing one. However, Portal could potentially make the game industry take another look at adventure games:

Puzzle games and adventure games have almost no replay-value because most puzzle games, like riddles, are no longer entertaining once their answers have been discovered. However, by introducing “skill” into the equation, and offering a unique, engaging story iconic of original adventure games, physics-based puzzle games, including the smash-hit Braid and the quirky Loco Roco, may very well be the new rising-star in the video game industry.

Besides, physics is a lot of fun when you don’t have to do the math.

WireFrame Description:

1. Current portal-type selected

hw03 - GoldenEye 007 by Alex Sandoval

Golden_Eye_Screen_Shot.jpg

GoldenEye007_WireFrame2.jpg

http://video.google.com/videoplay?docid=-8541226234198661446&hl=en

I like the Idea of a single/multi-player game. I enjoyed the option of playing missions based on my level of skill. As I progressed and understood the game and the importance of stealth, I advanced to much difficult level. These levles could be played on either "Agent," "Secret Agent," "00-Agent," or "007" difficulty settings, with higher difficulties requiring you to complete additional and more complex objectives. The multi-player option allowed for a casual or more complex game play.
This was one of the first FPS games I played, so it remains in my top list. Now with the improvements of technology I incorporate the techniques I learned from GoldenEye 007 to more flashy games like Halo.

The GUI was quite simple and easy to read, the Wireframe had two icons. One Icon was for your selected weapon and ammunition and the second only appeared if a bullet struck you, which was your health bar. The ability to hide the health bar allowed for a cleaner GUI look. In 1997 the depth of the graphics was not advanced as they are now. However, I enjoyed the realism of the James bond character and the storyline.

Wireframe
1) Weapon Selected & Ammunition
2) Health Bar (It only appears when you get hit by the enemy)

HW03 - GoldenEye 007 for N64 by Michaela Morris

GoldenEye 007
screenshots007.jpg

Gameplay Footage: http://www.youtube.com/watch?v=52ub7tffQJw

I really don’t play that many First Person Shooters because I feel like the gameplay gets stale and I get tired of shooting endless amounts of enemies after a while. However, if one FPS sticks out in my mind it’s definitely Goldeneye for the Nintendo 64. I like Goldeneye 007 the best out of any First Person Shooter because I feel like they really got the gameplay right, but that aside, the GUI elements are more simple than many games I’ve ever played. It only displays the information you absolutely need to know when you need to know. Ammo when you need to know, shields and health when you’re in combat. Instead of cluttering my screen, I can focus on the game at hand and trust that it will tell me what I need to know when I need to know it.

Wireframe:
wireframe007.jpg

Wireframe Breakdown:

1. Health - When you are being shot at, this pops up to tell you how much you are being injured.

2. Shield - Also only pops up if you are being shot at, lets you know the status of your shield.

3. Ammo - Tells you how many bullets/ammunition you have left of whatever weapon you are firing.

I think what makes me really like this game is the really simple GUI element. It just gives me enough information - not too much.

HW03 - Team Fortress 2 by Erik Nichols

Picture:
tf2-20071103-124622.jpg

Gameplay Video:
http://www.youtube.com/watch?v=ynrF2es08ds

I think by now, most people have, if not played, at least heard about Team Fortress 2. The long awaited sequel to the original, the game was released by Valve along with Portal and Half Life 2 (and expansions) in the Orange Box. Team Fortress 2 was the multiplayer component of the Orange Box, and featured a combination of arena style first person shooting with humor and near flawless game design. I have yet to meet someone who said they did not like playing Team Fortress 2, and this really speaks to how good of a game it is. With its extremely well designed (albeit few) maps, hilarious characters, well balanced classes, and team based goal oriented gameplay, Team Fortress 2 has consumed many hours of my time and is certainly one of my favorite, if not my all time favorite, first person shooters.

HW03 - Shadowrun by Ashley Soriano

Shadowrun

SSshadowrun.png


http://www.youtube.com/watch?v=lYYLHNTQOdg
This Youtube video is footage from my friend Gawdlike, a professional Shadowrun MLG player. Actual gameplay in the video starts at 0:16 seconds.


Shadowrun
Generally, I get bored of most first person shooters that reach the market. Point – shoot – kill has grown relatively boring with each FPS that has released in the past 3 years. Sure, I enjoyed Halo 2 for its health system and glitch gameplay. Also, I enjoyed Call of Duty 4 for its intriguing storyline and game controls. However, no game has interested me more than Shadowrun.

Beyond the regular point and shoot, the magical elements add a real kick to the gameplay. Strategies are more difficult to execute due to the fact that someone can teleport behind you and shoot you in the back. Each player has to think three steps ahead in order to outwit the other team. The game may have its faults and glitches, but the gameplay is always frantically exciting. No two rounds are ever the same.

HW03_Shadowrun_AshleyS.jpg

GUI Wireframe:
1. Left Trigger Assigned Magic/Weapon/Item
2. Left Bumper Assigned Magic/Weapon/Item
3. Essence (“Pips”) for Magic
4. To notify other players to caution the area the player is in
5. Notifies the other players if there is an enemy in the area where the crosshair is pointed at
6. Alerts other players to move to the room where the crosshair is pointed at
7. Location
8. Reload or Player’s Name notification
9. Right Bumper Assigned Magic/Weapon/Item
10. Current Weapon
11. Health
12. Timer
13. Recent actions (negative in red, positive in white, notifications in yellow)

HW03 - Bad Company by Sam David

Screen1.jpg

Wireframe.jpg

http://www.youtube.com/watch?v=P3D5ajHeQJ8

Bad company uses a simple interface to create an immersive game. Bad company is all about the effects with explosions and surround sound to make you feel like you are in the battle. In order to emphasize that even more, the interface must be kept simple. I took a screenshot from the multiplayer mode but the single player is even simpler. The multiplayer screen tells you just enough to get by. In order to find more options you have to press pause or the back button. This is good because it prevents crowding and allows you to get going with your game.

Why I like this game so much, and especially its interface, is the way it shows everyone the status of the whole game with two simple meters up on top of the screen. The status of the gold crates the defense is trying to protect is always shown in addition to the remaining reinforcements that the offense has. By doing this you can visually see when the game is close to over or when you have to fall back and defend another area. I also love the health bar. As much as i love call of duty, my one problem with it was its lack of health bar. Bad company has all the elements necessary to be a great multiplayer shooter. I highly recommend it for anyone who hasn't tried it.

Wireframe:

1. Kill updates
2. Damage on gold crates
3. Status on reinforcements for offense
4. 3D Map of level
5. Health
6. Ammunition status

HW03 – Deus Ex by Ryan Hedden

9006_full.jpg

Gameplay Footage: http://www.youtube.com/watch?v=yaQb5bOk9UM

Deus Ex is probably my favorite FPS game mainly because of the amount of freedom the player has consistently throughout the game. Aside from there being 3 very different endings to the game depending on which group you ally with, you are given so many different skills to upgrade that you can play the game in completely new ways (i.e. you can be a sniper, computer hacker, demolitions expert, etc.). There is also a wide variety of narrative options that are both embedded into the game and results of emergent gameplay. You can generally kill anyone you want at any point in the game and have it change the story in minor to major ways; however, some of the main characters are scaled to be way more powerful than you earlier on. Aside from the amount freedom, the game also had an engaging story, good graphics at the time, and was very fun and replayable. For these reasons, I believe Deus Ex was ahead of its time when it came out and is one of my favorite games.

deuswire.jpg

1. Player health, condition of each body section, status changes (i.e. poisoned)
2. Compass
3. Biotic augmentations (Only shows number you have acquired)
4. Current item/ammo
5. Quick inventory (hotkey items/weapons from main inventory)


"HW03 - Halo 3 by Matthew Lee"



Halo 3 Gameplay Video - Multiplayer

* Why I like this game: As someone who has been a Halo fan since the first game came out (not Halo 2 as much, due to the cliffhanger "ending"), I enjoyed the combination of music, gameplay, and intense graphics. Halo 3, the final volume in this particular story arc of the universe, offers very smooth play, fast-paced action, and a very immersive audio environment. I particularly enjoyed the distance effects, where one could hear things like gunfire from very far away, building up the realism. And of course, the co-op and multiplayer modes were very well done, especially with the inclusion of the Forge.

Wireframe:



Wireframe analysis and the description:

1. Grenades - the number and types grenades you have available to you

2. Shield Strength - The most important indicator one needs to be aware of, equivalent to a health bar

3. Equipped Weapon & Ammo - The shape of the weapon one has, along with a count of how much ammo is in the weapon/how much reserve ammunition one is carrying

4. Radar - Shows enemies within 15m, with a bonus if they are moving

5. Team Score - During multiplayer, allows one to easily see how the each team is faring.

Assignment01 - Majestikoi

01_majestikoi.jpg

Comment:
Very interesting concept. I very much like the twisted humor of this game - Koi that cleans up inside the pond. However, as I said in the class, the visual theme manifested here is not quite compatible with what you would like to present as the game world. You need more stylized, caricatured and/or anime-like rendering of characters and objects here. Otherwise, your sense of humor does not come through.

Also, mock-up screen shots could use more considerations to visual details. It does not explain about the game play - no options, no score, no icons to communicate with the player about the game.

Assignment01 - Pond

01_pond.jpg

Comment:
Similar to Water Garden, but with more emphasis on pet theme and growing Koi. Game title needs more twist/catch, though. Options for protecting Koi and growing Koi - placing plants and objects inside the pond - make a lot of sense, and should make the gameplay and design process fun.

As for the visuals, I wanted to see some more examples of grown Koi and objects placed inside the pond.

Assignment01 - King Koi

01_kingkoi.jpg

Comment:

More traditional, task-driven game proposal. Game details are very well planned and manifested in the mock-up screen shots. It would be easy to create challenging levels as well.

However, stylistic choices on visual elements - such as icons, bevel and emboss effects on fonts, are not so impressive, and seems rather outdated.

Assignment01 - Water Garden

01_watgergarden.jpg

Comment:
Well-thought out proposal. I like the concept, and visual consistency among each member's design. The main reward of the game - looking at what you design and grow in a quiet and tranquil environment - is quite suitable to iPod touch usage as well.

The most interesting aspect of this proposal is its persistancy of the game environment in which each object (driven by its embedded script) interacts with each other to create unique landscape. It would also be interesting to allow users access more options as they grow their gardens little by little - i.e. you design your own koi, or add your own designed objects, such as rocks or lamps.

Assignment01 - PuppyChow

01_puppychow.jpg

Comment:

Though the gameplay is interestingly defined, the concept of the game is not convincing. Group of fishes attaching a dog - this theme is not consistent with the tranquility of the visuals set forth.

Health meter on the upper left corner is very intuitive and well designed. However, game title screen and option screen are not well-thought. It does not reflect the game play at all, and is misleading.

Hw02 Flowchart - Ashley, Harold, Katrina, Erik

PUPPYCHOW.png

Proposed Title: Puppy Chow

Genre: Casual

Target Market: E for Everyone!


Narrative/Story:

A curious puppy gazing at the koi fish on the side of a pond accidentally falls in. You must clear a path to the sandy beach on the other side of the pond. The rabid koi fish attack the puppy as he swims through. By tapping the screen you can scare them away temporarily.


Game play: (make sure to define the hardware controls and its functionality within the game - touch screen, shake and tilt)

Tap the screen in their path to scare away the fish. Pull the lily pads out of the puppy’s path to allow him to reach the other side.


Graphic User Interface elements: (be specific on what they are, and where they appear on the display/screen)

A progress bar on the right side and a health bar on the left side.


http://k43.pbase.com/o6/02/634702/1/85230412.giMErZTM.maxsurf.jpg

http://farm1.static.flickr.com/60/197014754_da82c7e937.jpg?v=0

http://dogs.thefuntimesguide.com/images/blogs/golden-retriever-swimming-pool.jpg

http://farm3.static.flickr.com/2294/1983378026_4ddad605ba.jpg?v=0

http://www.legenddogs.com/assets/ike%20swimming%20away.jpg

Hw02 Flowchart - Drew, Michaela, Michael, Ryan

Hw02%20Flow.jpg

Drew - gameplayShot, Perspective, Title, Aesthetics Menu
Michaela - How To Access..., Instruction Screen...
Michael - WaterGardenCreateMenu, WaterGardenCreateUse
Ryan - Watergarden1, Watergarden2, Watergarden3

Updated proposal:
Download file

hw02 - RC Narma, Blade Olsen, Alec Stamos, Brian Abrams

majetikoi%20flow%20copy.jpg

hw02 - Pond by Jonathan Rosenfeld, Gavan Wilhite and John Banayan

Flowchart-Pond.png

Proposed Title: Pond

Genre: Casual/Sim

Target Market: 8+. Aimed towards casual users who enjoy playing games in short sessions but enjoy a certain amount of depth and persistence. Players who enjoy customization and enjoy games without strict rules or violence would also enjoy this game.




Narrative/Story: Maintain and raise your Koi’s in your very own Koi Pond you design. Feed them, cultivate their environment and protect them so they can grow and multiply.




Game play: (make sure to define the hardware controls and its functionality within the game - touch screen, shake and tilt. iPhone has sound-input device, and GPS as well)

Guide the right kind of fly to the right kind of fish (or the fish you want to populate your pond) by pushing the appropriate color fly to the same colored fish. Feeding a fish the wrong colored fly will make it sick and leave your pond while feeding it the correct colored fly will make it healthier, bigger and fruitful.

The player must also protect the fish from outside predators such as cats and birds by touching them or splashing water at them before they attack.

As the game progresses, and the player’s pond reaches a certain quality, the player will be able to customize his pond, optimizing it for protection, food or beauty.

If players ignore their pond for an extended amount of time, they will return to dirty pond and emaciated fish. The player must shake the pond clean and quickly feed the Koi.

Customization is done with the touchscreen.



Graphic User Interface elements: (be specific on what they are, and where they appear on the display/screen)

A distinctive lily pad roams the pond, touching it takes the player to the menu screen. The menus are designed to fit the visual theme of the pond. From the menu, the player can access statistics, customization options, tutorials/information or the credits.

For the most part, the GUI is transparent and seamlessly integrated into the visual design and the pond.

During game-play one user interface element is that fish and flies that go together are the same color. When the fed the wrong colored fly, the fish looks off-color and begins to look sick. Continuing to do so will cause it to leave.

CTIN 401: HW02

king%20koi.png

Comp Assignments:
Start Screen: Matt Lee
Gameplay: Matt Lee
Options: Alex Sandoval
Level Success: Sam David
Game Over: Sam David
____

Lab Assignment 02: 9/08/08

Students in this group: Matt Lee, Alex Sandoval, Sam David


Discuss and propose an entirely new game, based on the visuals and the theme of Koi Pond (ĂŁ Blimp Pilots 2008)

Proposed Title: King Koi

Genre: Leisure/Casual Gaming

Target Market: 10+

Narrative/Story: You play as a fish trying to collect enough food to get through the days, striving against both predators and competitors to eke out an existence

Game play: (make sure to define the hardware controls and its functionality within the game - touch screen, shake and tilt)

Evade predators while collecting a certain number of “food pellets” to “level up”, with alternating day and night levels. Number of pellets required to advance remains constant, but as level increases, number of pellets decreases, while number of predators increases. One has a number of ripples to drive off predators/competitors, decreasing with level.

Competitors (other koi): can eat your food pellets, can also be eaten by predators

Predator (bird): Appears as a shadow that slowly gets bigger, if it touches the fish, then game over
Predator (snapping turtle): The predator in the lake, meandering around

Options: Number of Competitors, Number of Food Pellets to advance, Starting number of pellets, Sound FX, Day/Night start

Controls: Touch-- “Ripple”, Tilt--direction and “altitude”

Graphic User Interface elements: (be specific on what they are, and where they appear on the display/screen)

Number of Food Pellets Eaten/Needed – upper left
Number of Ripples left – Upper Right
Lives Remaining: Top Center
Colors: Player Koi – red, Competitor Koi – white, Snapping turtle – dark green/brown, Bird shadow - “black”

hw01 - Moji

moji.png

moji.mp4

Ashley Soriano, Jonathan Cathcart, Katrina Wolfe, Harold Vancol

Quoted below is your Lab 01. Please review, and revise your answer by posting your own comment onto this blog. Each of you need to post.

Genre: Word/Puzzle

Target Market: Children, Parents looking for educational tools/games

Narrative/Story:
Either by yourself or with a friend, you progress through various mini-games and maps using different hiragana to assemble words. Once you progress through more levels, you unlock more hiragana to use in the word formations.

Game play:
Building words inside different shapes.
• Scoring well within the time limit of each mini-game expands the character map
• The character map tracks and shows your development and progress
• The slot machine lets you choose new characters to use

hw01 - Summer Fun 2

summerfan.png

summerfun.mp4

Brian Abrams, Blade Olson, John Banayan, Erik Nichols

Quoted below is your Lab 01. Please review, and revise your answer by posting your own comment onto this blog. Each of you need to post.

Genre: Simulation/ Adventure
Our Reasoning: It resembles Animal Crossing from a collecting aspect and the presence of a “daily timeline,” although it seems to encompass more (the presence of the bike/diving), implying it features “adventure” elements as well.

Target Market: Family-oriented and features a very large demographic. Similar to Animal Crossing, the game features exploration and simple activities that highlight childhood experiences that both parent and child can enjoy, such as: bug collecting, fishing, bicycling, diving, making friends, etc…

Our Reasoning: The art and design was calming, tranquil, and the gameplay seemed accessible enough that both children and parents would appreciate the game.

Narrative/Story: Small town kid who is enjoying his childhood.
Our Reasoning: In the brochure, and on the cover, the boy was featured most prominently and the adults were depicted as supporting characters.

Game play: Explore the game’s environment, Interact with the townspeople, family, and friends, Collect bugs, Fish, Bike, Swim, and Manage Time.
Our Reasoning: Page 14 literally illustrates all the activities presented in the brochure and offers a summary of the possible modes of gameplay.

hw01 - Kamiwaza

kamiwaza.png

kamiwaza.mp4

Matthew Lee, Alex Sandoval, Sam David

Quoted below is your Lab 01. Please review, and revise your answer by posting your own comment onto this blog. Each of you need to post.

Genre: RPG/Action
• Storyline highly integrated into gameplay
• Map/health bar/ “mana/skill point” bar
• Third person perspective
• Cinematics and good amount of character interaction
• Different equipable items

Target Market: Teen/Young Adult
• Symbols for Violence and Sexual themes on the back cover
• Art is more elaborate/detailed than for typical children’s game
• Interface fairly complicated

Narrative/Story:
• “God’s Hand”, master thief and rogue, perhaps the equivalent of Robin Hood, breaks into the houses of nobles (with a goal of eventually weakening his nemesis, the noble with the theatrical “demon” mask)
• Nobles have probably raised taxes to a degree that has become for the village he lives in
• His goal is to take away enough “wealth” from the surrounding nobles to attract the attention of his nemesis, so he can pull off a rescue (or alternatively save the village)

- Pages 16 and 17 list different “objective areas” that appear to be noble compounds, with nobles on the bottom of page 16

- Page 3 has obvious nemesis character

Game play:
• Single player stealth (ninja-like) timed missions to infiltrate the holdings of a noble houses and steal a pre-determined amount of treasure

hw01 - I am Small

ctin401_hw01_IamSmall.png

ctin401_hw01_IamSmall.mp4

Michael Kane, RC Narma, Jonathan Rosenfeld, Gavan Wilhite

Quoted below is your Lab 01. Please review, and revise your answer by posting your own comment onto this blog. Each of you need to post.

Genre: We believe that this is an action/RPG because we found lots of dialog in screenshots and abilities with varying levels. There were also screenshots with combat and platforming implying an action game.

Target Market: RPG fans, fans of humor and light-heartedness. Age range: 10 and up. Non gender specific.

The artistic style is non-photorealistic and ‘cartoonish’. Use of many exclamation marks leads us to believe that the game may be humorous. A bright color scheme and expressive characters implies a wide ‘everyone’ market.

Narrative/Story: Aliens threaten a family with mind control, and the robot must protect/save the family. (p.18) Family is largely unaware of the danger in their midst. The player is sent to protect the family members who are unaware of their guardian.

There are repeated pictures of a evil-looking brain creature, who we can only assume to be the main antagonist. Having such a prominent ‘brain’, and with pictures of oblivious humans leads us to believe that mind control might be involved in the storyline.

Game play: You’ve got different powers/forms that you can level up. Powers like flying, electricity, vehicles, etc. You can collect powerups, platforming elements. RPG elements like talking, interaction. You have a health bar. Navigational interface elements for finding objectives. Takes place in homes/you are really small like a toy. Real-time combat and interaction. You have to keep track of the family, sometimes via cameras, etc. You can monitor the rooms the family is in.

We saw evidence of each gameplay element in screenshots and graphics in the manual.

hw01 - Chulip

ctin401_hw01_chulip01.png

ctin401_hw01_chulip01.mp4

Drew, Michaela, Alec, Ryan - quoted below is your Lab 01. Please review, and revise your answer by posting your own comment onto this blog. Each of you need to post.

Genre:
Adventure/Sim
The game seems to be explorative in design and involving a trade mechanic/socialization/interfacing with other characters.

Target Market:
Teens 16-20
Because of the artistic style and the themes of the game in youth and love.

Narrative/Story:
Mailman named Chu-lip seeking love, tries to fix the corrupted world along the way. On his journey, he collects and barters items (including garbage) with other characters in the world. All the while, he is trying to better the world through social connections and mutual love.

The cover of the game box illustrates a dismal outlook on industrialization, and the flaps of the game manual depict nature/animals with negative dispositions. Pg. 1 has a picture of the stork carrying the planet/turtle. The graphics on page 2 depict a trash/treasure relationship.

Why delivery boy/mailman?
On the cover, he has the hat and messenger bag, and the main operation (from screenshots) seems to be trading/scavenging/delivering.

Love?
There is a heart meter in the GUI, and on page 6 we see two characters kissing/creating a heart/love. On the back of the game case we see this as well. There seems to be a female love interest involved, and on the game disc she is gazing at the moon (while he is as well).

Game play:
Explore the world, collect trash/inventory items, interact with NPC’s by trading and love-garnering, and controls are simplistic in nature (one joystick, four interaction buttons).

Student Proficiency Survey Result

student_fluency01.png
student_fluency02.png
student_fluency03.png
student_fluency04.png
student_fluency05.png
student_fluency06.png
student_fluency07.png
student_fluency08.png
student_fluency09.png

Welcome students! CTIN401L Primer

ctin401_logo.png
CTIN 401L students:

Please visit the URL below to get primed. http://www.tomoisoyama.com/usc/ctin401