Task 4.6-7 Final Protoype

BRIEF – Create the following HORROR pieces/prototypes for your portfolio:

a. 2D Art

HORROR themed Character – Choose a character class (e.g. Vampire, Necromancer, Werewolf etc.) and create 3 designs for the same class which represents different body shapes, equality and diversity, gender, sexuality and ethnicity.
HORROR themed Environment - Create a tileset (minimum 9 tiles).
HORROR themed animated sprite – Create an animated sprite.

b. 3D Digital Art

HORROR themed 3D models.
Hand Painted Textures.

c. Programming

Create a prototype which includes the following: Physics-based movement, Instantiation (e.g. Projectiles), and Pickups.

4.6 & 4.7 Using your ideas generation, produce a series of 2D Art pieces/prototypes while keeping an evaluative development log:

HORROR themed Character – Choose a character class (e.g. Vampire, Necromancer, Werewolf etc.) and create a series of 3 designs for 1 class which represent different body shapes, equality and diversity, sexuality and ethnicity.
HORROR themed Environment - Create a tileset (minimum 9 tiles).
HORROR themed animated Sprite – Create an animated sprite.

HORROR THEMED CHARACTER

For my final character idea, I decided to change my final character away from my original zombie idea, as I felt my character was too generic and didn't fit into a final idea for a game I wanted to make and I felt that the zombie didn't fit the theme very well.

Heavily referenced art for character design.

Variation of Skeleton I decided to Use

Side View of skeleton for reference purposes

Made the the side view version by splitting and warping the parts that make the front view character, such as the head, chest and arms and then redrawing over or re using.

colour + shade

greyscaled

Making a coloured version of the skeleton for reference when choosing colour of the pixels. Also with a greyscaled variant for black and whites.

added my lineart drawing to a 256x plane for pixel art drawing in a software called "Aseprite", which has tools for drawing pixel art.

I then created a new cleaner line art by lowering the opacity of my drawing and tracing over it.

I then proceeded to block out the colour on the character and start with a little bit of shading.

I then proceeded to add shading and details in highlights and low lights on top of the base colours.

I finished my complete shading of the skeleton character and added some Red eyes to really sell the evil of the character.

I really like how I've shaded the tones of cloth armour and bone, however I wish I paid more attention to the direction of the light when drawing shadows and highlights for next time.

Monotone version. (greyscale).

Edits to exposure and contrast to darken skeleton.

Colour Variation using colour replacement.

Heavy Offest and Exposure to give it a real horror feel from the darkness, but subtle reds of blood or glow from the eyes.

Version 2 of the skeleton, being much bloodier with a cracked skull and a knife in his shoulder, comes across as much more battle worn with a new set of weapons.

Exposure Down. (darker version)

Heavy Colour replacement, then offset and contrast. (comes out with a radioactive look)

Trying out different variation:

Exposure down + darken layer

(black and white horror version)

Exposure Offset + Gamma

(black and white but with slightly visible red/blood)

Final Character Design Version, more boss like or harder enemy design, more sinister due to more armour and spikes.

HORROR THEMED ANIMATED SPRITE

For my final idea I decided to make a slime sprite animation of it spawning.

I started by making a sketch of the animation, which contained 23 frames in total of the slime coagulating and jumping before forming together.

to help get fluidity I used reference from this animation:

Useful Youtube Video for Slime animation:

I then imported the sketch animation to a 256x256 file.

then I majorly increased the amount of frames by adding 'inbetweens', making the total frame count 58.

Then I added basic Colour: creating a basic finished sprite animation for spawning a slime.

HORROR THEMED ENVIRONMENTAL TILESET

I used the software Asesprite to make my Tileset, making it with 16x16 squares, then using a 2nd 128x128 area to display the full tileset.

1st I created the centre piece of the dungeon wall, I decided to not go for a brick look and change to a more cobblestone-ey like wall. Using a feature inside of Asesprite you can make it so your grid will be tileable in the x and y axis allowing me to view what it would look like tiled by repeating what I've drawn in the centre square. I made a flat grey background then randomly drew the rocks with a lighter colour on top, then adding a darker grey for an under shadow.

Secondly, I created the top tile, which I wanted to be larger stones/Tiles so setting the view to tileable on the x axis in Asesprite I drew some larger rocks and built up colour from dark to light. Then I added some undershadow to the large rocks.

For my 1st version of the tileset I wanted to make the walls like the cobblestone and used the y tileable view in Asesprite. I drew an inlay for the side I was working on and then added darker colours to round it off.

Essentially the same thing I did for the side walls but on the bottom.

In the end I wasn't too happy with how the rocks at the top looked so I created a 2nd version with larger rocks by taking the rocks of the 1st 2 top tiles and enlarging them, then moving them on top of a copy of the 1st tileset.

I then rouded off the corners so there was a clear edge and it smoothly transitioned between the tiles.

Creating the 1st 2 finished tilesets, 1 with larger rocks than the other.

Then I used my 2 variations to create smaller pieces such as blocks and polls. I did this by taking various cross sections of my larger tileset and splicing them together.

I then created a Window Tile

Then I made a final tile set which uses large stones on all edges which is gives much harder edges and can be used with the window tile. I repeated the process that I used on the other tileset just with making different edges/ bottom.

4.6 & 4.7 – Using your ideas generation, produce a series of 3D Digital Art pieces/prototypes while keeping an evaluative development log:

HORROR themed 3D models & Hand Painted Textures.

HORROR THEMED 3D MODEL:

Original 3d model block out idea.

Here is a video which is essentially a recreation of the 3D final model I made, going through each part of it and what tools I used to make it. However it's not the original, and a variation however the differences between the final model and this recreation are very minimal, in fact this version I believe to be better as I have now gained experience in areas when making my model meaning I can create the final product better and quicker. (however in this version the torch is missing a button, which would just be a small flattened cylinder with its mesh set to soft edge).

Created an offset on both ends and then extruded inwards
Beveled the edges on the gravestone so it wasn't so straight
Added an extra extrude and offset off the base of the gravestone
Removed All non visible faces

New version I created from scratch which was essentially a duplicate, The main difference was the Sides of the bottom half of the grave, instead of offsetting and extruding twice for each side, I went out and back in again to give it thick outlines so it looked more real and ornamental.

Then I Modelled and added a Torch to the Scene just to add something extra to the models.

Finished Unwrap for the Gravestone.

Unwrap exported as 1024x1024:

512x512:

Finished Unwrap for the torch:

the hardest one for me as unwrapping with a mostly spherical shape gave me a lot of hassle, leading to many errors I had to fix.

Finished Unwrap for the Top of the Grave.

Finished Unwrap for the underside of the Grave.

HAND PAINTED TEXTURES:

I made each texture in photoshop using a drawing tablet with the files being used and exported as 1024x1024 for size.

1st test: used my 1024x1024 png of Gravestone unwrap. Used a grey brush and went over 1 side, then rendered a cloud layer before turning it's opacity to 45%.

Stone look I got as a result.

Base coloured the whole thing light grey, then added a low light layer where i went over all the edges and corners with a darker soft brush, with the opacity set to 85%.

Covered the whole thing with a stone look and low lights.

lower lights

Here's a video of what work I did on how I made and edited the texture.

side note: for this model I used the lambert material.

Original Finished Gravestone Texture

version above is while messing around with layer order.

Updated Version of Finished Texture, by making it lighter and more clearer.

(still using lambert)

Layers with labeled changes that I made to edit the Original texture into a lighter version.

( a mixture of increasing brightness & contrast + exposure and gamma tweaks).

Then I moved over to the flashlight.

(no texture, UV map applied to 3d model)

With my texture, unfortunately due to my model it made pinching and ruins small parts of the texture, especially around this area.

Also having issues when making the texture from my seams on the model being pretty bad so where to texture goes from one side to the other it becomes obvious.

Finished Torch Texture:

This was the finished while using the lambert material. After finishing I realised that the lambert material didn't fit a torch so I then changed the material from lambert to Blinn which majorly improved how it came out.

picture using blinn:

I then moved onto doing the grave, which I did both the top and bottom half at the same time as they go hand in hand.

I started out by reusing my "stone" texture made with clouds from my gravestone texture for both, but then created my v2 and used that instead by combining the layers of the base cloud (layer 6-9 into 1) then duplicating it and making the duplicate layer a multiply layer before finally changing the 1st combo-ed layer have higher brightness and contrast.

(I Used lambert as my material for the gave:)

In the end turned out a little too dark and contrasts too much in areas, looks extremely worn rather than just a bit.

So I decided to play around with the layers using different filters and image adjustments until I liked the look of the clouds layer.

Grave_Bottom:

Grave_Top:

BumpMap: (non copyright, free photo noise filter)

Final Product:

(Images of my final 3d models textured)

In the end I do wish I added a lot more detail including: highlights, drop shadows, details of marks & scratches, moss, ornaments/carvings and spent more time into finer details on the texture but overall I'm happy how it ended up especially with using a very basic bump map.

4.6 & 4.7 – Using your ideas generation, produce a series of Programming outcomes/prototypes while keeping an evaluative development log:

Create a prototype which includes the following: Physics-based movement, Instantiation (e.g. Projectiles), and Pickups.

Using some of my previously created assets and Unity I then created a game Prototype, originally based off my 1st game idea but then taking evolutions as I came up with ideas when making it.

When first exporting the game I ran into some issues, mainly with the location of the ui and the camera being a lot more zoomed in.

then realising it was due to my camera not being set into 16:9 aspect ratio, so i changed the display, moved the camera and player and finally the ui. However, I still had UI issues and realized that my game had no way of closing without alt+f4. I then debated on whether or not to set a keybind to close the game or have the game close itself on a loss. I decided I wanted to set a keybind as the way to close the game. But before I changed that, I fixed the UI by making the canvas locked to the camera, so its the same size.

So I went into my GameManager Script.

I added this code, creating a function for quitting the game for that if the button "cancel", which is default set to 'Esc' is pressed the application will quit, however due to issues i then switched over to a new quit script that i added to my canvas.

This then worked and quit the game whenever the Esc button was pressed in the build.

However I could not get the UI in the right place.

I then realised it was due to the position of the text vs the text mesh box. To show where it would land so I created my final and fully finished build.

Report abuse