Final Week - Get your assessments in!

You have 3 assessments due with me in this final week.

Due on Tuesday - 

• Website Interface - Assessment Event (CUFDIG402A: Design user interfaces)
• Discuss Website Interface - Assessment Event (BSBCMM401A: Make a presentation)

Due on Wednesday -

• Create a Game - Assessment Event (CUFANM301A: Create 2D digital animations)

Full screen game

place this code on frame 1 of your game:

fscommand("fullscreen", "true");

Week 17 - Web Interface Design

Discussion: Web Usability Principles & how they apply to your assessement

1. Don’t make users think
2. Don’t squander users’ patience
3. Manage to focus users’ attention
4. Strive for feature exposure
5. Make use of effective writing
6. Strive for simplicity
7. Don’t be afraid of the white space
8. Communicate effectively with a “visible language”
9. Conventions are our friends
10. Test early, test often

Resource: http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/

Exercise #1: Create a sitemap for your game's website

Exercise #2: Create a design concept for your game's website.  I suggest you use Adobe Illustrator to create your final mockup.

Week 16 - Web Interface Design & Game

This week I would like everyone to try and finish your game.

Over the next two weeks, you will be designing a user interface for your game website.  You will be presenting this to the class during Week 18 (last week of the term).


Monday
Work on your assessment that is due tomorrow (Flowchart, HUD, Start Screen)

SURVEY EXTENSION: Survey due next Monday 21st November

Tuesday
Your last two assessment events have been uploaded to Moodle

• Web Interface
• Create Sitemap
• Create homepage concept
• Presentation
• Present your website concept to the class and discuss usability

Next Week

We will be discussing 10 Principles Of Effective Web Design and how they relate to your assessment:

1. Don’t make users think
2. Don’t squander users’ patience
3. Manage to focus users’ attention
4. Strive for feature exposure
5. Make use of effective writing
6. Strive for simplicity
7. Don’t be afraid of the white space
8. Communicate effectively with a “visible language”
9. Conventions are our friends
10. Test early, test often

Game Help

 Scrolling Background Tutorial


http://www.kongregate.com/games/Kongregate/shootorial-2

---

Create a Time Counter Bar

 onClipEvent(load) {
    timeCounter = 100; // set default width
    timeSpeed = 0.5; // set decrement rate
}

onClipEvent(enterFrame) {
    this._xscale = timeCounter; // set width of rectangle to equal % of counter left
  
    if (timeCounter>=timeSpeed) { // check if rectangle is still larger than 0 + decrement rate
        timeCounter -= timeSpeed; // reduce with of rectangle
    }
  
    if (timeCounter < 10) { // check if only 10% of bar left
        var colorful = new Color(this); // create new variable for colour of selected object
        colorful.setRGB(0xff0000); // set color to red
    }
}

---

Import sound effects to your game

1. Import sound file (.mp3) to your Flash library
2. Right-click on the file in your library and view Properties
3. Check 'Export for Actionscript' and give the 'Identifier' field a name that you will reference in the AS code.  The example below has an Identifier of 'blast'
4. Insert the following code on the event that you want the sound to play (eg crash sound should go on the hitTest event):

variableName = new Sound(this);  // Create variable that represents a sound associated with this movieClip object
variableName.attachSound("blast");  // Attach sound from our library with identifier of 'blast' to the new sound variable
variableName.start();  // Play the sound!

You can also specify a start frame and loop timeout for background music. 

variableName.start(0,99);  // Play sound from frame 0 (start of clip). Loop 99 times before stopping

Resources: 
http://www.kirupa.com/developer/actionscript/sound.htm
http://www.gotoandlearnforum.com/viewtopic.php?f=28&t=26222

---

Create a Barrier to stop your hero character flying out of the screen

Place the following code on your hero Movie Clip:

onClipEvent (enterFrame) { // every time the frame runs

if (Key.isDown(Key.UP)) { // when the UP key is pressed
if (_y>30)  // check if the center of the object is within 30px from the top of the stage
_y -=5;  // move the object up 5 pixels
}  //stop checking if the UP key is pressed

} // stop checking every time the frame runs

---

Respawn objects

Watch the following tutorial on how to randomly spawn enemies (eg Asteroids):

---

Random Colours for your spawned objects:

onClipEvent(load) {

rndColor = Math.round( Math.random()*0xFFFFFF );  // generate a random color coloredObject = new Color (this);  // colour of this object will be called 'coloredObject' coloredObject.setRGB(rndColor);  // set colour of this object to be the random colour

}

---

Random Sizes for your spawned objects:

onClipEvent(load) {

randomSize=random(80); // pick a number between 1 and 80 this._xscale=randomSize; // set width to equal random number this._yscale=randomSize; // set height to equal same random number

}

---

Random Rotation for your spawned objects:

onClipEvent(load) {

this._rotation= random(360); // set rotate angle starting position rotationRate=random(5); // set random rotation speed between 1 and 5 degrees per frame

}

onClipEvent(enterFrame) {

this._rotation+=rotationRate; // rotate frame by same value(speed) each frame

}

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)

Resource: http://www.atariguide.com

 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

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

• Resource: AS2 looping code

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