CSC10214 Assignment 1: Interactive Web Content Design Documentation

Desklib provides past papers and solved assignments. This project details the design of an interactive horror game.

CSC10214 Assignment 1
SOUTHERN CROSS UNIVERSITY
ASSIGNMENT COVER SHEET
For use with online submission of assignments
Please complete all of the following details and then make this sheet the first page of each file
of your assignment – do not send it as a separate document.
Your assignments must be submitted as either Word documents, text documents with .rtf
extension or as .pdf documents. If you wish to submit in any other file format please discuss
this with your lecturer well before the assignment submission date.
Student Name: ____________________________
Student ID No.: ____________________________
Unit Name: Designing the User Experience
Unit Code: CSC10214
Tutor’s name: ____________________________
Assignment No.: Assignment 1, Part A - Design Documentation
Assignment Title: Interactive Web Content
Due date: ____________________________
Date submitted: ____________________________
Declaration:
I have read and understand the Rules Relating to Awards (Rule 3 Section 18 –
Academic Misconduct Including Plagiarism) as contained in the SCU Policy
Library. I understand the penalties that apply for plagiarism and agree to be
bound by these rules. The work I am submitting electronically is entirely my own
work.
Signed:
(please type
your name)
____________________________
Date: ____________________________

CSC10214 Assignment 1
[Your STORYBOOK TITLE]
Design Documentation
By [Your Name]

CSC10214 Assignment 1
Table of Contents
Introduction........................................................................................................ 1
Wireframe.......................................................................................................... 1
Theme............................................................................................................... 1
Storyboards.................................................................................................... 1
Technical specifications (optional)............................................................................8
Media List/References (if required)...........................................................................8
Introduction
Night in the graveyard is the short animated game which has a short animation video
which tells the story about the game. In this game, a brave man is going inside the
graveyard to save his mother from dead souls. So he wants to reach to his mother by
collecting coins so he can release her mom from the bad souls.
The short animation tells the story of this man and the incidence to happen due to
which his mom trapped by the bad souls. In this video controls of the game is also
shown. Winning condition of the game is clearly mentioned in this animated video.
Player needs to take care of himself from other souls and their objects are also
mentioned in this video only.
Wireframe
The wireframe prototype to demonstrate this storybook can be found at:
Wireframe of home screen is available at:
https://drive.google.com/open?id=1YcxtA1OqSknh1Op9XcAWWYUuAU0cu4ja
Wireframe of Game screen is available at:
https://drive.google.com/open?id=1eb-1So0ronP78t0xULOVn4cA48gRuBh1
Wireframe of Scoring screen is available at:
https://drive.google.com/open?id=1d6OPfs6XwGS_3xcEdPsRrGtfwJ_dtGch
Theme
Dark night theme is chosen for this game to make it more spine chilling. A background
with big moon is used to the scene seems more real. Bat sound is inserted in the game
which horrified the player and player begging to escape from this hell.

CSC10214 Assignment 1
This dark horror theme is suited to our graveyard game to the best. The narration of
the story is completely done in this scene in front of the gate of the graveyard which
makes the scene of the game seems to be real.
Storyboards
The following storyboards on the following pages provide a more detailed explanation
of the planned product.
(Note that: At least one storyboard should be provided for each page of your story.
 You may need to provide a separate storyboard for some of your
banner/animations in order to describe/demonstrate your planned design
ideas.
 The following storyboard format is one option. You may choose other formats
as long as you include the same details)

CSC10214 Assignment 1
Title: Home Page Frame ID: Home
Dimensions:
Gate dimensions are nearly 300px by 300px remaining the exact size of the image is only tells during
the creation of the game Night in the graveyard.
Media Used:
Background photo is used with this image to make the scene of the graveyard more spine chilling.
An actor or the brave man is used to communicating with Gate in the narrated video.
At the end of the video man break, this gate and a new image of the shattered gate is used to
represent this.
Shattered sound is used while man kicks the gate.
Bat sound is used to make the scene more like hell.
Text appears sound is inserted in the game to denote the chat between the actor and the magical
gate.

CSC10214 Assignment 1
Buttons:
A button is provided on the home page that is used to skip this narration. This same button also
takes the player towards the graveyard.
Background:
A graveyard background is used to make the scene more real and make the whole game a horror
game.
Content:
This above-shown image is used for the image of the gate of the graveyard. This image is mostly
used in the animation of narration. The man finds talking to that gate about his mother. Every
controls and story of the game is represented to the player. After the conversation, the player
breaks the gate and enters into the hell like graveyard. Bad souls try to kill the man but man is
walking to save her mom.
Description (purpose / objectives):
This animated video is made to let the player know about the scenario of the Night in the
graveyard. Main purpose of this video is to make the player familiar from the controls and
keys used in the game. Winning and losing condition told to the player.
Animations:
An animated gate id used which seems to talk to the man.
A man is sued to talk to the gate is created by the animation.
Conversation between gate and the man is whole animated by the text appearance and
disappearance of the text.
Breaking of the gate is animated by the end of the video.
User Interactions Required:
User can skip this narration when he/she required.
User move inside the graveyard by pressing the available button on the screen.
Navigation / Links:
Link provided on the home page is taking player towards the graveyard.

CSC10214 Assignment 1
Title: Game Page Frame ID: Game
Dimensions:
The actor dimensions are 150px by 150px but actual actor size is cleared after the generation of the
animated game video.
Media Used:
Background image is used to make the scene of the graveyard.
A pedestrian is used to walk on.
Coins are used to collect by the player which later used to release his mom.
Danger objects like skulls and bones are used in the game which can kill the player before reaching
the destination.
Various sounds are inserted in this game like sound of bat. Sound of collecting coins, sound of
pressing button, etc.
A dead man sound plays when danger object kills the man.
Buttons:
Button Jump is pressed to jump the actor in the game.
An escape button is provided which take out the player from the graveyard.

CSC10214 Assignment 1
Background:
A graveyard background is used to make the scene more real and make the whole game a horror
game.
Content:
On this page, player enters the graveyard to save his mom. During his journey, he faces lots of
problems which can kill the man. Player need to dodge all the hurdles and reach his target.
Description (purpose / objectives):
Player need to enters into the graveyard to save his mother. As the angry gate says his
mother is trapped by the bad souls. He can release his mother by giving a particular amount
of special coins found in the graveyard. So the player needs to collect coins from the
graveyard to release his mother.
Animations:
Objects came closer to the player.
Player move on his place and jumps on the same place but the movement of the platform
and objects make the player seems to be move.
Coins rotating on its place in the air.
User Interactions Required:
User required to jump from its place whenever is required by simply pressing the jump
from the screen.
User moves out of the graveyard by pressing the escape button on the screen.
Navigation / Links:
Link on this page redirects the man out of the graveyard and displays the score screen.

CSC10214 Assignment 1
Title: Score Page Frame ID: score
Dimensions:
Fit the complete window used for the graveyard game scenario.
Media Used:
Background image.
Same background horror sound.
Buttons:
Button ‘Start again’ is available at the bottom of the screen which takes the man to the graveyard
back.
Escape button is also made available to the player which takes him out of the hell.
Background:
Graveyard background image shown above is selected for the background of the graveyard.
Content:
On this page depicts the coins collected by the man.
Description (purpose / objectives):
Main objective of this page to let the player know about the number of coins he collected.
Animations:
This page has the absence of animation opposite to every other page.
User Interactions Required:
Man can move back to the graveyard or move out of it by the buttons provided.

CSC10214 Assignment 1
Navigation / Links:
Home link
Game link

CSC10214 Assignment 1
Technical specifications (optional)
(Simple example below could be provided if these details are not provided on storyboards)
Web page dimensions: 600 x 900 pixels. Banner dimensions:
1) Horizontal banner: 600 pixels wide x 90 pixels high;
3) Vertical banner: 160 pixels wide x 600 pixels high;
2) Button 1: 125 pixels x 125 pixels;
4) Button 2: 180 pixels wide x 150 pixels high;
5) Custom 1: 320 pixels x 50 pixels;
6) Custom 2: 300 pixels x 250 pixels.
Media List/References (if required)
(If you create your own images, this section is not required. Otherwise, you should reference all
images that you found online or other sources for your story.
Note: It is recommended that when you search for images online to use, we suggest you use search
parameters set with permission for reuse or within creative commons.)
Image name or
description
Resource address/URL
Images
Actor
Background
Graveyard gate
Graveyard gate
shattered
Graveyard objects
More images
Audio
Audio for the
game
https://s3.amazonaws.com/gameartpartnersimagehost/wp-content/uploads/
2016/06/Indiana-Jones-style-royalty-free-game-art.png
https://www.gameart2d.com/free-graveyard-platformer-tileset.html
https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-cemetery-
starter-set-low-poly-3d-model-7_2000x.png?v=1521107436
https://cdn.shopify.com/s/files/1/0225/1115/products/buildings-cemetery-
starter-set-low-poly-3d-model-8_2000x.png?v=1521107436
http://worldartsme.com/?module=images&act=download&url=scary-cemetery-
clipart-1.jpg
Searched when required
Searched during the development