Speed Painting Study

This lesson was about developing our eyes. We were given a copy of a digital painting and had to do a study of it, judging the proportions, colours and values. Also, we had to work quickly and learn to block out a painting by colours and build on that instead of drawing each detail first. 

I started by adding the green to the black background layer, then on the painting layer above, I blocked out some greys for the hair and top and some skin colour for her head and body. I didn't want to use too many different values and colours here because I wanted to get the overall idea of the image down first. 

Once I had done this, I added the lighter and darker values on the face and hair, also trying not to focus too much on any specific area and keeping up a good speed. I tried to work in a way where each part was as developed as the rest and build on it.

Here I started to really paint and refine all the details, also on the rest of the body. I also added the white highlighted areas and added some shine like in the original image.

I had a lot of fun with this speed painting. I spent about 2 hours on it and stopped there because the point of the task was to practice painting faster. I will definitely practice this more so that I can get quicker at laying the foundations down for my own paintings. Due to me stopping at 2 hours, though, some parts are not as detailed as the others. For example, the ear is not very refined, but the nose is. I also spent a lot more time on the head than the torso. Next time I'll make sure to treat all areas equally. Also, although my colours are very close to the original, I think some areas are not as saturated. With more practice, I'll get better at picking colours using just my eyes. Overall I am really happy with this outcome and have learnt to trust what I am doing early on and not start drawing details to imply form, instead relying on the shapes I am making. By doing this, I was able to just get on with it, instead of fussing around with details in the early stages, which would have taken me even longer to finish in the end.

Anatomy: Skeleton

For this assignment, we had to study the human skeleton, specifically looking at the major bones and the different types of joints those bones have. 

We were given a link to a video by Proko about the 6 types of joints. I learnt that he was specifically talking about synovial joints. These are the most common and most movable types of joints in the body. They are hinge, pivot, ball and socket, ellipsoid, saddle, and plane joints. I watched this video a few times, the last time pausing it in places to make some detailed notes (below). 

As part of the brief, we had to draw or paint the skeleton in the front, back and side views, and make two labelled copies; one with the bones pointed out and one naming the joints. 

I used my notes and began blocking in some basic shapes to start with, refining the image as I went along. I used a head guide on the left to make sure the skeleton was 8 heads tall, which we learnt in a previous class is the average height of an adult male. 

After this, I copy and pasted the image and flipped it so that I could use it as the back view, and began painting over it, changing the background back to white.

 Above is my final image and below are the two labelled versions we had to make; one with major bones and one with major joints.

I learnt a lot during this assignment. I've never studied a skeleton before and originally thought it would be a lot harder to draw one. However, after studying it and first drawing all the bones separately, I found it a lot easier and more enjoyable than I thought. It was very interesting finding out about the different joints. For example, I had no idea that the elbow had two joints that were in charge of two completely different types of movement. I really feel like this extra knowledge will help me during my own illustrations of people and humanoid creatures because I will be able to tell what the limitations of the characters' movements are. I will have a better idea of how an arm might look if I know that the radius should be crossing over the ulna. 

I only did the front and back view as I struggled with the side view a lot and within the time I left myself, I felt it better to leave it. In future, I'll improve on my time management so that I can get things done thoroughly and on time. 

Form Using 4 Values

In this lesson we looked at creating form using only 4 values. We were given a silhouette of a droid with 3 more colour swatches for the lit surfaces, the lit vertical surfaces and the lineart, which could also be used for the darkest shadows. Using these, we had to paint in the droid, using the provided finished droid as a reference. 

 First I blocked in the lit surfaces to give it some depth and to act as a guide for the rest of the values.

 Then I blocked in the lit vertical surfaces.

Finally I added in some lines and shadows using the lineart colour, then refined it and made the edges neater. I also added a glow around the two lights on the droid, like in the reference image. Here is my final version.

 After this, we were to duplicate and resize the droid, using the perspective guide provided and adjusting the values through the levels to create the illusion of atmospheric perspective. This is when something is further away from the eye, so the values have less range and appear lighter. It's also harder to make out details. A good example of this is looking at an expansive grassy field with hills during the day. The grass and trees closest to the eye will appear green, but the further away they get, the more blue they are and lighter they are.

Here is what I ended up with.

I am quite happy with the way I showed the atmospheric perspective. Since there was no colour in the background, the only thing I did to each droid was adjust the levels so that the details were harder to see as they go further away and they appear lighter. I also made the little lights less intense in each droid, with the last one not having any light at all.

The droid itself could be better. The lines are not as neat as the reference image. Next time, I will need to be more patient and keep my hand more steady. Still, it definitely has form and looks like a 3D image, so I am content at having learnt the technique well.

Anthropomorphic Character Design

For this assignment, we looked at anthropomorphic character design. We had to design an anthropomorphic exotic frog. 

I wanted to do something interesting with this because although I am not well practiced in drawing animals and other creatures, I really love to design characters. Originally, I thought of designing a frog witch of some kind. However, after researching different types of frogs, I found poisonous tree frogs. I thought that one who was also an alchemist, as alchemists in games are usually associated with poisons and potions, would be very cool and would make a lot of sense visually. 

I started by making a moodboard. 

After this, I tried to study some real frogs, as I have never drawn them before. 

I got started on my character by blocking out the silhouette and beginning to paint on top of it. 

Once I was happy with the proportions, I added some clothes and accessories.

Above, you can see how I struggled a bit with the shoulder area. I made the sleeves on the coat too low, forgetting where his shoulders should be. I fixed this after noticing the mistake.

Here I used some adjustment layers to make the whole image lighter. I am getting used to painting first in grayscale but I still struggle with values and my paintings end up being too dark. I thought that the adjustment layers would help here.

Next, I started adding some hues on a colour and a multiply layer.

After painting in the smoke, I used a gradient map to make the lightest values pink and the darker values purple. I purposefully painted the smoke from light to dark so that I could do this.

I added in the colours for the potions, cleaned it up and added a few strokes on very low opacity on the bottom to add to the smoke.

There is a spotless version of the frog and a spotted version. The spotted version is more accurate to the reference images I used, as I was directly inspired by the blue spotted frog. However, I feel that the spotless one looks better. I was not sure which version I liked more, so I included both.

I had so much fun with this assignment. I am glad that I tried to come up with a role for the frog, as I'm not sure I would have enjoyed it as much. I learnt that anthropomorphic designs are usually as if the animal has a human skeleton, so the arms and legs act similarly to a human's.They are still recognisable as the animal but can function like a human. If I could change or add anything though, it would be the frog's shadow. I forgot it.

I also learnt about gradient maps along the way and adjustment layers. I feel much more confident in my own paintings after this assignment.

Perspective and Lighting: Tank

For this homework, we were to design a tank or armoured vehicle and present it using the perspective and value lighting techniques learnt in class. 

Here are some images I used when designing my tank, along with my sketches. 

At first, I looked up some typical designs. Vehicles and weapons are not things I am personally interested in, so at first I found it difficult to come up with something. I thought of trying to combine it with my own interests and thought of a tank that might be used comically in a cartoon aimed at children. I came up with a tank covered in love heart motifs, and planned to colour it appropriately bright. However, I scrapped this idea because I wanted to push myself by doing something out of my comfort zone. A lot of the assignments on this course are out of my comfort zone and I won't learn anything if I don't push myself. So then followed the idea of a stealth tank that is very sleek. I looked at some actual stealth tanks and other similar sleek vehicles before starting on the image in Photoshop.

Following the advice in the brief, I put the first vanishing point slightly to the left and put the second vanishing point about 1.5 the length of the canvas to the right. This helped to keep the image from looking unnaturally distorted. I started by putting in some boxes to get the overall feel for the proportions as well as the perspective, using the shift key to help with straight lines.

As a note, I kept the perspective lines on and created more as I went along until I added the values. I did not include them in the process images below because I wanted to show what I did clearly.

After I was happy with the tank sketch, I made a new layer and turned the perspective lines into path lines. I then put the sketch layer back on but turned the opacity very low so that I could follow it as a guide and began to erase the lines I didn't need. I did this to keep the lines as accurate to the perspective as possible, as I noticed during the sketch stage that it was really easy to create lines that did not go perfectly where they should.

Then I started to add the values. My tank is a bit more complicated than two boxes stuck together, so although I tried to use the halfway to black method we learnt in class, it wasn't as straight forward. Still, I thought referencing this method roughly might end up with more convincing values than if I had just eyeballed it, so I carried on. I started by putting the easiest values in; the top and side planes.

After this, I made the value of each plane the middle value of the planes surrounding it. For example, the plane on the front of the tank that is at an angle, I set the value to half way that of the top plane (40% grey) and the front planes (55% grey), which made it roughly 47%. I used this method for all of the tank then adjusted the values slightly in some areas to make it more convincing.

Here is what I ended up with.

I struggled with painting this as I have a lot of trouble painting flat surfaces without blending values too much, so in the end I left it at this stage. I think that the values could be better and will practice more painting shapes that are more complex than cubes. I am very happy with the design of the tank, although the back end of it looks off. Also, I feel it could be a lot more detailed.

Using Value to Create Form

In this lesson we learnt some techniques for shading matte surfaces. 

The technique that I practised below is called the halfway to black technique.  You use three different values to create the illusion of a 3D object in a 2D space. We used boxes to demonstrate this. To determine these values, you have to use some maths. First, you pick the top surface. On my first box I wanted to play around with darker values, so I chose 40% grey. The surface furthest away from the light will be the darkest and will be between 100% grey (black) and the lit surface. In this case that was 70%. Next, the surface at an angle to the light source is half way between the lit surface and the darkest surface, which was 55% grey. Finally, the cast shadow is half way between the value of the floor (0% here) and black. This was 50%. 

For my second box, I changed the colour of the floor to 50% grey and used a lighter value to start with on the lit surface, 20%. The shadow surface is 60% and the surface at an angle to the light source is 40%. This is the same as one of the boxes shown in class, however, the floor is a darker value so the shadow is also darker, being at 75% grey. 

I found this technique really useful because it applies in any situation if you can do the maths. For the first box, I originally started to use 30% grey as the lit surface instead of 40%, but I changed it because I found it too tricky working with the odd numbers. I need more practice using odd numbers. Also, the painting for the first box looks quite sloppy. I was unable to keep the edges straight. By the time I painted the second box, though, I had gotten the hang of it and this box looks much better.

Gameplay & Interactivity: Creating Atmosphere (Winter Submission)

Our brief for this submission is to create a basic design and grey box for the opening sequence of a first person game. We are to work as a designer in a games studio during the pre-production phase. The sequence must be scripted using the Unity games engine.

The level must have 3 triggered events, music and sound effects and at least two minutes of game play. It cannot go over 3 minutes, have artificial intelligence or realistically textured meshes. The support material must include a one sheet, a story board, a map of the level and any models that have been created as part of the process.

Here is my one sheet. I made it with the idea of a full game in mind.

I was quite undecided about the name for a while but decided to go with the most defining part of the game; the pillar of light that the player must get to during the opening sequence. Once they get there, they are to make a choice between offence and defence. In the final version of the game, I changed these options to "weapons" and "items." What would happen next is that the game will treat the player differently based on which choice they made and different opportunities would be presented to them. Some scenarios would be identical but the options your character is given to deal with these situations would be different and ultimately lead to a different experience.

I then made a map of the level as well as the storyboards.

There are quite a few triggered events. The first is the tree falling. The next is the broken bridge area which triggers some dialogue from the character. The planks also have their own trigger boxes attached to them so that they change colour and are interactable when the player is near. There is a trigger box at the end of the path way for some more dialogue. Finally, there is a trigger box surrounding the light that triggers a dialogue box to pop up and stops the player from being able to move, allowing only for input on the dialogue box. Once a choice is made, the light gets so bright that it blinds the player and completely washes out the scene, ending the level.

Here is my progress.

I started by making a plane in Maya but after exporting it into Unity, I decided a terrain would be better because I needed a lot of trees to make a forest. I also found the terrain tools to be convenient when making raised and smoothed areas.

This came with its own set of problems though; the FPS controller from the standard assets was out of scale with the terrain and I had not realised that I would not be able to resize the terrain after I had already moulded it into what I wanted. Instead of redoing the whole thing, as this would have been too time consuming, I decided to play around with the settings of the FPS controller first to see if I could fix it. Just making the walk speed faster made the movements too unrealistic; the head bop was too fast and the footstep sounds were too slow. However, I found that by making the walk speed match the step interval, as well as doubling the new walk speed to make the new run speed, all the movements were much more realistic and the FPS controller moves around the level at a believable pace. I also checked the Smooth box to make the camera movements follow the mouse a little bit slower than without it. It is important that my game immerse the player as much as possible and I felt that the smoother movements added to the atmosphere.

Here is what I ended up with.

I wanted to restrict the player's movements in the very beginning of the game to help set the story. I did not want the player to just charge into the game without understanding the context and hearing the clues on where to go and what to do. I had no previous knowledge or reference point for this, but I thought that it must have something to do with the character controller. If I could disable the character controller completely, that would allow the camera (the "head") to still be active whilst otherwise restraining the players movements. I went into the FPS controller script and had the character controller set to false. Then I added a coroutine to make the script wait a set amount of time before allowing the character controller to be true. The amount of time was determined from how long the dialogue lasted for, which I set up in a separate script. I also used the StartCoroutine function for this and other bits of dialogue throughout the game. I like this part of the game because it lets the player look around and take in the area whilst the story is being set.

I animated a tree falling in the beginning in Unity. I found it quite difficult at first to get the timing right, originally having it last for one second, but then I added a tree falling sound onto it. I changed the timing so that it moved with the length of the sound clip and now it feels more realistic. I created the trees through Unity's built in tree editor. Originally I only used one type of tree, but later added a second one to try and make the forest look more like a real one, where the trees are not all identical.

I struggled with having the tree falling sound clip play at the same time as the voice over. The game object only had one audio source on it, so I tried to put two instead so that the different clips could be taken from different sources. Unfortunately, this didn't work either. I wanted to keep as much of the coding in one script as possible, but in this situation I found it easier to create two new empty game objects on the parent animation trigger and add two separate scripts to them; one for the tree crashing sound and one for the voice over. This worked a lot better because each object had its own audio source on it.

The "keys" and the broken bridge were the hardest parts for me to code. Because my level is set outside, instead of having a key open a door like we learnt in class, I decided to have a broken bridge that needs to be fixed before the player can cross. I wanted to push myself so I made two "keys", which are actually planks.

I had 6 planks in total; two were the missing planks, two are already placed at the bridge, and the last two are deactivated, waiting to be reactivated and used. I decided it would be easier to have these last two planks act as the missing planks so that I could position and animate them along with the other two that are already placed there. This part was tricky because I needed both missing planks to only act as a half way point between fully opening up the blocked pathway. If the player approaches the bridge with one plank, only one plank will be placed and they will be prompted to go and get the other one. If the player approaches with both planks, then they will see both being placed at the same time. However, I kept having the issue of either plank triggering both animations to take place and fix the bridge. I realised that this was happening because I was using only one script for both of them and that I would need to make separate specific ones so that they could act independently of each other.

I also struggled with the voice overs that are triggered when interacting with the planks. I had two audio clips; "This should work... I might need another one though." and "Perfect." I wanted the first clip to work when collecting either plank as long as it was the first one that had been clicked on. Likewise, I wanted the second clip to be played when the player picked up their second plank. I found that using public static bools "gotPlank1 = false" and "gotPlank2 = false" in my globals script helped make them specific. After that, it worked fine.

There is a bit of a lag in terms of pacing as the player makes their way to the light after the bridge has been fixed. Originally, I had placed a trigger box about half way down the path which would trigger a growl audio clip, followed by the character reacting to it. After this, I had planned for the run speed to increase as if she were sprinting. Unfortunately, I could not get the speed to increase through code and also could not get a suitable sounding growl. This is now a very boring part of the game and I regret not being able to come up with an interesting, effective solution.

I added some planes in to give the appearance of water. I used multiple planes and sorted them all as children of an empty parent game object. I added an audio source to this and attached a one minute long audio clip of a stream, making it loop so that it would last as long as the level. The loop is quite seamless. I changed the spacial blend to "1" to make the sound 3D then set the volume rolloff to "Logarithmic Rolloff" so that the further away the player is to the water, the harder it is to hear it. As the water is always on the right of the player if they follow the path directly, I moved the stereo pan slider to the right, to "0.53". This was to help with the atmosphere and immersion.

I chose not to have any music in the level because I felt that the forest sounds in the background and the voice over were enough to contribute to the kind of eery atmosphere I wanted. Music would have taken away from the feeling of being alone in a dark woods.

The voice overs themselves were recorded by me and voiced by Harriet Cheshire, my housemate who is a 2nd year Illustration student at UCA. I used a recorder that I borrowed from the university. The quality of the sound is not very good, so if I used voice acting again in a game whilst here at UCA, I will definitely try and see if there is an option for better sound equipment. I felt that having the character talk would add more to the story and atmosphere. My weakness is coming up with fun and interesting gameplay, so I focused on my strength; creating and telling stories. I originally wanted to add subtitles for all the voice overs, however I found this difficult to execute after the first bit of dialogue and in the end decided that it is more effective without the subtitles. The player can immerse themselves easier if they do not have to bother with reading as well as listening and looking around.

I did not model anything in Maya specifically for the game because 3D modelling is another one of my weaknesses and I did not want to complicate the process of making this game any further. I really wanted to focus on the coding, gameplay and aesthetics. To make the bridge, I used cubes created in Unity. However, I did use some rocks that I had created for my 3D Art Production class. I added them to try and make the scene look more like a forest. 

Finally, I created the menu at the end of the level by using several panels and buttons. Using an image, I stretched this to fit the canvas then set its transparency to 0. Then I used the animator to create the flash that we see when the player presses a button by manipulating the transparency. I created a script so that I could access this through the built in OnClick function on the buttons in the inspector. This part was very tricky but after some searching online, I found that I needed to make a new public function that would contain my animation play command, and only then I could access it through the inspector. I did the same thing with the text that appears at the end; I had its transparency set to 0 for 2 minutes and 30 seconds (the length of time the flash takes to turn the screen completely white) before it then begins to fade in. I also put the gasp audio clip into the PlayAnimation public function I created so that it would run at the same time as the two animations through one function.

The trigger for the menu did not work when the game was turned into an .exe file. It worked perfectly within Unity, but for some reason it did not work in the .exe. Fortunately, I found out that it had something to do with the rigid bodies. The trigger did not have one so that the player could walk through it. What I did instead was delete this trigger box, add a capsule collider to the light, which is actually a cylinder, and add the relevant scripts onto the light. At the time of writing, this seems to have fixed the problem.

Creating this level showed me that there is a lot of trial and error in scripting a game as a beginner. At first, it was difficult as I did not know what I was doing and I mostly used the things we had been taught in class as a close reference. However, as I created more and more scripts, a lot of the basics started to come naturally to me and I am more confident now. I found more creative ways to solve the problems I came up against, but when I could not figure it out I would refer to the Unity forums and tutorials. I feel that this level was a success and am very pleased with the result, although I feel that my idea was too big for a first game and as a result, it feels incomplete. As said before, the game is lacking in areas in terms of gameplay. For my next personal game project, I will try to explore more games to see what kinds of design I could implement into my own games. I will also manage my time better next time and make sure that I meet the milestones set by the tutor.