menu button

Scaling

Scaling

Scaling down a image has its secrets.

This chapter throws some light on this subject.


Note:
Scaling is different from resizing.
Resizing works only on the canvas.
Resizing may cut the sprite, but will never shrink or enlarge it.

Scaling Down Example

Scale Study 1



Above we see a simple 200x200 pixels image.


Below we see that image scaled down to 100x100 pixels.


Scale Study 2





Let's take a closer look.


Scale Study 2 - zoom in



The orange rectangle shrinked perfectly.
But the blue rectangle got blurry borders.
Why?

Except for the colors, the blue rectangle is identical to the orange rectangle.

What makes the difference are their positions!

The next article explains in detail what happened.

The Algorithm

Note:
There are more than one algorithm to scale down images smoothly.
And there are more than one implementation (software) for each algorithm.
So my purpose here is to expose a theoretical concept only.


EXAMPLE A

Take a tiny rectangle: 4 pixels wide and 1 pixel high (4x1 pixels):
[ white white black black ]

Now, shrink it to 2x1 pixels rectangle.

The algorithm combines the value of the first pair of pixels:
white and white -> white

Then the algorithm combines the values of the second pair of pixels:
black and black -> black

The new rectangle is [ white black ]


Scale Study 3



EXAMPLE B

Take a tiny rectangle: 4 pixels wide and 1 pixel high (4x1 pixels):
[ white black black white ]

Now, shrink it to 2x1 pixels rectangle.

The algorithm combines the value of the first pair of pixels:
white and black -> grey

Then the algorithm combines the values of the second pair of pixels:
black and white -> grey


The new rectangle is [ grey grey ]


Scale Study 4



SUMMARY

The two tiny source rectangles are very similar.
The only difference is the position of the pair of black pixels.

The resulting rectangle of the first example is like a small copy of the source.

The resulting rectangle of the second example is very different from the source.
No color of the source rectangle is present in the resulting rectangle.

The Problem

It is ok that the filling of a big image will be smoothed (blurry) by the scaling down.

But we don't want the outline to be messed.


Scale Study 5



The left head is the source big image.
The right head is the (zoomed in) result of scaling down the source big image.

How do we scale down an image without blurring its outline?

The Solution

The solution is perfect and simple!


STEP 1

Make the outline in the definitive size of the sprite.


STEP 2
Increase Layer Size Icon
Click once (or more) the increase layer size icon of BobSprite.
This scales up the sprite (doubling the width and height) in pixelated mode.


STEP 3

Now you have the big image.
Paint it respecting the outline.
Do NOT DISPLACE the outline inside the canvas.


STEP 4
Decrease Layer Size Icon
Click once (or more) the decrease layer size icon of BobSprite.
This scales down the sprite smoothly.


Your sprite is done!

Note

This solution also works for anything that you do not want to be blurred by the scaling process.
Eyes, for example.