ART DIRECTION - PROJECTS

on

08.05.20 - 17.07.20 (Week 4 - Week 14)
Piyaphon Inthavong (0337589)
Art Direction
Projects

INSTRUCTIONS


LECTURES

Week 5 | May 15th, 2020

This week we had a check up on project 1 from both teams. We then presented the exercise 3 to the class (refer to the exercises section). Once both presentations were done, we were briefed over project 2 a little bit, which concerns about the project management aspects and project sprints. Before dismissal, Mr. Kanna told us to read through the agile management, which is an approach for project management in the link below:

Week 6 | May 22nd, 2020

Mr. Kannan thoroughly briefed us through Project 2 on the project timeline and management this week. There were not much lectures this week, as he mentioned that the semester is moving closer to the middle of the timeline, so we are to spend more time working on our projects and learn more indecently from this week onwards. Weekly meeting for progress check and consultation is still necessary for the attendance.

PROJECTS

Week 2-3 | May 1st-8th, 2020

This is the introductory phase of the art direction projects. Ava and I met up to test out different games on the Android Play Store. Since we both are not gamers, we weren't too exposed to many games out there, so it's safe to select games from mobiles as they are accessible to both of us. Through a few discussion points, we finally aligned on cute types of games style as we both looked into simulations, novels, and role-playing games.

Initially, we chose to work on Plant Vs. Zombie, but changed after the first consultation with Mr. Kannan into A Street's Cat Tale as our final decision as we both liked the game and see potential in improving the overall art direction.

Figure 2.1. A Street's Cat Tale gameplay.

Once the game choice was settled, I analysed the GUI of the game in attempt to propose a better experience and ease of use to the players, as both Ava and I had a hard time figuring out the functions of the interface initially. This applies to the essential game elements and bars on the top part of the screen (see figure 2.1) since the placement of the icons and the bars can be misleading and hard to understand.


Figure 2.2. Original UI of the game (screenshot).

Figure 2.3. Main GUI analysis.

Figure 2.4. Character page UI analysis.

Week 4 | May 15th, 2020

We worked on the proposal for the past few weeks after the final decision on the game selection. We initially discussed about changing the game art style from pixel art to a more digital art and semi 3d look. Although, Mr. Kannan wasn't too sure about the idea of revamping the entire game art style. Instead he asked me to study further into pixel art games and to understand the intention behind it before making a bold change. Not only it is time consuming, money could be a huge issue in the real-world scenario. In the end, I was convinced after reading into the history of pixel art, and decided to not go that far in making a huge change.

The main improving points are the color scheme and lighting & shadows which contributes to the contrast and dynamic of the game. The following slides are for the proposal of the game "A Street Cat's Tale."

Week 5 | May 15th, 2020

As we are heading closer to project 2, we were introduced to a project management tool called Trello, which allows us to collaborate and share tasks with our project partners to maximize the work flow and productivity. Ava and I did a final touch on the proposal slides this week and set a few tasks on Trello as shown below.

Figure 5.1. Initial project tasks on Trello.

Week 6 | May 15th, 2020

We switched over to Notion as our group's main project management tool due to personal preferences an ease of use. This week, we carefully wrote down all our tasks and distributed them accordingly to our skillset and preferences. It took a few hours, but in the end we settled with all the tasks to prevent miscommunication in further stages. As the first week sprint of the art direction project, I took over the UI work and the main look & feel of the game.

Figure 6.1. Notion project management (screenshot from week 11).

Week 7 | May 15th, 2020

As part of the week 1 sprint list from the master task, I had to work on the background art and the main look & feel of the game. I started off with a rough draft on the layout of the buildings and the props, and made my first attempt to change the floor design of the game with the tiles I have drawn in the following screenshots of progress from Adobe Photoshop.

Figure 7.1. Sketching out the outline of the background art.

Figure 7.2. Texture for the road and the floor tiles.

Figure 7.3. Applying the texture to the floor of the background art.

Figure 7.3. Placing the collected props (skewed to match the isometric guideline).

Figure 7.4. Placing the main buildings (skewed).

Feedback

The progress above was what I had to show to Mr. Kanan for the consultation slot of week 7. Mr. Kannan was happy to see the progress ongoing, although there were a few things to work on before showing the final outcome of the game look & feel. 

The main problem with this work at the moment is the unmatched visual of the buildings, which makes it obvious that they are from different sources. Some buildings appeared in a rather detailed manner while some are easier to look at. To fix the issue, he suggested me to take one of the simple looking building as the base of the entire piece and follow up the rest of the buildings according to it by drawing matching colors over the complex shapes.

The color was also another main problem. Mr. Kannan thinks it looks too dull and flat so he suggested the use of gradients overlay to give extra layer of photo filter to the look & feel as a whole.

Week 8 | June 5th, 2020

I addressed the main issue from the previous consultation by drawing over the complex shapes of the buildings. Unexpectedly it took quite some time to make them look presentable but in the end, I was able to implement every feedback mentioned in the earlier consultation.
Figure 8.1. Simplified version of the main buildings (drawn over via Adobe Photoshop).

Once the buildings were ready, I began drawing the fence to fill in the empty spaces from the previous work, although I didn't spend too much time on the aesthetics of the fence since it's still a draft. I also kept the gradient effect that Mr. Kannan helped on the previous class.

Figure 8.2. Initial game look & feel proposal.

Feedback

As much as he was okay with the look & feel, he commented on how the art direction of the game is not matching with the proposals the I have shown to him the previous weeks. The art direction is gravitating closer to the traditional looking art style than the original game. 

Mr. Kannan mentioned on how the tiles looks too repetitive because the rectangles are scaled in very small sizes. He suggested to neutralise the color of the tiles to allow the character to stand out more. The shapes of the tiles could also be a different shape rather than an ordinary rectangular shapes, which we agreed to work on with hexagon road tiles in the end. The road looks a little too "normal" and to break from the linearity, Mr. Kannan suggested that a long thin line could be added to the center of the road. Other than that, the texture is acceptable. Since the art is lacking contrast, the grey parts of the road could be dimmed to compliment the lighter shades of the rectangular grey shapes. Additionally, Mr. Kannan told me to change the graphics and place them according to the isometric guidelines. He suggested that I could change to Adobe Illustrator if I'm more proficient with the tool rather than Photoshop.

Figure 8.3. Mr. Kannan's feedback.

Week 9 | June 12th, 2020

There were too many issues with the previous art direction, so I decided to change the entire look & feel and spent additional hours implementing each feedback one by one. The graphics are now aligned according to the isometric guideline where all buildings, objects, and props are transformed at the same scale and proportions to make the designing part easier to work on as compared to the previous one (angled). I switched over to Adobe Illustrator as advised from the feedback, since he knew I had a few struggles with Adobe Photoshop.

The biggest problem that I have with the previous artwork was the poor choice of color since I didn't give too much thought into it initially, so I made sure that the new color scheme implement each other harmoniously. The following image (figure 9.1) was shown at night time of the game, where most of the shades (previously dimmed in grey) shifts to the purple color to give a sense of late hours as the color reflect from the dark purple skies. The purple also give more dramatic feeling to the game, which is done according to the final proposal of the game.

Figure 9.1. The new game look & feel progress.

Feedback

Mr. Kannan approved the new game look & feel progress (figure 9.1). A day and night version can be made since the game features two main time of the day. To fill in some blank spaces, walls and fences can be added. The traffic light could also lighten up to highlight it as one of the essential element/props of the game.

Figure 9.2. Mr. Kannan's sketch for the composition of the game.

Week 10 | June 19th, 2020

To finalise the main look & feel of the game, I worked along with Ava to complete the day, night and raining version of the art this week.

Figure 10.1. Day time (final).

Figure 10.2. Rain (final).

Figure 10.3. Night time (final).

Week 11 | June 26th, 2020

Once done with main look & feel of the game, I went ahead to the week 2-3 sprint tasks, which is the game UI. I began analysing the home screen as they looked very overwhelming especially to new players (both Ava and I experienced it). Mr. Kannan agreed to the idea that the home screen menu items are too scattered everywhere, which makes it impossible to know where to press. Once I began understanding the functions of each buttons, they are set into priorities in order of importance (P1, P2, etc).

Figure 11.1. Home screen UI analysis.

The whole point of the new UI was to simply the interface by displaying the most important icons outside, while leaving the frills in the hamburger menu. By frills, I mean cloud save, FAQ, and an announcement menu that is not too necessary to the gameplay. A few other menus were also arranged and grouped more appropriately. The book icon on the top-right of figure 11.2 was moved to the left (in figure 11.3) with the achievement icons. The book icon represents "story endings" which is unlocked via variety of gameplay completions. 

The question icon on the top-right (figure 11.3) was left outside because it's essential for new players to know how to play the game before starting since there is no tutorial available. Ava and I both did not know how to play the game, where to press, and hence started the game right away, which causes confusion and bad experience to the new players.

The blue human icon on the top-right side (figure 11.2) was hidden in the hamburger menu, since it is not necessary for players to check "contributors" all the time. Lastly, the cloud save was included in the game settings.

Figure 11.2. Original Home screen UI.

Figure 11.3. New Home screen UI.

Following the home screen UI, I worked on the first part of the props breakdown for the building. In the image below (figure 11.4), I focused on the shapes of the building, which clearly shows that the building style is drawn based on rectangular shapes with a vector-looking appearance. Despite being made from rectangular shapes, the building was made interesting from the elements or components that is built in to it (ex. chimney, roof, signs, balcony).

Figure 11.4. Props breakdown (building shapes).

Building shapes attributes:
  • Modular piece built with mostly rectangular shapes, some of the edges are slightly curved.
  • The attachment of the variety of external components helps break down the linearity of the regular shapes.
  • Isometric art-style with proportionate dimensions and axises.
  • Low-saturated colors from the main building parts guides the focal point to the brightest and saturated part, which is the window.

Week 12 - 13 | July 3rd - 10th, 2020

I focused on the UI buttons of the project this week. It was purely due to the misleading positioning and icon choice that causes confusion in new players as Ava, Mr. Kannan and myself have agreed upon the issue. Initially, Mr. Kannan suggested that I make creative changes in a way that change the visuals of the health bar, map, and the time indicator, although due to the consideration of UI/UX and pixel graphics, I decided to keep the core game elements with the intention solely to improve the player interaction experience with the game. The following sketches were the icons that I discussed with Mr. Kannan during the practical session:

Figure 12.1. New health bar and time indicator suggestion from Mr. Kannan.

Figure 12.2. New GPS style location icon suggestion.

Figure 12.3. Basic health bar suggestion.

With the discussion set, I made the decision to execute changes on the time indicator according to Mr. Kannan's advice with additional blend of my own ideas. As I intend to keep the game original with its element, the gps model location (refer to figure 12.2) wasn't integrated into the main in-game GUI due several conditions which didn't allow for the feature to happen. The biggest reason being is that, the game is about a stray kitten that has no food or equipment for such luxury, it wouldn't make sense for a kitten to walk to places with gps on her paw, but rather to remember location codes and names (ex. "D-7") presented on each side of the streets. Second, even though the map was considerably big, it is designed for players to remember the entire with barely 10 minutes of gameplay, since the game already has high replayability. 

By understanding the game, it was not a fair move to add the GPS, so I opted for a better way to display the street code along with the time-weather indicator. In the following attachment (figure 12.4), rough sketches were made on how I think the icons should look like. Original in-game elements were kept because I knew it was redundant to make changes with features or icons that is already functional and understood by many players. Instead, I opted to change the health icon, which was originally a big red-light to the game. With the syringe icon representing the health of the cat, it can be misleading to a few people and hence wasting their time on understanding only the mechanics of the health bar (which obviously should be intuitive in every game). The syringe was simply changed into a heart icon with matching colors. The green health bar was changed to red to match the heart, while the hunger bar (originally blue) was changed into blue to match the fish icon.The decision was mainly based on the design principles that helps match certain objects together through matching color scheme and positioning. 

Figure 12.4. GUI icons planning.

Once I completed my planning, I head straight to Adobe Photoshop to digitise my ideas into pixels. Figure 12.5 shows the completed time-weather indicator located on the top-middle of the game screen, which can be easily seen by the players for convenience of time checking and with the street code as a bonus information. A few variations were made to the icon colors, but the following 2 variations were left after deciding for the best ones (figure 12.5 and figure 12.6). Variation 2 was decided in the end as the final color as my group mate, Ava, also agreed with the decision.

Figure 12.5. New in-game UI (variation 1).

Figure 12.6. New in-game UI (variation 2).

Figure 12.7. Composed in-game UI and graphics (variation 1).

Week 14 | July 17th, 2020

Final Art Bible of A Street's Cat Tale:

Final embedded Slides of A Street's Cat Tale Art Bible.

Final embedded PDF of A Street's Cat Tale Art Bible.

Comments

Post a Comment