Pixel sprite animation

For this project, I was asked to create three; pixel art animations on Photoshop, one for punching, one for jumping and one for walking. I will be showing you the processes of how I made these, the requirements of making them and an insight into the history of animation. There will also be examples of what I  have made and the processes.

The history Of animation

Animation has been around for many years and is one of the most well-known uses of entertainment. With animation one of the oldest forms that can still be found is zoetrope. Zoetropes’ are a cylinder spinners that have frame by frame still animations on the inside of the zoetrope and slit-like holes around the rim. As the zoetrope spins, you need to look into the slits in the rim of the zoetrope to view the image on the inside, as it spins you only see one space for an image so it’s viewed as an continues animated loop as the image changes due to it spinning. Zoetrope is a 1930’s invention I was one of the first multi-viewing animation inventions.

Animated film shorts started becoming a big jump in animation history, these film shorts were black and white cartoon characters with sounds in the animation and sometimes voices too. The most well-known black and white animated character is Walt Disney’s, steamboat Willy animation which shows Mickey Mouse driving a steamboat and whistling.


For doing this activity, I will be gaining knowledge in pixel animation. This knowledge could be used to create animations in a 2D, pixel art, side scrolling, retro game with the genre of Ancient Egypt and the main character being the first ever computer programmer, Ada Lovelace. These animation tutorials will allow me to make sprite animations for the Ada Lovelace to put in the game. I will also be able to use my pixel art skills I have picked up to create tiles that I could use to create levels in our game.

Research and Resources

Before I started making these animations I needed to research. I needed to know how to animate using Photoshop, My tutor had demonstrated how to animate in Photoshop and saving the animations as either GIFs or video clips. Notes were taken down so I could remember and work more with this knowledge. There was the history of animation that we talked about and had watched a few clips of some. For when it came to creating the poses in each frame some I and other people would act out to get an image of what it would look like. With acting out some of the poses I would need for animating, I would also look up referencing images from Google which would be shown below this text.




What I did to make my Animations

I first needed to make a canvas which was 24 pixels by 24 pixels In Photoshop. Then I opened up the canvas and went onto the edit bar, then preferences and then general. I had to change the options, ruler and types in unit and rules to pixels. In the guides grids and slices I had to change grid lines every, and the subdivisions to 1 pixel by 1 pixel.the-queen-snippet-0-5the-queen-snippet-2424-part-1the-queen-snippet-1-5

Then I have to navigate to the view bar, then turn on the pixel grid so I could see where my pixels are in the canvas, turn off the snap so I had more freedom when making the pixel sprite frames for the animation. I would then press CTRL-R to make my ruler appear which should be measured to the right size of my canvas. I would then use the move tool by holding ALT and then would move the top ruler down to three squares from the canvas. I would need to bring up the animation timeline so I would need to go into windows and click on the timeline when the timeline appears you want to go down to the arrow pointing down and change the timeline to the animation options.
I then used the paint bucket tool that you would find when you hold left click on the gradient tool, then I painted the canvas a mid-grey colour to help me to see what my character would look like. I would then make another layer and create a sprite which was 8 blocks in height. Not using too bright or strange colours and making sure limbs are different colours so they don’t blend into the rest of the sprite. The sprite had to be in a game standing pose which means they would not be facing forward but will be slightly looking to the side. Then, I would make another layer and draw and move some of the pixels for the next frame of the animation. I would do this for all the frames I need, so for the punching animations I would do the character first standing still, I would then draw the character head turned to the side with leg pushed back and arm going a little forward. Then I would turn the head a little more to the side and arm more stretched out. I would do this for all animations like with the jumping animation, I would draw the character first standing there, then the character would crouch a little, then a little more. Then the character would stand back up and start to move upwards. Feet would move downwards and so would the arms, once the character got to the height it was jumping at, the arms would move upwards and the character would land and crouch but then stand up again.

For animating the frames I would click on the layer with the pose I want so it is highlighted, I would then add a frame to the animation bar. Because I highlighted the layer with the pose I wanted on my frame, the pose would be in that frame for the animation,


I would need to make at least 2 to 3 frames with the same pose for each of the poses I had drawn to be animated. I would then play the animation to see if there were any tweaks I needed to fix or if I needed to tweak the time for the speed in which the frames would go through.


Is pixel art an effective way to create Animation and games?

Pixel art is one of the most well-known art styles that was first used for games due to the lack of knowledge about our technology, and it has become a well-known art feature to this day. It has made people millions when they have produced a game within this art style. This style is also well known for gaming icons such as Super Mario, Sonic the hedgehog and Link from the legend of Zelda and the common game style for the 70’sto 90’s. In the 1990’s 3D Dimensional modelling was being introduced on consoles like PS1 (PlayStation 1), the Dream cast and Nintendo 64.

When 3D became more common pixel art was less used and seemed to be less used. However, pixel art has many advantages and disadvantages even today. Super Time Force was a three-day project (2015) created by a team of three. The art style of pixel art was chosen due to the amount of time the developers had. They were lucky because two of team members had worked with pixel art before for games on mobiles so they could put their knowledge to good use. One of the advantages of pixel art is the speed in which you create a product. The pixel art style was just picked for convenience but the developers liked the design and continued to use the style, the style fitted with the genre and style of the game. The developers explained; “they wanted to use it to develop a hallmark style.” So the developers wanted something unique, different.

Richmond Lee (2010) talks about Dark Stalkers and Capcom’s animator’s use of 12 principles of animation. Pixel art animation/ animation, in general, uses some techniques, for example, squash and stretch which is a technique used to make the animation look more fluid and give them more emphasis. Lee gives an example of this in Dark Stalkers is Q-bee who uses squash and stretch in one of her attack animations.


This can show how versatile pixel art in games can be, it can be used to create the classic, blocky design with bold non-shaded 1 Dimension; for example, the first Super Mario games:


Pixel art can also show more detailed in-depth. Works that are made to express the style of pixel art like in the games, papers please and Superbrothers: Sword & Sworcery EP shown:


One of the biggest disadvantages is that some people dislike pixel art or find it very distasteful due to it being dragged through the years, or just a 90’s only trend.

The requirements for what device the player is using for the game effects the creative decision as screen size and resolution needs to be accounted for. For example, if you’re making your game for a range of devices, you will need to make sure the resolution is compatible with all types of screen sizes and pixel sizes. A problem with pixel art is pixel art is made up of pixels and if you was to just place that on a TV screen it could just be displayed on how many pixels the game is made of, that might not even take up a quarter or a 42 inch TV screen. This will mean the pixels will need to be expanded without differing the resolution.

The genre in a game can be affected when being made in pixel art because there is only so much you can do in a pixel art style/ game. Including the movement of characters, if you wanted movements that are more fluid then you would need more pixels in your game. In super time force, they used different types of pixel methods to create their characters and the movement compared to the background of the level.

For players, pixel art is a nostalgic style of art that many people will remember old games they played that would have been made in pixel art and relate much of what they see to something old and memorable. However, the games developers sometimes see differently to gamers, for example, Super Time force which is a pixel art made the game but looks quite modern in appearance because of the colour pallet, movement, art style and mechanics.

 The pixels of the game will need to be enlarged to the right pixels of the screen to fix this problem, the pixel would still need to be in good resolution with a setting that will allow for the pixels to be enlarged without deforming or becoming bad in quality.

With the pixel art, super time force uses different types of pixels to help with the shape and movement of their game, as Dark stalker used a large number of pixels making their characters and backgrounds more fluid with more shading and mobility when animating the sprites.

Dark Stalkers: https://web.archive.org/web/20161013140311/http:/art-eater.com/2010/07/test-1-darkstalkers/

Super time squad/Force: http://www.gamasutra.com/view/news/255187/Beneath_the_pixels_The_art_direction_of_Super_Time_Force.php

Twitter, Facebook profile Ideas

In this task, I was asked to create my final Idea for our logo to go on our social media. Our team all made a logo for the company and we will decide on which one we prefer or would be suitable for the company.

Profile picture size: 444 pixels by 436 pixels

Banner size: 1500 pixels by 500 pixels canvas-size-1500by-500