LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / GAME DEVELOPMENT
Task 02: Art Asset Development
JUMPLINK
Instructions
Task 02: Art Asset Development
Feedback
In Task 02, we were required to produce the art assets based on the game we proposed and designed earlier in Task 01. This included creating visuals for characters, environments, items, and other in-game elements. Once completed, all the assets needed to be compiled and organized into a presentation slide for submission.
Progress
During Week 03, after completing the
presentation for Task 01, we proceeded with Task 02. I began by
searching for visual inspiration on Pinterest to get a clearer idea
of the style and look our game should have.
Figure 1.1, 1.2, 1.3 Visual references.
Since I didn’t have any prior experience in game or pixel art creation, I also took some time to research 16x16px pixel art, as Eins had suggested we would use this style and size for our game. To help me better understand the basics, I used ChatGPT for clearer explanations since I couldn’t find much detailed information online.
Figure 1.4, 1.5 Research.
We also faced an issue with the recommended software, Aseprite, as it required a purchase. To overcome this, we looked for free alternatives that still offered the necessary features and were user-friendly. Eventually, we found Pixelorama, which worked well for our needs, so I downloaded it from Itch.io.
Figure 1.6, 1.7 Software.
After class, I took the initiative to start creating the player’s character early. This way, if I encountered any problems, I’d still have time to troubleshoot and get familiar with the software. I gradually explored Pixelorama’s tools, experimented with outlines, and tested different colors for the pixel art.
Figure 1.8, 1.9 Progress screenshot.
Once I managed to design a character I was satisfied with, I shared it in our group chat for feedback. Since this was my first time creating pixel art for a game, I didn’t want to proceed without input from my teammates, especially those from computer science, as they would be handling the development side and had more experience in game-making. Their feedback was valuable for refining and improving my work.
|
| Figure 1.10 Shared to group chat. |
After receiving feedback from my teammates, they agreed the player
character’s design was good and suitable. I decided to move forward
with it. Next, I began working on the design for the clockwork
heart, which I intended to use for both the NPCs and as part of the
time gauge display. At first, I planned to design it within an 8x8px
artboard, but when I attempted it, I realized the size was too small
to include enough detail to clearly represent a clockwork heart. It
ended up looking like a simple heart shape without any recognizable
mechanical features. Many of the design ideas I had in mind just
weren’t possible at that scale.
To solve this, I switched to a
16x16px artboard. Although this gave me a bit more space to work
with, there were still limitations in how much detail I could
include, but it was the most practical option since anything larger
wouldn’t fit well within the game’s visuals.
Figure 2.1, 2.2 Progress screenshot.
After finishing the clockwork heart, I continued working on the
player character’s idle state animation. Based on Eins’ suggestion,
I separated the character’s head and body into different layers,
which made it easier to manage and animate each part individually. I
referred to several pixel art characters on Pinterest and noticed
that most idle animations involved a subtle breathing motion, with
the character gently moving up and down. I decided to follow this
approach.
I also wanted to add a blinking animation to make the
character feel more natural where the two-pixel eyes would blink
periodically. I tried adjusting the eye pixels from vertical to
horizontal, switching between 1 and 0 to simulate blinking frame by
frame. However, it ended up looking odd, almost like the character’s
eyes were disappearing entirely, so I ultimately left the blinking
out and kept the breathing animation only.
Figure 3.1, 3.2 Progress screenshot.
Before exporting the player’s idle state as a spritesheet, I remembered that according to our game’s story, the protagonist is the only character without a clockwork heart. To reflect this, I wanted to make sure the player character visually differed from the NPCs who have visible clockwork hearts. Initially, I thought of leaving the heart area empty or creating a hole-like gap in the character’s chest, but visually it didn’t look quite right. In the end, I decided to use a red-colored area at the heart’s position, symbolizing the loss of the character’s original heart, while highlighting that they don’t have a mechanical one like the others.
Figure 3.3, 3.4 Progress screenshot.
I continued working on the visual assets, focusing specifically on creating floor tilesets. I began by searching for visual references related to floor designs, drawing inspiration from the images I found.
Figure 4.1, 4.2 Progress screenshot.
Using these references, I started designing the tileset, opting for a floor that features soil on the top layer and rock underneath. I felt that since Act 01 is set in a street environment, a soil-based ground would be more fitting, while adding rock below would provide visual contrast and depth.
Figure 4.3 Progress screenshot.
Next, I moved on to designing street decorations, particularly the street lights. I aimed for a vintage aesthetic that would align with the game’s steampunk theme, giving the streetlights an older, mechanical look to match the world we’re building.
Figure 5.1, 5.2 Progress screenshot.
Around the same time, Jzeshin approached me to discuss dividing the workload more evenly between us. To facilitate this, I listed all the necessary assets I could envision for the game and shared them with Jzeshin.
Figure 6.1 Assets list.
Since I had already completed the idle state for the player’s character, I took on the responsibility of creating all the player character animations, NPCs, Act 01 assets, and several visual elements that would appear throughout the game.
Figure 6.2 Task assigned.
Additionally, we began looking for a suitable font that would match our game's pixel art style. I personally preferred a pixelated font to maintain visual consistency throughout the UI and text elements. I searched through online sources like Google Fonts and DaFont, using the custom preview feature to input sample words and instantly see how each font would look in context. I focused on finding a font that was thick enough to remain legible at various sizes, while also having a unique design to make it stand out.
Figure 7.1, 7.2, 7.3 Font from online sources.
After testing several options, I found that the Harmonic font struck the best balance between style and readability. To confirm that it would work well in our game, I applied it to our game title and a sample paragraph of Lorem Ipsum text in Adobe Illustrator. This allowed me to ensure the font would be visually pleasing and easy to read across different parts of the game.
Figure 7.4, 7.5 Chosen font.
I continued working on the player’s sprite sheet animations for various character states, based on the tasks assigned to me. I started with the walking animation, referring to visual references on Pinterest to ensure that each frame appeared smooth and natural. This process was quite challenging due to the limited 16x16px canvas, which made it difficult to portray leg movements without distorting the character's shape.
Figure 8.1, 8.2 Progress screenshot.
Next, I moved on to the jump animation. This was also tricky, simply shifting the character’s position from bottom to top didn’t look natural. To address this, I searched Pinterest for sprite sheet references of jumping animations. However, most examples used a larger canvas, which allowed for more detail and clearer body part articulation. To overcome this limitation, I adjusted the character’s leg position by spreading them outward slightly to better convey the motion of a jump within the small pixel space.
Figure 9.1 - 9.5 Progress screenshot.
For the climbing animation, I chose to animate the character with opposite arm and leg movements to maintain a natural rhythm. Initially, I considered using a side view for the animation, but it conflicted with the game’s perspective, and the side view made it harder to clearly show body movement. Therefore, I adjusted the pose to suit both clarity and the game's visual consistency.
Figure 10.1 - 10.4 Progress screenshot.
I then created the hiding animation, which was relatively simpler than the previous ones.
Figure 11.1 Progress screenshot.
After that, I started working on the wall tile set for Act 01’s street buildings. Initially, I drew the buildings as a whole, with roof, wall, door, and windows all in one but Eins advised me to separate each part so they could be assembled like Lego pieces in Unity. This modular approach would allow components to be reused and mixed across different buildings. It was quite challenging at first, as visualizing the final structure from separated pieces was difficult, and it was also hard to tell whether the tiles I created matched the game’s style and theme.
Figure 12.1, 12.2, 12.3 Progress screenshot.
Meanwhile, Eins pointed out that the floor tiles I created would
need variations in angles and darkness to reflect different depths.
Since I wasn’t confident handling those complexities, Eins took over
the floor tile set.
I continued focusing on the wall tiles and
street-level decorations, including windows, doors, roofs, and
details.
Figure 12.4, 12.5, 12.6 Progress screenshot.
To visualize how the tiles would fit together in Unity, I assembled mock-up buildings after completing each tile. This helped me check for consistency in texture, color, and shading.
Figure 12.7, 12.8, 12.9 Progress screenshot.
Eventually, I refined the textures and colors multiple times and finalized six wall variations. Two of them were shaded to give a curved appearance, making them suitable for towers. Choosing the right wall colors was tricky due to the lack of steampunk-style pixel references, most online examples were concept art or AI-generated.
Figure 12.10, 12.11 Progress screenshot.
Next, I worked on roofs, gears, and pipes, sticking to the existing color palette. Creating the curved roof was more complex than expected — if I made it 32px wide, the Unity building could only be that width since the roof shape couldn’t be freely stretched like flat roofs, which can be tiled endlessly by duplicating the center section.
Figure 12.12, 12.13, 12.14 Progress screenshot.
I also drew steam pipes, a crucial steampunk element, in various top styles for flexibility. I included different joint sections and pipe sizes.
Figure 13.1, 13.2 Progress screenshot.
However, I later discovered that the joints weren’t centered on the grid cells, making them misalign in Unity. I went back and adjusted the pipe components to align perfectly with the grid.
Figure 13.3, 13.4 Progress screenshot.
For streetlights, I reused an earlier design and added a new variation for more layout options.
Figure 14.1 Progress screenshot.
I also designed sewer entrances and manhole covers. Since the player can hide in the sewer, I duplicated the floor tile and added a ladder. I plan to animate this in idle, the bottom part remains hidden, but when the player hides, it reveals a transparent section so the character is visible inside.
Figure 15.1, 15.2, 15.3 Progress screenshot.
To enhance realism and add more variety, I created crates, steel trusses, and wooden platforms that can be used both as props and jumpable platforms. Ladders are also created for climbing in the map.
Figure 16.1 - 16.5 Progress screenshot.
Next, I moved on to the beacon, a crucial element for time manipulation gameplay like rewinding or slowing time. I designed it with a floating clock surrounded by a magical ring, sitting on a base. It changes color based on its state: purple when inactive and blue after the player interacts with it. I specifically chose these colors to stand out against the predominantly brown-toned buildings and background.
Figure 17.1, 17.2, 17.3 Progress screenshot.
To bring more life to the environment, I also created animated steam to go with the pipes, adding motion to break the stillness of the scene.
Figure 18.1 - 18.5 Progress screenshot.
Finally, I worked on the background for Act 01. A single layer of buildings looked too flat, so I added a second layer with less detail to create depth. These background buildings were drawn with flat orange tones and light shading, becoming more transparent the further they are, simulating distance. Initially, I wanted to add windows with lights on or off, but during mock-up testing, I realized that would clutter the screen and distract the player. So, I went for a simpler, less detailed style to keep the focus on the foreground action.
Figure 19.1, 19.2, 19.3 Progress screenshot.
After completing all the street decorations and character animations, I uploaded the assets to Unity and pushed them to GitHub so Eins and Lia could begin building the game using my tilesets.
Figure 19.4 Progress screenshot.
Around the same time, Eins reviewed the character motion and noted that two additional states, wall slide and interact were missing. I then created animations for those states.
Figure 20.1, 20.2, 20.3 Progress screenshot.
Figure 21.1, 21.2, 21.3 Progress screenshot.
Next, I focused on NPC design. I began with the librarian NPCs. Initially, I designed them as females with spectacles for a more literary feel, but due to limited pixel space, the glasses obscured their eyes. I removed the spectacles and adjusted the hair color from orange to light brown to improve visibility against the background.
Figure 22.1, 22.2 Progress screenshot.
For the artist NPC (Act 02), I made them appear older with a blue hat for visual variety. All NPCs have yellow mechanical hearts to distinguish them from the player. I initially considered brown for realism, but it blended too much with the game’s palette, reducing visibility.
Figure 23.1 - 23.4 Progress screenshot.
After finishing key NPCs with dialogue, I designed background characters to make the street feel more alive. These characters have three states: walking, idle, and lying down.
Figure 24.1, 24.2 Progress screenshot.
I also redrew the decaying clock since the original version by Jzeshin didn’t match the game’s style or clearly convey its identity. Once all assets were completed, I organized them into folders in Unity for easy access.
Figure 25.1, 25.2, 25.3 Refine decaying clock design.
Finally, I prepared the presentation slides by setting up the layout and titles so teammates could insert their content. For animated assets, I exported them as GIFs to ensure our lecturer could view them clearly.
Final Art Asset Development
Week 06
The assets are nicely designed and well-polished. Our progress has been quite fast, as we’ve already begun developing the game. The current game preview is coming together nicely and is suitable to be presented as a prototype for our upcoming task.
Comments
Post a Comment