Designing the User Experience: Interactive Storybook Game - CSC10214

Past papers and solved assignments for students. This project details an interactive storybook game design.

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).........................................................................3
Media List/References (if required).......................................................................3
Introduction
In this, an animated narration scenario is discussed here. This narration is for 30
seconds long in which scene of the game is discussed. All the controls are being
displayed in the form of animation in this short video. In the same video, the scenario
of the game is also discussed herein which winning and losing of the player is discussed.
In this game, crow needs to take his man to his own planet so crows came to the Earth
to take the crowman back but crowman need to stay on the earth due to some
personal reason. So player needs to save the crowman to be caught by the crows so
that he can meet his princess on the earth. Player need to dodge all the crows came
during the course and make the crowman to meet his better half.
Wireframe
The wireframe prototype to demonstrate this storybook can be found at:
Link of the home page is given below: -
https://drive.google.com/open?id=1xS8ENvR7QAMIZRp5Q8AV1K-7rjx1QdCt
Link of the Main game page is given below: -
https://drive.google.com/open?id=1IwiaxCG86nSbUBrxr2odyEkuEiT53oGg
Link of the Score page is given below: -
https://drive.google.com/open?id=1sm8uJ-7eWdz2w-7b-CKB-8Y2S9pjMZXM
Theme
This story consists of the theme of the space above the Earth. Alien crows came to take
his master to their planet. So to make the game real we choose the space theme for
this game. Earth is seen in the background. A background tune is used to make the
game attractive.

CSC10214 Assignment 1
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:
This character is of the dimension of 400 pixels of height and 250 pixels of width. But the size or
dimension may worry according to the requirement during the development of the game.
Media Used:
Sounds: -
An immense dense sound for the background is used which makes the environment more versatile
and realistic.
A talk in the form of crow voice is coming while crows and crowman continue talking.
Button pressing sound in this video while denoting the controls.
A focusing sound is played while giving information about a particular object in an animated video.
Images: -

CSC10214 Assignment 1
A background image is used which suits the scenario.
A crowman which interacts with the crow during the animated video.
Crow is used to getting interaction in the video.
Buttons:
On the home page, this game has one button which is used to interacts with the player to skip the
animated video. This button is used to redirect the player to the game screen.
Background:
A dark background of space is used in the image in which earth is seen. This background is complete
suits with the scene.
Content:
The content of this video has a short animated film for the game scenario. In this video, the whole
conversation between crowman and the crow goes on in the voice of Crow. Crows need to take their
master to their planet but crowman need to be on earth to meet his princess. So crowman do not
want to be caught by the crows if crow caught the crowman then they took him to his planet and
crowman not able to meet his princess.
In this video, this whole conversation is animated to make it more attractive.
Description (purpose / objectives):
This video is created to let the player know about the scenario of the game. Main objective of this
video is to let player know about the controls of the game. A player can also skip the video by
pressing the available button in the footer position.
Animations:
A crowman is continuously moving to make it real. The text appears on the screen is also animated.
This animation is totally applied to video to make it more user interactive. System controls are
shown in this video is also achieved by the video animation.
User Interactions Required:
User interaction is required to skip the narration video. This button is provided for those
players who already watched the video. If a player wants to play the game then also a player
needs to press the button and interact with the system.
Navigation / Links:
This page has a link which navigates the player to the main game area.

CSC10214 Assignment 1
Title: Game Screen Frame ID: game
Dimensions:
This character is of the dimension of 50 pixels of height and 150 pixels of width. Size of the crow may
worry according to the requirement of the game.
Media Used:
Sounds: -
Same sound as used on the home page.
A game over sound.
Images: -
Same images
Buttons:
A jump button is used to animate the jump of the crowman.
Do not want to play button is used to quit the game.
Background:
Same as the home screen is used.
Content:
This page contains the main game in which player is playing the game and try to meet the crowman
and his princess together.
Description (purpose / objectives):
Purpose of this page is to save the crowman to be caught by the crows so that he can meet his
princess.
Animations:
A jump animation is created on this page. A crow movement is also shown on this page. A game over
animation is also created in which crow caught the crowman and take him to his planet.
User Interactions Required:

CSC10214 Assignment 1
To Jump over the crows, a user needs to press the jump button. For quitting the game user
need to press the do not want to play button.
Navigation / Links:
This page has a link which navigates the player to the score page area.

CSC10214 Assignment 1
Title: Score Page Frame ID: Score
Dimensions:
This page fits the whole window of the game.
Media Used:
Sounds: -
An immense dense sound for background is used which makes the environment more versatile and
realistic.
Images: -
A background image is used which suits the scenario.
Buttons:
Start again button to start again the game. Do not want to play button to quit the game.
Background:
A dark background of space is used in the image in which earth is seen. This background is complete
suits with the scene.
Content:
This page has the final score of the player.
Description (purpose / objectives):
To display the score of the player finally.
Animations:

CSC10214 Assignment 1
No animation is used.
User Interactions Required:
User can start the game again by pressing start again button. By pressing Do not want to
play user quit the game.
Navigation / Links:
This page has a link which navigates the player to the main game area.
This page has a link to take the player to the home.

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: 700 pixels wide x 150 pixels high;
a. This banner div is used for the platform. This platform is used for moving animation.
2) Vertical banner: 160 pixels wide x 600 pixels high;
a. The requirement of this banner is not sure.
3) Button 1: 125 pixels x 125 pixels;
a. This button is used for jumping button which helps the crowman to jump on its place.
4) Button 2: 180 pixels wide x 150 pixels high;
a. This button is used to place the do not want to play button which helps the player to quit
the game.
5) Custom 1: 150 pixels x 50 pixels;
a. This box is used to place the crow as an object inside this box and then animate it.
6) Custom 2: 400 pixels x 250 pixels.
a. In this box, a crowman is placed which is later animated according to the game
requirement.
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:
Crowman
Crow
More Images
Sounds:
More Sounds
https://www.wallpapersin4k.org/wp-content/uploads/2016/12/
Scarecrow-Wallpapers-1.jpg
https://pngimage.net/wp-content/uploads/2018/06/%E4%B9%8C
%E9%B8%A6-png-2.png
Still in search
Still in search