January 6, 2013

Aeon of Sands - scaling pixelgraphics is a pain

Scaling pixelgraphics is a pain! Don't understand me wrong, I really mean scaling to nativ monitor fullscreen while preserving the aspect ratio.

I write this post, because most indie games start in window (only) mode or do a wrong aspect ratio when scaled. It also hard to find dedicated informations how to solve this issues.

Here are some hints, how to scale right to fullscreen
  • Of couse, if you want to draw pixelgraphics, you always choose a low resolution to avoid to much work!
  • If you want to scale pixel related graphics you want to choose nearest filter to avoid smoothing!
  • If you work with pixelgraphics you don't want to use the build-in monitor scaling!
  • If you work with pixelgraphics you don't know, if the user configured his monitor for correct aspect ratio.

A. Most used Monitor resolutions:
1.     1920x1080   16,72 % - 1,77
2.     1366x768    15,71 % - 1,77
3.     1280x1024   10,90 % - 1,25
4.     1680x1050   8,90 %  - 1,60
5.     1024x768    8,59 %  - 1,33
6.     1280x800    8,08 %  - 1,60
7.     1440x900    6,75 %  - 1,60
8.     1600x900    4,60 %  - 1,77
9.     1920x1200   3,34 %  - 1,60
10.    1360x768    1,88 %  - 1,77

B. Used aspect ratios scaled down by integer factors 2 or 3
~680x384  (1920x1080, 1600x900, 1366x768, 1360x768) - 1,77 (16:9)
~640x400  (1920x1200, 1680x1050, 1440x900, 1280x800) - 1,60 (16:10)
~640x512  (1280x1024)  - 1,25 (5:4)
~512x384  (1024x768) - 1,33 (4:3)

Final minimum
512x384 (for pixelgraphics this is enough work)
  1. Find the lowest supported resolution!
  2. So, make the nativ gameresolution 512x384 (draw everything of the game into this area)
  3. Now you are able to scale the gamescreen by integer numbers 2 or 3 depending on the nativ monitor resolution! If you have a monitor at 1920x1200, you can scale by 3 because 512*3x384*3=1536x1152. If your monitor has a nativ resolution of 1920x1080 you can only scale by 2 (512*3x384*3=1024x768).
  4. Set the nativ monitor resolution, scale your gamescreen by the choosen factor and center the gamescreen.
It sounds a bit difficult, but here you can see my final result. You will notice, that the borders are different (small size: dark blue/big size: light blue). I overlayed the different aspect ratios resolutions named under B.
Compare:
nativ monitor 640x480 (unscaled gamescreen 512x384)


nativ monitor 1600x1000 (scaled gamescreen by 3*512 x 3*384) (click on the image!)
if you have questions feel free to ask me.

cheers
SiENcE


4 comments:

  1. Hello! =)
    Great project! I like old style rps and wish you luck with "Aeon of Sands".

    I have also worked on such game as artist. It was browser MMO game "war.ru". Unfortunately the project was canceled. (
    Here are some screenshots: http://exey.ru/blog/images/warru.png
    http://mamon2008.ucoz.ru/_bl/1/51574.jpg

    I would like to try your online demo. Unfortunately it's offline (
    Is there smooth camera rotation to 90 degree or instant?
    Why do you use so limited color pallet?

    ReplyDelete
    Replies
    1. Hey belibr,

      your game looks also very nice. A combination of old style rpg and mmo?

      It's instant, but we can fake a smooth camera rotation. Our artist choose this color pallet. The pallet differs from level to level. So this is the starting area.

      cheers

      Delete
    2. Thanks ) It was such a mutant game. ))

      Can I try to draw something for "Aeon of Sands"?

      Delete