Pixel Art: Problems & Solutions

Pixel art can be used in games as a style and a creative direction. There is a lot of Software that can be used to create pixel art (including MS Paint and Adobe Photoshop) which can then be used for textures in a game.  Pixel art has been used in a wide variety games over the years and has shown to be a very successful way of animating 2D games as well as an effective way to portray a creator’s concept.

Super Time Force

The studio Capy Games developed “Super Time Force” which is a 2D side scrolling game with mechanics that allows the player to turn back time in-game when they are defeated by an enemy while adding another version of the player that follows the path that the player originally took and due to this, many other style of game were ineffective as they created a lot of visual noise onscreen which can confuse players. Because of this, along with their previous experiences and influences, they decided to use pixel art because of time constraints due to them having a deadline to show the game at a convention. They decided this worked well to give nostalgic values to their game while also not affecting any of the requirements.

Picking this style however didn’t prevent problems from being faced such as the fear that people might prefer higher graphical content instead. Super Time Force was initially going to use both diagonal and straight lines (vertically and horizontally) but due to the way that diagonal lines looked when used caused the stage design to look more confusing so they opted out of using diagonal lines to ensure a better game experience. They also faced visual struggles in regard to bringing characters from the backgrounds while sticking to certain colours and their style. The pixel artist are also required to be sure every pixel is placed correctly in the textures of everything visible in the game especially in this case as it was intended of high definition viewing, using much more pixels than would have been used in much older pixel based games. Another problem, because of the amount of pixels required, they had trouble with texturing causing them to be forced not to include everything they had produced.

By using this style, they were able to use their previous influences from games that use pixels in their style which means they have the ability to see what worked well in those games. The designers also found that in using small character sprite, there would be less detail on characters to animate as body parts in this game are only a pixel or two wide meaning more time to develop other parts of the game while shortening the tasks.

When animating the game, the creators found that with all that was going on the screen that there was “visual chaos” because of the amount that could be going on on-screen at once.

Pixel art is used effectively in this case as it has a modern feel that could be given by a retro-game while things being available to the creators, that in previous generations of game development, may not have been able to achieve. As for efficiency of using pixel art in comparison to 3D, there would be only a Y-axis and X-axis being used instead of the addition of the Z-axis, meaning that to portray a sense of depth, shading and highlighting would be used.

Because of the genre of game, other art styles would have made it difficult to load as many on screen characters as this game does meaning that the limit of thing onscreen to interact with would be much lower when it came to implementing the mechanics. This also meant that in order to make the time travel idea work, they had to build on it further to keep players engaged as well as allowing them to pick up on the gameplay easier which was made possible with the smaller characters that pixel art allows.

By using pixel art as there style, thanks to their previous experiences found that they were capable of at least producing something in the time they had. In spite of the problems they came across, they decided to implement solutions into the game in order to get around them such as to help improve the “visual chaos” they removed diagonal lines, applied contrast to separate visuals, added fading to merge visuals and attempted to square off things in order to promote the action as they saw fit. When designing the small sprites for the characters, they found by giving the characters neutral faces, it helped promote the carelessness of the characters in reaction to the chaotic world they are in while showing the personality of the characters through their body shape and movement. They were also required to optimize the textures to suit the target platform due to limitations of space.

Since the game was started May 2011, the technology at this point was way more capable of developing and running pixel art as well as many other types of styles for games. An alternate style that I feel would have been better than other options (but maybe not more efficient as pixel art) is using vector art as it has smooth graphics which would work well considering the HD platform but would involve a lot more storage as each graphic would need detail to a degree and each sprite would take up a lot more room. While the game could also have been in 3D, the mechanics of the game would cause the game to render a lot of models on the screen at once potentially making the game slower and confusing.

Darkstalkers

Another game that uses pixel art is a game developed and produced by Capcom in 1994 called “Darkstalkers” which is a 2D fighting game that uses much more detail in the style than “Super Time Force”. It was developed using 12 steps of animation which has been used by many other media designers such as Disney to get viewers to visually enjoy the movement of characters. Since not a lot of other styles of game were available due to technology, pixel art was probably chosen as the most capable style to portray.

Since each character was designed on paper first, the pixel artists had to make recreate them as sprites meaning that characters were probably reworked when it came to creating the frames for animations.

In this case, the art direction of using pixel art allowed the game to have film-like imagery that would be designed on paper first to get a concept of volume, depth, weight and character from the visuals.

One thing that the developer wanted to be sure of was that the animation appeals to the player so they decided to put somewhat of an exaggeration on the character’s movement using techniques like stretch and pull, which they also had to be sure not to over exaggerate actions as it may make it too immature looking.

By using stretch and pull in certain frames of a character’s animation, it is possibly to show build-up of movement as well as the climax of the animation meaning the player is given a strong sense of location toward the whereabouts of each movement, like being to see where punches will land onscreen. The frames of the animation of fighters were created in key poses (presumably from initial sketches) so the animators could place more frames between each one to prolong or shorten the time taken for movement without the fame sequence being visible to the player.

All the stages in the game are designed in high detail but were to not draw away the attention from the fighters while giving different areas for players to experience. Character were given mass from their designs making bigger, bulkier fighters slow, heavy and hard hitting while smaller, nimbler fighters would be quick, light and soft hitting.

Since the character sprites were so small there was difficulty transferring them from drawings into animated characters due to the small space given to the pixel artists so by using stretch and pull, it became easier to give character to sprites by emphasising body parts to highlight body parts on characters and making them identifiable. They also made movements have slow in and slow out animations which were important in order to keep the animation appealing and interesting for an audience.

Introduction to Animation

Animation is the process of performing motion using multiple images in a sequence to convey character, movement and information to a viewer or player. This process can be used in many sectors of the digital media industry in the form of film, video, GIFs, game character sprites, anything that uses 3D models, advertising, etc. Animation works best when the length of each frame doesn’t allow the eye to perceive it as a still image and each frame flows well depending on the appropriate speed of what is being animated.

History of Animation

Animation hasn’t always been in the form of digital media and existed before even film because of the following contraptions:

  • 1603 – Magic Lantern
    The first form of animation that could be projected for audience viewings was brought to life by the “Magic Lantern” which worked similar to older projectors as it uses lights and thin sheets of glass with colour on to project images onto a plain. They allow more than one of the glass sheets and the ability to rotate/interact with the images to create movement, animating them.
    (Example at https://www.youtube.com/watch?v=7FEtG7hCayM)
  • 1824 – Thaumatrope
    A thaumatrope was a device consisting of a circular piece of card spin with two images on either side held up by two strings. Pulling the strings causes the card to quickly flip over making the images visually merge with one sticking out more than the other giving the effect of an overlay. They could also use this to animate objects by showing the position of the parts things changing on the flip.
    (Examples at https://www.youtube.com/watch?v=yD0ovANHdqQ , https://www.youtube.com/watch?v=2BEBaAruWLU)
  • 1831 – Phenakitoscope
    This contraption was made up of a circular card with multiple pictures around the edged as well as having a hole in the middle to allow the Phanitoscope to spin; giving the illusion of the multiple pictures a flow to create a movement sequence.
    (Example Gif http://www.thisiscolossal.com/wp-content/uploads/2013/10/phenakistoscope-1.gif)
  • 1834 – Zoetrope
    A device called a “Zoetrope” was invented in 1934 and they are wide cylinder shaped tubes that had multiple images that could be visible through slits in the side and looking through the slits while spinning it causes the mind to make up the difference between the images giving the sense of movement.
    (Example at https://www.youtube.com/watch?v=ncesEosKENo)
  • 1868 – Kineograph (Flip Books)
    Flip books contain multiple pages, each with a different stage of movement occurring between each page so when the pages are turned in quick succession, the images create a short animation. These can also be used to get an idea of movement while producing for digital animation, during the designing process.
    (Example at https://www.youtube.com/watch?v=KQBDLFUsrFI)
  • 1877 – Praxinoscope (Movieola)
    A praxinoscope is very similar to both the phenakitoscope and zoetrope but uses mirrors to reflect in a way that focuses on one part of the images rotating making it look like one moving image where the others look like many images moving while spinning.
    (Example at https://www.youtube.com/watch?v=s75lRnnfgzs)

By knowing the evolution of animation, it is possible to recreate these devices to get a concept of movement before transferring skills into a digital file. Doing so can help see what works well as well as practicing the timings of movements, as well as the trajectory as to make moving parts look believable and readable through persistence of vision.

Bibliography

1906 (no date) Available at: http://history-of-animation.webflow.io/ (Accessed: 24 February 2017).

Animating Sprites – Basic Punch

For this task, we were required to create basic animations for a punch, jump and kick of a sprite created using pixels but not exceeding eight pixels high. This meant that being able to make body parts somewhat distinguishable was important so that movement could be created more effectively not only for the viewers but so that I was able to see them apart when animating. To get the right sense of movement, I researched by watching other people perform the movement and searching online for any techniques.

For the punch, I created a pixel model and added the timeline to the bottom of Photoshop to create the key frames for my animation. I then created a new layer by duplicating the model’s layer and hid it, extending the arm. Using the Select tool, I moved the whole body one pixel forward to give the effect of the sprite leaning in for the punch. I made adjustments to the legs so the back foot lifts off the floor but only slightly but feel that the two pixels used don’t connect as visually as I hoped.

basic-punch

Animating Sprites – Basic Jump

Using the same model, I squashed the pixels down (as well as making the pixel wider so the mass/size of the character wasn’t lost) to make it look as though the sprite is crouching to prepare for a jump.

For the leap itself, I made parts of the body that weren’t visible previously such as the neck and stomach to create a stretch effect show him reaching up to get to the highest point in the jump.

Then for the landing, I made him proportionate again to imply the sprite’s decent from the jump. I also mad the legs came back to imply that he has progressed forward slightly in the air.

advance-jump

Animating Sprites – Basic Walk

For creating the walk, I used this image as a rough guide to how the legs (and body) move while walking.

w

I made a new sprite based on the one before but added shading to the right leg and hand by adjusting the brightness of the colour (doing the same with the shoe) to keep the fact that they’re further back evident. I also changed the shape of the head so that the sprite looks as though it is facing to the right when walking. I was also required to make the legs longer at point so they look as though they extend like legs do.

As people step onto one foot then raise the other after pushing off, the person tends to raise and drop a bit so I tried to make the hair reflect this by going down and raising in places.

By raising and lowering the arms, I was able to include movement in the body area of the sprite to replicate the fact that it is hard to walk and not have moving arms.

I added key frames to all the motions on the Timeline, then went back and tweaked each one to make the movement look more fluent.

advance-walk

This task will help in future as it demonstrates simple movement of basic body movements that commonly appear in games and animation to build character as well as the way they react to the world that they appear in. This can also be combined with the character designs of sprite work to create fully functioning, detailed 2D sprites for a game.

The way the animations looks could have improved by performing the movements while using means such as motion capture to record and reference to improve the individual frames. Instead I observed other people performing them to get the visual reference for my animation which could be unreliable as everyone move in a different way. This also means that is multiple characters were to be animated; looking at different types of punches, jumps and walks can add variety to movements, giving each animation a unique feel.

By learning this process, I can bring forward these techniques to add animations for our game, in addition to knowing which hue, saturation and brightness to adjust the colour of pixels in order to remove any potential visual noise. I can also use other techniques to plan for this process such as a mood board to make sure the characters stick out from the background by contrasting the colours.

By using knowledge of Photoshop, I was able to set up the work-space to suit this project which helped a lot with the positioning of the sprites as well as being able to return them back so that they successfully loop. If this was for a game if would need certain frames removed to cycle through without spending as long on the stationary pose sprites.

 

 

 

Advertisements