Sunday, 30 October 2011

Week 14 - User interface design for Games

What have you learnt already? 
  • Designed core game graphics (Illustrator skills)
  • Completed game functionality (beginner level AS2 coders)
  • Discussed the principles of games design and what makes an effective game
  • Impact of games on society and the role of the designer


Activity #1 - Visit the Disney - Cars 2 website and play the World Grand Prix Races game

Discussion: What more do you need to learn if you were to design an industry quality flash game like the Cars racing game?


What are you going to learn today?
  • Rules of interface design and why they are important
  • How these rules are applied to games design
  • Look at your assessment task on Moodle

Discussion: Assessment - HUD for Game




Who are we designing for?

Discussion - Target Audience and User Characteristics (example - Cars 2 game)

Activity #2 - Identify target audience and user characteristics of your own game.  Post answers on your blog.
  • computer/internet literacy
  • demographics, such as:
  • age
  • gender
  • education
  • occupation
  • cultural background
  • location
  • hobbies/interests
  • language, literacy and numeracy


What game are we designing?

Discussion - What different screens/states would you expect in a game?
  • Start up screen
  • Instructions
  • Mission Brief
  • Different Levels (Predetermined or Random in nature)
  • Level Select
  • End (Fail/Success)
  • Restart/Respawn
  • Final Score/ Top Scores
Discussion - Why is it important to create a flowchart?
  • Help set up your frame markers
  • Keep you on track and goal focussed (time management)
  • Other team members of large projects ('information architecture')
  • Game equivalent of video storyboard
  • "Wisdom is knowing how little we know" – Socrates
Activity #3 - Create a flow chart for your game and post it on your blog.  You can use online software (such as http://www.gliffy.com/) or simply sketch it on paper.




Avoiding Gamer Frustration!

Demonstration - Watch the following video - '10 Usability Heuristics - by Jakob Nielsen'




Discussion - 10 Usability Heuristics (Jakob Nielsen - usability guru)
  1. Visibility of System Status (What is going on) - Visually confirm input/loading/output
  2. Match between system and the real world (What are you talking about?) - Familiar language & concepts
  3. User Control & Freedom (Oops) - Take me back to where I should be (menu)
  4. Consistency & Standards (I know that) - Function keys
  5. Error Prevention (Glad I didn't do that) - Barriers
  6. Recognition or Recall (Or what was that already?) - Maps, Clues
  7. Flexibility, and efficiency of use (It doesn't matter if you're an expert or a newbie) - Shortcuts
  8. Aesthetic & Minimalist design (Wow...and woah!) - No clutter, efficient design
  9. Help users recognise, diagnose and recover from errors (My bad) - Wrong way, go back!
  10. Help & Documentation (Now I get it) - Instructions
Resource - http://www.youtube.com/watch?v=hWc0Fd2AS3s&feature=related

Activity #4 - Post an example of games design on your blog that demonstrates your understanding of each of the '10 Usability Heuristics'.  Response should be no more than 1-2 sentences. (eg #1. Gun fire is confirmed by shells and appropriate sound effect)



What is a HUD?


Discussion - What is a Heads-Up-Display (HUD)?  What makes a HUD effective?  Pros and Cons?

Examples of HUDs - 


Call of Duty

Resource: http://www.neoseeker.com


Time Crisis

Resource: http://www.gamershell.com/



Creating a start-up screen for your game.


Increase game interest and user satisfaction by incorporating the following in your game:
  • meaning/message
  • theme
  • tone
  • consistent colour combinations
Start-up screens should be well illustrated or include photographic elements.  Do not include actual game graphics unless they are detailed and aesthetically pleasing.

Discussion:
Atari 2600: Raiders of the Lost Ark (How to promote your game)



 Atari 2600: Punchy! vs Asteroids (Real game graphics vs Illustration)



Recent designs - Call of Duty: Create a strong themed interface
Resource: http://www.mobygames.com/



Summary

Game design is a complex task that requires planning and much consideration of who the audience is and how are they likely to behave.  Not only do we need to make interesting game characters and have a sound idea for our game, we also need to an aesthetically pleasing, and user-friendly interface design for the game to be successful.

Further Reading:
Case Study - A Look Through 14 Beautiful Video Game HUD Designs
Advanced Concepts - Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games



Next Lesson:

  • Create an online survey to document user interface testing
  • Interface design for web

Sunday, 23 October 2011

Week 13 - Dreamweaver & CSS (Continued)

Monday

Exercise - Games Graphics (continued)

Exercise - Read HTML & CSS Tutorials at w3schools.com
Exercise - HTML code quiz


Tuesday

Assessment: Gerard Storyboard Presentation
Discussion - AS2 'for' function & random enemies (revision)
Exercise -  Create your own 'for' loop
Exercise - Games Graphics (continued)


Wednesday

Discussion - Death of a hero/enemy & movie clips
Exercise - Create your own dead state

Exercise  - Games Functionality (continued)


Survey

Complete the following survey by the end of todays session - http://survey.rit.tafensw.edu.au/show_survey.aspx?PID=66

Sunday, 16 October 2011

Week 12 - Intro to Dreamweaver & Game Graphics

Monday - Introduction to Adobe Dreamweaver
  • Create a Site in Dreamweaver
  • Create a HTML page
  • Create a CSS page
  • Link CSS file to index.html
  • Create HTML content

Tuesday - Games Graphics
  • Work on your graphics for your game
    • Hero and Enemy characters
    • Background graphics

Wednesday Night - Game Functionality
  • Games Graphics due (should be enough completed so I know what the look and feel of your game will be) 
Demo: Random enemies using AS2

Exercise: Continue working on your game functionality

Tuesday, 11 October 2011

AS2 Keycodes and Principles of Game Design

Here are a list of Actionscript KEYCODES.  They are needed if you want to use keys in your game other then the usual directional keys:

http://freelanceflashgames.com/news/2009/04/21/list-of-flash-key-codes/

Other Resources:
Principles of Game Design - http://www.gameinnovator.com/principles_game_design.php

Monday, 10 October 2011

Week 11 - Game Idea & Intro to Web Design


Discussion:
  • Summary of Term 4 lessons:
    • only 8 weeks
    • exhibition 2nd last week
    • status of units to be studied this semester:
      • Create storyboards 
        (complete)
      • Create 2D Digital animations 
        (continued)
        • Flash Game using AS2
      • Create visual design components
         (continued)
        • Create game graphics
      • Make a presentation (continued)
        • Present a report to the class
      • Design user interfaces
        • Create a website interface
Monday - Intro to Web Design

Discussion: Introduction to web design and web-related technology.

Resources:
Cloud Technology and impact on Digital Designers

Exercise #1:
  • Visit orisinal.org and test at least 6 games
  • Post a review of at least two of the games that you played on your blog.  Your review must discuss the following topics:
    • Level of Gameplay/Fun.  Why?
    • Quality of Graphics.  Why?
    • Possible AS2 code that is driving the main elements of the game (how could you achieve it?)
Exercise #2:
  • Write down your ideas for a game and post them on your blog.  You are to finalise and discuss your idea with me before the end of the lesson.
  • Finish the tutorial from last term and start coding your game