Art Direction
24/04/2024 - 07/05/2024 (Week 01- Week 14)
Yong Kai Yi (0352826)
Art Direction
INSTRUCTIONS
fig: Art direction project brief
We were briefed on the entire Art Direction project, which spans from week 1 to week 14. Our assignment is to redesign Among Us as a non-violent game, eliminating killing and blood. The main goal is to reimagine the game's art direction, observe and learn from the original game, and enhance the overall game experience.
PROGRESSIONS
Figma Board (Compilation):
Exercise 1: Observation Study (Among Us) (W1-W3)
fig: contextual research board
We started by conducting contextual research on the game Among Us. Since we are not pro gamers of Among Us, we tried playing and experiencing the game ourselves. During our research, we discovered even more about the game, such as its numerous updates, including new characters and maps.
fig: observational studies
Next, we listed our observations while playing the game in three aspects: visual, game design, and UI/UX. We compiled all our members' points and drew conclusions.
fig: pros and cons
Based on our observations, we divided them into pros and cons to better understand and learn from the game, Among Us.
Identify visualization factors (W4)
fig: visualization factors board
Then, we brainstormed how to make the game more children-friendly, as assigned. We needed to transform the violent aspects into a P12-friendly game with no killing or blood. After ideating, we decided on an underwater theme where mammals are in a submarine, and underwater animals are imposters. The imposters will pop the mammals' 'bubbles' and 'send' them back to land (the mammals will float back to the surface).
Following the tasks assigned by Ms. Anis, we started by identifying the genre, theme, and overall style. We then decided whether to use a stylized or non-stylized art style, created the 'IS/IS NOT' statement to solidify the art direction, used a positioning map to understand where this theme fits among different references and determined the stylization range by comparing it with existing games.
After solidifying the overall art direction, we further rationalized it and developed a storyline to strengthen the concept. Then, we gathered more references to proceed with the design sketches. We decided on a muted-colored background with vibrant-colored characters, while the UI buttons would be bubbly and feel clickable to attract interactivity.
We delegated tasks to proceed with the design sketches. Hadiya focused on character designs. Although all of us sketched some characters, we ultimately chose Hadiya's design, which best suited the theme and CUTE! I worked on the environment designs, while Hoi Yee focused on the UI.
Project Proposal (W5-W7)
Environment design sketches progressions:
fig: environment sketch timelapse
fig: environment sketches
Since our game will have an underwater, submarine theme, I researched real submarine structures to understand what the interior of an underwater vehicle looks like. Initially, I tried to maintain the realistic submarine structure and logic, but this approach limited my imagination and creativity. After Ms. Anis pointed this out, I realized I could expand the design and think outside the box. Consequently, my sketches evolved from a structured look to more organic and playful shapes.
**the third sketches are the final developed ones after the presentation
Proposal Slides:
Art Direction - Proposal by hoiyeelenEnvironment Developments:
fig: rays references
fig: map redesign sketch
After receiving feedback from the first presentation, I researched underwater elements and thought that a ray-like 'spaceship' (essentially a submarine) would be an interesting concept. I focused on different types of rays and found that manta rays have the most intriguing shapes, resembling an underwater vehicle. I sketched out this idea and placed the rooms within the ray shape.
fig: environment interior sketch
fig: map developments
Next, I modified my initial sketch to fit within the ray-shaped map, then added details and cleaned up the lines for a clearer look.
fig: color tryouts
I continued refining the lines and added colors based on our brand color palette and the underwater theme. The primary colors were blue, turquoise, and green, with subtle secondary colors like orange, red, and brown for contrast and visual interest.
Final Design Progress, Consultation, Presentation W8-W14
fig: control room flat coloring
After determining the colors, I colored the rooms individually for better quality and removed the outlines. This introduced a common issue: the lack of contrast between objects. To address this, I added depth using shadows and highlights.
fig: hard approach
fig: soft approach
I experimented with both hard and soft lighting and ultimately chose hard lighting as it looked better in the vector environment.
fig: added lighting
fig: character tryouts
After finishing the lighting, I tried integrating Hadiya's character designs into the scene. I realized they didn't blend well. Initially, we planned for sketchy characters and a flat, muted color environment, but the outcome didn't match as expected. Instead of changing the character designs, I adjusted the environment to match the sketchy look.
fig: HSB adjustments
I thought the colors might be an issue, hence I tried to adjust the hues, saturation, and brightness. I think it's getting better but still missing something.
fig: adding textures
I overlaid subtle textures and noise on the background to avoid chaos and maintain a balanced look. I used three texture brushes: concrete, metal, and noise.
fig: character tryouts
The environment started blending better with the characters while maintaining the vector look. I enjoyed this process, as I like experimenting with textures and noise.
fig: helm
fig: electric room
fig: storage room
fig: cafeteria
I drew the other rooms in full screen, ensuring there was enough content to cover the room later on. This approach allows me to export them individually and apply clipping masks on the map shape, providing flexibility for further adjustments or additions.
fig: use warp tool to shape the room
fig: use warp tool to shape the room
Since I used Procreate for the environment design, I found it challenging to draw clean, straight lines as it lacked pen tools like Adobe Illustrator. To overcome this, I drew a triangle and used the advanced mesh warp tool to modify the shape, which worked well!
After finishing all the shapes, I combined them with the rooms using clipping masks.
fig: the files
To manage my files better for reference and backups, I separated them to reduce the number of layers in one file, preventing the iPad from crashing.
fig: observation
fig: observation
From observing the game, I noticed many indicators for tasks, vents, and other elements. I incorporated these indicators into our scene and map.
fig: indicators
I traced the assets' shapes as indicators in Procreate, then imported them into Illustrator to arrange them accordingly.
fig: tracing the map shape
For experimenting with different colorways for the map, I found it easier to do in Illustrator. I imported the individual shapes as TIFF files, used Image Trace to convert them into shapes in Illustrator, and simplified the anchor points for cleaner lines.
fig: map indicator
After experimenting with different colors and receiving feedback from Ms. Anis, I finalized the map colors.
fig: overlay
I also considered how the map would overlay different rooms (backgrounds) to ensure it wouldn't blend too much with the background colors. I added another layer in between with 64% opacity to test the overlay colors and find the best match.
Task screen progressions:
For the task screens, I based them on the existing tasks from Among Us and further modified the art direction to fit an underwater submarine theme. For example:
fig: cafeteria task
The original cafeteria task involves disposing of leftover pizzas. In our version, the cafeteria has barrels as chairs, which can be where the crewmates store their food. After researching, I found that submarine crews usually consume canned and dried foods, so I incorporated those elements into this task.
fig: disposing task sketch timelapse
fig: control room task
fig: west wing task
For the control room, besides the CCTV (bird's eye view), there's a task there too. Taking reference from Among Us, where they originally throw away dried leaves, I initially planned to use seaweed for our underwater theme. However, Hoi Yee suggested using underwater garbage to promote SDG: Life Below Water and protect the sea. I thought this was a brilliant idea and incorporated plastic waste into this task. Both rooms have similar tasks with slight tweaks, such as changing "pull & hold" to "turn & hold" to relate more to the submarine's steering wheel.
fig: seashell shape
fig: colors tryouts
fig: colors tryouts
fig: transfer file task
The file transfer task is located in every room. For the storage room, instead of folders, I used seashells as they are physically similar.
fig: wire task
For the classic wiring task in the electric room, I used the electric power tank as the main board. The initial idea was that the submarine's power source is jellyfish since they contain electricity, inspired by the movie Journey 2, where they used a giant eel as a power source for their submarine. The task remains the same, with only the art direction changed.
fig: adding details
To match the environment and characters, I added the same style of highlights and shadows, which is hard ones, and some soft textures and noise.
Gameplay screen buttons:
fig: buttons design sketches
I tried to implement underwater and our imposter character into the buttons, maintaining the looks and objectives of the buttons from the original Among Us but tweaking them to fit the underwater theme.
fig: chosen design sketches
After narrowing down the designs, I kept modifying and researching what elements suit the features best.
fig: report button
I struggled a bit with choosing a suitable graphic element for the report button. I sent it to my friends for feedback and made further tweaks based on their perspectives.
fig: coloring
To maintain consistency with the other screens' UI, I communicated with Hoi Yee, who created most of the game's buttons. I used the same color palette and tried different combinations to see which one looked best and popped more.
fig: adding highlights
I used a soft brush to create the gradient and tried to replicate the existing bubbly buttons. It consisted of a few layers to achieve the pop.
fig: finalizing the design
Then I added text to see if the graphic elements worked. However, since Procreate is not very user-friendly for typography, I imported the designs into Illustrator to add the text.
fig: first joystick design
Same as with the buttons mentioned above, I needed to maintain consistency. I used the same palette and highlights, but the first design didn't really pop or look bubbly to me. I discussed this with the UI designer, Hoi Yee, and made further modifications.
fig: 2nd joystick design
fig: 3rd joystick design
fig: 4th joystick design
fig: 5h joystick design
fig: final joystick design
This is the final design after trying out the colors, the direction of the highlights, and the gradient.
To maintain the same size for each background, instead of adjusting the layers or artwork, I adjusted the position of the artboard to make it more consistent.
After finishing the environment, map, and task positions, I added the UI buttons to the gameplay screen. To ensure consistency, I duplicated the margin for each artboard and arranged the UI accordingly.
fig: arranging the characters into the voting screen
After Hoi Yee completed the voting and chatting screens, I helped by inserting the characters into the scene and adding margins to ensure all the arrangements were organized and neat.
Final Presentation Slides:
Art Direction- Final Presentation by Kai Yisubmissions Google Drive link:
REFLECTIONS
Experience
I really enjoyed this project. Over the past two years, I haven't had as much flexibility to expand my imagination and creativity as I did with this project. Drawing the environments and other elements was a lot of fun. Despite the time constraints, I think I can improve my time management to achieve more desired outcomes. I initially wanted to create more screens and incorporate Figma to design the flow, as I was eager to add parallax animation to this theme, which I felt was very suitable. Even though Ms. Anis mentioned that designing the flow wasn't necessary, I wanted to satisfy my own curiosity and achieve the best possible outcome. Overall, I thoroughly enjoyed the process, especially receiving feedback from Ms. Anis, which helped me expand my imagination while designing the environments. Brainstorming with my groupmates was also a lot of fun.
Observations
Throughout this project, I realized the importance of colors. Even the smallest changes, like highlights or shadows, can make a significant impact. I also observed that working smart is crucial; although I'm comfortable with Procreate, sometimes switching to another software can yield better and faster outcomes. Additionally, I learned a lot about game design, especially the significance of indicators. Before this module, as a regular player, I didn't notice these details. Now, I really appreciate how these small elements enhance the game experience. Without these indicators, players would be lost.
Findings
Designing a game is not easy; there are so many considerations to take into account. While working as a team, I discovered the importance of having a solid brand identity. A consistent art direction is essential to maintain overall coherence, especially when different team members are working on various aspects like character designs, environment, and UI/UX designs.
Comments
Post a Comment