GAME DEVELOPMENT - COMPILATION
Madeline Ordelia Tjahjadi (0376920)
Bachelor of Design in Creative Media
Compilation
Table of Content
1. Lectures
2. Instruction
3. Process Work
4. Feedback
5. Reflection
1. Lectures
Week 1
We were given a brief about the module and an explanation of what programs
we will use. Ron recommended us to use PlayCanvas as the software to use,
because it's easier and he's already tried a bunch of software. The project
can be done individually or in groups; we can choose ourselves.
Week 2
This week we proposed and presented our ideation to Ron. My group and I
received feedback and revised some of it. After receiving that feedback, we
consulted with him one more time regarding our new art style direction and
how we are going to execute it.
Week 4
This week Ron taught us how to do 3D modeling in blender and how to export
it to PlayCanvas. We also ask another tutorial for 2D movement in
PlayCanvas.
Week 5
Consultation
Week 6
Consultation and we continue to finalize our assets.
Week 8
Consultation and creating assets
Week 9
Consultation and finalizing assets
Week 10
Consultation
Week 11
Still consultation
Week 12
Still consultation
Week 13
Consultation
2. Instruction
3. Process Work
During the first week of this module, Sir Ronald (who prefers to be called
Ron) briefed us on the module. Ron said that he changes the requirement
every semester so it doesn't get boring. This semester, he decided to
introduce us to a new software for creating games called PlayCanvas. Before
this, he briefed us on what tasks would be and showed us examples of
seniors' work and some games related to the theme.
The theme for this semester is mental health: "Where healing meets fun."
Ron showed us some games he has played that also revolves around the theme
of mental health. Examples include Gris, Before your eyes, Dear Esther,
Spiritfarer, and many more. This project can be done individually or in a
group. I chose to be in a group consisting of seven people:
Lee Wai Xian | 0365740
Jensen See Yong Chern | 0366322
Madeline Ordelia Tjahjadi | 0376920
Gwendalyn Firly Bong | 0374580
Jesslyn Octavia Tjong | 0374562
Khansa Raudlatus Syahiidah | 0374511
Feilycia Joy Kurniawan | 0373400
Jensen See Yong Chern | 0366322
Madeline Ordelia Tjahjadi | 0376920
Gwendalyn Firly Bong | 0374580
Jesslyn Octavia Tjong | 0374562
Khansa Raudlatus Syahiidah | 0374511
Feilycia Joy Kurniawan | 0373400
3.1 Story Development
To start with, we created documents for us to discuss easily and pour our
ideations into. Ron have us an example of a game design document that we can
refer to for a head start on what we should think about when making a game.
Below are our concepts draft:
Figure 3.1.1: Concept 1 (draft).
Figure 3.1.2: Concept 2 (draft).
For a starter, we each gave our own ideation and concept to discuss and choose
from. After several discussions, my concept and Sean's were chosen, but with a
mix of both and some revisions after discussion with others. We referred back
to the game design document and outlined what we should have in our
games.
After we finalized the story along with the progression of the game, we
consulted on our concept and it was approved. With small changes needed to
fill some blank spaces in the story, Ron suggested a lot of good feedback.
First, we need to determine our protagonist's biography so we can make our
story more relatable, especially when illustrating the environment and the
cultural differences. Since our story is about self-blame and relates back to
parenting, we need a more realistic background story. Second, we need to
adjust the ripped diary part and change it to a ring binder where pages can be
removed so the diary doesn't need to be ripped, making it more realistic for
them to be scattered around the house. After the feedback, we changed it and
discussed our art style and how to execute it. Below is our draft after
further discussion, we finalized story, items, illustration and etc:
So, basically we will have 4 areas:
Area 1: Living room
This area will focuses on the memories of her mother.
Area 2: Kitchen
Focuses on the memories of her father.
Area 3: Emily's Room
Focuses on Mei ling (Emily) struggle throughout her childhood and how she
endure it.
Area 4: Parent's Room
This area will reveal the truth behind everything that has happened.
Our game progression will be tracked by the diary pages collected, so we have
4 key areas as mentioned, in each areas, players will interact and complete
the missions to collect the diary page in that area, and players can access it
anytime in their inventory.
Figure 3.1.3: Diary Page (Key item)
The diary pages will reveal major plots and stories and the hint of the
final puzzle/mission in the final area (Parent's Room).
3.2 Design direction and Assets Creation
During our discussion, we decided to go with a 2D-HD game concept, so we want
our art style to be pixelated. At first, we wanted the point of view to be
from the side, but after further discussion, we think it is better if our POV
is from the top, so we can see the movement clearly. Below is the example:
Figure 3.2.1: Illustration reference.
Source: https://pin.it/6hxZGlZSF
Figure 3.2.2: Moodboard from pinterest for illustration.
To make pixelated art, we searched for apps to create it, we stumbled upon
Aseprite and Pixelorama (recommeded by Ron). These will help us create
pixelated assets for the game. Pixelorama is open-source and free, while
Aseprite needs to be purchased. After looking at tutorials, they definitely
serve the same purpose and are quite similar in how to use them. So, we
decided to use pixelorama.
We then proceed to make the storyboard to visualize the interface for
our game.
Figure 3.2.3: Storyboard process
After the group meeting, we decided to divide the workload. Feilycia, Sean,
and Jesslyn will work on the illustrations (basically the game's visual
assets). I will be joining the coding team and (hopefully) creating the
music. The rest of the group will also be on the coding team; however, we
will all support one another and help out across all tasks as needed.
3.2.1 Character
In week 3, we began creating assets, including the character designs and the
layout for each area. The character was the first assets completed; Sean was
in charge of the design and we used Pixelorama to create the pixelated look
for all assets. He first sketch the design character and ask AI to help
prompt the movement design to create animation.
.jpeg)
Figure 3.2.1.1: Character Sketch.
Figure 3.2.1.2: Character draft using AI to create movement.
Below are the finalized character design in pixelated art and the movement
animation:
Figure 3.2.1.3: Finalized character.
Rationale:
Mei Ling (Emily) character intentionally designed with a slightly masculine
appearance, even though she is a girl, to reflect her background. She grew
up in a very difficult family environment and endured many hardships
throughout her childhood. Since she was raised mostly by her father, she
developed more traditionally masculine traits rather than feminine
ones.
Meiling is a resilient and determined person. Although she may appear sad at
times because of the pain she experienced during her childhood, she never
lets her past define her. Despite everything she has been through, she
continues to move forward with strength and perseverance. The intention of
her character is to create a strong, independent character whose resilience
that is reflected in both her personality and appearance.
3.2.2 Room Layout
After finalizing the character, we also completed the layouts for each
area/rooms. Since the main character has a Malaysian background, we want to
evoke a "kampong" vibe. We found this resource (https://www.littledayout.com/visiting-pulau-ubins-chinese-kampong-house/) and used it as a guide.
Figure 3.2.2.1: Room design reference.
Feilycia was in charge of our sketches for room's layout and utilize AI to
help build the layout with pixelated and colored design, using our research
as a reference. This later will help us to draw it in Pixelorama as a guide.
Figure 3.2.2.2: Sketch for layout.
After creating the draft, we began to draw it out in pixelorama. There are
some changes in the layout because of some limitation in the scripts later in
the future. Below are the finalize layout for each rooms we have:
Figure 3.2.2.4: Living room.
Figure 3.2.2.5: Kitchen.
Figure 3.2.2.6: Emily's room.
Figure 3.2.2.7: Parent's room.
Some layout seems empty because the objects inside will be put separately
inside PlayCanvas since we need to make collision and interactable
things.
3.2.3 Close up scenes
Jesslyn will be in charge of drawing the other close-up items that the player
interacts with, such as the diary, album, rotan, alcohol bottles and more
(still in progress).
Living room will have photo album as the only close up scene. As for the rest
interactable things in living room will be the mugs and plate that player will
interact as a hint to go to kitchen as their next task and bookshelf clean up
to find the diary as their mission 1 to collect.
Note: Some of our assets were sketch first and then generated in AI to help
us create the pixelated effect before we trace and draw it out.
Figure 3.2.3.1: Photo album closeup assets (animated sprite).
Kitchen will have Rotan and Paper scraps (mission) as the close up
scene.
Figure 3.2.3.2: Papers scraps (Mission 2).
3.2.3.3: Rotan.
Emily's room will have 3 close up scene since this area has the most
storytelling of emily's struggle as the background story of this game.
Figure 3.2.3.4: Bear.
Figure 3.2.3.5: Crosswords (Mission 3).
Figure 3.2.3.6: Trophies.
Last area is the parent's room, this room will be the ending of this game that
reveals the truth. This area will have 2 close up scene that are connected:
pin lock and drawer open.
Figure 3.2.3.7: Pin lock (Animated sprite)
Figure 3.2.3.8: Drawer open.
All of this close up scenes, will help to deliver the story of our game better
with dialogue included inside.
3.2.4 Menu, Intro and Outro
Our homepage or menu will be the house. The one in charge of creating the
intro and outro video is Khansa, while Feilycia created the assets.
.gif)
Figure 3.2.4.1: Homepage & Intro.
Figure 3.2.4.2: Outro.
3.3 Coding
We're continuing to work on the code for our character movement and we're
using AI to help us write it as our foundation. After that we will change it
based on our needs.
Figure 3.3.1: Code progress.
To test this code, we are using placeholder AI layout since our assets aren't
finished yet. We also created walls to prevent the character from moving off
the 2d screen.
Figure 3.3.2: Trying the code.
In week 5, we continued working on our code and successfully solved the
character's movement. Now, we need to figure out how the character will move
between rooms. To achieve this, we need to place a trigger on the doors that
teleports the character to a different scene. Consequently, we have created
five different scenes dedicated to each of our rooms, including a newly added
hallway.
Figure 3.3.3: Different scene created.
Figure 3.3.4: Hallway added.
We also created a new script for scene transitions. While we successfully
managed to get the character to change scenes, their positioning after the
transition is still an issue we need to solve.
In week 6, we still exploring the coding while finalizing the assets. We
managed to fix the problem for our character position when it changes scene.
Ron helps us to create a coding to keep tracks the overall character
movement.
Figure 3.3.5: New script added in the root.
The coding team trying to start the first interactive activity which is the
bookshelf: where player will press E to clean the scattered books into the
bookshelf. We use a testing assets to indicate the changes.
Figure 3.3.6: Testing process.
We successfully make all of the interactive elements in living room area,
including changing the test assets into our final assets. We also add UI
element like "press [E]" to indicate how player can interact later.
Figure 3.3.7: Progress for interactive elements in living room.
So, now we have 3 things to interact in living room before going to the
kitchen. There will be scattered book that player will picked up.
Additionally, we have added a special book to interact with the photo album
close up. Lastly the mugs and plate that player need to picked up to bring
to kitchen.
Figure 3.3.8: Final look for living room (Week 14).
In week 9, we continue to make all the interaction in kitchen area to work.
So far, we implement the same pick up books in living room area to our pick
up bottle, for the interaction/mission in kitchen area. Additionally, we
also create scene for the interactive object, so when player interact with
the object it will show the close up UI screen. To achieve this, we decided
to change scene when we interact, since the pop up UI screen will be full
screen anyway.
Figure 3.3.8: Process for interactive elements in kitchen.
However, we still have a problem with the 'E' prompt for each of the bottles
that we need to pick up. That is the something that we want to consult for
next week.
In week 10, we consult about the problem and Ron figure out how to do it.
Basically, instead of having one new entity consist of the prompt, We can
just immediately put it inside each of the object (the prompt). Later in the
script we can called the prompt inside the object.
We also figure about our layout problem, we initially put our image of the
background on a screen, when we can just put it outside in the root. So,
after we figure that out, we pull it out from the screen UI component, and
ended up need to arrange everything again from the start. But, if we manage
to do it, it will be easier for us in the future to arrange our
sprites.
Figure 3.3.9: Layout after changing camera.
As you can see in Figure 3.3.9, after we change the camera to orthographic,
we manage to make all of the asset sticks to the image instead of flying in
front of the image.
In week 10, we aim to finish the kitchen and living room area, because once
we finish with this area, the logic for the other rooms are basically the
same. We are trying to finish the main activity/mission in the game and
additional things like close up scene, blocking the layout and adding a bit
of UI element.
Figure 3.3.10: Final look for kitchen (Week 14).
For our second mission in kitchen, we have paper scraps. Jensen and Sean are
in charge of this mission.
Figure 3.3.11: Final look for Paper Scraps (Week 14).
Next we go to another scene which is Emily room. we have 3 things to
interact which 2 close up scene and 1 mission: crosswords.
Gwen and I were in charge of building the crossword puzzle mechanic. We
wanted a highlighted box when player selects it and allow players to type
letters directly into the boxes. To make navigation smoother, players
can use the arrow keys to move between boxes. We also added color indicators
for correct and incorrect letter placements to give players hints along the
way.
Once we finalized the requirements, we used an AI tool to generate the core
script, naming it crosswordPuzzle.js. We included exposed attributes in the
script so we could easily drag and drop the UI text elements for
instructions and completion feedback.
Figure 3.3.12: Script used for crosswords.
As you can see in Figure 3.3.12, the answers were type in the code where the
cell that called are the text element we put in each boxes in UI editor in
PlayCanvas.
Figure 3.3.13: Crosswords final look (Week 14).
In week 11, we consult to Ron because we need to ask several things
regarding of our code. During the consultation, Ron actually notice the
problem in our code, where everything is tangled and we need to start again
to make the code cleaner.
It's actually quite stressing to go back to square 1, when we thought we
almost finish. But after we fix it, Ron suggestion was right and it helps us
a lot. So right now, we basically only have several main code that can be
applied to anywhere that has the same activity or action. Other games that
requires special code we have separate script for that.
1. Gamemanager
This script acts as the global memory for each state that we want to save
every time we are trying to do something. We stored it here to later
called in other scripts. This script only applied in the first area that
user will see when they first play the game.
2. playermovement
This script basically will be attached in every player in each area. This
script is used to move the player, including the animated sprite state,
how the player freeze when interact with the dialogue and many more.
3. pickedupdiary
This script is used to pickup a certain object like mugs and the books
that will shows the dialogue to interact and the E prompt UI.
4. sceneCloseup
This script will lead to another scene and mainly to shows the close up
scene that we have.
5. sceneChanger
This script applied in every trigger we have in each door to change scene
and mainly use to go to another room or change scene. This script includes
the spawn point of the player that we can adjust the x and y
manually.
In week 12, we start to do the activity and mission in parents room. In this
room, because this is the ending, We only have 2 things to interact: diary
to picked up in the bed and the pin lock. Gwen and I in charge of this rooms
overall.
Just like crosswords they are certain things that we want to aim for the pin
lock mechanism. We applied the same mechanism of highlighted box when player
select the pin and color indicator when player correct or incorrect.
Additionally, we want to change the scene after player put in the correct
pin to unlocked animation. After that they will be redirected to the drawer
open scene where player can interact with the objects inside.
Figure 3.3.14: Script used for pin lock.
As you can see in Figure 3.3.14, we basically open a lot of expose
attributes to drag and drop the sprite for interaction.
Figure 3.3.15: Pin Lock final look (Week 14).
In weeks 13 and 14, we focused on the main progression system and
achievement for the game, which involve collecting diary pages. Sean was in
charge of this task and the mechanism was pretty hard at first. So after
players completed the main mission and received the diary pages, we need to
update the diary book in the inventory.
Figure 3.3.16: Diary page progress (Area 1).
In living room, it was smooth, after players picked up certain item in that
area, they will unlocked this diary book in their inventory. Players can
click inside to read the diary page of each area to understand the story,
which will also help them in future areas/rooms.
However the main challenge is here, when Sean tried to link it with area 2
(Kitchen) in the paper scraps mission, it didn't worked. After we consult
with Ron, we created a new system for changing scenes called super scene,
but it still didn't worked. After we change the system, we become even more
confused because everything went down and wrong, a lot of things suddenly
didn't work anymore, so we decided to remove it and switch back to our
previous system and continue working on it.
Figure 3.3.17: Diary page progress (Area 2).
After we switched back to the previous system, Sean took some time to
understand the code instead of direct copy pasting from AI, and eventually
he made it work. After completing the missions now, the diary book will
update and players can access it anytime. After that, Sean linked the script
to other missions so that the diary book will also be updated upon
completing them. This whole mechanism took 3-4 weeks to finalized.
After finalizing everything, below is the finalized look of each room:
Figure 3.3.18: Living Room Final look.
Figure 3.3.19: Kitchen Final look.
Figure 3.3.20: Hallway Final look.
Figure 3.3.21: Emily's Room Final look.
Figure 3.3.22: Parent's Room Final look.
3.4 Sound Effect & Music
Jesslyn and Feilycia were the one in charge of the sound effects and music
inside the game. They first create a spreadsheets to list which area need
sound effect. Below is the spreadsheet created and all the source of our
sound and music listed:
3.5 Final Outcome
Come Home
Come home is a narrative-driven 2D adventure that explores themes of
self-blame, trauma, and healing. After learning of her father's death, Emily
returns to her childhood home for the first time in ten years. As players
explore each room and solve environmental puzzles, they uncover forgotten
memories and hidden truths, guiding Emily on an emotional journey toward
confronting her past and finding closure.
Video Walkthrough
Link of the game
Game Design Document
4. Feedback
Week 1
Briefing and introduction to module
Week 2
The concept of the game already flows smoothly; it just needs some light
adjustments. He suggested creating a biography for our protagonist to make our
story more relatable (in terms of the environment). Some details in the
narrative need changes; for example, we should make the ripped diary more
realistic by changing it to a ring binder where we can remove the sheets from
inside. We also consulted him about the art style and the software we want to
use, and he recommended additional software that is free and accessible.
Week 3
no class
Week 4
We gave our progression to Ron and he said overall good, we just ask him how
to do some coding stuff for movement.
Week 5
We ask a lot about coding, Ron help us to fix some of our problem.
Week 6
Ron help us to fix our last week problem in the coding.
Week 7
no class
Week 8
Mainly focus on assets and ask about our coding
Week 9
focus on assets creation
Week 10
Ron fix our prompt problem and basically see our progress.
Week 11
We ask Ron couple of things and he noticed that we have problem in our code
where everything is tangled so we need to start a new script to make
everything more clean.
Week 12
Focus on finishing our mission in each rooms.
Week 13
Finalizing the minor things to fix.
Week 14
Finished creating the whole game and proceed to finishing the game design
document.
5. Reflection
Throughout this module I have experienced a lot of things, especially
making games from scratch. We start from brainstorming the story and the
character inside until all the assets that we need to create. The most
difficult and new part for me was the programming/coding to create the
gameplay. As a design student, all of my teammates and I don't have any
experience in coding before so we encountered many problems and relied a lot
on AI for guidance. After trying to understand the code and not just simply
copy it, I found the fun in it, it felt rewarding when I successfully
accomplished something.
Furthermore, I observed that to create a successful game development
requires strong teamwork, communication, and planning, every group member
have their own responsibilities. I'm grateful that I found a responsible
teammates that can carry the burden together. I'm very thankful and proud
that we can finish this game within 14 weeks of work.
Lastly, I really want to say thank you to Ron for his guidance throughout
developing this game. Without his guidance, we will probably lost and can't
even finish this game. He always gave us useful feedback and even help us to
achieve it not just talk about it. I hope with this module, I can use my
skills that I got for further projects.
Comments
Post a Comment