My Blog

For our final week of this assignment, I we was challenged to create a 2D animation in unity utilising a PSB file. Using bone rigging. we were tasked to created several animations for the character to be used by using the bones to create key frames of animation.

Before we were to do this however, we were to learn how to create fluid and convincing animation.

12 Priniciples of Animation

1 Squash and Stretch: The first and one of the most important principles is squash and stretch. This makes all objects malleable and almost elastic-like in properties. Objects are distorted to give a better sense of movement

2 Anticipation: This refers to frames proceeding the action in question, such as bending your knees before a jump. This highlights whats called the follow through action. The action which happens afterwards.

3 Staging: How you frame a scene is essentially another word for staging. This allows the animator to clearly show an action or place by what perspective they animate it from. Its much easier for the audience to read a ball being thrown from side angle than from the front

4 Straight ahead and pose to pose: These are two opposing ways to draw animation. These are drawing each frame sub sequentially and the first and last frames, then filling in the gaps respectively. one allows greater creativity and the other greater control.

5 Follow through and overlapping action: This refers to how the change in movement of one object can impact another, such as hair being influenced by a characters movement.

6 Ease in/out: These terms refers to how whilst an object may stop, the inertia of the object must still be displayed through some small movement after the object stops.

7 Arcs: These give a natural and smooth looking flow to objects, natural objects cannot have precise movement, therefore moving the object in an arc like a human elbow will make the object seem less robotic.

8 Secondary action: These are additions to the primary action to give it more character. Dusting yourself off after picking yourself back up would be an example of this as it gives the character more personality.

9 Timing: this boils down to fewer frames for faster objects, more for slower objects

10 Exaggeration: This includes distortion in facial expressions, Emphasised movements etc. This adds personality to the animation and can be done for comedic effect.

11 Solid Drawing: This refers to the quality of the drawing itself, making sure that the character is suitable for its environment, and can be visualised as an actual object, details must follow the contours and edges of a surface.

12 Appeal; This relates to the general appeal of the object on the public. a suitable art style as well as colours and balance of the piece help achieve this.

(1)

Implementation

After importing the provided file from the university. We began to create the rigging for the sprite within the sprite editor.

Opening the sprite editor we began by selecting the skinning editor and created a root bone for the sprite. This bone would connect all other bones within the sprite and anchor them to the centre (pelvis) of the sprite.

Following this we made bones for each limb, placing them along the arms and legs of the sprite and naming them with the naming convention we had put into place. (e.g. Hand_F). Using the split bone tool we also added extra detail to bones by splitting them into two.

Following this we added the weights to the bones so they may be controlled

Furthermore we checked the sprite influence of each bone by removing any sprites listed that the bone should not effect. this would minimise warping when animating.

Finally we then assigned components to this sprite. Inverse Kinematics component allowed us to create limbs that could be controlled for each part of the sprite.

Then it was time to put this set up into action:

Evaluation

I attempted to take the primary concepts into my animations within the keyframes of my animation. However I definitely could improve this in future and create better loops.

However this feature is very beneficial as I can use this within future projects.

References

(1) Ritchie, J (2017) https://idearocketanimation.com/13721-12-principles-of-animation-gifs/

Following on from our pixel art task in week 6, week 9 brought about a task to create a sprite sheet. This would consist of us creating a myriad of differing assets alongside animations for said assets. Once several assets would be compiles onto one image and saved as to conserve memory on older games consoles. In this task we would be following in their footsteps, despite this issue not being so much a problem nowadays.

We had the choice to design from one of two briefs: A Character or Environment Designer. I chose to create sprites for the environment. This required us to create the following:

Environmental Hazards (X2)

An Explosion effect that must be reusable

A projectile

A Selection of Collectables (X2)

Creation

As per the norm, I began by creating a Photoshop file, this time with the dimensions of 384×384, 72 DPI on a transparent background. Following this I then created a grid via the preferences menu. This allowed my sprites to be held in a uniform way with each cell being 32×32 pixels.

The brief stated that the sprites fit a fantasy platformer game suitable for younger audiences. Therefore when creating my design I made sure to create my sprites to be vibrant, cartoony and simple for a younger audience.

My first sprite consists of a missile that would move down/left towards the player from the top of the screen. The Fire and contrails move on the sprite to give the object a sense of inertia as it falls.

My second sprite is a strawberry. Intended as a Health collectable. I intended to have the strawberry spin in place via moving the seeds and stem in a circular motion. I believe I could of improved this aspect

Third was a coin collectable, found in all sorts of platformer games. similarly this also spins. I also added a highlight along the coin to make it seem metallic. I made the spinning effect this time by shrinking the size of the coins face whilst increasing the border and then flipping this horizontally for the opposite side.

The fire was intended as an environmental hazard. I designed the different flames to dance and move wildly. I also included some embers to rise around the flames.

Another environmental hazard was a cartoonish black bomb. The fuse on this bomb slowly dwindles overtime, whilst the fuse is still there this object is safe to touch. as the lit fuse gets closer to the black metal, Highlight begins to go rom white to orange.

I created a greyscale explosion next, this was done so that it may be used alongside the missile and bomb. Furthermore it can be left greyscale to simulate smoke. or the hue of the sprite can be altered within unity to create a fiery explosion or a myriad of differing colours.

My seventh sprite was a toxic puddle which would bubble idly. These bubbles would burst if they got too big. I incorporated different hues of green into my palette to show the shaded areas and highlights upon the puddle, Making it look more liquid-like.

This Punch projectile would travel forward from the player, leaving a trail of purple particles. Upon collision with an enemy, the Explosion effect could be reused once more.

Finally I created a 3/4 perspective chest. I included a transparent colour within the chest to represent a radiating glow from within. This by Far was the hardest sprite to create due to the perspective. Upon opening, coins the character have been collecting could be awarded.

Evaluation

I improved upon my use of sprites and palettes from when I first attempted. Comparing the animations I had made previously to these ones is a night and day difference to me, of which I am proud.

I will use sprite sheets for assignments going forward as it provides a useful set of frames to be used.

In order for us to create realistic and well designed characters to act as protagonists, enemies and NPC’s within our games, we first needed to have a baseline knowledge of basic anatomy. This would allow us to create humanoid characters that are correctly anatomically proportioned, meaning that the shapes that comprise the body (what represent the muscles) are correctly sized. This is important to bare in mind whilst creating our designs to avoid our characters looking odd, or looming into the realm of the uncanny valley (This is a term to describe how certain humanoid objects or portraits can cause a sense of unease within humans (1))

This week, our task was to create our own character design whilst bearing in mind the rules of anatomy as well as drawing our character from a three quarter perspective. This perspective was used as it is commonly used in media, from cartoons to style sheets, not only does it challenge the artist. it also gives a good sense of depth as well as providing a look to the front and side angles of the body.

Creation

Using the graphics tablet and photoshop software I was familiar with. I began work on my character. I knew from the beginning that I wanted to create a male figure, therefore the proportions would generally be larger in comparison to that of a woman’s. I kept this in mind as I started to sculpt their skeletal structure. The university had provided us with a reference image (Seen below) that includes: Hight in heads, a rudimentary skeleton, A sketch of key muscles, a refined outline and a more detailed outline.

In this it showed how a 3/4 perspective drawing should look, alongside a true sense of scale via the heads and skeleton. However, as I was creating a male character, I would have to alter said proportions depicted within the diagram.

From here, I used the pencil tool to begin creating my character design. I kept in mind my proportions, using the 8 head rule I created the height of my character as well as accurately sized the shoulders and waist of a male character. I began working from the layers built atop the skeleton and created a basic muscle outline for my character. Whilst I was doing so, I had the thought to base my design around 1980’s action movie hero’s, as well as the clichés that come alongside them. I made sure to incorporate shape theory into my design. Since my character had to be strong and dependable I added boxy elements such as his squared shoulders.

When I began to layer clothing atop my character I thought of my inspiration to create a definitive look for my characters. I took inspiration from different film franchises to finalise my character look.

I again kept in mind my inspiration during detailing and colouring my character. Using the eraser and colour picker to create a consistent palette for my design. I made note to give my characters key features, such as the bandanna and scars to show an insight into the characters without stating as such. I made sure that my character incorporated light colours and rounded edges to show that whilst he is strong and dangerous, he also fights for good.

Evaluation

Whilst I like the current design I created, I would be amiss if I didn’t mention how I could’ve incorporated more techniques to create a more visually striking design. At current my design is quite flat and boring. using some shading and lighting skills I have learned previously would allow me to add some depth to the character. furthermore whilst i believe my use of proportions was well implemented I could’ve used some techniques such as gesture drawing (dynamically posing the design to add to the emotion or story of the character).

Overall this was a fun way to experiment with character design and I can definitely feel as though my proportions will improve going forward alongside my use of shape and colour theory.

Refrences

(1) Cherry, K (2022) https://www.verywellmind.com/what-is-the-uncanny-valley-4846247

(2) University of Hull (2022)

(3) Indiana Jones and the Temple of doom (1984) Lucasfilm , Disney

(4)Army of Darkness (1992) Universal Pictures

Our task this week was to use a style as old as the video game industry itself. Pixel art. This was to be done for our final prototype within our Games design and prototyping module.

Now by this point I already decided what I was going to create my platforming prototype about. My stimulus would be my earlier work within this module. I was inspired by the previous idea I had during my first lecture as well as what I created my first piece of concept art around.

However before this I had already tried my hand at pixel art for a previous prototype:

These first attempts at pixel art were nit my greatest work, therefore to avoid making the same mistake again, I decided to learn from my previous work using the knowledge of colour and shape theory as well as what I had learned within the lectures.

Techniques

Pixel Art originated not as an art form, rather a necessity. During the early console generations, its well known fact that the systems they had then weren’t nearly as powerful as we have today. Moreover high definition displays were merely a dream and 3D was out of the question entirely. Instead, due the small processing power and amount of ram these devices had, the aim was to create simple and easy to recognise assets. Due to these limitations, the developers needed to employ special techniques to ensure the art was easy to read and small.

Pixel Art is usually created within powers of 2, such as 64×64, 32×32 or 16×16. The fewer pixels, the less detail you can achieve. On top of that early consoles like the NES could only display a pitiful 256 colours. therefore, special colour palettes were used to compliment the coloured used within the art, alongside to reduce memory usage.

However a lower range of colours means less accurate detailing and shading. Therefore, a technique called dithering was used. The aim was to create better transitions between colours without the essential in-between shades, therefore the pixels would be drawn so they slowly transition into another colour by placing them at equidistant lengths from the opposing colour. Similar to crosshatching when drawing. While this worked sparingly on old CRT monitors used back then, it isn’t so suitable today. As our screens now have a higher fidelity so we can clearly see the in-between pixels. Luckily (?), this can be used to create a “retro” styled look to your art, despite the art never actually looking like that on older hardware.

There were some trappings to avoid however. Line art shouldn’t be used as unless it used as an artistic choice (below) it makes the art look flat. Furthermore caution should be taken when upscaling small pixel art, as Antialiasing can ruin sprites by softening edges.

Finally it is also important to make sure your art has a decent silhouette to it. Making sure the characters were easily recognisable as it could be the difference between a power-up or a death. The shape of the character needs to be clear to the audience.

Main Character

Before I began creating my main playable character I knew I had to alter his design from my initial concept art. This was due to the fact previously I had issues of my sprites blending into the background Therefore I knew I had to change its colour. The finished result looked like this:

I decided to shake up the colours of the sprite and add a few new additions to his design. I used my knowledge of colour theory to change his fur colour from grey to lighter brown, I was worried that once again my sprites would be poorly visible against a dark background. The brown also show the ruggedness and simple-ness of the rodent. This is enforced by the chunk I had removed from his ear. The pink symbolises its innocence and fragility and Finally the red scarf was added to not only alleviate visibility issues, but also to add some charm to the character. it is coloured so to represent the animals courage for fighting against the desolate city in which it roams.

I attempted to employ some of the techniques used by pixel artists as well such as directional lighting from the right, with shadows along his back and under his arms, as well as some highlights in his eyes, ears and nose. (However the latter are very faint). I also tested whether the character had a cohesive silhouette:

Following this I began to add some frames of animation

These were to be used dependant on the player actions, I also flipped these for the case in which the player was facing or going left.

Each animation conveys the little pitter-patter of a rodent I was after and the idle wags the tail and allows the scarf to blow in the wind.

Of course I don’t like how little frames there are to each animation, especially the walking I believe that could use some in-betweens , therefore in future I will change this to include multiple frames of animation.

Onto of that I will make sure to create both a left facing and right facing sprite set as the shading and details such as the bite in its ear are flipped which doesn’t make much sense from a lighting and consistency standpoint.

Hazards

I created two types of hazard for the player to avoid, these were themed around the playable character:

I created this enemy to be jumped upon, therefore I needed it to look somewhat friendly whilst still showing its aggression. By creating a rounded cat paw. the player may be invited to interact with it. of they jump on it a bounce is rewarded. however I hinted at its aggressive side with its sharp, triangular claws. This implies the underlying evil that the player would find out if they was to collide with it.

This Hazard I tried to look much less inviting, despite the block of cheese. You will notice the shape of the trap itself is made up of triangles, implying its danger, even the cheese is triangular and a bright yellow. subtly warning the player to not touch it, otherwise they die.

Platforms and Decorations

I created a multitude of assets to decorate my scene with, however due time constraints I was not able to create all I wanted to.

Evaluation

I believe this attempt at pixel art, Far exceeds my previous attempt. By putting the techniques I had learned about into practice, this allowed me exceed the mistakes such as line art and improper shading i used in my original series of images.

In the end however, two things I definitely need to improve on is my animation and tile work. Unfortunately I don’t think either of these aspects were up to scratch with my usual standard.

References

(1) Nintendo (1995) Yoshi’s Island

To expand our knowledge and technical proficiency with 2D art, we needed to know how give our 2D images a sense of depth. This was important as it gives us a baseline on how to create realistic and improved concept art, especially for 3D Games.

Our task this week was to experiment with the composition techniques shown to us and create a perspective piece drawing.

Composition

When trying to give an object a sense of depth on a 2D plane, a technique called perspective, needs to be utilised. One point perspective is the first, and most simple variation of this. Simply put, there is one area of focus called the vanishing points, all objects drawn should begin to shrink the closer they get towards the vanishing point. when drawing at a one point perspective, draw the image as u would see it if from a 2d perspective, then begin to add the depth either above or below the shape. This is dependant upon if the shape in question is above or below the horizon line ( The x axis of the vanishing point).

Similarly there is 2 point perspective, where there are two vanishing points on the image. rather than drawing from the face of the shape, instead you begin to draw from the edge. There is also 3, 4, 5 and 6 point perspectives, each with a greater amount of vanishing points, allowing the user to see more sides to the object. Most of these are unimportant to my task however.

Finally its important to utilise the rule of thirds. As the name suggests this divides the image into thirds using two horizontal and vertical lines. Your art should be drawn to fit these thirds. Furthermore the focal point (the area you want the viewer to be drawn towards) should be placed along the intersect of these lines. This is useful as that is where I will place the vanishing point within my art.

Creation

Once again we are into Photoshop using the graphics tablet. Setting up a 1920×1080 72 ppi canvas to work on, i then imported a Thirds grid premade for us. I placed the grid on its own layer against where I will be drawing.

I then created a line along using the line tool the x axis of one of the intersects, thereby creating the horizon line. Using a polygon tool, I then created a star like shape to show all the tangents my work should be running along. I did this by setting the number of sides to 100 and setting the star ratio to 1%. I then added this polygon and enlarged it so it encompassed my entire canvas. The centre of this polygon would be my vanishing points so I placed it upon the horizon line in line with the thirds intersection (bottom left intersection).

It ended up looking like so:

I tried by taking inspiration from a train station platform. not dissimilar to the ones you would find in York and the like. However whilst I made an attempt at creating different walls and challenged myself by adding curves and depth to what is supposed to be the bed in what the train track sits. I did end up struggling to create each wall, especially with all the guides and lines as it I couldn’t focus properly. However i made sure that all lines would be heading towards the vanishing point. including the hills in the back.

Evaluation

Whilst I have some experience drawing at one and two point perspectives I not only found that it makes quite a difference to the quality of your piece, but also how it is not an easy thing to accomplish. Whilst difficult to first wrap you head around. those key golden rules of thirds and vanishing points really allowed me to feel as though I could make a significant step up within my artwork. I am glad I only attempted a one point perspective piece. In the end I wish to expand on this further as this does not satisfy what I believe I can dousing these techniques, despite it taking significantly longer than I initially expected.

I believe the key basic elements are there so that someone could recognise what this is meant to be. however to improve on this I would try to add some colour and greater detail alongside some realistic shading because as it stands it looks very basic.

In week 5 we covered the essentials of shape and colour theory and how that is essential when creating you own unique character designs. The colours used and the shapes which make up your character can subconsciously effect how the player views said character. This is because our brains naturally associates attributes to these aspects of design.

Our task was to take what we had learned from this, and implement it whilst we created sprites for another prototype of ours (a top down shooter).

Colour

Colour can be used to manipulate the emotion a person feels towards an object, character, brand, etc. This is done frequently in all kinds of media such as in shows, adverts, book covers, and of course games. When you see an advert trying to sell you toothpaste, they use whites and blues as these colours represent cleanliness, perfection as well as strength and dependence. those colours work for the product they are trying to sell, However if they were to use browns and greens you would automatically be less inclined to buy the product as your brain associates such colours with grime and disease. Not all colours have just bad connotations however, many colours can invoke opposite emotions. Red for example can invoke excitement yet also be scary with its ties to blood, it all depends on the context of which it is used.

The Hue refers to a colour’s wavelength. Warmer colours such as Red’s, Orange’s and Yellows invokes feelings of excitement and high energy; Colder colours however invoke calm feelings and low energy. This can also be considered when designing your character.

Consider using complimentary palettes when designing characters as well. This boils down to colours that look pleasant together (A good tool I used is adobe colour wheel (1)). Characters with contrasting palettes, especially those with high saturation (the intensity of the colour), may be unappealing and will not look nice on the eyes. A good colour palette is essential for good design.

Shape

Much like how colour can give positive and negative annotations to the brain, the use of shape within a design can do that also. There are 4 main aspects about shape to consider.

Circular shapes are good at invoking friendly emotions into a character, they are not threatening and look organic to us. This can be used to create a warmth about a character as circles look harmless and inviting

Squares are strong and reliable. They can be used to create a dependable looking character as they always look balanced and sturdy like a building. On the other hand they can be used to create an intimidating character due to those same properties. However rounding the sharp edges of these designs can be used to reduce feeling, making them look friendlier due to incorporating some circular design.

Triangles are not organic as well as sharp and aggressive. Much like the head of an arrow, triangles show direction. By exaggerating the points of a triangle this can be used to induce emotions such as fear.

Finally, Silhouettes are key when designing a recognisable character design. Silhouettes essentially means the outline or shape of the character. A good silhouette will highlight the primary features of a character or the main shapes that compose of it. A good silhouette indicates a good focus in character. A good example of a good silhouette is Sonic the Hedgehog: The key features of his design are immediately viewable, such as his large shoes which indicate he is a runner as well as his long spines that show the “90’s edge” on the character, triangles were used to make him seem less friendly and more “cool”.

Implementation

Now I understood the basics of colour and shape theory, I could begin work on my sprites for my top down shooter. However I needed an inspiration for my assets. The night before my lab session however, I was asked to play a Call of Duty® Black Ops 3 (2) Zombies mode. We played on the map Origins, which is set during WW1 rather the common WW2 setting. Following this I took my interest in the world wars once again to influence my designs. Whilst initially thought to be quite cliché, I enjoyed translating their uniforms and weaponry into a top down style.

Once again I set up a new Photoshop project, this time with the dimensions of 256×256 pixels whilst also enabling artboards. This allowed me to created duplicates of my canvas so I could work alongside my previous designs for scaling reasons as well as export them together.

Since I was unfamiliar with creating top down assets i found some images online I used for referencing:

Once I had created a suitable naming convention for each asset (those being, player, enemy and bullet) I began to work on my player controlled character.

Whilst creating my character I needed to make sure my character looked both reliable, and friendly to the user. I decided to use a British mark 1 brodie helmet, such as this one:

I decided to colour it green to symbolise peace, good and security rather than its average brown colour seen during the war (which was a means of camouflage). The same circular imagery was used when I decided to use the Lewis gun as a gun for the player to hold due to its iconic circular magazine. I also included rounded off squares for the soldiers pouches, invocative of his strong yet dependable nature.

I also included a personal feature, that being the KOYLI (Kings own Yorkshire Light Infantry) badge on the soldiers right arm as this was battalion in which my ancestors fought.

As for the enemy design, I of course based off the German officer uniforms that appeared along the western front. This design was to include many more triangles as opposed to the previous, to show the enemies hostility. In contrast to the Brodie helmet used for the British, I instead chose the iconic Pickelhaube helmet due to its recognisable golden spike atop the helmet. this of course fit the exact shape language I was looking for in such an enemy.

I added other spiked elements from the ripped uniform to the jagged claw-like fingers. I also coloured their uniforms darker blacks and greys as they are synonymous with death and added red blood and green skin to emphasise the themes of horror and plague.

I also created two additional styles for enemy variety:

This enemy is a darker black to draw attention to the player as well as emphasising the theme of death as this is a faster, deadlier enemy.

For the fire enemy in particular, I changed the hue of the regular enemy to create the warmer palette which is evocative of fire.

Finally I created bullet sprite so the player could shoot the zombies:

I didn’t do anything too fancy here, simply created a rounded point to show its lethality yet it is friendly to you the player. I also attempted some distortion effects but these could be improved.

Evaluation

In the end, I think I displayed a good use of colour and shape theory within my sprites whilst also keeping them accurate to my initial stimulus. If I was to improve on anything though it would be my use of shape, without the restrictions of a historical setting, I could use much more interesting shapes within my designs. Overall there improvements to be made with each design. However I feel proud of these assets as a lot of care and attention was put into their designs due to it being a personal interest of mine despite some considering the stimulus to be well covered.

If I have learned anything from this task however its:

A: Know your limits

I had multiple assets as well as a trench themed “map” that I had created on artboards as wellto be used within my final project however either got cut due to time or unfortunately lost.

B: Consider gameplay as well as design

Due to my theme, ironically enough the characters blended into the background due to their camouflage, this was fixed in the final released however by making a much darker background.

References

(1) CyclonX64 (2014) https://www.deviantart.com/cyclonx64/art/Sonic-Silhouette-471413874

(2) Activision (2015) https://www.callofduty.com/uk/en/blackops3

(3) Gombart, R (2015) https://opengameart.org/content/animated-top-down-survivor-player

(4) Gombart, R (2015) https://opengameart.org/content/animated-top-down-zombie

(5) Rix, H (2015) https://ww1.nam.ac.uk/1904/news/brodie-helmet/#.Y5q8lHbP0uU

(6) https://en.wikipedia.org/wiki/Pickelhaube

For our third task, we would be stepping away from photoshop into its sister program, Adobe Illustrator. This was because we would be creating the UI associated with the prototype of a “Cookie Clicker” styled game we was to make in the Games Design and Prototyping course.

(The result of which can be seen here: https://baines-2022.hulldesign.co.uk/2022/11/24/prototype-1-ducky-clickr/)

My goal for this task was to create a series of applicable buttons that could be used later down the line in unity for my prototype. By this point I had decided that my game was be themed around a duck pond, and as such should have a rustic calming feel to them, as well as being sort of playful like how it felt to feed the ducks as a child. my aim was to replicate this design philosophy into my UI.

Creation

Opening Illustrator I created a new project by setting my canvas size to 1920×1080 pixels, which would be the resolution my game would be played in. I also made sure the PPI (Pixels per Inch) was set to 72 alongside a transparent background, much like photoshop.

I started by creating a series of 3 different shapes.

An Ellipse:

An Oval:

And a Hexagon:

For each button I added two bevels to give the buttons a sense of depth. This was done by selecting the “Effect” option in the top bar and navigate to the “Extrude & Bevel” option. Upon opening the new window I adjusted the values of the depth before repositioning the view to front facing and then altering the bevel height and width values.

Prior to this I created a drop shadow for each button by duplicating each, changing the hue to full black and decreasing the transparency to around 60%. I then layered the shadow beneath the button and grouped them as one asset.

I intentionally left these grey and unmarked so they could be used in many ways within my project, saving me the effort of creating a unique button for each button in the game. instead I could add the text and change the colour of the button within the unity editor.

Additionally I created a large rectangle that fit the whole screen and another rectangle inside it. I rounded the edges to each of them yet especially the upper rightmost corner. Following this I diffused the difference between the larger and smaller rectangle, deleting the smaller one, yet leaving a hole in the larger one with the same dimensions.

Following this I then filled the shape with a prebuilt pattern and a flat brown colour. when layered on top of each other I believe it looked similar to foliage around a pond. This was done to fit the games theme

This was the Result:

These together would create the border for my game.

Finally I looked to create the primary button for the player to click whilst playing the game. I decided that the best course of action was to create my own unique button of a duck.

Opening photoshop once again. I used what I had learned previously from week one.

(Which can be seen here: https://baines-2022.hulldesign.co.uk/2022/12/15/week-1-intro-to-adobe-photoshop/)

I began to sketch out a duck using a reference I found on the internet (1) as inspiration for how its lighting and proportions should look. This was an attempt to improve on the mistakes I made whilst creating my environment.

I gave the duck a Thick black outline to make it visually distinct to the player that it was supposed to be clicked. I also tried my hand at some improved shading. Furthermore I added a small ripple effect around the duck, so it would look as though it is floating in the water on the blue background of my prototype.

All of these assets were exported as PNG files so they had a transparent background. rather than a white one which would look odd within a games UI.

Implementation

Once I had imported all the assets into my unity prototype, I made sure to alter the designs of the buttons. One to house the title of the game (purely decoration) Whilst the two other buttons were used to differentiate the two differing types of power ups (addition based and generation based) making visually distinct to the player what each does. I scaled the duck to be much larger than the other buttons and placed the counter above it to indicate to the player what it is used for. Finally I coloured the buttons brown to fit the rustic feel I was aiming for. I also added a font, aptly named “Ducky” (2) to the buttons, fitting the playful theme of the game.

Evaluation

I believe the UI elements I created perfectly capture the vibe and theming I was aiming for for the prototype. Despite this however a part of me does consider if I created unique assets much like the duck for the upgrades. I do enjoy the fact the the type of upgrade is visually noted by the shape of the button, perhaps I could of made a menu with the buttons I created for each type and given the upgrades an actual image as well. Nevertheless I believe my UI elements worked well with what I was aiming for. In future however I have learned that creating your own buttons aside from the tools given within the illustrator editor would prove for a more dynamic looking product, as well as making sure they are reusable, as this saved me lots of time in the end.

Refrences

(1) Baldwin, M (2008) https://www.flickr.com/photos/hooley/2599266595

(2) Seeduck (2021) https://www.dafont.com/duck-2.font

Our task set for week to was to expand upon the knowledge we learned of photoshop during week 1. For this task we was to source our own series of images from creative commons sites (such as Unsplash) and create an environment by editing those images into a single scene. This technique was called Photo Bashing. This technique is great for drafting up composition for concept art as it speeds up the workflow by already giving some inspiration to the artist. Furthermore, if done correctly, it can produce a realistic looking image.

Concept

When thinking what to produce for my photo bashed image, I settled on an idea of a whimsical and vibrant port town. I started by Gathering some images from Unsplash and Pexels.

Once I had gathered these primary elements (alongside a few others) I then imported them into a new photoshop project.

Creation

Much as I had done previously i created separate layers to house each individual image. I placed my sky on the background layer and using the Magic wand tool, deleted the background on my port town image.

Similarly I used the “Layer via cut” option within select subject tool for my fantasy elements, so they had no background and was ready to be added to the scene.

Once each of my layers were correctly positioned. I then changed the hue and saturation of each layer to match that of the sky. this meant darkening each layer while also adding a slight blue hue. In the case of the tall ship however I instead increased the brightness of the image, as the source was quite dark and the details would be indistinguishable to the viewer if darkened any further.

With the layer that includes the ocean. I reduced the layer’s transparency effect so the northern lights could be seen reflected on the waters surface.

Following this is decided I wanted to have a shadow of the ship cast onto the waves much like the reflection of the light. therefore I copied the layer and decreased the brightness and transparency so that it appeared to be a shadow of the ship. I then transformed the image by rotating it 180 degrees so it would sit beneath the ships hull. Alongside this I also slightly stretched the image on the Y axis so the shadow would look distorted like in real life.

Before I was satisfied however I noted the colour of the bay water was different to that of the ocean behind it, therefore I experimented by used the colour picker tool, and began to paint over the bay in with a less opaque pencil so the colour of the bay would better match that of the sea.

Evaluation

Whilst I am certainly happy with this attempt, I cannot help but think what more I could of done. rather than testing my skills I had learned in the previous sessions, I feel as though I had only utilised them again yet alongside other techniques to produce more authentic images.

In terms of what i experimented with during this task. I like the outcome of painting the bay a matching blue. However, I received peer feedback that the lights of aurora borealis shouldn’t look as they do in my image when they meet the horizon line. In future I will attempt to add some kind of distortion or mirroring effect so the reflections look truer to life.

Furthermore. I regret how the shadow of the tall ship is cast. I made a fatal error in this aspect as I inaccurately displayed how the shadow should look. rather than being stretched outward toward the town it should be shrunk and wrap around the bow of the ship. i would also try and create a more realistic shadow in future.

Overall though. my experiments with hue and brightness came out a success in comparison to my previous attempts I believe.

References

(1) Boehler, B (2020) https://unsplash.com/photos/jqdpdtPrKwc

(2) Vojtovicova, M (2021) https://unsplash.com/photos/7cfAzY0mj9w

(3) Claire, R (2019) https://www.pexels.com/photo/coastal-town-with-colorful-houses-4846529/

(4) Klavins, R (2021) https://unsplash.com/photos/mW51ftJqW6U

Part 1: Photoshop Basics

Upon starting this course I regarded myself as a novice with Adobe’s Photoshop software. I had used the program before for previous projects and within my studies however upon looking on the myriad of tools at ones disposal, I still found myself quite intimated by the sight of it.

Despite this my introductory class to this module would push me to conquer this feeling and acquaint myself with the features and tools within the editor. Lucky for me however, this began simply with a tour through the essential tools of the program and how to appropriately format my future works, This included but is not limited to: Setting the resolution scale of the piece, typically 72 DPI (Dots per inch) as its the standard for most screens, Adjusting the aspect ratio of the canvas and changing the background between white and transparent.

I first task to prove our competence was a simple “Cutting and Pasting” Job. In this task we used the Magic wand tool to highlight the background of an image of Saint Pauls Cathedral.

By Selecting the background to this image, a dashed line would appear around said selected aspect. Click on the line would remove the selection and clicking within the line would increase the selected area.

I continuously clicked on the line as it grew to a larger size, encompassing most of the background surrounding the cathedral. However I would continue to find gaps within the selection due to clouds, or areas the image couldn’t identify as part of the sky, therefore I turned adjusted the tolerance slider for the magic want tool, present at the top of the window which alleviated some of my problems. Following this I then deleted the selection (Backspace) and cleaned up some of the smaller details via the eraser tool. I made sure to decrease the pixel size of the eraser as well as make sure I didn’t erase more of the image than necessary.

After the background was fully removed I had made a grave mistake however. As I had done all of this on the background layer. Therefore I created two new layers and labelled them “Foreground” and “Background” and placed them in a hierarchy which would lead the Foreground layer to be the top layer and vice-versa. I then deleted the original image on the original background layer, not before copy and pasting it onto the top layer.

Following this, I imported the sky image into the background layer and toggled the hue and saturation of the design within the Image settings. This was done as I believe the bright sky didn’t mesh will with the originally dimly lit image.

Our secondary additional task was to edit an image to give a sense of motion. This once again utilised the use of the magic wand tool.

Firstly, I selected the focus of the image (using the same aforementioned skills to enhance the selection), that being skater, and created a new layer to house a copy of only him. Following this reselected the following layer and accessed the filter menu to create a blurring effect. I selected a “Field Blur”. I then experimented with the settings within the blur’s menu until I found a suitable style. I did this as well with a “Spin Blur” in which a created a circle around the focal point of the image to blur to give the skater a sense of inertia.

Part 2: Environment design

Following our introductory tasks to the software, we was given the reigns to go create something of own, so long as it was a concept for an original character or environment. In addition to this, we was also given a tool in which to work on, that being a graphics tablet. Whilst I had never used a graphics tablet before, I was familiar with drawing my own concept art for potential games I could create within my free time, so needless to say I was glad to draw with “Pen and Paper” rather than rely on the inbuilt shape tools and the mouse.

Inspiration

During our first lecture for this module, I had had an idea for a 2D Side scrolling platformer in which you would play as a mouse exploring the rubble of a destroyed city, squeezing through small holes to reach the goal. I was inspired by my own personal interest of British wartime history, particularly that of the Second World War and in this case, London during the Blitzkrieg bombings by German Luftwaffe between 1940-1941. I wanted this game to be played a smaller perspective as to not only increase the emotional impact of the damage (by making it seem so much greater and unconquerable) but also to serve as a unique platforming challenge, such as running across tables and avoiding drains as obstacles. This was inspired by games such as It takes Two as they play from a smaller perspective from that of a humans.

Sketching

Utilising the knowledge I had learned from the original tasks. I decided to use layers to give a sense of depth to my destroyed city. I would shade these with different colours to show the buildings begin to darken as they grew in distance. I blocked said buildings using the Rectangle tool, and then began to draw rubble in the matching colour to add to the silhouette.

For the night sky, I added a dark blue into purple gradient that would add a sense of depth to the sky, I also adorned this with stars and spotlights to make the view more dynamic. I decrease the transparency of the brush when I drew these elements to give a somewhat glowing effect to the lights.

I then discovered that holding shift whilst drawing allows the user to input directly straight lines. I used this technique when detailing the brickwork on the nearest wall.

Following this I then used a different brush with the pencil tool and began to add texture to the objects within the scene. I also used to colour picker to select the same colours for different parts of the environment.

Finally I added some elements such as the rat, mousehole and table to give the scene some key points of focus as well as show the viewer the perspective of the piece.

Furthermore I added some greater detail such as fur on the rat, more rubble in the foreground and added shadows onto the brick all layer for everything in front of the wall to give a greater sense of depth. this was done by choosing a designated light source then drawing in the shading at 50% transparency to give an authentic look and feel.

Evaluation

Generally, I’m quite proud of the art that was made at the time, especially for my first use of a graphics tablet. I believe my work captures my theme quite well and I had incorporated what I had learned within the workshop sessions into my art. However, if I am to improve I need to work on my perspective and use of colour. Due to the minimal shading everything in my scene looks a bit flat, and without proper perspective, the illusion of depth I tried to create with the different layers may be lost as it can be viewed that each layer is atop one and other. However for a first attempt I believe the the themes and ideas I was trying to convey were made clearly within my artwork. I would also try and use more complex tools within photoshop to refine my work. However I did learn the basics of how to compose an environment.

References

(1) Occhi, M (2022) https://unsplash.com/photos/3K1TZ_RmLZc

(2) Morbey, T (2020) https://unsplash.com/photos/r1SwcagHVG0

(3) Adobe (2022) https://helpx.adobe.com/photoshop/using/tool-techniques/magic-wand-tool.html

(4) Unkown https://historyofliverpool.com/liverpool-blitz-photo-gallery/