" /> Students Blog: October 2008 Archives

« September 2008 | Main | November 2008 »

October 26, 2008

Outline of Interactions - Inside/Out

I've been designing how my thesis project would work as an interactive, chaotic narrative. Here is my basic outline of events and possible interactions. For my draft presentation, I'd like to get your feedback in helping me to narrow down what I could do. I know this is a ton of text for now. I'll have images in class.
1) Which possible interactions do you find most interesting or compelling?
2) Which seem plausible to actually do (either in the next 6 weeks or semester)?
3) Which cross section seems most representative of the big picture of the story?
4) Which platform or techniques (i.e. game engine vs. Max) might work?

BASIC PLOT:

The player enters the mind of an older man with dementia, who, in the process of looking for a misplaced watch, gets lost in his own backyard. As he searches, he forgets what he was looking for in the first place. The familiar environment becomes distorted and falls apart as memories become confused with the present. Through engaging in his morphing perspective, the viewer is taken on a surreal journey that might inspire empathy for how difficult simple tasks can become under the influence of memory loss and dementia. When the outer forms of rational understanding are stripped away and turned inside-out, what is left?

OUTLINE OF EVENTS:

1. INTRODUCTION - OUTSIDE THE HOUSE. NIGHT.
Houses haphazardly stacked on a lonely hill. Camera zooms in to a single light illuminating an upper attic room.

2. 1st WORLD - INSIDE UPPER ATTIC ROOM. 3RD PERSON P.O.V.

Set-Up (pre-animated):
You are standing in the doorway of an upper attic room. An old-man limps slowly around the room with a cane, oblivious to your presence. He sets the needle down on a phonograph, hums to himself, and places labels on objects. He pins old photographs and lists to the walls in an elaborate mapping configuration.

(start of viewer control):
You enter the room to examine it & orient yourself. As you explore the room, the old man tells you what his main objective is. This triggers a change in POV as you take on his 1st Person perspective for the remainder.

What do you look at? Do you interact with the man? Which objects are active?Does the man notice you? Do you talk to him? What do you discover? How does it lead the plot further?

3. TRANSITION - P.O.V. CHANGE - FROM 3RD PERSON OBSERVER TO 1ST PERSON P.O.V. OF OLD MAN
TRIGGER: Man tells you that he lost his watch & thinks he left it by the bench outside. He explains “The Clock Test” and that he must go find it.

4. TRANSITION - FROM ATTIC TO BACKYARD
After entering the man's mind, any number of actions within the attic could portal you to the backyard.

5. 2nd WORLD - IN THE BACKYARD. DAY.
Midwest. 1 acre flat lawn with sparse deciduous trees overlooking a cliff. A black wrought-iron fence seals the boundary around the yard.

ACTIONS:
The basic direction is to travel to the bench to find the watch.

Most Basic (Quick) Route:
Walk forward along the path looking straight-ahead and the environment will remain relatively static. Get to the fence and sit down at the bench. Look at or pick up the watch.

Alternatives (detours):
If you leave the path, look in 6 directions, stop & examine, record or post notes/ pictures, then the environment morphs.

As the viewer moves along the path, the more he/she examines the environment, the more surreal it becomes. Turning in different directions affects the environment in different ways. Even if the most basic straight-ahead path is followed, some confusion will still be triggered.

6. ONSET OF CONFUSION
PHYSICAL OBFUSCATION:


7. TRANSITION TO DARKNESS - completely lost

8. EPHEMERAL - emerges out of dark environment

9. RETURN - Making peace
- Environment calms down
- Houses (memories) collapse into one or house rebuilds itself

10. REFLECTION

- Series of snapshots and reflections relating to viewer actions in the world reveals itself as an image and sound sequence

Examples of Directional Movement & additional description below:
---------------------------------------------------------

UPPER ATTIC ROOM
Contents:
Old photographic equipment, drawers, notes, pens, a drawing table, plants, a cat, hard-wood floors, wallpaper, a sculpture, modeling tools, drafting table, blueprints, sticky notes, labels, flowers, clothes on the floor, a cane, disheveled room, window, window seat, curtains, wall-paper, phonograph, a library, dust, spider-webs, old film-projector, pictures on the walls

POSSIBLE VIEWER ACTIONS:
- Open the drawers. Look through the contents. Find something. Pick it up.
- Look through the telescope.
- Look at/click on/zoom in a picture on the wall.
It becomes an animated scene, text appears, or you enter that scene
- Look at/click on/zoom in on one of the notes.
Read a note & text animates (blurry), or morphs into something else
- Drafting Desk
Write a note & character reads it, or it appears on the wall or elsewhere
- Look through the telescope
Out the window or around the room
- Look in the mirror
- Take a picture
- Give something to the man
- Exit the room
- Walk downstairs

MAIN CHARACTER (Old Man) POSSIBLE ACTIONS:
- The character ignores you.
- The man looks at you.
- He takes a picture of you.
- The man looks in the mirror.
- The man goes to the window and looks outside.
- Asks you a question
Who are you? Why are you here? What do you want?
Something more nonsensical (poss. related to what you’ve looked at)
- Tells you something
Info about him, a poem, something nonsensical and confusing

6. ONSET OF CONFUSION
PHYSICAL OBFUSCATION:
Atmospheric - Obscuring the view
Weather - time-lapse seasons, time of day, snow, wind, cloud shadows
Light - fog, darkness, white-out
Camera/Video FX - blurriness, shaking, stuttering, film stuck in gate, digital glitches, focus changes, flicker
Physically “stuck-in-the-mud”
Able to turn but can’t move.
Movement Impaired
Shake-y, unbalanced
Objects -
Disappearing, environment erasing itself
Surreal juxtaposition of items from the attic in inappropriate places
Old objects look new (lost in memory)
As if the man put things in the wrong places
House falling apart
Planes & dimensions becoming confused (tilting to reveal edges of layers)
More trees - backyard becomes a forest
Stereoscopic Space - morphs from flat to extreme depth
Spacial relationships become confused
Clones
- seeing memories
- different materials (flat vs. dimensional, drawn vs. stop-motion, etc.)
Overlapping Styles
- 1890s vs. 1930s, what's antique looks new
Sound - words and environment sounds jumbled, static, humming to himself, phonographic music far away, mumbling nonsensically to himself

7. TRANSITION TO DARKNESS (completely lost)

8. EPHEMERAL (once environment has gone dark, become confused)
Ghost-like stutter-y character reaches out
Film Projector starts, lighting up the darkness
Abstract shapes, colors, light
Weather changes
Frame tilting, rocking.

9. RETURN - Making peace - Environment calms down
Could be triggered by different actions such as:
- Moving forward, making it to the bench and finding the watch
- Reflecting, stopping movement
- Humming, choreographing environment
- Focusing on the phonograph sound
- Reading about dementia
- Picking up the cat
- Looking in a mirror
- Looking at the moon, stars

10. REFLECTION
- Series of snapshots and reflections relating to viewer actions in the world reveals itself as an image and sound sequence

EXAMPLES OF DIRECTIONAL MOVEMENT (within backyard):

Forwards - Settled, literal environment, some physical limitations (must get stuck or unbalanced at least once)
Backwards - House un-builds & re-builds itself
Left - Minimalism, things falling apart
Right - Multiplicity, manic building, more trees, characters & stuff
Up - Calm, magical environment, triggers season changes (snow, clouds, etc.)
Down - Ground falling away, disappearing

OTHER ACTIONS:
Zoom/Reflect/Read - Goes into a picture, note, scene
If there is something to reveal or a memory to go into, triggers that
Record - takes a snapshot/screenshot of a sound or image
Write - Can type or draw something which gets recorded
Listen - If character has something to say or a sound is important, isolates that

October 18, 2008

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.

October 15, 2008

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.

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.

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.

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.

October 7, 2008

Week 7 - Circulation - "Inside Out"

FOCAL POINT
1st person POV of character – parallels his experience
Free – navigating through normal world
Fixed – viewer controls get frozen when
man gets trapped by confusion
examining a note – leads into a cinematic memory
zooming in from a telescope in the world



EXITS
Internally
- Confusion triggered
- Humming calms confusion
Externally
- Rocking chair – place from which man calms himself

(rocking chair POV)
PATHS
Respects topography for normal perspective
Lack of ability to freely navigate through world once confusion sets in

Detours
Barriers to movement – lack of viewer control or jumbled controls
Caused by confusion & overlapping memories

RULES OF THE WORLD
Dictated by the severity of influence that dementia wields on the man’s perspective
The external world morphs to reflect the changes in his mind

1. Legibility - Text becomes unreadable/ blurry as character can't comprehend it

2. Solidity - Ground morphs from solid to dissolving/breaking up

3. Z plane Depth - Normal, Hyper, & flat
Normal = "reality", normal healthy perception
Hyper = signals transition to confusion, immersion in hyper memory
Flat = claustrophobic confusion, blankness, recorded static image

4. Spatial Relationships - Normal, inverted, distorted
Normal = "reality"
Inverted = transition - signals overlay of memory with present
Distorted = confusion

5. Dialogue - Talking to himself, utterances
Signals that the man is trying to remember or make sense of something
Lucid vs. nonsensical

6. Dialogue - Replaying Memories of Conversations
Normal
Jumbled/Distorted
Far-away

7. Phonograph Music
Close perspective/Loud – present, normal perspective
Becoming farther away/softer – distance from memory
Jumbled – distant from normal perspective
Humming tune – trying to regain normal perspective

8. Clock Sound Speed
Slow - calm
Fast - agitated
Jumbled - confused
Reminders of what he is looking for

9. Clock Sound Perspective
Close – reminds him what he’s looking for
Far – distant from original objective

10. Appearance of the Cat
Sound or image - represents a threshold into confusion or clarity

11. Time lapse/Time Passing
Lighting/Time of Day - Length of a Day
Grass/Ice spreading - A month
Summer to Winter - Seasons
Houses morphing – Years

12. Notes/Photos
Further inspection triggers memories

13. External Perspective
Morphs/brakes rules as mind gets distorted
3D becomes 2D, planes break video plane
Pseudo Stereo (maybe)

14. Humming
Challenges the dissolution of the world
Helps the man pacify the confusion & return to reality
Calms his mood

BLANK SPACE
Literal
Black video – man’s mind is lost, dark
Foggy w/ Ghost Imagery – trying to return to reality
Sensory
Quiet/blank/nonsensical – confusion
Loss of Viewer Control
Parallels man’s inability to affect/comprehend his world