INDUSTRIAL HIGHER SCHOOL
TECHNOLOGY CERTIFICATE 2019
MULTI MED I A
MAJOR PROJECT STUDENT
32509975
HSCProject:
DOCUMENTATION
Contents
Foreword and Project Overview ....................................................................................... 4
Statement of Intent 6 .........................................................................................................................
Research 8 .......................................................................................................................................................
Selection and Justification .................................................................................................. 30
Development of Ideas ............................................................................................................... 34
Project Management 44 ..................................................................................................................
Production: Problems and Solutions ........................................................................ 48
Work Health and Safety ......................................................................................................... 54
Evaluation 58 ..............................................................................................................................................
Post Production Addendum 60 ...............................................................................................
04.08.18
welcome to Before you flip another page...
An interactive folio
Welcome to the folio of my Industrial Technology: Multimedia Major
Project, “HSC”. Before you flip another page of this folio, please be
aware that this folio is supported by an interactive text adventure that
can guide you through the document.
The text adventure, named “HSC Marking Simulator”, can be found
at the project’s website http://hscthegame.com/simulator/. For your
convenience, the QR code containing the link is provided on the right. The text adventure is
compatible with PC and laptops running modern operating systems (macOS, Windows, Linux)
as well as mobile devices of different types (iPhone, iPad, or Android-based phones and tablets).
As a multimedia student, I was inspired to see the emergence and development of new technologies
in HSC students projects from year to year. New softwares, hardwares, processes, components
and technologies are explored, researched and used by multimedia students to enhance their
major project production and catch up to the continuously evolving nature of the multimedia
industry. However, whilst the production of major projects becomes more and more advanced, the
folio has not seen any significant or innovative changes. It remains to be the same old 80 pages
of tradional printed media that mechanically documents the project. And I, student 32509975,
aim to change this.
I planned and produced an additional multimedia product in the form of a text adventure game
to complement my folio. In doing so, I made an effort to integrate interactive media into tradional
media to deliver an enhanced folio-reading experience. This also allows me to communicate with
you, the marker, more effectively and concisely, pointing out the important factors that I took into
consideration as well as showcasing my industry-ready skills in adapting to new technologies.
Text adventure games, or more commonly known as Interactive Fictions, are games where
the player uses text commands to control the narrative and the game environment. The
narrative of the game can adapt accordingly to the player’s inputs, which are often given in
the form of clicking buttons and hyperlinks.
The game contains information that cannot be effectively delivered through the folio. It is an
extension of the folio. Therefore, I reduced the length of the folio to comply with the documentation
limit of 80 pages set by NESA. This text adventure is also a multimedia production in itself. And
together with the folio, it delivers the multimedia experience as two pieces of a single product. In
essense, this interactive element should be considered as a part of the folio.
4 Foreword and Project Overview
PROJECT OVERVIEW
Apart from this Folio, the project includes the following interactive elements:
EARTH studios website HSC The Game HSC Marking Simulator
http://hscthegame.com/ http://hscthegame.com/game/ http://hscthegame.com/simulator/
A landing page that hosts the A short game following a An interactive text adventure
game and the text adventure. cube of Earth as he ventures that aims to provide a guide
Designed with simplicity and
through adversities, gets on how to go through this
functionality in mind. out of his comfort zone and folio and the production
moves forward with of the project.
his journey.
Recommendations
To best experience this folio and the project it documents, readers are recommended to follow
the following instructions:
1. Read Page 4: Welcome to an Interactive Folio.
2. Visit the HSC Marking Simulator at http://hscthegame.com/simulator/ or through the QR
code on page 4 with any type of devices, preferably mobile devices (smartphones, tablets) or
laptops.
3. Follow the instructions given by the HSC Marking Simulator to go through the folio. It is strongly
recommended that you interact with as much elements of the Simulator as possible to receive the
full experience.
4. Play the Game or watch the recorded gameplay at http://hscthegame.com/game/
5. Visit the Website for further information about the project.
Multimedia Major Project - HSC The Game - 32509975 5
Statement of Intent
The Game The Folio The Studio The Artworks
For my Multimedia Major Project, I intend to produce a multimedia production which will allow
me to share my personal journey of going through the last year of high school. My journey has
been an interesting one where I have met many challenges as a student who is a recent arrival
in Australia. I believe my journey will offer comfort and solace to aspiring migrants who wish to
follow a similar path. It has been difficult and I believe passionately that my experience, displayed
through multimedia, can be an inspiration to others.
I intend to deliver a multimedia experience that demonstrates industry-ready skills in creating
and manipulating content in different mediums: Interactive (game making), Digital
(website development) and Traditional (folio/documentation). Furthermore, I
intend to explore and implement the ways by which these three mediums
can be used in conjunction with each other to develop a complete, coherent
and effective multimedia product.
THE GAME
The primary component of the project will be a short 2D platforming
and puzzle solving game where the player can narrate through a
linearly progressing story about a cube of earth as he overcome
obstacles to continues his life’s adventure. Through this short
story I aim to subtly capture and convey the personal ups and
downs of high school whilst delivering a light, enjoyable
and modern gaming experience.
The production of the game will give evidence to a variety Ai
of skills in processes and technologies involved in game
production including but not limited to vector and 20.07.18
raster graphic composition, 2D graphic manipulation,
scripting using industry-standard language (C#), project
management, ICT and designing.
6 Statement of Intent
THE WEBSITE
In addition to the game, I intend to develop a website for publication, promotion and documentation
purposes. The website provides a medium through which I can distribute and promote the game.
I aim to reach potential players through the use of the website and a variety of social media.
The website also serves as an addition to the documentation of the project. The purpose and
approach of this section of the website deserves further detailed explanation, which is provided
on page 4, “Welcome to an Interactive Folio”.
The development of the website demonstrates proficiency in using a wide range of tools and
processes to produce and manage a website, which is valuable to a multimedia professional.
This includes high-level ability in designing, scripting (HTML, CSS, jQuery, Javascript), adapting
to new technologies (Twine) and adequate knowledge about website domain, hosting and other
back-end aspects of web development.
THE FOLIO
Despite the fact that we live in a period of time where technology and digital media are becoming
increasingly advanced, the effectiveness, elegance and charm of traditional
printed media cannot be denied. Through the form of a physical,
professionally designed and printed folio, I intend to tell the
story of planning and producing the project. The folio will
include interactive elements that connect it to the game and
the website, offering readers a much more in-depth look into
the processes involved in the making of the project. The
folio serves as a guide on how best to navigate through
my journey of producing this major project, including the
choices I made, the factors that I considered and the
methods that I used.
Through the composition and design of the folio, I
strive to demonstrate my ability in graphic design
and project management, which are crucial assets of a
multimedia industry worker.
THE ARTWORKS
In my journey of finding the right art style for the project,
I created a series of 2D artworks that were inspired by
a variety of art styles including low poly, minimal, flat and
pixel art. These artworks are displayed in the folio as a showcase
of my artistic exploration. Further information such as the date of
production and the technologies used can be found near the
artworks themselves.
Multimedia Major Project - HSC The Game - 32509975 7
RESEARCH
Resources Materials Processes Technologies
In this section, I explored the different components needed for the production of the project,
including Materials, Resources, Processes and Technologies. A wide range of component
is researched, discussed and evaluated, and only the selected components are further researched
in detail.
MATERIALS
When it comes to Multimedia production, especially game and website production, the only
substantial physical material that needs research on is Paper to be used for the folio.
Selection and Justification I did not conduct research on physical storage materials because
in my opinion, physical storage as a technology is outdated, especially with the emergence
and popularisation of cloud computing and online storage systems (such as Google Drive,
OneDrive, or GitHub/Git). These services offer a more reliable and accessible method of
data storage/management.
There are a few factors that need to be
A5 considered in the selection of paper: The
(148 x 210mm)
A3 purpose of the printed material, the price
and the quality of the paper. With these
(297 x 420mm) factors in mind, I delved into the realms of
printing and paper.
A4 A1
(210 x 297mm) (594 x 841mm)
A2 Paper size
(420 x 594mm) Through Research, a diagram of paper
size and their relationship with each other
A0 is included on the left to summarise the
standard paper sizes available to me.
(841 x 1189mm)
8 Research
Selection and Justification The final selected paper size is the standard A4 size. This choice
largely comes from personal preference and my own vision of the project. It can be innovative
and effective to use other sizes for the presentation of my folio, but I want my folio to have a more
traditional feel of magazines and books while having enough space to display graphical contents.
Paper Weight
Often measured in GSM (Grams per Square Metres), paper weight is the unit measuring the
weight of the stock. Most professional printing services offer a wide range of stock GSM for
different purposes. Below is a list of common GSM range and their uses:
Weight Properties and Common Uses
33 - 55 gsm very thin, often used to produce newspapers
80 - 100 gsm the most common weight of printing paper, commonly used with office copiers
or household printers.
120 - 150 gsm stocks that are not too thick to comfortably bend but still thick enough for
long-term wear and tear. Commonly used to produce posters, magazine pages
and flyers.
210 - 300 gsm heavier stocks used on sturdier products such as magazine covers or premium
flyers.
350 - 450 gsm heavy stocks that stand straight up under its weight (does not bend). Most
commonly used for business cards, wedding invitations and cards in general.
Selection and Justification I will use 120 - 150 gsm paper for the pages of my folio and 250
gsm paper for my business cards and the cover of the folio. These selections are based on my
intent of replicating the feel of a magazine/book for my folio and my personal preference of
business cards being not to thick but are able to resist tear and wear.
Materials and Coating
The Material and Coating of the paper can massively influence the overall legibility aesthetics of
the project.
Type Properties and Common uses
Glossy Reflects lights to create a glossy and shiny feel. Most effectively used for photos
and graphical components with bright tones.
Matte Non-glossy, flat looking paper with very little sheen. Used for more sophisticated
and professional products due to the high price and quality.
Uncoated Standard smooth paper surface, used for general purposes.
Recycled / Textured material with a light brown colour, used to establish specific artistic
Kraft style and purpose.
Selection and Justification Matte coating is selected for the folio pages and cover to establish
a professional style and preserve quality of printed materials. Kraft paper is used for business
cards as a design choice because it enhance the aesthetics of the cards.
Evaluation I believe that I have researched a wide variety of printing materials and their
uses to select the most appropriate material for my project. While the research is no where near
a complete overview of printing materials, it gives me a range of criteria and configuations to
effectively take design and financial factors into consideration to produce an effective folio.
Multimedia Major Project - HSC The Game - 32509975 9
RESOURCES
Inspirations - Case Study #1: Limbo
Limbo is a 2D physics-based puzzle side-scrolling game released in July 2010 by Playdead, an
independent game studio. The player controls an unnamed boy who, on the journey of finding his
sister, gets lost in Limbo. The game is available on multiple platforms including Nintendo Switch,
PS4, Xbox, macOS, Linux, Windows, iOS and Android.
Limbo by Playdead
VISUAL STYLE Most of the animations of the game are
skeletal-based animations, which allows for a
The game features a unique black and white wide range of physics-based animations that
visual style, reminiscing old film noir films. The are smooth and realistic.
game is presented using a monochromatic
black and white colour scheme. Using bloom The lighting in the game is achieved using
post-processing, contrasting colours and multiple layers of contrasting colours combined
film grain effects, the developers creates an with fog and bloom effect.
atmospheric and mysterious environment that
players can explore. The game also utilises SOUNDTRACK
contrasting colours and parallax scrolling
to convey a sense of depth in a completely The game does not feature a musical
2D environment. The player character is soundtrack, but rather a carefully crafted
portrayed using a black silhouette and two system of minimal ambient noise and sound
contrastingly bright eyes that fit perfectly onto effects. Most of the sound effects in the game
the pessimistic atmosphere. are realistic and responsive, complementing
the unique aesthetics of the game.
10
GAMEPLAY objects, encouraging the players to learn
the pattern of the puzzles through “trial and
Most of Limbo’s puzzles are built around death” rather than using platforming skills.
physics based interactions of objects and the
timing of movement. Playdead called the style
of the gameplay “trial and death”, meaning
that the level designers expect the players
to fail at least once at every puzzle before
finding out a solution. This style of gameplay
encourages the player to be creative with their
solution.
The character controller of the game is Light and shadow layers in Limbo
responsive and comfortable to control. The
player can run, jump as well as push and STORY
pull different objects to solve various types of
puzzles. The game employs a linearly progressing
story that unfolds as the player go through
The developers also utilise the limited black each obstacle in the game. This method of
and white colour palette and complex storytelling is neither new nor unique but it
environment to hide traps and interactable is effective in creating the uniquely designed
experience that the game aim to deliver.
Upon playing the game for the first time, the
player is sent straight into the game without
any cutscenes or introductory screens,
further enhancing the game’s pessimistic and
strangely attractive aesthetics.
Screenshots from Limbo gameplay puzzles
Evaluation Of Limbo Case Study Selection and Justification Evaluation
»» Unique visual style
»» Atmospheric environment
Pros »» Smooth and realistic animations and sound effects
»» Responsive and versatile character controller
Cons »» Linear progression
»» Low puzzle difficulty
»» Bloom and film grain post-processing effects can be effective in creating
Contribution to atmosphere
my project »» 2D arts can be layered and coloured with contrasting colours or tones to
convey depth
»» Environment elements and colours can be used to hide playable objects
Multimedia Major Project - HSC The Game - 32509975 11
Inspirations - Case Study #2: Hollow Knight
Hollow Knight is a Metroidvania game developed and published by an Australian game studio,
Team Cherry. The game was first officially released in February 2017. The game is made with
Unity and is featured on the official Unity3D website as one of the most successful Unity projects.
The game tells the story of a knight on a quest to uncover the secrets of the abandoned kingdom
of bugs named Hallownest. The game is available on Windows, macOS, Linux, Nintendo Switch,
Xbox One and PS4. The Hollow Knight, Hollow Knight by Team Cherry
VISUAL STYLE sprites. The areas are filled with destructible
objects, increasing the interactivity of the
Hollow Knight employs a range of hand- environment. Whilst this does not affect
drawn, cartoonist game assets. Most buildings the game mechanics, it gives life to the still
in the game are constructed in a style that surroundings made of sprites and makes the
resembles gothic architecture, describing the game environment more realistic and fun to
abandoned and forgotten state of Hallownest. explore.
The player and non-player characters in The lighting of the game is implemented with
the game are animated using cel-based the use of transparent 2D sprites. This method
animation. The characters move at a different of lighting gives the developer full control
frame rate compared to their environment, over the lighting, making the game designing
highlighting their presence and ability to process easier. The game employs different
be interacted with in the rather dark and sets of colours and tones for each of its area.
distracting surroundings. The slow frame rate A certain colour palette is assigned to an
also contributes to the overall aesthetics of the area, conveying the biome that the area is in,
game, giving it the nostalgic and cartoonist the current state of the area and the possible
look and feel. enemies inhabiting the area.
The environment of each areas in the game SOUNDTRACK
consists of many layers that move at different
speeds (parallax scrolling technique). This Hollow Knight uses a wide range of
gives every area a sense of depth, making professionally composed soundtracks that
the game feel like a 3D game using only 2D matches the aesthetics of each area in the
12
game. By only listening to the background platforms as well as the interconnection of
music of the area, the player can tell different areas of the game. The combat
approximately where they are in the large mechanics of the game is extremely satisfying
kingdom of Hallownest without having to with the inclusion of the charm system that
use the map system. This feature of the allows players to employ different styles of
game enhances the gaming experience and fighting into their gameplay.
increases the depth of the game.
STORY
GAMEPLAY
Team Cherry built the game on a fictional
Hollow Knight is a metroidvania game. It world that is carefully crafted with lores
features a world that consist of interconnected and character backstories. The story is not
rooms and areas. The gameplay is told directly to the player, but storytelling
exploration-lead, meaning that the player can elements are tightly woven into the fabric
progresses at the pace at which they explore. of gameplay. Additional content and lore
are available as hidden rewards for the
There are many ways that the players can player’s exploration. The game can have
progress in Hollow Knight, and their path of multiple endings depending on the choices
choice can deeply affect their experience with that the players make and the amount of
the game. The character controller features hidden content the player has uncovered. The
a wide range of mechanics (variable height storytelling elements reward exploration and
jumping, double jumping, running, dashing, progression, making the game more engaging
wall jumping). The controller enables a and rewarding to play.
wide range of possibilities in level designing
utilising classic platforming mechanics such as
platforms, collapsing platforms, spikes, moving
Selection and Justification Evaluation
Evaluation of Hollow Knight case study
»» Depth of lore/backstory
»» Non-linear storytelling, multiple endings
»» Use of colour palettes and background music to convey location
Pros »» Beautifully animated characters/enemies
»» Combat system
»» Platforming difficulty
»» Interactive environment
Cons »» Lengthy tutorial phase
»» Slow progressing rate for beginners
»» A wide range of game mechanics to explore (variable height jumping,
Contribution to double jumping, running, dashing, wall jumping)
my project »» Usage of colour to convey location
»» Interactive environment
Multimedia Major Project - HSC The Game - 32509975 13
Documentations and Tutorials
This section of Research is done after the selection of technologies and processes because it
relates directly to the types of technologies used and the processes involved.
CODING REFERENCE / DOCUMENTATION Selection and Justification
The selected game engine is Unity3D, therefore it is apparent that the Unity documentation
available on their website is used during the production process. Other processes that involve
coding such as website development is supplemented with other code referencing websites listed
below.
Resource/Website Description and Uses
Unity documentation This is the official C# script referencing website of Unity. The website
is used frequently during the production process for faster coding,
debugging and problem solving
w3schools.com W3Schools is a website providing HTML, CSS and Javascript examples
and references. I was able to solve numerous problems revolving
website development using this website.
Stack Overflow Stack Overflow is a community-based forum discussing coding problems
in general. All sorts of problems and resolutions can be found on this
websites, including those relating to website development, Unity or
C# in general.
TUTORIALS Selection and Justification
Before and during the production of the project, I watched countless tutorials on a variety of
topics. These tutorials are available free of charge for everyone to access and share. It has
been hard to keep track of all of the tutorials that I watched. Therefore, I decided to just list and
acknowledge the Youtube channels and websites that I learned from.
Resource/Website Description and Uses
Brackeys (Youtube) Brackeys is a channel dedicated to game making, especially using
Unity. The channel features tutorials on a variety of topics revolving
game making including but not limited to 2D, 3D, sound design, new
technologies, UI design and game mechanic implementation.
Official Unity tutorials Unity provides a range of official tutorials taught by an engineer/
educator from the company itself. These tutorials aim to give beginners
a boost into their game making journey whilst introducing new features
and components that comes with every update of the engine.
Sebastian Lague Sebastian is a programmer who likes to work with Unity. From this
(Youtube) channel I learned about the more technical aspects of the engine
and how to apply these knowledge to game making. His tutorials
are in-depth and heavy on the mathematics/informatics side, giving
viewers a more thorough knowledge of the engine and programming
in general.
14
Pillars of Game Design Processes
Through the research of Game Development Game Design
and Design I came up with a simple diagram
to represent the 7 pillars of Game Design world design
which will help me through the Development of SYSTEM DESIGN
Ideas for the game section of the project: Content design
game writing
1. WORLD DESIGN level design
World Design is defined as the creation and UI design
formation of backstory and theme for the audio design
game. It defines the very first boundaries of
the world in which the game takes place. This dialogue, story progression, and other literary
often includes a general classification of game devices to drive the player through the game’s
genre and artistic styles. plot.
2. SYSTEM DESIGN 5. LEVEL DESIGN
System Design deals with the underlying Level Design is arguably the most important
rules and mathematical/physical pattern stage in game design. This is the element that
of the game world, better known as game will either make or break the game. This stage
mechanics. System design expands on the of game design deals with the laying out of
basic principles created during world design playable areas, placement of objects and
and regulates the specific rules of the game. challenges within those areas and progressing
This stage of design often includes the design of the game’s difficulty curve.
of basic game elements such as Physics
(gravity, resistance, friction), Movements 6. UI DESIGN
(player controls, axes of movement) and
Gameplay. The design of User Interface (UI) elements is
also crucial to the experience of the player.
3. CONTENT DESIGN The UI system can act merely as a player’s
mean of managing their own gameplay or it
Characters, items, puzzles, missions or can contribute to the game mechanics.
rewards are designed at this stage of game
design. The finer details of the game are 7. AUDIO DESIGN
designed and integrate into the general rules
created in the first two stages. This is usually the last stage of game design,
unless the game mechanics revolves around
4. GAME WRITING audio. A professionally composed original
soundtrack for a game can, and have been
Apart from having a good gameplay, games a selling point for a large portion of games
need to have a fitting progression that on the market. Audios including background
cohesively link the game’s backstory their music and sound effects can greatly enhance a
mechanics. A good script for a game tends game’s gameplay and player experience.
to include elements such as good character
Multimedia Major Project - HSC The Game - 32509975 15
2D Graphics - Vector vs Raster
There are two types of 2D graphics: Vector Graphics and Raster Graphics (more commonly known
as Bitmap). Both vector and raster graphics have advantages and disadvantages, therefore they
have different uses and applications. I researched, evaluated and summarised their pros and cons
into a table for future reference when deciding whether to use vector or raster for a certain piece
of artwork.
Vector Raster
Pros • Shapes based on mathematical • Pixel-based
Cons calculations • Is best for editing photos and raw
Uses
• Can be scaled to any size without losing images from cameras
quality • Enables a variety of advanced filters
• Can be printed/presented at any size/ and colour blending effects
resolution • Used to create/draw “organic”
• Colours of shapes can be easily changed looking digital artworks
• Can be easily converted to raster
• Maintains a small file size at large
resolutions
• Does not work well with images • Loses quality when scaled up
with continuous tones of colours • File sizes can be problematic at high
(photographs) resolutions
• Conversion to vector is time-consuming
• Artworks that are displayed at various • Artworks that are displayed at a
resolutions and sizes (logos, icons, UI fixed resolution (game objects, game
elements) background)
• Geometric artworks
Pixel Art
Pixel art is an artistic style developed in the early ages of video game making when hardware
limitations have not allowed for a large canvas size and variety of colours. As a result of trying to
express as much as possible using minimal number of storage units (pixels) and colours, developers
at the time developed a new genre of digital art, called pixel art.
Since then, hardware capabilities have Traditional Pixel Art in Piskel
increased dramatically, but the pixel art
art style persists as a nostalgic genre that
reminds players of the golden age of
video games. I researched into pixel art
because it is an effective art style that I
can use in my project.
The process of creating “pure” pixel arts
involve the placement of colour on every
16
single pixel on a small canvas. This process is time consuming but it ensures that the piece of
artwork is produce with a high degree of precision. The process can be done in mainstream 2D
raster graphics editing softwares (Adobe Photoshop, MS Paint) or it can be done in pixel art
dedicated softwares such as Aesprite or Piskel.
There are alternative methods of producing pixel art. One of the methods involves “pixelating”
normal high-definition artworks, which means reducing the size of an image to a point that makes
it feel pixel-ly, and restoring it to the original size using nearest-neighbor interpolation method.
Resize Inter-
polate
These types of techniques can reduce the production time, but it cannot guarantee the quality of
the finished product. Moreover, it requires the creation of the original 2D image, which will also
add on to the time and effort spent making the artworks, defeating its time-saving purpose.
Selection and Justification Ultimately, I selected the Traditional method of manually placing
colour into each pixel of a raster image because it allows me to have more control over the
quality of my production. Moreover, Trational method is also more compatible with cel-based
animation, which is the selected type of animation for pixel art components.
2D Dynamic Lighting
Recently, the game developing world have seen various 3D technologies being brought into 2D
games development to greatly enhance the development process or to develop new features for
2D games. Dynamic lighting is one of those technologies.
By using a specfically made shader on a 2D sprite that takes in information from a normal map,
a modern game engine (such as Unity) can simulate ligting from various light sources (realtime
lights, baked lights, emissive materials) on a 2D sprite as if it was a 3D objects.
Normal mapping Shaders
Dynamically Lit
Texture
This technology allows for the combination of a variety of art styles and lighting techniques, which
contributes to the development of the project.
Selection and Justification This process and technique is not used and selected for the
production of the project because after experimentation, I find the process repetitive, tedious and
time-consuming whilst yielding barely noticeable improvements. However, the process does offer
a new approach into lighting and 3D interactions of 2D games.
Multimedia Major Project - HSC The Game - 32509975 17
Colours and Colour Formats
There are two main colour systems: RGBA and CMYK. The systems are designed for a specific
purpose and are often interchangable. It is important as a developer and designer that I know the
basic similarities and differences of systems and use each colour format professionally.
RGBA CMYK
• R = Red value (from 0 to 255, or 00 to ff) • C = Cyan value (from 0% to 100%)
• G = Green value ((from 0 to 255, or 00 to ff) • M = Magenta value (from 0% to 100%)
• B = Blue value (from 0 to 255, or 00 to ff) • Y = Yellow value (from 0% to 100%)
• A = Alpha value (from 0 to 255), dictates the • K = blacK value (from 0% to 100%)
opacity of the colour • Suitable for contents that are physically
• Suitable for contents that are displayed on printed on different materials (paper,
monitors of different varieties. decals)
With further research, I discovered that there is another variant of the RGB colour format that
might prove to be more effective in terms of intuitiveness and ease of use: HSV. The attributes of
HSV includes:
• H = Hue = The general categorisation of the colour, similar to how we identify colours naturally
(red, yellow, blue, green and a combination of those hues)
• S = Saturation = The intensity of the colour. The higher the attribute, the more intense/saturated
the colour is.
• V or B = Value or Black = The brightness of the colour.
Selection and Justification This colour system is easier to work with because its attributes is
easier to adjust and achieve the desired colour. The hue, saturation and value of a colour is often
the parameters that I personally use to pick/adjust a color as a designer. Therefore, I will use
a combination of HSV and CMYK colour systems for the production of various elements of my
project.
Website Development
Through research into relevant topics, I summarised my knowledge of the website development
process in this section of the folio. A website’s front-end is usually developed in 4 stages:
1. Design
In the early stages of website development, ideas, visions and layouts are
sketched on paper or using UI/UX designs or graphical designs software
(Adobe XD, Adobe Illustrator, Adobe Photoshop). This then acts as a guideline
to the website’s structure and designs.
2. HTML
Often refered to as the skeleton of the website, HTML brings the structure of the
website to life. Components and elements are assigned into their hierarchial
position. Hyperlinks and other website components are also declared and
assigned using HTML.
18
3. CSS
CSS is the “skin” of the website. CSS dictates the visual properties of every
components (width, height, background colour, text colour, border, order in
layer...). CSS converts the designed visual elements into actual interactive
elements in the website.
4. Javascript
Javascript, or anyother similar languages (jQuery, React) can be seen as the
“brain” of the website’s frontend. Javascript handles the operational aspects
of the website such as interactivity, animations, image gallery or automatic
content adjustment.
There is also an additional step that needs to be done before a website is ready to be used and
accessed: Publishing. I did not include this step as a stage of website development because it lies
outside the field of website design and development. The process is fairly simple, consisting of 4
steps:
1. Find a website host and domain provider
2. Register a domain name and hosting service
3. Connect the domain with the hosting service (via name servers)
4. Upload the website’s contents via file transfer protocols (FTP)
I researched about, compared and evaluated a wide range of hosting provider to find the most
suitable service for my project.
Provider Price Pros Cons
Hostinger US$1.95/mo Most economical choice Does not have an Australian
Easy to use server
SSL Certificate included Domain not included
GoDaddy AU$4.99/ Speedy service High price
mo Great reputation
User-friendly UI
HostGator AU$2.64/ 45-day money back guarantee Domain not included
mo Unlimited bandwidth and disk
space
BlueHost AU$4.25/ Automated WordPress set High price
mo up and e-commerce support
(which is not really an
advantage for the project)
Apart from the listed advantages, these website hosting service offers a 99% uptime guarantee
and 24/7 customer support, which is the standard of the web hosting industry.
Selection and Justification The selected website hosting service is Hostinger because it is the
most economical choice. Other factors such as bandwidth and storage space are considered but
since the scale my website is relatively small, these factor do not have significant impact on the
production of my project.
Multimedia Major Project - HSC The Game - 32509975 19
Dynamic Storytelling
Text Adventure or Interactive Fiction is a genre of game that lies on the less popular side of the
game market. This genre of game allows the creators of the game to tell their stories dynamically.
The player is prompted to make decisions and/or answer questions as they go through the game,
allowing the game to obtain more data and adapt the story to each player according to their
responses.
There are many processes game developers
can use to make text adventures, ranging from
manually writing and linking each story element
in HTML to using engines to interactively write,
link and manage the story. I selected the latter
because it is a less time-consuming and more
intuitive process.
Selection and Justification There are quite
a few softwares and engines available to text
adventure game developers, but Twine is really
the only choice because it is the most up-to-
date and complete engine that is unique in its
node-based approach.
The text adventure, or the “Twine”, should be A node-based engine requires a
designed before being adapted to Twine. Twine node-based design
offers its users a node-based interface where they
can manage the structure of their story and a text-based editor where they can use scripts and
codes to compile their stories and make links to other storytelling elements.
Story Ideas Story Structure Story Content Twine
Writing Passages
CSS styling HTML export Twine Twine
Dynamic elements Linking Passages
Flowchart: Text Adventure Process
The syntax of the Twine scripting language is crucial to the development of Text Adventures. Some
of the most common expressions are researched and listed below.
Syntax Use Syntax Use
[[link|to]] A link to another
<<if>><<endif>> A conditional
passage <<set $v>> statement
<<replacelink>> Texts that reveal its Assigning value to a
content on click variable
<<return A link to the [[link|http:// A link to an
“Back”>> previous passage website.com/]] external website
20
2D Animation
There are a lot of different types of 2D animation. However, there are two major method of
animation in 2D game development: cel-based and rigging.
Cel-based animation
Cel-based animation is an animation technique adapted from tradional handrawn animation.
In cel-based animation, each frame is drawn separately and played at a certain frame rate
(typically 12 FPS or 24 FPS) to create an illusion of motion. This technique is used widely in classic
animated films and 2D games and can be done easily using various graphic design programs
(Adobe Photoshop, Piskel, Aseprite, Adobe Animate, Adobe Illustrator).
The process of creating cel-based animation is fairly simple. And due to its popularity among
games, Unity3D provides lots of tools and support for this type of animation, which makes the
process even simpler. An example of an animation workflow is represented below.
Character Motion Design Creating Creating
Design Keyframes Intermediate frames
Apply animation Import Into Export into Preview and
at correct FPS Unity3D Spritesheet Modification
Flowchart: Character Animation Workflow - Cel-based animation
Skeletal-based animation (rigging)
Skeletal-based animation is an animation technique adapted from the 3D rigging animation
technique that allows the animator to simulate realistic structures and motion at a higher framerate
compare to cel-based animation. This technique is therefore more suitable for objects with a more
realistic range of motion and movements. The process involves creating additional textures for the
sprite. These textures include a bone map (for bone placement), sprite mesh (to define movable
sections of the sprite) and weight map (influence of each bone on each section).
Original Motion & Bone Generate Generate Bone Bone
Spirte Skeleton placing and and Edit and Edit placement placement
Design sprite mesh weight map of default
hierarchy of
pose keyframes
Flowchart: Character Animation Workflow - Sprite Rigging Evaluation
Evaluation of Research - Processes
In summary, I believe that I have effectively carried out a thorough research on the processes
involved in the production of my project. These researches are done one by one, before I experiment,
prototype and use each processes themselves to ensure that I have sufficient knowledge of the
processes whilst producing. This workflow has been very effective in ensuring my skill level and
knowledge of the techniques are up-to-date and adequate. Not all of the included processes are
used for the final production, but their research allowed me to have a wider and more profound
understanding of the industry whilst enhancing my skill level.
Multimedia Major Project - HSC The Game - 32509975 21
TECHNOLOGIES
Softwares - Game Engines
The most important piece of software when it comes to game making is definitely game engines.
There are many options for me to choose from, ranging from the most beginner friendly (drag and
drop engines) to the extremely technical (coding your own engine). I decided to look into three
of the most popular engines for game development: Unity, Buildbox and Game Maker Studio.
Buildbox
Buildbox is a drag and drop game engine that allows anyone to build a
fully functional game on multiple platforms without any knowledge of the
technical aspects of game making and coding. Buildbox is used to make
“hyper-casual” games that are topping the App Store and Google Play
charts including Color Switch and The Line Zen.
Pros Cons
• Easy to learn and master • Incredibly expensive
• Great tutorials and online supporting • Limited versatility (can only be used to
community make certain kinds of games)
• Multiple platform export
• Drag and drop editor
• Has many game templates
• Fast workflow and development process
Evaluation of Buildbox Evaluation
Buildbox is a great game engine for simplistic games that mainly target mobile users. The engine
is beginner-friendly, therefore it is a solid starting point for developers with less experience with
coding and other complex processes of game making. However, it comes with a high cost and a
limit in terms of customisation and personalisation, which heavily hinders creativity.
Game Maker Studio
Game Maker Studio is a game engine that mainly targets 2D game
makers. The engine uses its own programing language, GML, as the
main programing language. It is used to make famous 2D titles including
Hyper Light Drifter, Hotline Miami.
Pros Cons can
• Easy to learn and master • Limited support for developers
• Multiple platform export • Lack of official tutorials
• Built-in pixel-perfect 2D collisions • Exporting to multiple platform
• Made mainly for 2D game developments
cause extra.
but supports 3D
22
Evaluation Evaluation of Game Maker Studio
Game Maker Studio lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus, velit nec
feugiat dapibus, orci massa tincidunt dolor, vel venenatis ligula ex sit amet lectus. Ut ullamcorper
tortor vel odio dignissim porta. Nam placerat risus enim, ac ornare felis ornare rhoncus.
Unity 3D
Unity is a modern game engine capable of making 2D and 3D games.
Unity is a well-known engine. The engine is being used widely by
professional game developing companies as well as independent
developers. The Unity version for personal and educational uses is free
of charge and includes most of its features.
Pros Cons
• Popular game making engine • Not specifically built for
• Well-documented
• Abundance of online tutorials, official and unofficial 2D games
• Large active supporting community • Can be hard to master
• Dedicated support team that responds quickly and • Visual scripting tools
effectively are not built in, but can
• Free for educational/ personal uses be purchased
• Asset store that include a wide range of free and paid
asset
• Multiple platform export
• Supports new virtual reality technologies (AR, VR)
• Introduces new elements and bug fixes regularly
Evaluation of Unity Evaluation
Despite not being built specifically to make 2D games, Unity3D can be used to professionally
compose a 2D game due to its versatility, functionality and abundance of educational and
technological support. Moreover, working on a 2D game in a 3D environment can enable a
range of possibilities in terms of lighting, environmental constructing and game designing.
Selection and Justification Evaluation
Evaluation of Software Research - Game Engines
Unity3D was my prefered game engine all along because I have had some experiences working
with it. However, in an effort to find an engine that best suits the intention of the project, I
researched into Unity’s competitors on the 2D market and discovered that they all have their own
advantages and disadvantages. The research provided me with a valuable amount of knowledge
about game engines and confidence in my selection of the most important software in the project.
Ultimately, I can further understand the reason why Unity3D has been and will be developed
to become one of the best game engines on the market, espescially for 2D game development.
Therefore, Unity3D is my selected game engine for the production of my project.
Multimedia Major Project - HSC The Game - 32509975 23
Softwares - Developing Tools (IDE)
The exploration and selection of IDE (Intergrated Development Environment) is done after the
game engine is selected. The following two IDEs are chosen to be researched and explored
because the chosen game engine is Unity and they are the only options that Unity provides. The
selection of IDE is just as important as selecting the game engine itself. A good IDE can massively
increase the speed and quality of the production process.
Visual Studio Monodevelop
Pros • Clean and effective GUI • Built-in in Unity3D
• Supports C# and Mono framework • Simple GUI
• Responsive syntax highlighter and auto- • Low storage space requirements
complete system • Supports C# and Mono framework
• Helpful and active support community • Specifically made to support
• Supported and recommended by Unity3D
Unity3D 2018 onwards
Cons • Consumes a lot of storage space • Lack of support community
• Requires Xcode • Lack of syntax highlighting
preference configuration
Selection and Justification Visual studio is selected because it has a wider range of features
and community support. Furthermore, I personally prefer working with Visual Studio because of
its GUI and colour schemes, as well as its syntax highlighting and auto-complete system.
Softwares - 2D Graphics
Two-dimentional graphic design and illustration is a vast world that includes a variety of tools
and softwares for different purposes. There are generally two types of graphic design softwares:
raster/pixel-focused image manipulating softwares and vector/object-oriented softwares.
RASTER IMAGE MANIPULATION
Adobe Photoshop CC 2019
Adobe Photoshop has been the default choice when it comes to image
manipulation due to its versitile and effective workflow.
Pros Cons
• Advanced filters and photographic effects • High cost
• Layers and blending • Can be hard to
• Variety of drawing, colouring and sketching tools master
• Colour management (swatches)
• Synergy with other Adobe softwares (Illustrator, Indesign)
through Adobe Cloud
• Easy cel-based animation
Evaluation of Adobe Photoshop Evaluation
Photoshop remains to be the ultimate tool for manipulating raster images. Alternatives programs
need to be explored and researched in order to find the most suitable software for the project.
24
GIMP
GIMP is an open-source image editing application. GIMP is offered for free
but is fitted with professional quality tools and features. GIMP is often known
as THE alternative to Adobe Photoshop because of the capable set of features
that it provides.
Pros Cons
• Completely free of charge • Less active supporting / tutoring
• Open-source, meaning it can be community
manipulated to achieve a custom effect • Lack of some high-end features
(extensible)
• Set of tools and features that can
compete with Photoshop’s toolkit.
Evaluation of GIMP Evaluation
GIMP is a serious contender to Adobe Photoshop in the fields of image manipulation, considering
it is open-sourced and completely free of charge. However, various factors, including those that
relates to personal reference and workflow efficiency need to be considered before selecting
GIMP as the main image editing software for the project.
VECTOR GRAPHICS
Inkscape
Inkscape is an open source vector graphics application available for all
major operating systems. Inkscape is a very capable piece of software that
can compete with big names in the current market like CorelDraw or Adobe
Illustrator.
Pros Cons
• Completely free of charge • Lack of CMYK colour format support
• Less CPU demands, lightweight • Instability, or vulnerability to bugs and glitches
• UI intuitiveness • Employment - Inkscape designing skills are
• Versitility, suitable for a variety generally not as desirable as skills in other
of purposes programs when it comes to employment
Evaluation Evaluation of Inkscape
Inkscape is suitable for aspiring designers who want to obtain designing skills and experience
without having to pay a lot of yearly subscription fees, or at all. Inkscape is also suitable for
designers with low-end hardwares and computer specifications, because it is easier on the CPU.
However, Inkscape is not as capable as other programs of the same category and it is not very
suitable for designing printed documents. Therefore, it is not very likely that I will use Inkscape in
my project.
CorelDraw Graphics Suite
CorelDraw is a vector graphics application by the Corel Corporation. CorelDraw
is less widely known than other vector graphics programs but it is considered to
be a very effective and professional vector graphics program.
Multimedia Major Project - HSC The Game - 32509975 25
Pros Cons
• One-off cost, benefits long-time users • High inital cost
• Variety of tools and features, including • Difficulties working with industry
HSB, RGB, CMYK colour format support standard formats (Adobe Illustrator
• Generally prefered by printing shops *.ai)
because of its large canvas size • Has a smaller user base, therefore
• Available on Windows and MacOS less tutorials, documentations and
community support
Evaluation Evaluation of CorelDraw
CorelDraw is suitable for designers working primarily in the printing industry. I personally am
experienced with CorelDraw, but considering the price, compatibility and capabilities of the
software, it is better that I consider using other programs for my project.
Adobe Illustrator CC 2019
Widely considered to be the gold standard for vector graphics, Adobe Illustrator
is currently the most popular vector graphics software in the market. Developed
by Adobe, it is used by the overwhelming majority of studios, agencies, and
professional designers.
Pros Cons
• Employment opportunities: Skills in • High monthly/yearly cost
Adobe Illustrator is very valuable for a • High hardware requirements
job in the industry
• Updates and developments: Adobe
leads the industry in graphic design,
therefore the software is frequently
updated with cutting edge technologies
• Synergy with other Adobe programs
(swatches, Adobe CC)
• Available on Windows and MacOS
Evaluation of Adobe Illustrator Evaluation
Adobe Illustrator is a well rounded program which deserves its place as the industry standard
vector graphics editor. Adobe Illustrator is both beginner friendly and professionally capable,
making the best software for all graphic designers regardless of skill level. The program can be
used to produce many elements involved in the production and documentation as well as artistic
exploration of the project.
Selection and Justification Evaluation
Evaluation of Software Research - 2D Graphics
Despite the wide range of 2D graphics softwares researched, Adobe Softwares (Illustrator for
vectors and Photoshop for raster) are still the Go-To softwares for 2D graphics manipulation. I
selected these two softwares for the production of my project because their major downside, which
is the annual subscription cost, is eliminated by NESA and their scheme of providing students with
Adobe CC subscriptions every year via OnTheHub; and they are favourable in other aspects.
26
Softwares - Website Development
SCRIPTING TOOLS
The importance of scripting tools during the process of website development is not really substantial
because the website development process itself is not as complicated as game development.
However, a good choice of scripting tool can still give the production of the website a massive
boost in terms of quality and speed. I did not look into a wide range of tools because this
particular selection has little effect on the project. The two softwares researched were chosen
based on personal preference and experience.
Sublime Text 3 Adobe Dreamweaver CC 2019
Clean and effective GUI Professional tool for website development
Capable of scripting in a variety of In-app website preview
Pros languages Visual adjustments of elements
Effective syntax highlighter Beginner-friendly
Less CPU and RAM requirements
Cons Have to rely on a web browser for High CPU and RAM requirements
preview Not preferenced personally
Selection and Justification Sublime Text is chosen as the scripting tool for website development
because it is easier on the limited processing power and storage I have on my personal laptop.
Moreover, I am more comfortable with using Sublime Text due to its minimal design and previous
personal experience with the software.
DEVELOPMENT ENVIRONMENT
Although most of the time, a web browser is adequate for the debugging and previewing of the
website, some of the more advanced dynamic elements of website development require the use
of a development environment. Again, since the development of the website is not a complicated
process, the choice of software does not carry a lot of weight. The two softwares chosen to be
researched are the two most popular web development environment on the market.
XAMPP MAMP
Pros • Cross-platform, available for all • Supports PHP, Perl, Filezilla (FTP),
major OS mySQL
• Supports PHP, Perl, Filezilla (FTP), • Lightweight
mySQL • Local update of content
• Local update of content
Cons • Requires more storage space • Targets macOS only
• Not specifically designed for macOS
Selection and Justification The chosen environment is MAMP due to its compatibility with my
operating system (macOS), versitility and low hardware requirements.
Evaluation
Evaluation of Software Research - Website Development
The intended website development process of the project is relatively simple. Factors including my
personal skill level in scripting (HTML, CSS, jQuery or Javascript) and the hardware allowance
for website development are thoroughly considered in order to select the softwares used for
coding, previewing and debugging the website.
Multimedia Major Project - HSC The Game - 32509975 27
Softwares - Documentation and Management
Software Description Pros Cons
Google Docs A cloud-based document
- Cloud-based storage - Inserted images and
editing program developed (via Google Drive) graphic components
by Google and supported - Version management are compressed and
by other Google services. - Cross-platform cannot be reaccessed.
Evernote A software designed by - Supports cloud - Limited text
Evernote coporation for note syncing and storage formatting tools
taking, organising, archiving - Cross-platform
and managing. Features (document
scanner, image editor)
- Preserves graphics
quality.
Adobe Indesign A professional software - Industry standard for - High cost
developed by Adobe that printed documents
allows users to design, - Synergy with other
edit, manage and export Adobe softwares
interactive or printed - Wide range of
documents. professional features
Canva Canva is a simplified - Quick and easy to - Limited user control
graphic-design tool website, use over components and
that uses a drag-and-drop - Offers templates and their properties
format and allows the user modular designs
to quickly and efficiently - Wide range of
create professionally features
designed documents.
Selection and Justification I used a combination of Adobe Indesign, Google Docs and Evernote
for the documentation and management of my folio content because I wanted to use the most
suitable features of each software. Google Docs is used to archive and manage all of the textual
contents of the Folio whilst Evernote is used to store all photos, screenshots, scanned documents
and other graphics elements. Indesign is used as the main software for folio compilation due to
its advantages over its alternatives (Canva).
Softwares - Pixel Arts
Software Pros Cons
Piskel Specifically designed to make pixel art Lack of tools in toolkit
Easy cel-based animation Simplistic layering system
Light, fast and efficient
Free to use
28
Adobe Advanced filters and photographic effects High cost
Photoshop CC Layers and blending Not specifically designed to
Colour management make pixel art
Aseprite Synergy with other Adobe softwares
(Illustrator, Indesign) through Adobe Cloud Is not free to use (US$15)
Easy cel-based animation
Specifically designed to make pixel art
Easy cel-based animation
Simple yet effective layering system
Selection and Justification I ended up using piskel for all of my pixel art assets because it is
a very simple yet effective piece of software. Also, Piskel is available for free and requires little
to no hardware configurations. Moreover, pixel art creation and animation has a very specific
workflow that only softwares specifically made for pixel art like Piskel and Aseprite can have.
However, Aseprite is not chosen due to personal preference and the price of the software.
Hardwares
Producing games and websites only require a PC or laptop
that satisfies the requirements of selected softwares.
However, as a game developer and web designer, I
should research about the specifications of my own device
in order to better utilise it for coding, game designing
and game publishing purposes, enhancing my workflow.
Below is the detailed specifications of my device, which is a 2015 Macbook Pro.
Retina, 13-inch display
The retina display really helps me in designing the game environment as it allows the screen to
display the true colours of the material itself which enables me to view my designs with the same
conditions as most high-end devices such as iPhones and Macbooks.
2.7 GHz Intel Core i5 processor
The processor is not the most efficient processor available in the hardware market but its processing
power is more than enough to run the required softwares listed in the next section.
8 GB RAM
Again, not the most impressive piece of hardware available, but still powerful enough to handle
the game making task as it matches the recommended specifications of all required softwares.
Intel Iris Graphics 6100 1536MB
The graphic cards complements the retina display to produce realistic colours while ensuring
every game object and visual component is being rendered smoothly.
121GB flash drive
The low storage feels uncomfortable at first, but after optimizing the storage system by removing
unnecessary files, I was able to fit all the required softwares onto the drive and reserve more than
30GB of empty drive for the project itself.
Selection and Justification The configurations of my current device satisfies all of the selected
softwares’ recommended configurations. Therefore I will continue to use my laptop as the main
piece of hardware to produce all components of the project.
Multimedia Major Project - HSC The Game - 32509975 29
Selection &
Justification
Ai Selection and Justification
02.08.18
30
Resources and Materials Selection and Justification
All resources and materials selected for the production of the project and the justification for their
selection can be found in the Research section, highlighted with the Selection and Justification
icon (similar to the one on the right).
Processes
Apart from the selected and justified processes in Research indicated by Selection and Justification
icons, these are the choices I made regarding processes and their justification:
2D Graphics
Purpose Graphic type Justification
Logo Vector The logo needs to be scaled to different sizes and ratio
and used for different media (printed, website, game),
therefore it needs to be in vector to retain quality at
different resolutions and surface/screens.
Business cards Vector Ensure quality and accuracy in size of printed cards.
Character Vector and Vector graphics enable me to design and alter the shape
design (opening Raster and sizes, as well as colours of separate components of
and ending the character easily. By exporting from vector to raster
sequence) and performing further manipulation, I was able to gain
access to a variety of different filters and effects that
raster graphics allow, enhancing the quality of design.
Website Design Vector The layout of my website is designed using vector format
because it allows me to easily adjust the colour, shape
and sizes of all components, which is a crucial process in
experimenting and adjusting designs of websites.
Pixel Arts Raster The pixel art art form is based on pixels, so the
(Character and appropriate format of graphics used is raster. Vector
Environment) graphics can be used but the process is way more tedious
and redundant whilst offering no benefits compared to
raster graphics.
Game Assets Raster Most game-making assets are exported in lossless
PNG raster file type because the selected game engine
(Unity3D) is more compatible with raster images. All
vector graphics are converted into raster automatically
by the game engine, so it is better that I control the
conversion process myself and reduce the loss of quality
through compression and conversion.
2D Animation
Purpose Type Justification
Simpler to implement and more suitable for the purpose
Logo (Splash screen) Cel-based
Multimedia Major Project - HSC The Game - 32509975 31
Character (Opening Sprite Allows for a wider range of motion and controls.
and Ending rigging More suitable to the art style (smooth and realistic).
sequence)
Character (Pixel Art) Cel-based Compatibility with art style (pixel art).
Provide more controls over complex animations which
contributes to the majority of the game’s gameplay.
Technology - Softwares and Hardwares
The selected Softwares and Harwares are identified and justified in Research - Technology. Their
selection and justification is also marked with the Selection and Justification tag.
Selection and Acknowledgement of External Components
Audio
Sample name License Uses and Justification
Spooky wind howl CC0 1.0 (no copyright) This sound is selected to be used as ambience
for the opening and closing sequences. The
sound simulates howling winds on high cliffs.
Got Item sound CC0 1.0 (no copyright) Short, upbeat and ambiguous sounds selected
Successful sound CC0 1.0 (no copyright) and used to signal the pick up of collectible
objects.
Gameover sound CC0 1.0 (no copyright) Short and ambiguous sound selected to signal
the death and respawn of the player.
Light calm wind CC0 1.0 (no copyright) An ambient loop that has a lower tone, to
be used as ambience in levels with enclosed
environments to simulate the feeling of being in
a cave/enclosed area.
Fonts Type Licence Uses and Justification
Sans serif Personal use Used for most of the folio due to its futuristic
Font and minimal look as well as legibility.
Futura Sans serif Personal use Used for section breaks and headers because
Hikou the font works well in large font sizes.
Tuna Serif Personal use The only serif font in the project, used for Text
Adventure to create a traditional book-like
Roboto Sans serif Commercial use feel and subheadings to compliment san-serif
04b03 Monospace Commercial use fonts.
A clean and versitile typeface used in logo
design and subheadings.
A carefully crafted type face used to
accompany the pixel art art style of the game.
32
Adobe Serif Personal use Explored as an alternative to Tuna, but not
Caslon used because it does not work well in large
Decorative Personal use sizes.
GOGOIA A decorative font used for the title page of
the folio, provides variety to the title page
input Monospace Personal use design’s font styles.
mono A modern monospace typeface used
to showcase scripts and codes from the
production of the project.
All of the external resources and components used are carefully selected and acknowledged to
avoid breaching Copyright Laws and Regulations whilst having the most appropriate resources
for the production of the project.
Evaluation
Evaluation of Seletion and Justification
Overall, the Selection and Justification process is an important process that ensures the
appropriateness and suitablity of each reseached materials, resources, processes and technologies.
Through this process I was able to critically analyse the advantages and disadvantages of each
components and apply my knowledge of a wide range of techniques into the production of my
project.
Moreover, the selection and consideration of external elements in the project is documented. The
external elements are evaluated and acknowledged to ensure the proper and appropriate use
of materials and prevent breaching Copyright Laws and Regulations, ensuring the validity of the
project.
Multimedia Major Project - HSC The Game - 32509975 33
DEVELOPMENT
OF IDEAS
Ai Development of Ideas
24.05.19
34
Artistic Exploration
In the process of finding the right art direction for the whole project, I experimented with, assessed
and evaluated a range of artistic styles I find suitable for the project’s intent. Through this process
I was able to further develop my ideas and visions for the project and ultimately designed and
formulated an art style for the game, website and folio documentation. The explored styles
include: Low Poly (2D), Minimal and Flat Designs (2D), Pixel Arts (2D) and Voxel Arts (3D). The
styles are assessed and evaluated in the table below.
Style Description Pros Cons Uses
Low Poly
2D Low poly is a 2D Clean and modern Not suitable for Low poly 2D
Minimal
and Flat graphics style where look. animated objects. is used in the
Pixel Art complex objects, A simple way to The process is illustration of still
often captured in 3D artistically convert highly repetitive and/or printed
space, is rendered photo-realisitic and time objects throughout
into uniformly filled raster images into consuming. the project.
polygons to create a scalable vector
simplified look and images.
feel to the objects.
An emerging digital Clean and modern Not suitable for This design
arts movmement look. animated objects. philosophy is used
where redundant Simple yet more Requires extensive in muliple stages
elements of designs effective than experience and the production,
are substracted other artistic knowledge about including the
from the design to styles. designs and visual composition of
create a minimalistic Is a widely arts. the opening and
design that gets the researched and closing scenes of
most uses out of a used design the game, folio
few design elements philosophy. design, website
(fill, negative space, design and logo
stroke) design.
The composition of Nostalgic: has a Can be time- Pixel art is used for
objects from a very retro look and feel consuming to most of the game’s
small number of pixels Suitable for cel- draw on a larger content because
(common resolutions based animation canvas. the art style is
include 16x16px, Popular in games Limitations suitable to the
32x32px, 64x64px, Allows the in terms of game mechanics.
128x128px) designer to make special effects
very detailed and possibilities.
specific changes to
the design.
Multimedia Major Project - HSC The Game - 32509975 35
Voxel Art Voxels are Volumetric Is a 3D technique The style and This artistic style
pixels composed that can be processes is not used for the
into a 3D mesh that rendered into 2D involved is production of the
provides the same arts and graphics. underdeveloped. project due to the
nostalgic look as feel Allows for Modelling takes fact that it does
as Pixel Art in a 3D complex lighting a lot of time and not fit into the rest
environment and shadow effort. of the project’s art
rendering, as well styles and designs.
as other 3D-based
effects.
Storyboarding (Story - Content Design)
This is the final version of the storyboard for the game. Elements such as scene transitions and
sound effects are also designed and included in this storyboard. Production
The story behind the game is intended to be told indirectly using graphical and mechanical
elements (signs, sounds, enemies). However, in the final version of the game, I included explicit
storytelling elements in the form of instructions and texts because after playtesting, I find the story
to be confusing and ambiguous. During this process, I made many modifications to balance the
36
amount of textual elements in the game because I wanted the game to be easily understood while
being ambiguous enough that everyone can relate to it.
Evaluation The final product ended up being very similar to the planned storyboard. This
is due to my attention to detail and clear vision of game mechanics and artistic direction. The
process of storyboarding has definitely helped me in my game production because it provides a
clear and cohesive structure to the game and its progression.
Character Design Production
Early sketches - Orthographic and Perspective
Initial sketches
The main character of the game is
first designed and sketched as hand-
drawn concept arts.
Design decisions are made during
this stage of design, including the
method of projection used to portray
the character (orthographic - left or
perspective - right) or the general
shape of the character.
Designing the character’s head Planning leg placement and animation of the walk cycle
and orthographic projection ratio
Once general designs choices are made, I began making the specific sketches of the character
to take factors like size, shape, ratio and animation into account. The two sketches on the right
illustrates the design process of the character’s head and walk cycle animation. These sketches
are invaluable in the later stages of character design because they provide a set of design criteria
and considerations which immensely helped me in the process of digitalising the character.
Multimedia Major Project - HSC The Game - 32509975 37
Versions and Evolution
After Initial design and modifications, the character is illustrated in selected graphics editing
programs to produce a digital and animatable version.
Throughout the production of the project, the character has evolved from being a very primitive
design consisting of simple shapes and colours to a sophisticated design with details and colour
tones that fit into the overall theme of the game. Different versions of the character is displayed
below in chronological order to showcase the progression of my character design.
Production
1. First Version 2. More detailed 3. Redesigned
6. Final animation-
ready version
4. Converted into Vector 5. More details and
added textured stroke
Animation Production
After the character design is finalised, the artworks are exported into a texture file where the
moving components of the character are separated for animation. It is important to separate the
moving elements because the sprite will be imported into Unity3D and rigged into an animatable
2D sprite rig.The process of preparing the character for animation can be summaried into different
steps:
Separate moving Generate Spirte Mesh Generate and adjust Putting bones together
elements and export and Creating a skeleton bone weight map into a complete skeleton
38
The sprite mesh the the weight map determines the moving parts of the sprite and the effects of
each bone on each part. This rigged skeleton is then animated using Unity3D’s animation timeline.
Production
Each bone and their attached parts of the sprite is moved and rotated to their position in each
keyframe, creating a run animation for the character.
This rig and animation is only intended to be the prototype to explore the possibilities of Unity3D
animations. However, they eventually became a part of the final version of the game.
Pixelation and Re-animation Production
From the design of the character, I also
created a pixel art version of the character
to be used in the game. This character
design is created on a 64x64 px art board
using Piskel. The process of creating this
pixel art character is fairly simple because
the elements and details of the character is
already established. The 64x64 artboard is
selected instead of smaller and more common
artboards because I wanted the character to
have a higher level of detail and polish.
The character is then animated at 12 FPS Run animation Idle animation
in Piskel using cel-based animation. The cel spritesheet spritesheet
animation method allowed me to have more
freedom in illustrating the motion of various
elements of the character compared to sprite
rigging. Frames are then exported as a single
texture file (a spritesheet) and imported into
Unity3D to animate the character.
Multimedia Major Project - HSC The Game - 32509975 39
Earth Studios
Logo and Branding
In addition to the game and website, I intend to create a brand for the game studio that I release
my game under. The name of the studio is initially #FF0000 STUDIOS (pronounced Red Studios).
The #FF0000 studios logo is then explored and designed in a vector format using Adobe Illustrator.
I wanted the logo to have a minimal design that uses negative space and typography to express
the minimalist values of the studio.
The initial Sketches of the Logo exploring different Final version of logo in
arrangements and compositions of elements Vector format
However, through further research and development, I decided to change the name of the studio
into Earth Studio, because I believe that this name better reflect my values and visions for the
project. The logo of Earth Studios is based the development of game character design, and the
character is used as the brand of the studio itself. In my opinion, this design is more effective than
the #FF0000 logo design because it is more iconic and memorable whilst still being relatively
simple with minimal structures and colours.
The logo also works in different colour schemes and backgrounds: Production
40
Business Cards
Using Adobe Illustrator, I also created a business card design to
complete the branding of my game studio. The business card design is
also minimal with a seamlessly repeated pattern on one side and my
basic contacts and the studio logo on the other.
The design is exported to a Recycled Paper business card Mock-Up for
preview before printing, as seen on the right.
Website Development Production
The layout of the website is first designed on paper, and converted into a vector graphics document
from which elements can be exported and used for the actual website production.
This workflow of wire frame planning to digital design in vector format is very efficient in turning
my vision of the website into the actual working website with HTML and CSS. The two designs
helped me immensely during my implementation of the website by prodiving guidelines to the
website’s hierarchy and layouts, enhancing the efficiency of my website production process.
Multimedia Major Project - HSC The Game - 32509975 41
Game Designs
World and Game Environment Design
Before designing the environment of the game, I selected
a set of colours I can use in the production of the game
and other elements of the project, ensuring the consistency
of the project.
These colours are selected based on their suitability with
the environment and atmosphere I intend to create. HSV
values are then altered for different colour variations.
The environment of the opening and closing area of the project is based on a few concept
artworks that I produced in the exploration of art styles. (found on title pages of Development of
Ideas and Project Management).
For the pixel art segment, I designed and created a set of seemlessly repeatabe tiles that allows
me to quickly generate walls, platforms and other graphical components of the game environment
inside the game engine. Production
The Inital Tile Map design (left) and the improved design (right) with outlines and brick patterns
Game Mechanics Design Production
Various game mechanics are designed, implemented, tested and modified in the production of the
game. Below is the summary table of explored game mechanics:
Mechanic Use Implementation
Checkpoints Death and Translate the player to the checkpoint instead of
Respawn reinstantiating to preserve current values
Movement Platforming Instantly changes the horizontal speed of the character
on input to create a snappy feel
42
Enemies Platforming and Enemies follow a predefined procedure of patrolling the
Behaviour Puzzles platforms that they are on and standing at the edge of
the platforms.
Colour fade on Platforming and Apply a global colour grading post process volume and
change the weight of the volume on death via code.
death Puzzles Destroying the collectible game object on player
collision enter.
Collectibles Platforming and In the cinematic sequences, camera smoothly follows the
character movement. In the pixel art sequences, camera
Puzzles pans from one screen to another when player reaches a
checkpoint.
Camera The whole game
Level Design Production
After all of the game mechanics are implemented,
tested and finalised, I began designing puzzles
and screen-based levels live inside Unity. With the
tile map system implemented, it is more efficient
to design levels directly inside the game engine
because the levels can then be tested immediately.
Upon playing the game, the player encounters
the introductory levels first. The difficulty of the
game then gradually increases towards the end
of the game, with each puzzle requiring patience,
trial-and-error, platforming controls and problem
solving skills.
The gradually increasing difficulty allows the
player to be used to the controls and movements
of the game before involving problem solving
skills. I find his type of progression to be more
effective in creating levels for the game.
Evaluation Development of Ideas
This is arguably the biggest task of the project,
where the whole project’s art direction, style and
technical factors are experimented with, evaluated Level Designs with increasing difficulty
and selected for final production. In my opinion,
this process is not as fulfilling as I expected it to be
because I constantly find myself wanting to skip the process and move on to other components of
the project, which indicates that this part of production can use more optimisation and management
to be effective.
Multimedia Major Project - HSC The Game - 32509975 43
PROJECT
MANAGEMENT
Timeplan Finance Plan Management
Ps Ai
27.04.19
44 Project Management
FINANCE PLAN
Game development is not a finacially demanding task, especially in small-scale independent
projects. A major portion of the project’s cost comes from software licence fees and hardware
(laptop), which are either preowned or provided by NSW Education Standards Authority. As a
result, the total cost of the project is very low.
Description Proposed Cost Actual Cost Provider
Adobe Creative Cloud (all apps) AU$871.07 AU$0 NESA via OnTheHub
Macbook Pro 2015 AU$0 AU$0 Preowned
Printing and Binding (folio) AU$50 AU$70 Snap Printing
Optical Mouse AU$5 AU$0 Preowned
Website Hosting + Domain AU$50 AU$46.77 Hostinger
Total AU$976.07 $116.77
Evaluation Evaluation of finance plan: Due to the non-demanding nature of game and
website development, I was able to foresee and effectively manage the finances of my major
project. The actual cost turned out to be much lower than the proposed cost of the project.
However, I underestimated the cost of printing my folio, which unexpectedly increases the amount
of money spent during the later stages of my project, affecting the project’s progress.
Management
I managed the progress of each tasks of the
project with a Google Sheets document. The
amount of pages that each section of the folio
takes is also managed in the same document.
Using conditional formatting(1) and simple
summation functions(2), I was able to effectively
manage the progress of the project as well
as its documentation. Through this method of
management, I believe that I have demonstrated
adequate skill levels in managing a project using
technology and proficiency in industry-standard
softwares such as Google Sheets or Microsoft
Excel.
(1) I used conditional formatting to colour-code my folio sections in
relation to their progress, as seen on the left.
(2) I used Google Sheet’s simple summation function to estimate the
average total amount of
page in my folio, so that I
can keep track of the folio’s
length and adjust the amount of content accordingly.
Multimedia Major Project - HSC The Game - 32509975 45
46 PROposed TIMEPLAN
Term 4 2018 Holidays Term 1 2019 Term 2 2019
1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 1 2 3 4 5 6 7 8 9 10 11 1 2 1 2 3 4 5 6 7 8 9 10 1 2
Documentation (Folio) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Statement of Intent aa
Management Time plan aaa a
Finance plan aaa a
Resources aaa
Research Materials aaa aa
Processes aaa
Technologies aaa aa a
Selection & Justification a
Brainstorming aaa
Development of ideas Prototyping aaa
Sketching aaa
Game design aaa
Character design aaa
Gameplay aaa
Mood design aaaaa
Game Production Environment aaa aa
Level design aaa
Testing & Modifications aa
Post-processing aa
Optimising aa
Exporting aaa
Design aa
Website Production Develop aa a
Twinery aa
Polishing and Publishing aaaa
WHS documentation aaa a aa
Evaluation aaa a aa
Evaluation Evaluation of Proposed Timeplan - I wanted to finish the project before Term 3 of 2019 because I don’t want Trials and other
examimations to affect my production. The proposed timeplan is therefore created with the intention of finishing by the beginning of Term 3. The
timeplan is relatively linear and straightforward with tasks being planned to complete in a defined order, with Research, WHS and Evaluation
tasks being conduced before major production tasks to keep my knowledge of the factors and components up-to-date while I produce various
elements of the project.
actual TIMEPLAN
Term 4 2018 Holidays Term 1 2019 Term 2 2019
1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 1 2 3 4 5 6 7 8 9 10 11 1 2 1 2 3 4 5 6 7 8 9 10 1 2
Documentation (Folio) aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Statement of Intent aa aa
Management Time plan aa aa
Finance plan aa aa
Resources aaaaaa
Research Materials aa
Processes
Multimedia Major Project - HSC The Game - 32509975 aaaa aaaaa
Technologies aaaa aaaaa
Selection & Justification a a aa
Brainstorming aa
Development of ideas Prototyping aaaa
Sketching aaaa
Game design aaaaaaaa aa
Character design aaa a
Gameplay aaa aaaaa
Mood design aaaaaa
Game Production Environment aaaaaa aa
Level design
aaaaa
Testing & Modifications aaaaaa aaaaaa
Post-processing aa aa
Optimising a
Exporting a
Design a a a a a aa
Website Production Develop a a a a a aa aa
Twine aa aa
Polishing and Publishing aaaa
WHS documentation aa a aa a aa
Evaluation aa a aa a aa
47 Evaluation Evaluation of Actual Timeplan and Time Management - The Actual Timeplan is quite different compared to the Proposed
Timeplan due to unforeseen events and set-backs including examination periods of other subjects, redesign of the game and unexpected
complexities of some tasks (for instance, design and development of website and Text Adventure). Overall, I believe that I have effectively
managed the progress of the project to finish the project on time, which demonstrates my ability to manage production and adapt to different
working conditions and time constraints. I was also able to maximise my productivity during breaks and holidays periods, which massively
boosts the speed of my workflow and help me finish the project on time.
EVIDENCE OF
Production
Problems and
solutions
Ps
11.12.18
48 Production: Problems and Solutions
The Evidence of Production and problem solving in the previous sections are Production
highlighted with the “Production” tag similar to the one on the right. More
complex problems and solutions are documented in this section.
Problem #1: Platformer Physics
Physics system of platforming game is notoriously unrealistic. Therefore, when working with a
physics-based engine like Unity3D, which is designed with an integrated physics system capable
of simulating realistic physics and motions, I often find myself working against the engine’s physics
system. These workarounds are implemented to manually and precisely control the movement of
the game character, allowing me to have more control over the movement and interactions of
players in the game.
Defining Gravity
Using current background in Mathematics and Calculus combined with further research on the
topic, I designed mathematical and physical models that regulates the movements and behaviours
of game objects. These models can act as a starting point for system designs and the implementation
of various game mechanics.
Above is the parabolic expression of the player’s jump and the working out of the game’s
gravity and jump velocity to achieve a designed jump movement. By using the basic principles of
acceleration, velocity and displacement, I was able to change the variables of movement from the
abstract and hard to visualise variables (mass, gravity, jump velocity) to the more definitive and
realistic variables that have higher design values (jump height, time taken to reach jump apex).
This mathematical model is then translated into C# functions and variables and added into the
player game object to alter the system’s gravity and the player’s gravity scale.
Multimedia Major Project - HSC The Game - 32509975 49
Raw C# For Unity Input Variables: Intuitive Values
void CalculateGravity() {
float systemGravity = Mathf.Abs(Physics2D.
gravity.y);
float targetGravity = (2 * jumpHeight) /
(timeToJumpApex * timeToJumpApex);
jumpVelocity = targetGravity * timeToJumpApex;
rb.gravityScale = targetGravity / systemGravity;
}
Output Variables: Control Physics
This funtion is called on Awake(), at the beginning of every scene to adjust the gravity to the
variables entered via Unity Editor. This allowed me to control how far and how high players can
move, which in turn massively benefits the level design process.
Defying Gravity (on Slopes)
Due to realisitc physics simulation from
Unity3D, the player tends to slide off slopes.
This is desirable in realistic games but in my
project, I wanted to have the authentic feel of
snappy and unrealistic platformer character
that only moves when the player tell them to
move.
The mathematics behind this is pretty complex
and advanced, but it is irrelevant to the
Multimedia aspects of the project, so I will not
provide further explanations to this approach.
Raw C# For Unity
//Handle Slopes
if (onGround) {
ContactPoint2D[] contacts = new ContactPoint2D[10];
ContactFilter2D filter = new ContactFilter2D();
filter.layerMask = whatIsGround;
int k = rb.GetContacts(filter, contacts);
if (k>0) {
Vector2 n = contacts[0].normal;
Vector2 t = new Vector2(n.y, -n.x).normalized;
if (n.x > 0) t = -t;
t *= rb.mass * -Physics2D.gravity.y * rb.gravityScale * Mathf.
Sin(Mathf.Deg2Rad * Vector2.Angle(n, Vector2.up));
rb.AddForce(t);
}
}
50
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Folio single - preview
Discover the best professional documents and content resources in AnyFlip Document Base.
Search