UCT Algorithm Circle: Scaling Pixel Art...What is Pixel Art?UsesConventional Scaling AlgorithmsPixel Art Scaling AlgorithmsRotatingVectorisation What is Pixel Art? Is a form of digital

What is Pixel Art? Uses Conventional Scaling Algorithms Pixel Art Scaling Algorithms Rotating Vectorisation

UCT Algorithm Circle: Scaling Pixel Art

Kosie van der Merwe

20 October 2011

Kosie van der Merwe Scaling Pixel Art


Outline

1 What is Pixel Art?

2 Uses

3 Conventional Scaling Algorithms

4 Pixel Art Scaling Algorithms

5 Rotating

6 Vectorisation



What is Pixel Art?

Is a form of digital art, where each pixel is placeddeliberately.It mostly used in handheld games and some indie games.There are also various groups on the internet thatspecialise in the two major styles of pixel art: isometric andnon-isometric.



Style: Isometric

Check outhttp://www.kennethfejer.com/isocity/ for more.


http://www.kennethfejer.com/isocity/


Style: Non-Isometric



Technique: Dithering

In the olden days, colour palettes were much morerestricted.To get around this restriction artists used a techniquecalled dithering.This is achieved by alternating the use of 2 colours tocreate the illusion of a new shade.There are a whole variety of ways to do this, to achievevarious shades and effects.It is still used today to create a retro effect.



Outline


2 Uses



5 Rotating

6 Vectorisation



Emulation

These functions are commonly used by emulators to scaleup small handheld screen resolutions to reasonableresolutions for modern screens.The algorithms hence have really stringent speedrequirements to allow real time emulation to be achieved.



Outline


2 Uses



5 Rotating

6 Vectorisation



Nearest Neighbour

This is the simplest scaling algorithm.It simply takes the closest pixel from the source and copiesit to the destination.

function calcColor(x, y, scale):return source[floor(x/scale)][floor(y/scale)]



Nearest Neighbour



Bilinear Interpolation

This algorithm simply linearly interpolates between thepixels in the source image to get the approximate colour.It works well for photos.It works less well for pixel art.Note: the below algorithm fails at the right and bottom.

function calcColor(x, y, scale):tx = floor(x/scale)ty = floor(y/scale)return src[tx][ty]*(tx+1-x/scale)*(ty+1-y/scale)+

src[tx+1][ty]*(x/scale-tx)*(ty+1-y/scale)+src[tx][ty+1]*(tx+1-x/scale)*(y/scale-ty)+src[tx+1][ty+1]*(x/scale-tx)*(y/scale-ty)



Bilinear Interpolation



Other conventional scaling algorithms

Other scaling functions exist such as:Bicubic interpolation: Uses a bicubic interpolation insteadof bilinear and preserves finer details better than bilinearinterpolation.Lanczos resampling: Uses some clever mathematics tosmooth the “frequency“ of the source image. It createshalos as artifacts, but if these are sufficiently limited itactually improves perceived sharpness(acutance).



Effectiveness on pixel art

A large number of pixel art images are intended to be crisp.However, general purpose scaling algorithms don’t takeinto account certain properties of pixel art images.For instance, lines travel in specific directions (when youlook very closely at the image) and these lines must bepreserved.Additionally, pixel art tends to make use of a very smallpalette of colours, hence, there is little need to deal withsimilar but different colours.



Outline


2 Uses



5 Rotating

6 Vectorisation



EPX/Scale2x/AdvMAME2x

This algorithm (developed at Eric Johnston) takes a pixeland looks at it’s neighbourhood to decide what 4 pixels toturn it into.Taken from Wikipedia:

A --\ 1 2C P B --/ 3 4

DIF C==A => 1=AIF A==B => 2=BIF B==D => 4=DIF D==C => 3=CIF of A, B, C, D, 3 or more are identical: 1=2=3=4=P



Scale4x

This is simply Scale2x applied twice to get a 4x resolution.



Scale3x/AdvMAME3x

This is similar to the Scale2x algorithm but instead triplesthe size, by taking into account the neighbourhood of apixel.The implementation is long and repetitive, but follows thegeneral style of Scale2x.The implementation of this algorithm can be seen at http://en.wikipedia.org/wiki/Pixel_art_scaling_algorithms#Scale3.C3.97.2FAdvMAME3.C3.97


http://en.wikipedia.org/wiki/Pixel_art_scaling_algorithms#Scale3.C3.97.2FAdvMAME3.C3.97




Eagle

This algorithm is a doubling algorithm and is similar to theScale2x algorithm in that it looks at the neighbourhood ofthe pixel to be scaled.However, it differs slightly in the details.



Eagle

S T U --\ 1 2V C W --/ 3 4X Y Z1=2=3=4=CIF V==S==T => 1=SIF T==U==W => 2=UIF V==X==Y => 3=XIF W==Z==Y => 4=Z



Eagle

A problem with the Eagle algorithm is that for instance asingle black pixel surrounded by a white pixel willdisappear.The Scale2x algorithm prevents this by checking that if 3 ormore of the neighbours are the same colour and if so justscaling the pixel up.



2xSaI

SaI stands for scaling and interpolation and was made byDerek Liauw Kie Fa (aka Kreed) with inspiration from theEagle algorithm.This algorithm detects lines and edges and usesanti-aliasing and Wu Lines (a anti-aliased line) to generatethe new pixels for the scaled up image.



2xSaI



SuperEagle & Super2xSaI

Kreed also created 2 alternate versions of the 2xSaIalgorithm, called Super Eagle and Super 2xSaISuper Eagle is similar to 2xSaI but does more blending.Super 2xSaI is a filter that smooths the graphics, but doesmore blending than the Super Eagle.



Super2xSaI

Below is the matrix of the surrounding pixels used bySuper 2xSaI to scale a single pixel:



hqx

hq stands for “high quality“ and x stands for magnification.hqx is a family of scaling algorithms: hq2x, hq3x and hq4x(which scale the image by factors of 2, 3 and 4respectively)A good feature of this algorithm is that lines of certainslopes will be perfectly smoothed.For instance, hq3x perfectly smooths lines with slopes of±1

2 , ±1 or ±2 (that aren’t anti-aliased in the input)Lines with different slopes will alternate between twoslopes in the output.It will also smooth tight curves.



hqx

“First, the color of each of the 8 pixels around the source pixelis compared to the color of the source pixel. Shapes aredetected by checking for pixels of similar color according to athreshold. This gives total of 28 = 256 combinations of similaror dissimilar neighbors. To expand the single pixel into a 2 × 2,3 × 3, or 4 × 4 block of pixels, the arrangement of neighbors islooked up in a predefined table which contains the necessaryinterpolation patterns.The interpolation data in the lookup tables are constrained bythe requirement that continuity of line segments must bepreserved, while optimizing for smoothness. Generating theselookup tables is relatively slow, and is the major source ofcomplexity in the algorithm: the render stage is very simple andfast, and designed to be capable of being performed in realtime.“ - Wikipedia


http://en.wikipedia.org/wiki/Hqx


hqx



hqx



Additional Examples

You can see some additional examples of scaling pixel artat http://www.dosbox.com/wiki/Scaler (The doomface).


http://www.dosbox.com/wiki/Scaler


Outline


2 Uses



5 Rotating

6 Vectorisation



RotSprite

Using a nearest-neighbour rotation algorithm yields nastyartifacts.However, using anti-aliased rotation introduces newcolours.The RotSprite algorithm (developed by Xenowhirl) solvesboth problems.



RotSprite

The algorithm uses the following steps:First scale the image 8 times using a modified Scale2xalgorithm which treats similar colours as matches.Next the rotated image is created by nearest-neighbourscaling and rotation that simultaneously rotates and shrinksthe image.Finally, single pixel details that have been missed out onare restored if the corresponding pixel in the source imageand the destination is different and the destination pixel has3 identical neighbours.



RotSprite



Outline


2 Uses



5 Rotating

6 Vectorisation



All previous methods still kept images in in a raster format(pixels).However, there are methods that turn a image into a vectorimage and then scales the image.There is a really awesome paper (by Kopf and Lischinski)at http://research.microsoft.com/en-us/um/people/kopf/pixelart/


http://research.microsoft.com/en-us/um/people/kopf/pixelart/

http://research.microsoft.com/en-us/um/people/kopf/pixelart/


Image Sources

http://en.wikipedia.org/wiki/File:The_Gunk.pnghttp://en.wikipedia.org/wiki/File:Pixelart-tv-iso.pnghttp://en.wikipedia.org/wiki/File:2xsai_example.pnghttp://en.wikipedia.org/wiki/File:Test_nn.pnghttp://en.wikipedia.org/wiki/File:Test_hq3x.pnghttp://en.wikipedia.org/wiki/File:Tv_rotsprite.pnghttp://en.wikipedia.org/wiki/File:Super2xSaI-matrix.svg


http://en.wikipedia.org/wiki/File:The_Gunk.png

http://en.wikipedia.org/wiki/File:The_Gunk.png

http://en.wikipedia.org/wiki/File:Pixelart-tv-iso.png

http://en.wikipedia.org/wiki/File:Pixelart-tv-iso.png

http://en.wikipedia.org/wiki/File:2xsai_example.png

http://en.wikipedia.org/wiki/File:2xsai_example.png

http://en.wikipedia.org/wiki/File:Test_nn.png

http://en.wikipedia.org/wiki/File:Test_nn.png

http://en.wikipedia.org/wiki/File:Test_hq3x.png

http://en.wikipedia.org/wiki/File:Test_hq3x.png

http://en.wikipedia.org/wiki/File:Tv_rotsprite.png

http://en.wikipedia.org/wiki/File:Tv_rotsprite.png

http://en.wikipedia.org/wiki/File:Super2xSaI-matrix.svg

http://en.wikipedia.org/wiki/File:Super2xSaI-matrix.svg

Documents

UCT Algorithm Circle: Scaling Pixel Art...What is Pixel Art?UsesConventional Scaling AlgorithmsPixel Art Scaling AlgorithmsRotatingVectorisation What is Pixel Art? Is a form of digital