Smooth, flowing Pixels?

[Digital Mosaic Games]

Hello AGS-Friends!

When I deform a sprite with diffrent values for height and width like this:
=>
Then I get this ugly rough edges which are 2 or more Pixels long. This is what I mean:

My question: Is there any way/tool how to make this edges smooth automatically without changing the color or adding any colors? I thought of something like in the mac version of indiana Jones Fate of Atlantis. There was a Plugin I think but I can´t use that for my sprites. This is only a demonstration of my imagination(LOOK AT INDY(thats what I mean)):

[Privateer Puddin']

Make your game 32bit and enable the HQ2X/3X filters in win setup?

[Digital Mosaic Games]

No this isn´t excactly what I mean but it´s also good to know. I mean how can I get this little function without changing the whole picture. Only this little edges.

[Calin Leafshade]

the obvious question is why are you stretching the sprite out of proportion?

[Privateer Puddin']

Trying to emulate what the Lucasarts games did back then, 320x200 but with a 4:3 aspect ratio, utilising CRT ability to have rectangular pixels?

[Calin Leafshade]

but he said he wants to *avoid* rectangular pixels

[Privateer Puddin']

I think he actually wants proper rectangular pixels (as in, each pixel is rectangular, what you'd get if a CRT monitor was scaling 200 -> 240? I might be getting this totally wrong!) rather than what he gets by stretching, where some lines are 3px high when the most are 2 pixel high? That's how I read it atleast...

[Khris]

The algorithm that was used in the FoA screenshot is specifically designed to upscale pixel art to double size.

What you seem to want is arbitrary scaling without additional colors. This is only possible with vector graphics; raster images have to use intermediary colors to keep the original appearance.

A simple example would be a white pixel next to a black pixel. If you stretched the width to 3; what's supposed to go in between the two? The obvious answer is a medium grey pixel. If you take away the option to use additional colors, you'd have to search the palette for a color closest to medium gray. The quality of the result will depend heavily on the size of the sprite's palette and the used resolution.

That's why really big images that use millions of colors (photos) will still look perfectly fine after arbitrary resizing. Low res sprites with fixed, low-color palettes will not.

[Monsieur OUXX]

A pixel picture (also called bitmap, also called raster graphics image) -- as opposed to a vector image -- is, by definition, made of small squares (the pixels). They're here, whether you want it or not.

When the picture is zoomed out, you don't notice them too much.
When you zoom in, they become more visible.
--But, once again, they've been here all the time.

So, if I understand your question, you'd like to know what techniques you can use to soften their appearance when you strectch your sprites, which is basically the same thing as "zooming on a pixels picture". I'll talk about the case where you sue different values for horizontal and vertical stretching later.

It doesn't really matter whether you apply the technique onto one sprite (e.g. the character) or the whole picture. The question remains the same (even though, most of the time, because of technical difficulties, it's simpler to apply the "filter" only to the whole scene, not only to a few graphics in it -- for example the AGS setup offers you to apply the filters only to the whole game).

So, now, what are the techniques?
- Blur the zoomed image
- Distort the zoomed pixels and change their shapes so that they're not square anymore

1/ About blurring the image (anti-alisaing)
If you zoom on a pixels-image, the pixels will appear as being bigger, but will actually be made of "real pixels" that kept their original size (that is to say, the actual pixels of your screen).
For example, what used to be one single pixel in the original image, if you zoom x3, will become a square of 3x3 "real" pixels (i.e. 9 pixels) on your screen.
As you can see, you get additional pixels when you zoom a pixels-image.
Blurring the image consists of changing the color of some of the additional pixels, to smooth the transition to their neighbours. That's called anti-aliasing.

Here's an example :


2/ About filters that distort the pixels
I wrote that a zoomed pixel is rendered as a bigger square (1 pixel --> zoom x3 --> a square of 3x3 pixels).
But you don't have to make it a square. For example you can make it 2 small triangles. And you can slightly alter the colors of each triangle to make it fit the color of the neighbours.

Code: ags

[X]          -->        [X][X][X]            -->         [1][1][2]
                        [X][X][X]                        [1][2][2]
                        [X][X][X]                        [2][2][2]

single                    zoomed                        2 triangles
 pixel                     pixel                         (1=triangle #1
                         (square)                        2=triangle #2)

Here's an example :

If you look cloesly you'll see the sall triangles in the lower picture. Thaqt explains why horizontal, vertical and diagonal lines are rendered perfectly, but all other angles are awkward -- and cause rectangles to apear as "rounded".

How can I use those filters?
- If you decide to apply the filter to the whole picture, then use the AGS setup.
- If you want to use an elaborate filter or apply it only to part of the picture, then you must use an external plugin or a module. I'll let other forumers tell you what's available. For example, Calin Leafshade has been working on interseting graphical effects lately. the main issue is that those filters slow down your game a lot.


What if I use a different scaling factor for width and height?
There's no magic solution.
- Blurring the zoomed image will hide the defect, but is... well... blurry. there is obvious quality loss.
- Using the second technique I detailed won't remove the problem, but the result is so eye-candy that you won't really notice it anymore.


And yet another over-detailed answer ;-)

[Jim Reed]

Here's a link to the Wiki article about pixel scaling algorhytms.

[Khris]

NEON-GAMES, in order to not get your hopes up I want to repeat that IMO it is impossible to do what you want.
The explanations and links here are generally useful but don't quite apply to your question.

Blurring requires additional colors, using one of the mentioned filters is intended to upscale an image, not change its aspect ratio.

In ScummVM it's possible to turn on aspect ratio correction in order to 'de-squash' a 320x200 game designed for rectangular pixels that's displayed using square pixels.
However, the filter uses anti-aliasing, effectively blurring the picture by adding colors. Which is what you don't want to do.

[Wyz]

Yes, I have to agree with Khris. The algorithms mentioned are for 2x or 3x up-scaling in both directions. What you are trying to do is 1.2x up-scaling in vertical direction only. You need a different algorithm for that; I don't know if it exists. Even if an algorithm exists for it, you will probably end up with better results if you edit them manually *spriting*. If this is too labour intensive you could settle for a letterbox.