GAME DEVELOPMENT // Task 2
21.05.2024 - 07.06.2024 // Week 5 -Week 7
Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Instruction
Task 2
Environment Design
On this stage, we were asked to create our game's visual component. Characters, environment, equipment props, obstacles power-ups, and HUD design are all included in this. While some aspects of the development process differed from the original proposal, the end product was better graphics and a design that was cleaner.
I used Adobe Illustrator in my artwork to create 2D illustrations for the game. I began by working on the environment design since it is easier and require no animations.
Loading Screen:
![]() |
| fig 1.1 - Loading screen |
![]() |
| Fig 1.2- Loading Screen with Title |
I have added gradient colour in the combination of light yellow with orange to the text "Temple Heist" to create the golden texture vibes, to make it feel more surreal and increase the sense.
Game Start Scene:
![]() |
| Fig 1.4- NPC Conversations/ Cutscene |
Visuals: Traditional Japanese architecture and shadowy figures with a contrasted,
dark colour scheme with red and blue accents.
Tutorial Level :
![]() |
| Fig 1.5- Tutorial Level |
Visuals: Simple temple silhouettes with little decoration, emphasizing tutorials with clear visual cues. Sky gradients from light to darker red to increase the players intensity of the game towards harder levels ahead.
Level 2 (Temple's Courtyard):
#1 attempt
![]() |
| Fig 1.6- Level 2 #1 attempt |
Visuals: A mixture of temples' courtyards and forest surroundings with creeping greenery. Used bamboos as greenery to represent the sense of Japan.
Finalised:
I amended the sky colour to the mixture of orange and reddish to relate back to the tutorial level. Besides, I've changed the temples' colours to the mixed of greyish and blue to make it more like the temples' appearance in Japan.
![]() | |
|
Level 3 (Temple's Inner Maze):
![]() | |
|
Visuals: Players now enter the temple's passageways. Dim use of colours for the passageways of the temple and broken walls to limit players' visibility increasing the tensity of the game. Also added spider webs, dying plants and decaying wooden floors to create a sense of creepy and spookiness.
Boss Battle Level:
![]() | |
|
Visuals: A grand, gloom space with dynamic lighting, the platform for the significant battle will be locate at the start of the red sun to presents an intense, dramatic battle scene. The gradient colours use with mixture of blue and red to bring out the sense of this level's toughness and the scary battle waiting ahead for the players.
Victory Scene:
![]() | |
|
Visuals: Victorious and calm, mark the end of the dangerous journey and contrast
with a brighter tones of colours compared to the previous boss battle scene.
Game's Props Design
|
Using gradient of colour gold and greyish to create the sense of gold texture for the frames and dialogue box to ensure it pops out in the dim background of the game. Typeface "Blaka" used for subtitles as it brings out the feelings of ninja and japanese text fonts.
|
Blue Platforms: To be used in tutorial level.
Green Platforms: To be used in level 2. As level 2 is to be taken place at the temples' courtyard with creeping greenery so to blend with it, dark green is used for the colour option. Also cracking textures were added to create the sense of creepiness.
Brown Platforms: To be used in level 3. As level 3 is to be taken place inside the temples' with wooden walls and floors so to blend with it, woody brown is used for the colour option.
Amendments for Platforms:
![]() |
| Fig 2.3.1 - Refined Platforms sprites |
Rocky Platforms: To be used in tutorial level.
Grassy Platforms: To be used in level 2. As level 2 is to be taken place at the temples' courtyard with creeping greenery so to blend with it, lighter green is used for the colour option to create contrast. Also pebble stones textures were added.
Wooden Platforms: To be used in level 3. As level 3 is to be taken place inside the temples' with wooden walls and floors so it's used to blend with it.
|
Vital Juice: A small bottle filled with sparkling blue liquid, consume to recharge energy.
Healing Potion: A small bottle filled with glowing red liquid, restores health when consumed.
Ninja's Backpack: A pouch highlighted with the chinese text of ninja and with a sharp knife above it, players collect it to unlock short range attacks like using knifes and long rang attack like throwing shurikens.
|
Life meter: Akira's physical health status. Red is used for the health status bar and simple heart icon to represent health obviously to provide clear understanding for players.
Energy meter: To maintain Akira's stamina and persistence in tasks like running,
dodging, or fighting. Blue is used for the energy status bar and simple lightning icon to represent energy. Relating to the vital energy to recharge energy which is also in blue too, providing the information of related relationship between both of them to players.
Stealth meter: Akira's visibility to opponents changes based on the stealth meter. Green is used because, green is for "go"! :D So when the meter reaches the max, Akira is able to hide herself from her actions performed. A simple speed accelerate icon with two arrows is used.
The frame uses the gradient of blue and purple to blend with the game topic creating a sense of alert and matches with the environment design. Behind each meters have darker purple shades to create contrast for clearer visuals for users.
Charcters' Design
I've changed my mind on using simple silhouettes for character designs instead of detailed illustrations. Because the scenes and backgrounds I've designed earlier were abit too full with visuals and illustrations. Hence, to balance with it, I'll be using silhouettes in designing the characters' sprites to avoid from visual clutter.
|
Akira: I've created straps and attached on Akira's head mask to bring out a more feminine looking. The gradient colour used for Akira will be the blend of dark purple and orange. Uses of orange is to balance with the dark purple as orange is more brighter and will make the character stands out later in the dark themed scenes.
![]() | |
|
Temple Guards (Tutorial & Level 2): The gradient colour used for temple guards will be the blend of sharp red and light orange. To bring out the sense of enemy for this character. Attack performed will be only kicking.
Elite Temple Guards (Level 3): The gradient colour used for elite temple guards will be the blend of reddish orange and ocean green. As a more contrasting colour compared to temple guards earlier, creating a sense of stronger power opponents. Attack performed will be showing knife, different from temple guard's ability and they're much more stronger and harmful.
Master Shifu (Boss Battle): The gradient colour used for Master Shifu are the blend of light neon magenta and light blue. With a vibrant and contrasting colour used, is to create the sense of danger and more deadly harmful it is. The silhouette of it is like a master but being covered in rotten and thick clothes to bring out the creepy and scary vibes. For the black magic power being performed, Master Shifu will be in the condition of bending and dark spirit and power of the evil dragon will release from him, the character sprites will slowly enlarge too while he's performing his attacks. Martial arts is him slashing the knife speedy and accurately.
**All characters' death were adjusted to a lower opacity.
| Fig 3.3 - Master of the Temple's Character Sprites |
Master of the Temple (NPC): The gradient colour used for Master are the blend of light neon green and blue. This is to bring out the sense of good people who players can interact with in the game. Without any interactions with it, it'll be staying in the position of doing Yoga "Malasana". When players choose to interact with it, it will be changing on his form to another Yoga pose. The reason of designing it to poses in Yoga pose is because Master of the Temple is someone who protects the temple meanwhile he needs to give guidances for Akira to advance her progress. To not being so straightforward in actions like stand still and speaking which will expose Akira's location, so ya this idea was popped out.
Mocked Up Gameplay's Scenes
Game Start Scene:
![]() |
| Fig 4.1 - Start Intro Scene (Mocked Up) |
Cutscene (NPC Conversations):
![]() |
| Fig 4.3 - Tutorial Level (Mocked Up) |
Level 2:
![]() |
| Fig 4.6 - Boss Battle Level (Mocked Up) |
Victory Scene:
![]() |
| Fig 4.7 - Victory Scene (Mocked Up) |
Reflection
Designing the assets for "Shadows of the Shogun: Temple Heist" has been both a challenging and rewarding experience. Ensuring that all elements, from character sprites to props, adhered to a consistent art style was no small feat. The process required meticulous attention to detail and a deep understanding of the game's theme and aesthetic.
One of the most challenging aspects was creating the scenes' backgrounds. These backgrounds needed to be not only visually captivating but also thematically cohesive with the ancient Japanese setting of the game. A significant amount of time was dedicated to researching and designing these environments to evoke the right atmosphere and mood. The dark and desaturated color palette, with its emphasis on reds, blacks, blue, and grey, was crucial in establishing the game's eerie and intense ambiance.
Adjusting the gradient colors was another critical task. It was essential to select hues that complemented the overall art style without causing the characters and important elements to blend into the background. This required careful experimentation and a keen eye for color harmony. Ensuring that key features stood out while maintaining a visually cohesive scene was a delicate balance to achieve.
The process of designing these assets has greatly enhanced my skills in visual design and my understanding of thematic coherence. It taught me the importance of consistency and the impact of color choices on the player's experience. While it was a demanding task, the satisfaction of seeing all the assets come together harmoniously in the game environment made the effort worthwhile.
Overall, this task has been a testament to the importance of dedication, attention to detail, and a deep connection to the game's narrative and visual style. The journey of bringing "Shadows of the Shogun: Temple Heist" to life through its assets has been an invaluable learning experience, one that I am proud to have undertaken.























Comments
Post a Comment