This blog post is a representation of the work that I have completed during the third week of trimester 2 at college.
Week 2 Homework Task:
At the end of the 2nd week I was asked to read and watch various media about both the games super time force and death stalkers and answer various questions relating to them.
Beneath the pixels: The art direction of Super Time Force-
Super time force article: Link to Article
Death stalkers article: Link to Article
Why do you think the developers chose these art styles?
- Using the pixel art style when creating games helps to represent the personality and the style of the company that develops those games well.
- Super time force was originally made as a game jam called super time squad at first, the developers only had to work with small amounts of budget and time, so the pixel art style was mandatory in order to save time and resources to create a game.
What creative problems do pixel artists face? What problems doe’s pixel art present as an art style?
- One of the many problems that come when creating pixel art is the way of presenting enough detail without creating complications with animation and other processes further down the production line.
- When working on small resolutions and in this pixel art style it is easier to create unintended visual noise when creating the game that take away from the gameplay and damage the game overall so they needed to keep in mind to adjust their style so they would avoid creating this visual noise.
What are the advantages of pixel art as an art style?
- Pixel art helps to create an expressive style in terms of colour pallet, visual style and animations to give a unique yet familiar feel to the games created using pixel art.
- Pixel art will still face similar difficulties than if working with another style however the workflow is generally simpler than working with 3D for example, with pixel art it’s simply a matter of creating 2D pixel art assets, creating animations for them and linking them with code compared to 3D involves creating 3D models of those assets that you originally had as a concept and then animating them.
- Pixel art allows you to have a visual style that can show a lot on the screen at once in a simple style but contains a lot of information, it also avoids the threat of being too hard on the computer systems power in terms of memory and processing power.
What problems do animators using pixel art face?
- When working with low resolutions, limited colour pallet and flat 2D images it is easy for images to blur and become a mess when they are animated.
- Working with small resolutions makes it difficult to create facial features and subtle movements in the character making it even harder to create personality to the characters and other animated assets in the games.
- With low resolution pixel art you are limited to the amount of space you can work with and the pixels you work with can affect to how believable the movements your animated characters make while in the game so it was key to achieve believability in movements.
What are the advantages of using pixel art for animation?
- Using pixel art enables to create a lot of character and personality to the assets that get animations such as making characters look cute and friendly is generally easier in the pixel art style.
- The developers would have more liberties when creating movements for their animations such as the characters would be more malleable in their movements compared to a more realistic style due to having movements such as stretching and squashing look effective without having negative effects such as looking creepy.
How do the requirements of game genre, technology and players affect creative decisions?
- When it comes to older technologies and rendering the pixels that put the game altogether the pixels will appear much softer and smoother in standard definition rather than more sharp and precise in higher definitions.
- Backgrounds of pixel art video games tend to blend into the foreground of many games and this creates visual noise so many decisions such as de-saturation the backgrounds and adjusted the colours to be more pastel like causing the foreground details such as characters and animations to stand out much more.
What creative decisions did they make in tackling these problems?
- When creating super time force a problem with the visual style was that it was creating too much visual noise for the player and became difficult to differentiate the characters and foreground to the background, One method the team behind super time force fixed this issue was to remove as many diagonal lines as possible, this resulted in a much more cubic style that looked more flat however looked great and helped with visual clarity for the game.
- Super time for developers also had small resolutions for their characters, this gave a limited amount of room to work with animations and presented difficulties when adding personality to them, for example having subtle idle movements such as movements of the eyes and mouth where near to impossible so it was not implemented, instead the developers added the characters personality into the movements that their entire bodies made.
- When it comes to the character art and the colours used to is easy to make the characters blur and become a mess when the character/object is animated, to fix this it is common to split apart the model into different sections using colour, for example the arms will be a different colour to the torso as well as the legs. An example is Mario and his jump suit splits apart his body to stop blurring.
- As I mentioned previously the background environments tended to blend in with the foreground and characters, to fix this blur the developers decided to de-saturate the backgrounds and use more pastel like colours to differentiate between background and foreground.
What were the alternative solutions?
- The art style of the game could have been different from the get go after the original game jam version, however the developers decided to stick to the original style and adapt/improve it along the way.
History of animation:
Sometimes considered the 1st form of animation the magic lantern arrived in 1603, the image projector consists of pictures on sheets of glass, sometimes these sheets of glass contain moving parts and that’s why it is sometimes considered the first form of animation.
The Thaumatrope arrived in 1824, and consists a rotating mechanism with a picture on each side when rotated you see a combined picture.
The Phnakitoscope arrived in 1831 and is a device that featured several spinning disks that where reflected in mirrors that made it seem like the pictures displayed inside where moving, these pictures where visible through a small slice in the device. The Zoetrope arrived in 1834 is a hollow drum object that housed several images on a long interchangeable strips that span and made the images to appear to be moving creating an animation.
The flip book that surprising arrived in the year 1868 and not in a previous time like I expected, The flip book is also known as the Kineograph and reached a wide audience as it is also credited for inspiring early animators more than the machines developed in this era.
The Praxinoscope also known as the Movieola arrived in the year of 1877 and expanded on the original Zoetrope, however this time the device used multiple wheels to rotate the images it displayed and it has been considered to have shown the very first prototypes of the animated cartoon.
The 1900’s to the 1930’s was the era of silence movies, and so forth the 20th century made a breakthrough and marks the beginning of the showings of theatrical cartons, most predominantly in the united states and France, Many animators around the world came to form studios with bray studios in new York proving most successful in this era, Bray then helped elevate the careers of the cartoonists that created the famous characters of mighty mouse, Betty Boop and woody woodpecker.
1906 marks the first entirely animated film using stop-motion photography to create movements and actions.
Phantasmagoria is the first film to use hand-drawn animation and by many is considered the first to be an animated cartoon.
Later on came the famous animations such as Gertie the dinosaur, Felix the cat, and many more, most famously Steamboat willie contains the 1st rendition of the famous Micky mouse and from their it continued to ever evolve and is still doing so.
Creating Pixel Art Animations:
For this task I am to create a set of basic animations using various tools and techniques within adobe Photoshop.
Setting up Photoshop for creating the animations:
My first priority in Photoshop in order to make creating animations easier.
Under the edit tab and the preferences option there is the general option, using the menu this displays underneath units and rulers I changed the ruler’s unit type to pixels. Underneath guides, grids and slices I changed the unit measurement to pixels.
I then went under the window tab and turned on the timeline, when I first set up the Timeline it was in video format, to change this I clicked the button with 3 hollow squares.
I then created a new canvas using the Ctrl+N shortcut, I set the dimensions of the canvas to 24 in both width and height, to show the rulers I had set up earlier I pressed Ctrl+R, Once they appear I created a Baseline by click holding down on the top ruler and dragging downwards, I snapped it to the top of the 3rd pixel from the bottom of the canvas. I then unlocked the base background layer by double clicking the layer in the menu I followed by filling it a light grey.
Creating the walk Animation:
Starting from the base line I created my pixel art character of 8 pixels in height, making sure that the pixels that would be in the background such as the inside of his right leg are a darker colour, This pose needed to be idle., I then needed to create additional layers via duplication showing slight movements in the pixel art character to give the impression of the character moving, I had a slight leeway to allow 1 extra pixel in height. Now I created frames in the timeline window, on each frame I had to hide all other layers apart from the background and the part of the animation, I did this for all frames, I also set the delay to make the animation to feel smooth, testing it as I went along.
Inserting the process images:
Saving the animation as a GIF:
The Final GIF version:
Creating the Jump animation:
When creating the jump animation I decided it would be easier If I used the same sprite than the one from the walk animation, so I simply copied the file over and renamed it, I then opened the file into Photoshop and removed the extra layers apart from the Idle layer as well as removed the different frames. I then one by one created new layers by duplicating the previous changing the sprite each time to look like they are jumping, I did this until the character reached the peak of their jump.
I then created new frames having it so each part of the jump showed with the other layers hidden each time, when adding he frames for he decent I simply showed the layers in reverse.
When saving as a GIF I went through the same Process as before hand with the walking animation.
Final Gif Version:
Creating the Punch animation:
Once again I decided to use the same character sprite as before, so I copied it again, removed the additional layers apart from the Idle and removed the different frames.
This is quite a simple animation where I simply made it so that the character lent forward and trusted his fist as seen in the process screenshots below, I then also added frames for each layer and went backwards when the character was retracting their fist.
The Process Screenshots:
Final GIF version:
Overall I am happy with the results of my 1st time animating pixel art in Photoshop, My only real issue I have is in the walk animation is how the legs of the character look and stretch. The process was very simple and easy to understand.
Learning to animate is helpful for me and my project because it is a requirement so that my game will look fluid and natural.
I personally didn’t conduct any research and instead worked of personal knowledge instead, that proved to be effective. Alternatively I could have possibly recorded myself or others performing those actions and got inspiration and research from them.
I also Posted these Animations to our Facebook Page.
Our Finalised Team Logo and Name:
As with our previous blogs we have decided to go with Pantheon Studios for our name baring this logo:
Reflection on the Week:
How will this task help you to meet the current requirements and parameters of your project?
These tasks helped us to understand and create animations which will vastly improve our work with the coming projects creation.
What research activities did you undertake in order to help you create your animation? Were these effective? What other research activities could you have undertaken?
We researched how actual humans would move and “animate” which we could then transfer into our animations vastly improving our results, We could of also researched anatomy and see how certain muscles move or even looked at other peoples animations.
How will this task help you to plan and organise your work on the current project?
It gives us a guideline to follow for when we create our pixel art animations for our project relieving some of that time trying to come up with animation idea’s.
How did you apply your practical skills (include screenshots where relevant)? Did you learn any new skills during the process?
I learnt alot about animation and all of which helped when creating my own. even learning about the history of animation itself was interesting.
How effective were your solutions in solving this visual-based problem? Consider the strengths and weaknesses of your work. How could you improve your animations?
My biggest problem was getting the walk to look right without his legs looking like their made from elastic which I failed at, I would like to of improved this, maybe I should of not increased the overall height of the sprite for the animation [the bobbing] however this would also remove some of the life of the sprite, it is a difficult problem to overcome.