Peacock

For the first playtest as we had a time crunch I focused most of my efforts in having the player character ready we decided to keep using the environments artist peacock before swapping it for my design.

Before I animated the peacock I sought out reference videos of peacocks walking.

What stuck out to me was how their “knees” worked they seem to be backwards compared to a humans so I decided I would need an upper and lower part of the leg.

To animate it I cut out the separate parts using Photoshop’s lasso tool. I then copy pasted each element onto separate layers being sure to name each one.

To finish I saved each frame as a separate PNG and sent the folder to our Mechanics Designer.

The finished rough walking cycle. even though there are issues I am happy with how this has turned out and it will do for the first playtest.

Peacock Second Animation

For the next playtest I want to have my design of the peacock fully animated. Once I had designed it and gotten the approval of my team. I took a photograph of the parts and opened it in Photoshop, I did this because scanning it into the printer warped the colours quite a bit. In Photoshop I upped the saturation and levels so that it popped more.

I then organised these parts into a folder and arranged them in my first key frame, I then immediately duplicated this folder as it will both be the first and final frame of the animation. I then made the middle keyframe for this walk cycle I determined this would be when the peacocks feet are crossing over as it steps the next foot forward.

Then I worked slowly and meticulously working one frame at a time with the one below it on a low opacity so I could see how far away I was moving the parts. I worked up to the middle frame and then arranged the next frames to get the peacock back into the first frame’s position, ready to start the cycle again.

To make the animation I used Photoshops timeline feature to make a frame animation, then I merged all of the groups (after I had backed them up) into single layers then I made frames from layers.

This is what I had, the main issues were where I had cut the neck there were obvious gaps. Using the paintbrush tool again on a new layer in each group I overpainted to cover the gaps.

Before and after of the neck as I did each frame individually there are some inconsistencies but I like this look as it makes the neck look like it’s ruffling.

This is the finished animation. I exported all layers as separate PNG’s and added them to a shared onedrive with the mechanics designer so that she could add the peacock into the game. I am really happy with how this came out, I really like the effect on the tail feathers.

Pre-minigame Peacock

Deer

As with the peacock I sought out deer walking references this time in image and video form as deer are more commonly animated.

I then scanned the finished deer parts watercolour into Photoshop using a printer.

Unfortunately the printer’s scanner was far too bright for the delicate, light colours I used. In Photoshop I tried to fix this by using levels to increase the contrast and saturation. I then went about and cut each individual part out and put it onto it’s own separate layer.

After I had done this however I was really not happy with how the deer looked. It was far to bright and luminous I wanted it to stand out against the darker lake location but not by this much.

So I opted for simply taking photographs of my painted deer parts as seen below.

Once I opened these in Photoshop they were a little too dark.

Now that I was pleased with how the deer looked I cut the parts out again and organised them into folders and subfolders for the legs. As with the peacock I treated each frame as a group assembling the parts in one group then duplicated it and manouvering the parts in the new group. To keep the deer grounded in a space I used a black line so that I could make sure the correct feet where always in contact with the ground. This should help make it look more realistic. I also checked that things were on track often by seeing how the movement of all the legs looked together, if the gaps were too large or small I went and readjusted the frame it was on.

To try and give the deer more animalistic natural movements I incorporated the 3/4 head for 7 out of the 14 frames. For the walk cycle’s first iteration I included the use of a smear frame for this head turn to give it some movement.

Once the walk cycle was done I went over each frame with the paintbrush tool to draw over any alignment issues.

The finished walk cycle, I exported al of the frames and sent them to our mechanics designer. Once the animation had been imported to unity the smear frame looked strange so we removed it for the week 8 playtest, this unfortunately made it behave strangely and jilted in the game during that playtest but afterwards I fixed it.

The fully finished deer walk cycle, I am very happy with how this came out. It was a big challenge to animate something with four legs so I am especially happy that it is smooth and looks good. There are some issues with the head looking very inorganic, if there was more time I would animate possibly the snout, ears and eyes.

After week 3’s decision to revert the roles I began designing the animals.

Peacock

To get a feel for the bird I decided to sketch it realistically first before I began stylising it.

After I had a design I liked I drew and painted it.

I wanted the peacock to reflect the aesthetic of the game so I tried to add underlayers of purple and yellow into the blue. I initially struggled with this and accidentally put the yellow when the paper was too wet so it bled too much. When I paint the parts to be used in the game I will need to be extra mindful of this.

The top version is the peacock when the player first encounters it and the second is after they have played the minigame. The hope is that the white spots will act as a subconscious prompt for the player to colour it in.

Once I had the design of the peacock I got to work painting the indivudual parts for the animation of the peacock.

I began with a loose pencil sketch of the parts, I drew them close together so I could have the sizes right. I then slowly began building up layers of watercolour, introducing light washes of purple and yellow – being sure to not repeat the mistakes I made in my earlier painting.

As the painting was coming along I got the idea to paint more pronounced feathers, I think this added more interesting visual detail and incorporates the impressionist influence from the GDD.

This is the finished peacock I am very pleased with how it turned out and our technical designer liked it too, I will now scan it into Photoshop so I can start animating it.

Deer

For the parts of the deer I separated the legs into three parts that attach to a main body and there are two heads that can be swapped out as if the deer is looking around.

I reused the same techniques as in the concept art as they were successful. I made sure to be patient as I was adding the layers because the paper stayed very wet due to the blending I was doing.

These are the final pieces I will now scan them into Photoshop to cut them out and do digital retouches. Then animate them.

I have never animated with physical materials before so I conducted research into paper art and started looking at some motion references. Whilst I was designing the character I had the idea that she could float instead of walk. This is a video moodboard of the references and flying techniques I sought inspiration from.

Growing up I watched a lot of this cartoon called Winx Club, they are fairys and everytime they would fly they would have their legs arranged with one at a bend and the other straight, this creates an interesting sillhouette for character design and easily communicates they are off the ground if the background is blank.

Scarlett Witch from Marvel had an interesting way she moves her arms when taking off and landing, it is graceful and elegant.

I also looked at superman his resting hovering pose is similar to the fairies with the one bent knee.

After I looked at these references I created a short animation in Flip a Clip to show my idea to my team.

This was well recieved so I got to work making a paper prototype of her idle pose before I spent time painting the actual character. I divided the character into seperate elements.

• The head connected to the body and upper part of the arms.
• Left hair
• Right hair
• left lower sleeve
• right lower sleeve
• left hand
• Right hand
• Left leg
• Right leg

I then drew each piece seperately and cut it out. I then taped the main body down onto a piece of paper and set my phone camera above the paper so it wouldnt move whilst I arranged the pieces.

This was a success and gave me confidence that I can create a refined version. It also highlighted to me where my weaknesses were which was to lump elements together even though the hair is going down the arms are going up. I will need to pay close attention to this later.

First Playtest Version

Before our first playtest on the 26th of February we want the character fully animated. So the week before the playtest I created the parts needed for animation.

This is a sketch page of the flying animation. I drew the character and made notes of what would be moving and what pieces I would need. For the pose I used a free model poser app – Magic Poser to create and tweak the pose I wanted. Every blue circle is a piece that you can manipulate.

I then drew and painted the final version

I then took the parts and photocopied them, emailing the results to myself. I did it at 300dpi on an A3 size.

I opened the files in Photoshop and used the object selection tool to quickly isolate the elements. For any parts that were missed I used my XP pen tablet and the quick selection tool to draw over the areas adding them into the selection.

To actually create the animation I put all of the elements into a group and arranged them into the first frame, I then copied and pasted this group renaming it to frame two. Then suing frame 1 as a guide on low opacity I made minimal changes moving the legs and hands up. I continued with this until I had ten frames, she reaches the peak of her height in frame 4 then slowly comes back down to end up in the same position as frame one.

Once I was happy with the frames I used Photoshop’s built in video feature and made an animation then after I had flattened the layers (keeping a copy of the unflattened layers in a seperate document) I clicked make frames from layers.

This is the timeline view, it took a couple tries and some tweaks to get it looking presentable and like what I envisioned but eventually I saved each layer as a png and put them into a onedrive folder I shared with the mechanics designer.

For the movement animation I repeated the exact same steps except with the skirt every two frames the alternate ruffles display. My hope with this is that it would look like the skirt is blowing in the wind.

These are the finished animations as looping GIFs. I think that the skirt idea has not quite worked with the current execution but I am happy with these for the playtest.

Second Playtest Iteration

Idle Animation

For the idle animation talking onboard the advice I got during feedback week, I wanted the character to look more graceful so I pushed the movements to be bigger. Starting with the first frame this is when she is about to go up so her hair is tight to her body as well as her arms and hands. For the middle keyframe when she is at the highest peak I made it so that her hair is fanned out behind her and her arms are wide.

To further try and show the characters gracefullness I overpainted on some frames the fabric of her dress moving with her.

This is the finished idle animation. I believe this is very successful and a vast improvement over the previous animation.

Movement Animation

For the movement animation I repeated all of the previous steps, upping the levels, cutting out each part and putting them onto individual layers.

This is the final animation, it is slightly too fast but once it is in the game and in motion it should suit the characters movement. I am pleased with how this came out, there are still some issues but it is an improvement on the first iteration.

The Character

The player character from the GDD is an ethereal magical being. She is a young forest keeper learning how to help the animals and environments throughout the game. Her physical appearance is heavily inspired by nature and mother nature as well as fairies.

This is the reference board for her. After looking at it I noted the draped layering fabric, long hair and the faceless nature of the images. I imagine not only does this reinforce the mysterious, mystical nature of the game but would also allow the player to project themselves onto the character easier.

After looking at the reference board I looked for some fabric references these are fabric simulations giving them a dreamy feel.

Initial Sketches

Designing the Dress

It was clear from the references that the characters dress is very important to her characterisation so I took my time with this stage of development and created a variety of options. The main issue I ran into was how these ambitious designs could be translated into animation, finding ways to make the process easier is important due to the tight deadline.

I began by looking for my own reference images and sketching out aspects I liked from each image, also keeping in mind the original reference board.

Colour Experimentation

As specified in the GDD the character naturally changes colour to match the current environment she is in. Now that I have the finished design – her colours being her “natural” ones, I decided to take the image into Photoshop and change the colours.

I used the object selection tool to select each element that needed to be changed and copy pasted them onto seperate layers. I then used the clipping masks on seperate layers using the blending mode ‘colour’ to change the colours but keep the definition.

Though these werent used in the vertical slice, it was helpful to see how the design could be changed.

First Iteration

Once I was confident I was prepared I began drawing the elements. To ensure the character stays consistent over the two animations I drew them both at the same time. Once I was finished with one element I would draw the corresponding element on the other page.

I then inked both with a black fineliner pen using a gummy eraser to remove the pencil lines.

I then painted both of them using watercolour. As with drawing them I painted each simultaneously so the colours would be consistent. When painting I used many of the same techniques as I did on the final character

Once both were painted I cut them out using scissors, this was somewhat difficult next time I will use a scalpel to get more precise cuts.

Animating the Player

How I animated the player

Character Redesign Using Feedback from Playtest Weeks 7 and 8

Using feedback from the playtest where it was recommended for me to separate the “puppets” into more parts I began sketching the designs and outlining with a black fineliner pen. The goal is by further seperating each part the character will feel more organic and fluid fulfilling the GDDs vision for her.

Whilst I was painting the character I kept the images and references of both the past versions of the character and the backgrounds so that I could make the correct colour choices. I also painted both at the same time again to ensure consistency.

These are the finished designs, Whilst I wa painting I overworked the face on the first one so I redrew it on a separate piece of paper. I am very pleased with how these came out, the colours are more natural and will fit with the environment better. I will now create the frames needed for the animations from these.

Character Design Reflection

Throughout this semester I have tried to pursue more things that align with my career goals of being an illustrator. This has led me to take on the Whispers project and over the Easter break to create a draft of a childrens picture book. I have greatly enjoyed these two side projects and they have helped inform my work for the games development module.

In these three projects I have created and illustrated characters in all of these projects. The most important skill I have developed and refined further is how to keep character and style consistency for whichever project I am working on. Illustrating the picture book before I created the cutscene gave me experience on drawing the same charater from different angles and helped me get used to illustrating with texture and good colour palettes in Photoshop, where I ultimately developed the cutscene in.

For the Whispers project I learned a lot about how to simplify designs but keep the core character there. As too many details gets messy and things can easily be lost. I applied this to the player character by removing elements such as the flower crown, and other nature elements. However what those elements suggested was not lost due to the green/nature colour palette and how the character carries herself.

I am ultimately very proud of the work I have done on the character for this project, the improvements I have made with each iteration are clear and readable and she matches the GDD vision and the atmosphere of our game.