NPCs & Characters Design
This is the wiki page for documentation of the design process and justifications to sprites of NPCs and playable characters created by Team 1. The method of iterative design will be applied for characters design, which means that the latest version of sprites will always be tested in the user testing evaluation sessions and be refined and updated based on the feedback received. Therefore, this wiki page will also keep updating when old sprites have been updated or redesigned and when new sprites are created.
For better reading experiences, the documentation will be ordered based on the time sequence of sprints, which starts from sprint 1.
- 01 General visualised design guidelines for sprites creation
- 02 Basic set of sprites
- 03 The first male playable character (boy_01)
- 04 The first female playable character (girl_00)
- 05 Mom NPC (mum_01)
- 06 Update of the basic set of sprites
- 07 Redesign of the male playable character (boy_01)
- 08 Redesign of the female character (girl_00)
- 09 Redesign of Mom NPC (mum_01)
- 10 The second male playable character (boy_00)
For implementing animations that will switch to different sprites when a keyboard input ‘movement’ command is received, a set of sprites of each playable character and NPC from different directions is required. After having a discussion inside our team and with other teams from the studio session, an agreement is reached that a total number of 12 sprites are required for each character or NPC, as is shown in the picture below.
The sprites are split into four sub-sets, each sub-set will have a sequence of sprites to animate the movement in a specific direction. For instance, as is shown below, the first column on the left indicating the process that a character is walking ‘down’, if all three tickets are combined together, the action of walking ‘down’ can be animated. Additionally, it is worth mentioning that the action of moving arms & legs forward and backward is mimicking by increasing and decreasing the scale of them to create a bit of distance visually.
As is mentioned above, the creation of sprites is for generating animations. In order to make the process of making atlas easier, a set of formal naming rules are applied to sprites files. The sprites are saved in the format of ‘.png’ file, with the name of ‘walk/stand + Up/Down/Left/Right + 0/1/2’. Again, take the first column on the left-hand side as an example: the first sprite will be named as ‘standDown_0’, the following two moving sprites will be named as ‘walkDown_1’ and ‘walkDown_2’ respectively. The ‘1’, ‘2’ and ‘3’ at the end indicate the order that they appear in a sequence of animations.
After the guidelines for sprites design are created, with the ‘Retrowave’ art style chosen, a set of basic sprites are created to prevent the inconsistency issues across the work of multiple designers that happened at the early stage from happening again. As is shown below, the basic set of sprites have no shading and highlighting, have no fully designed hairstyle and outfit. They are only be used to specify the size and basic settings of sprites, and serve as a fundamental frame that various characters & NPCs can be created on top of them.
At the early stage of designing, when the specific game style hasn’t been decided, some design attempts are made. The following sprites are outcomes of early-stage attempts. It is noticeable that the art style of those sprites is closer to the classic pixel art that focuses on using edges; shades and highlights to make the character looks multi-dimensional. At the same time, the choice of colour scheme is also more calm and less vibrant. Which are quite different from the final sprites of the male playable character.
Afterward, with the basic set of sprites finished, a brand-new version of the male playable character was designed based on the design guidelines. As is shown below, even though the art style is completely different now, a fair portion of characteristics from the previous attempts was saved and reused. This including: hairstyle/hair colour; eye colour etc. The reuse of those assets greatly improves the efficiency of character design and sprites creation.
As the development process goes, additional colours were included in the colour scheme for shading & highlighting, which is effective to make the character looks more 'multi-dimensional'. It can be noticed that, in the colour palette below, with a middle-level colour used to fill in the space, a lighter colour with the same tone will be used for highlighting, and a darker colour will be used for shading. This applies to the skin area as well as the blonde hair. Furthermore, to fit the chosen theme of ‘Retrowave’, a series of vibrant and strong neon colours are used to set up the tone for the character and create the atmosphere of 80’s. Those colours including dark blue for the outfit; bright yellow for the strips on the outfit; bright blue and green for shoes, which is combined with a relatively darker blue and green for shading. In order to evaluate if the choices mentioned above are correct and effective to achieve the purposes, a very brief user testing was conducted afterward, more details of it can be found down below.
Brief user testing sessions are implemented in the form of interviews for feedback regarding the current design of the sprites. They are comprised of close-ended questions with justifications of their answers. Two focuses of the user testing session are:
- The choice of colour scheme: if chosen colours matched with the ‘Retrowave’ theme of the game.
- The application of shading and highlighting techniques: if the character looks better with shades and highlights.
Designing of sprites will be iterated based on the feedback received in the future sprints, similar user testing sessions will be conducted after sprites are refined.
After conducted 5 separate user testing sessions, the feedback gathered is quite split.
- On the one hand, most of the participants agreed that the application of bright neon colours for the outfit and shoes successfully reflected the chosen theme of “Retrowave” because the most recognisable characteristic of it is the wide application of bright/vibrant colours, including bright yellow, blue and green. This indicates that the choice of colour scheme was successful, and there will not be major adjustments in the future sprint.
- On the other hand, a large portion of participants questioned that if the colours used for shading and highlighting are a little bit too much, which actually caused negative impacts from the perspective of visualisation. A couple of them even did not realise that the function of colours that are relatively darker and shading and the lighter ones are used for highlighting. “What are the white blocks on his head?” a participant said when he pointed to the highlighted areas on the character’s head. Another one even recognised the dark shading area around the face as the bread of the character. This means that the level of shading & highlighting of this character may need to be reduced for a little bit in the future sprint when iterating sprites of this male character.
In order to finalize the character design, initial ideas for the female character were uploaded to the design committee. The design committee then held a poll to finalize a design to move forward with. The above character design was chosen as it had a more retro look and the design was more distinguishable and appealing.
The color set was chosen as mostly neon based on the retro theme as neon colors give a sense of 80's vibe to the game. The colors were also chosen by keeping in mind the surrounding environment colors eg. bed, wall, etc.
In order to finalize the character design for the mom, it was discussed and agreed upon having a strict look for the mom and include an apron with the outfit to match the character. The color set was chosen as mostly neon based on the retro theme as neon colors give a sense of 80's vibe to the game. The colors were also chosen by keeping in mind the surrounding environment colors eg. bed, wall, etc. as well as the other characters in the game like the male and the female character.
At the very beginning of sprint 2, it was decided that major updates are required for the basic set of sprites, as the ratio of head, torso, arms, and legs are not accurate. This leads to shapeshifting issues when implemented animations and made the movement of characters and NPCs looks strange. Hence, the basic set of sprites were redesigned completely with a more accurate ratio. On top of that, additional sprites for walking in different directions are made to make the animations flow smoother. As is shown below, for each direction, there are five different sprites, one for the status of standing, and the other 4 for walking. This expanded the number of sprites in the basic set to 20.
With isometric sprites created, the scale of original sprites was adjusted slightly to maintain the consistency of character size between original sprites and new isometric ones. This made the transition between sprites much smoother. The size comparison between the updated version of original sprites with scale updated and isometric sprites is shown below.
Finally, with a couple of original sprites resized to match with isometric ones, the rest of them can be adjusted accordingly using them as references. As the result, the upgraded basic set of sprites are finished with 24 sprites from 8 directions. It can be noticed that the number of sprites for walking in different directions is reduced to 2 for each direction. This is because additional sprites created at the early stage of this sprint are very similar to those ones that are already created from the previous sprint, this means having extra sprites does not make the animations smoother as expected but cause negative impacts as they make animations look ‘laggy’. The chosen colour scheme remains unchanged for the updated basic set of sprites.
In sprint 2, all sprites created & updated will follow the studio-wide naming principle, please check the wiki page "Styling Guide and Best Practices" for more information.
With an upgraded version of basic sprites in hand, the male playable character from sprint 1 was redesigned, as is shown below. As is suggested from user testing sessions conducted (see the previous section of this wiki page), only shading was kept in the final outcome and all highlighting was removed to make the character more distinguishable. At the same time, the design of hairstyle and outfit remain unchanged because they successfully reflected the chosen style of “Retrowave”. The only update in relation to the colour scheme was the shading colour of the dark blue outfit. This is because the new colour was closer to the colour of the outfit, which will be easily recognised as shading instead of something else.
In order to finalize the character design for the mom, it was discussed and agreed upon having a neon colour sprite. The color set was chosen as mostly neon based on the retro theme as neon colors give a sense of 80's vibe to the game. The colours were changed from blue to neon green to match other playable characters in the game and. The colors were also chosen by keeping in mind the surrounding environment colors eg. bed, wall, etc. as well as the other characters in the game like the male and the female character.
In early design attempts, some research has been done to design a brand-new character that fits the game theme. The background of the game is at the night in the 80s and the character was in the bed. So, I decided to design a boy which is in pajamas. So, for it, I have found some photos of pajamas online. It happens in the 80s, I also did some research about color. In the end, I have chosen light blue and light yellow for the pajamas. The character from the following sprint is wearing pajamas, and the colors are all neon colors. In this stage, the shades and highlights aren’t added yet.
Base on the feedback, the early design attempt is updated. The color of the cloth was adjusted a little bit, so that makes it will better fit the background. Also, I have added the shades by adding some similar but darker colors to make it look multi-dimensional.
