CO 5045: Further Programming

Assignment Part C

 

A graphical user interface design, with: Use Case, class and sequence diagrams

 

Andrew Jones

2/3/2010

 


 

Table of Contents

Introduction.. 3

Welcome Screen.. 4

Welcome Screen Design Notes. 5

Instruction Screen.. 6

Instructions Screen Design Notes. 7

Game Screen.. 9

Game Screen Design Notes. 10

Game Over / Quit Screen.. 13

Game Over / Quit Screen Design Notes. 14

Game Paused Screen.. 15

Game Paused Design Notes. 16

High Scores Screen.. 17

High Scores Screen Design Notes. 18

Enter User Name Screen.. 19

Enter User Name Screen design Notes. 20

Class Diagrams. 21

Sequence Diagrams. 22

Use Case Diagram.. 24

Introduction

This document aims to present a set of Graphical User Interface designs and their corresponding design notes, together with a class diagram, a set of sequence diagrams and a use case diagram.


Welcome Screen

A6

 

A5

 

A3

 

A4

 

A2

 

A1

 

Welcome Screen Design Notes

Control

Name

Events / Actions

Fonts

Font Size

Colour

Background

Explanation

A1 Label

lblWelcomeText

None

Trebuchet MS, Bold

72pt

R255, G255, B255

None

A large font that is high contrast

A2 Icon Graphic

graphicWelcomeBackground

None

None

None

None

None

A dark wizard background

A3 Button

btnHighScores

Display the high scores screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

A4 Button

btnWelcomeStart

Display the Instructions screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

A5 Button

btnWelcomeQuit

Exit the system

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

A6 Panel

pnlWelcomeScreen

Displays the welcome screen

None

None

None

None

A panel to hold the welcome screen content

 


Instruction Screen

B11

 

B14

 

B5

 

B1

 

B16

 

B8

 

B15

 

B13

 

B12

 

B10

 

B9

 

B7

 

B6

 

B4

 

B3

 

B2

 
 

Instructions Screen Design Notes

Control

Name

Events / Actions

Fonts

Font Size

Colour

Background

Explanation

B1 Label

lblGameInstructions

None

Trebuchet MS, Bold

72pt

R0, G112, B192

None

A large font that is high contrast

B2 Label

lblFireBall

None

Trebuchet MS, Bold

50pt

R0, G112, B192

None

A large font that is high contrast

B3 Label

lblMoveLeft

None

Trebuchet MS, Bold

50pt

R0, G112, B192

None

A large font that is high contrast

B4 Label

lblMoveRight

None

Trebuchet MS, Bold

50pt

R0, G112, B192

None

A large font that is high contrast

B5 Label

lblPause

None

Trebuchet MS, Bold

50pt

R0, G112, B192

None

A large font that is high contrast

B6 Label

lblQuitGame

None

Trebuchet MS, Bold

50pt

R0, G112, B192

None

A large font that is high contrast

B7 Button

btnHighScores

Display the high scores screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

B8 Graphic

graphicInstructionsBackgound

None

None

None

None

None

A wand and stars contrasting background

B9 Label

lblSpaceBar

None

Trebuchet MS, Bold

50pt

R255, G0, B0

None

A large font that is high contrast

B10 Label

lblLeftControl

None

Trebuchet MS, Bold

50pt

R255, G0, B0

None

A large font that is high contrast

B11 Label

lblRightControl

None

Trebuchet MS, Bold

50pt

R255, G0, B0

None

A large font that is high contrast

B12 Label

lblP

None

Trebuchet MS, Bold

50pt

R255, G0, B0

None

A large font that is high contrast

B13 Label

lblQ

None

Trebuchet MS, Bold

50pt

R255, G0, B0

None

A large font that is high contrast

B14 Button

btnStartGame

Display the game screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

B15 Button

btnInstructionsQuit

Exit the system

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

B16 Panel

pnlInstructionScreen

Displays the instructions

None

None

None

None

A panel to hold the instructions screen content

 


Game Screen

C15

 

C6

 

C14

 

C11

 

C10

 

C13

 

C12

 

C9

 

C8

 

C7

 

C4

 

C3

 

C2

 

C1

 

Game Screen Design Notes

Control

Name

Events / Actions

Fonts

Font Size

Colour

Background

Explanation

C1 Graphic

graphicGameBackground

None

None

None

None

None

A vibrant background depicting a wizard

C2 Collider

colliderLeft

On collision increase the score and rebound the ball into the play area

None

None

None

R255, G192, B0

A wizards hat collider

C3 Collider

colliderMiddle

On collision increase the score and rebound the ball into the play area

None

None

None

R255, G192, B0

A wizards hat collider

C4 Channel

channelLeft

Guide the ball out of the play area. Remove a life and present a new ball for play

None

None

None

R221, G128, B71

A high contrast channel marker

C6 Paddle

paddleBat

Rebound the ball into the play area

None

None

None

R0, G112, B192

A high contrast paddle

C7 Label

lblScore

Increments as the ball collides with the scoring parts of the play area

Trebuchet MS, Bold

48pt

R255, G255, B0

None

A high contrast colour with large text

C8 Collider

colliderCorner

On collision increase the score and rebound the ball into the play area

None

None

None

R255, G192, B0

A high contrast collider

C9 Collider

colliderRight

On collision increase the score and rebound the ball into the play area

None

None

None

R255, G192, B0

A wizard collider

C10 Channel

channelRight

Guide the ball out of the play area. Remove a life and present a new ball for play

None

None

None

R221, G128, B71

A high contrast channel marker

C11 Channel

channelMain

Rebounds ball into the play area

None

None

None

R221, G128, B71

A high contrast channel marker

C12 Ball

ballLive

 

None

None

None

R255, G0, B0

A high contrast colour that is easy to follow on the play area

C13 Laucher

ballFirer

Launch the ball into the play area

None

None

None

R221, G128, B71

A high contrast colour that is easily differentiated from the play area

C14 Ball

ballLives

Reduce in number as the live ball  leaves the play area

None

None

None

R255, G0, B0

A high contrast colour that is easily differentiated from the play area

C15 Panel

pnlGameScreen

Play the game

None

None

None

None

A panel to hold the game screen elements

 


Game Over / Quit Screen

D8

 

D7

 

D6

 

D5

 

D4

 

D3

 

D2

 

D1

 

Game Over / Quit Screen Design Notes

Control

Name

Events / Actions

Fonts

Font Size

Colour

Background

Explanation

D1 Graphic

graphicWizard

None

None

None

None

None

A graphic that keeps the wizard theme

D2 Label

lblGameScore

None

Trebuchet MS, Bold

72pt

R0, G0, B0

None

A large font that is high contrast

D3 Label

lblFinalScore

Display the final score

Trebuchet MS, Bold

72pt

R0, G0, B0

None

A large font that is high contrast

D4 Button

btnPlayAgain

Display the game screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

D5 Button

btnStoreScore

Display the store score screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

D6 Button

btnFinalHighScores

Display the high scores screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

D7 Button

btnFInalQuit

Exit the game

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

D8 Panel

pnlGameOver

Display the game results

None

None

None

None

A panel to hold the game over elements

 


Game Paused Screen

E4

 

E3

 

E2

 

E1

 
 

Game Paused Design Notes

Control

Name

Events / Actions

Fonts

Font Size

Colour

Background

Explanation

E1 Label

lblGamePaused

none

Trebuchet MS, Bold

72pt

R255, G255, B0

None

A high contrast large font

E2 Label

lalPauseInstructions

None

Trebuchet MS, Bold

60pt

R255, G255, B0

None

A high contrast large font

E3 as per C

gameBackground

Paused game in play freezing the screen elements

None

None

None

None

Screen elements are as per C game screen

E4 Panel

pnlPause

Pause the active game

None

None

None

None

A panel to display the game paused screen

 


High Scores Screen

F8

 

F2

 

F7

 

F6

 

F5

 

F4

 

F3

 

F1

 

 

High Scores Screen Design Notes

Control

Name

Events / Actions

Fonts

Font Size

Colour

Background

Explanation

F1 Graphic

graphicWizard

None

None

None

None

None

A high contrast graphic of a wizard

F2 Text Box

txtHighScores

Display from file a list of the top five user scores

Trebuchet MS, Bold

36pt

R255, G255, B0

R255, G192, B0

A high contrast large font on a bright background

F3 Label

lblBestUserScore

None

Trebuchet MS, Bold

72pt

R0, G0, B0

None

A high contrast large font

F4 Text Box

txtUserHighScore

Display the users highest score

Trebuchet MS, Bold

60pt

R255, G255, B0

R255, G192, B0

A high contrast large font on a bright background

F5 Button

btnHighScorePlayAgain

Display the game screen

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

F6 Button

lblTopFive

None

Trebuchet MS, Bold

72pt

R0, G0, B0

None

A high contrast large font

F7 Button

btnHighScoreQuit

Quit the game

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

F8 Panel

pnlHighScores

Show the high scores screen

None

None

None

None

A panel that hold the high scores screen elements

 


Enter User Name Screen

G7

 

G6

 

G5

 

G4

 

G3

 

G2

 

G1

 

 

Enter User Name Screen design Notes

Control

Name

Events / Actions

Fonts

Font Size

Colour

Background

Explanation

G1 Graphic

graphicWizard

None

None

None

None

None

A high contrast graphic of a wizard

G2 Label

lblEnterUserName

None

Trebuchet MS, Bold

72pt

R0, G0, B0

None

A high contrast large font

G3 Text Box

txtUserName

User enters there name

Trebuchet MS, Bold

60pt

R255, G255, B0

R255, G192, B0

A high contrast large font on a bright background

G4 Label

lblGameScore

Display the users game score

Trebuchet MS, Bold

72pt

R0, G0, B0

None

A high contrast large font

G5 Button

btnUserNameOk

Stores the user name and score to file

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

G6 Button

btnUserNameQuit

Quit the game

Trebuchet MS, Bold

36pt

R160, G191, B216

R255, G192, B0

A high contract large button

G7 Panel

pnlUserName

Display the user name screen

None

None

None

None

A panel to display the enter a user name screen elements

 

 

 

Class Diagrams

Sequence Diagrams

Use Case Diagram