Week 4&5 – Experimentation

In order to get more practice in experimentation of work I have researched into fear and how it has been done before in my chosen discipline (pixel art).

To do this I looked at examples of how pixel art and horror have come together in games before, researching into how they play around fear, be it through the whole game or the background, physical fear or psychological fear.

What is fear?

Fear is an emotional response that is caused by perceived threats but fear doesn’t just have to be being afraid of a physical threat that’s in front of someone, but can also be completely psychological which could cause a person to hallucinate or cause the emotional response to trigger despite no obvious threat.

 

Examples:

The first game I looked at was a fairly recent one that has just recently got out of a kick starter and onto the steam store.

The game is Teddy Terror in which the player takes control of a child who went to sleep one night only to wake up in a hellish nightmare, this allows the game to explore the idea of fear through a young child at an age where anything can be terrifying to them, the developers said the only reason he able to outrun the monsters is because he’s used to outrunning other kids at school, this plays on an idea of how reality and nightmares can correlate with one another.

Trailer:

From looking at some of the big bosses at the end of the trailer they seem to almost represent things that a child could be afraid or not want to do in the real world.

Bananuts could be a representation of the pressure of eating healthy that is usually thrust upon children, and again with the green ogre with vegetables. The big tooth could represent either the fear of going to the dentist or a tooth falling out.

From this example I gained the idea of creating fear by using real world issues and exaggerating them to create something terrifying.

Rage Monster Games. 2015. Teddy Terror (Canceled). [ONLINE] Available at: https://www.kickstarter.com/projects/ragemonster/teddy-terror?ref=nav_search. [Accessed 25 January 2017].

 

The second game I looked at is from 2012 and expresses fear differently to Teddy Terror.

The game is Lone Survivor, the game is set in a city where a deadly disease has ravaged through it and the character decides that he must escape no matter what, but there’s one issue, he doesn’t know what is real anymore. This horror game pushes the idea of fear through possible insanity where the player must decide how to survive the city while constantly trying to make sure the character doesn’t descend into madness. This game also uses its environment to create fear as it uses a very dark colour palette as well as a limited light source which mainly comes from the character’s torch.

Trailer:

This game gives me the idea that maybe I don’t have to actually make a physical threat at all but show fear through the unknown, the unknown of if what is being perceived is anywhere near the reality. It also showed just how important environment can be in creating horror.

 

Jasper Byrne. 2012. Love Survivor. [ONLINE] Available at: http://www.lonesurvivor.co.uk/. [Accessed 25 January 2017].

 

Fear Pixel art:

For my experimentation I decided to continue with the idea of the unknown but I also thought to give it a supernatural twist, taking full influence from one of the most famous places supernatural/extraterrestrial speculation: Area 51. Although my version of Area 51 is in a greener environment instead of the Nevada desert. The Image size is 124×124 pixels.

Moonlit Road
destinationsdreamsanddogs, (2016), p16 [ONLINE]. Available at: http://www.destinationsdreamsanddogs.com/wp-content/uploads/2016/03/p16.jpg [Accessed 26 January 2017].
Above is the main image I used to assist me with my work, the rest was done using my imagination.

I started by creating the main road leading up to the base, creating its base first with some shading to indicate the edges and then adding on the lines on the side and down the middle, while creating the lines down the middle I had to take in careful consideration that the further away they were the smaller they would appear. After completing the road I focused on bringing some more of the surrounding environment into it by putting in a flat grass area around the road and mountains into the background. After I created the moon I debated whether to insert stars into the dark night sky, and thought that I could also explore the fear of nothingness as well as the dark by leaving it black.

capture3 capture4 capture5 capture6 capture7

Once I had the environment finished I moved onto creating the main forefront of the image, I did this by creating the wall, gate and the American Flag. The flag lacks detail in order to be appropriately sized for the image. My colour choice for much of the image is quite dull and grey, this is in order to give off a slightly dystopian feel to the location. After adding in the barbed wire along the top of the wall I put in a couple of soldiers to guard the entrance, although they may look weird for being green, this was in order to give off a feel for their uniforms, the soldiers and their weapons are very of a very low pixel count to account for the smallness of the whole image.

capture8 capture9 capture10 capture11 capture12capture13

I put signs on the outside to signify what this place is but would have preferred to make them smaller compared to the wall size but could not for this image. Once I had the foreground finished I went to work on the base, again keeping with the grey/dark colour theme but with yellow on the outside to signify lights. Once I had the whole Image together, I really thought that I could go further with it, and although it breaks away from it being entirely done pixel by pixel I decided to further the mystery of the piece by using the brush tool, switching to a ominous colour and lowering its opacity to make look like a glow was coming from the base, further exploring the idea of the supernatural and unknown. I decided to switch the soldiers to red to represent danger, while also removing the outline on the flag because that’s not how flag looks.

I am quite proud of the piece as it was my first full on attempt with pixel art and it did come out quite well. When I look at it I find that every individual part of it comes together to compliment one-another, and even with its lack of details, it is very clear what each part of the image is. Overall I think as a starting point into creating pixel art it was a huge success as it gave me pointers on how to tackle issues that arose, especially those with sizing correctly with foregrounds and backgrounds.

If I was to do this again, I would definitely make sure I’ve got more time so I could make the image size bigger and add more detail to the piece. I say that because I really don’t like the look of the soldiers, although it was just a beginners piece, I didn’t like the look of some parts due to the inability to lack detail, a fault on my part as I thought that I was going to have enough pixels to work with.

Colour Code list:

#d01818              #6d6969               #b9aaaa              #a08f8f               #31ae14

#000000                #a3a2a2                 #141147               #0f0a38              #0c092e

#2e3a42                   #251616              #090505                #d2bebe             #ffffff

#987878               #cdcccc                   #3e3e3e                 #140e4c               #0e0a37              #0c082c

#2b3446                #0c0707             #7a5c5c                  #b72b2b             #1d31cd                 #282f4a

#09100d               #c8c8c8                 #262626                #110d43               #0f0b3b               #050312

More Experimentation:

This time I researched into Fantasy character designs and in order to get an idea what they could look like and what pixel size would be best.

I looked into the original final fantasy (FF1) game which was released in 1987, I chose this example as it was a pixel art game and is also based in a fantasy world as well as it being a huge success.

In order to get an understanding of how characters look in pixel art I found a sheet of all the FF1 playable characters, which will be a huge help when creating my own as I will have something to look at for inspiration. Final Fantasy has 12 classes which start with base classes and then get upgraded into a more powerful class, these are:

  • Warrior –> Knight which are front line fighters who can take a hit.
  • Monk –> Master which can’t take much damage but can deal a lot.
  • Thief –> Ninja which are a good balance of the classes above.
  • Red Mage –> Red Wizard which are good at anything but aren’t as good as the others later on in the game.
  • White Mage –> White Wizard which are mainly the healers of the group.
  • Black Mage –> Black Wizard which are the very powerful magic users whose specialty is offensive magic.

Each class is designed with a specific purpose which is something I should take into account when designing my own characters.

nes-final-fantasy-1-light-warriors
Polar Koala, Dixet, (2017), Playable Character(s) [ONLINE]. Available at: https://www.spriters-resource.com/nes/finalfantasy1/sheet/10555/ [Accessed 26 January 2017].
retrowalkthroughs. 2017. final-fantasy-1/character-selection. [ONLINE] Available at: https://www.retrowalkthroughs.com/final-fantasy-1/character-selection. [Accessed 26 January 2017].

 

During my research I also found this extremely useful guide from an industry professional who worked on one of my favourite pixel art games, Rogue Legacy.

In this guide he talks about how 32×32 pixel grid size is probably best for character design at the beginner level as it isn’t took big of canvas to work on, and is also a power of 2 of which most engines run on. The issue with this guide is that it’s out of date by a few years.

https://www.raywenderlich.com/14865/introduction-to-pixel-art-for-games

 

With this in mind I decided to start on a few ideas of mine, similar to the classes of final fantasy but not the same.

Paladin:

I’m basing the look of my first design around the character Uther from World of Warcraft as he is also a paladin.

uther-colour

projects.inklesspen.com, (2016), 378780d12c8ef1e439356ed6af4e34289fe68e9ce105fc43ba105cb6c0522715 [ONLINE]. Available at: http://projects.inklesspen.com/fatal-and-friends/images/378780d12c8ef1e439356ed6af4e34289fe68e9ce105fc43ba105cb6c0522715.png [Accessed 26 January 2017].

pinimg.com, (2016), b1f5e6d0aec1267939d42481302b4d8f [ONLINE]. Available at: https://s-media-cache-ak0.pinimg.com/564x/b1/f5/e6/b1f5e6d0aec1267939d42481302b4d8f.jpg [Accessed 26 January 2017].

projects.inklesspen.com, (2016), 378780d12c8ef1e439356ed6af4e34289fe68e9ce105fc43ba105cb6c0522715 [ONLINE]. Available at: http://projects.inklesspen.com/fatal-and-friends/images/378780d12c8ef1e439356ed6af4e34289fe68e9ce105fc43ba105cb6c0522715.png [Accessed 26 January 2017].

The paladin class would be able to take a lot of damage as it is their job to defend the people around from all danger and they can also use light healing magic, but they don’t deal much damage in return.

I started first by trying to get the shape of the silhouette of the character.

capture1

Once I had the rough silhouette I went about colouring the character part by part, first I started with the legs, both done on individual layers, for the legs I put armour plating at the front of each leg while using brown to symbolise straps holding the plating to the legs. Once I had finished the legs I moved onto the main body, doing a similar process to the one I did with the legs except this time I kept the top half without detail, this was because I knew the right arm would be covering most of it, for the right arm I focused on making it a fairly metallic colour to demonstrate the fact their arm is armored. Just after completing the arm I created the hammer, making sure it was above the body but under the hand, for the hammer’s design I went for a basic look which was made from 2 different metallic colours for the handle and the head.

capture2 capture3 capture4 capture5 capture6

I then got to work on his left arm and the cape. I shaded the inside part of the cape to show the lack of light due to his body blocking it, although this usually wouldn’t happen as the cape would most likely curve around I decided to go with this as it’s quite a small cape. Once the arm was complete I created the shield to go onto the end of it, the shield in the image is at an angle facing away from the viewer, so it looks small but it’s the angle making it look like that.

last-capture

Finally I created the helmet to go on top, although the images I used for inspirations don’t use a helmet I decided to put a knight’s helmet there instead as I wanted to fully armour the character seen as they are meant to be able to take the most damage. If I was to redo any of this, I’d definitely add some shading to the legs as they look too flat and there is nothing to show which leg is which.

Image I used for helmet inspiration:

clipartkid, (2015), knight-helmet-logo-texas-knights-of-columbus-T7EijF-clipart [ONLINE]. Available at: http://www.clipartkid.com/images/621/knight-helmet-logo-texas-knights-of-columbus-T7EijF-clipart.jpgo [Accessed 26 January 2017].
clipartkid, (2015), knight-helmet-logo-texas-knights-of-columbus-T7EijF-clipart [ONLINE]. Available at: http://www.clipartkid.com/images/621/knight-helmet-logo-texas-knights-of-columbus-T7EijF-clipart.jpgo [Accessed 26 January 2017].
 Colour code list:

#736828                     #513f3f                     #816b22                 #322c0c

#3e3226             #5e5a38                  #6f7a85             #645319             #736f6e             #050505

#6f5d5d                      #4d5965                  #554648                 #3d3a22

#574e19               #6e7982                 #a01d1d             #493d26            #595554

#94c8de                      #707c8a                  #524041                  #474c58

#5d5832              #816b22                 #861e1e             #848482             #6a6665

Wizard:

My second character is going to be a wizard whose focus is on dealing high amount of damage with powerful spells but is weak in every other aspect. Although I found 32×32 pixel size to be good, for this character I’ve decided to try 64×64 as it was very cluttered on the paladin’s right arm.

For my wizard class I was heavily inspired by Gandalf the Grey from the Lord of the Rings series for the look.

pinimg.com, (2015), d8c951c96e962fb64b99a30526b7da82 [ONLINE]. Available at: https://s-media-cache-ak0.pinimg.com/originals/d8/c9/51/d8c951c96e962fb64b99a30526b7da82.jpg [Accessed 27 January 2017].
pinimg.com, (2015), d8c951c96e962fb64b99a30526b7da82 [ONLINE]. Available at: https://s-media-cache-ak0.pinimg.com/originals/d8/c9/51/d8c951c96e962fb64b99a30526b7da82.jpg [Accessed 27 January 2017].
Like the same with the paladin I started by creating a rough silhouette of the character, but what differs with the wizard is that his model can’t be done quite the same as the paladin as he’s wearing a cloak which covers most of his body, this meant I couldn’t work part by part like I did with the paladin, so instead I did the base colour of his cloak first before working heavily on the shading of it. Due to the cloak being quite baggy, when the wizard’s arm is raised it creases a lot, which allowed for me to turn a dull singular grey colour into a very shaded cloak, when looking back at the reference image I believe I captured the look I was after very well.

 

capture1 capture2 capture3

Once I had the cloak done, I moved onto working on his hand and staff, I picked a quite standard colour for white skin for this (also repeated for the face). Although I was pleased with the hand I do think that I should have added some shading to it where the cloak hangs over it a bit. I struggled for a while with the staff because although the main shaft was quite simple, getting the head of the staff to look correct at that angle was difficult but I feel the result I did get was good. I then got to work on the face and the beard, I started with doing the rough shape of the face with the skin colour, after I had done that I did the base shape of the beard so I could correctly do the placement of the mouth and the eye. Like the cloak I shaded the beard and his hair quite thoroughly, making sure that the fact he is old is portrayed through the whiteness & greyness of his hair.

capture4 capture5 capture6

With everything complete I got to work on his hat, keeping to the reference with the colour but bending it back more. Like the rest of him, I had to focus quite heavily on the shading of the hat as otherwise it would be way too dull. If I was to redo this I would make the hat a bit straight as looking back at it now, I feel like it’s too unnatural looking.

Colour Code List:

#ded7cc                        #746d6d                        #524d4d                     #000000

#676262                #6b6b6b               #666060              #8b2222             #625c5c            #cdc5b7

#cdc5b7                        #6a6565                        #544f4f                       #ffffff

#6f6969                 #543b3b                #f0cd96               #5a5555              #736d6d

#c2baad                        #595454                        #615c5c                      #645f5f

#706a6a                 #635e5e                 #5a3002              #5f5a5a               #dcd4c6

 

Priest spell book.

The priest is similar to the paladin but deals more damage and can’t take as many hits, the priests main strength comes in his ability to give buffs to her teammates and her extremely powerful healing spells. All her powerful spells come from her holy spell book of which only priests can use and understand.

bibel-201100279869
duden.de, (2015), Bibel-201100279869 [ONLINE]. Available at: http://www.duden.de/_media_/full/B/Bibel-201100279869.jpg [Accessed 1 February 2017].
misteraibo, (2014), ector___book__open__laying_on_side__by_misteraibo-d7tnbmx [ONLINE]. Available at: http://pre09.deviantart.net/ac10/th/pre/f/2014/216/8/a/vector___book__open__laying_on_side__by_misteraibo-d7tnbmx.png [Accessed 1 February 2017].
misteraibo, (2014), ector___book__open__laying_on_side__by_misteraibo-d7tnbmx [ONLINE]. Available at: http://pre09.deviantart.net/ac10/th/pre/f/2014/216/8/a/vector___book__open__laying_on_side__by_misteraibo-d7tnbmx.png [Accessed 1 February 2017].
For this I drew a few drafts of what I was after on paper where I avoided using the grid to guide my drawing, after that I got a good idea of what I wanted I drew line by line in pencil and then drew along the lines of the individual blocks in pen to simulate the ideal of pixel art. I did as if every block was a pixel on the computer. Once I had finished the outline of the book, I focused on creating the cross, doing the same technique as before. I shaded in grey along the edges were it would be darker and I coloured the book lightly in black. I found this to be a struggle as sometimes it didn’t seem like how the pen lines should have been drawn on curved edges was correct. Also a key problem was with the cross as it was very difficult at an isometric view to angle correctly using blocks and in the end settled with it being slightly off.

image1 image2 image3 image4 image6

I then went into Photoshop and tried to recreate it in an experiment to see if it’s easier drawing out pixel art or creating on a computer. I created it on a 90×90 pixel grid so that is was the same as the grid paper size.

I started by creating the lines of the book in order to get the starting shape of it all, at first I used singular lines for everything but decided to bolden the lines on the front side of the book in order to bring it out more as I thought it looked too flimsy otherwise. I had the same problem with the cross as it was extremely difficult to angle correctly with the rest of the book, one of my attempts below showed how off angle it could become, even if I copied the exact same line layout as the sides. This would have been much harder if it wasn’t so easy to erase my attempts unlike on paper but I do admit I should have experimented beforehand by creating the cross on paper instead of trying to do it first try with a pen.

 

capture1capture2

After numerous attempts I tried something different where I created the cross on a 90° axis then rotated it roughly in correlation with the book, although this can cause the cross’ lines to distort, this actually proved useful in making it seem more natural on the paper. I am not so pleased with the colouring of the cross as I think the white stands out too much with the rest of the image but that’s how it would look on a real bible. Once I had finished the cross I got onto putting the colour of the rest of the book down of which I kept with idea of using black but made sure it was lighter than the black I used for the lines.

capture3 capture4

After I had completed that I got to work on the colour of the paper inside which I used a slightly tanned white for but I also had the idea that if it is a holy book with powerful healing spells, It should give off a holy aura and decided to do the same trick that I used for my fear experimentation of lowering the opacity of a brush, but this time I made sure it seemed like it was only around the outside and like it was coming out of the book. I used yellow for the glow as gold/yellow colours tend to be used to represent holiness in Christianity.

finish

I then flipped the image because I realised that I had created it the wrong way around meaning it came out as a right to left book when I was after a left to right book.

If I was to do this again I would definitely work harder on making the cross at a good quality that fits with the rest of the image.

As for my question of what would be easier, I definitely found Photoshop to be the winner as it’s much easier to erase and experiment with, and I also find it easier to pinpoint the colours I need on Photoshop instead of colouring pencils due to my partial colour blindness.

Colour Code list:

#ffffff                  #000000            #242424                #202020              #111111

#141313                  #161515                              #bafec6                  #6d945e                   #837f69

#1a1a1a              #090909              #1b1b1b                 #191818                #1e1e1e

#181818                  #1f1f1f                                #8ecd92                 #6f935f                     #8a786c

#0c0c0c            #0e0e0e                #202020               #281f1f                 #1d1818

#1d1d1d                   #070707                            #1e6c29                 #748e61                    #8e746e

#0a0a0a           #131313                  #181717                  #292222             #141414

#171717                    #0d0d0d                           #6c955e                 #7b8665                   #719060

Advertisements

2 thoughts on “Week 4&5 – Experimentation

  1. Fear: Your examination of Teddy Terror is a thoughtful and complex reading of the trailers bosses and I like that this research has informed your later experiments- everyday fears that become exaggerated are almost always the most psychologically interesting!
    In your explanation of Lone Survivor you say ‘A deadly…has ravaged through the city’- a deadly what? I know it’s a virus/plague but you must assume the reader does not. Please proof read to ensure all your sentences make sense.

    Your Area 51 pixel homage is a great experiment. I like that you really considered each element to maximise the feeling of fear (the blacked out sky over a starry night, the dull colour pallet etc) and the process is clearly explained- every creative choice you made has been explained. Excellent work Lucas. My only issue with this section is the organisation; it would have been nice to see the reference image of the road before you started your own work. A further analysis of your final product would also have completed this experiment.

    Uther & Wizard; Your transformation of Uther into the 2D realm is very successful; although the pallet used is quite dark, you manage to get enough character and shading into the work to define it as a warrior in armour. It was also interesting to see you block the silhouette, and shows a methodical approach to your work. This is also true of the Wizard; the ‘movement’ you get into the cloack really shows you understand the importance of shading; it gives the cloak a ‘weight’. This is usually hard to convey with so few pixels!

    Your pencil approach to the prayer book really added an interesting part to the development. You identified an issue when hand drawing the cross and this was also echoed when utilising Photoshop. You overcame this skilfully, and used the issues presented to your advantage. Although you talked of the distortion, it really adds to the feel of the piece. You analyse the results well, and you should be very proud of the finished article.

    Lucas this is exemplar work, I can see the substantial effort you put in and your passion for the subject. Well done!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s