13
\$\begingroup\$

I'm working on my first Android game and have been struggling a bit with scaling.

I've got 3 test devices 800x480, 1920x1080 and a 2560x1600 tablet. Some games look near perfect on all of them - many other games don't, including mine.

I'm really struggling with images looking blocky when scaling. I'm using the libdgx library, and have turned on linear filtering for everything. Almost always scaling down. Fonts are something I'm really struggling with.

I've been dissecting the apk's of various games for tips but can't see anything in particular that they're doing. In one game I examined (Candy Crush Saga) there's only 1 set of images, they only use 1 font. They also have a ttf in there, but I can't work out where that's used. The main font in a pre-created bitmap font.

Does anyone else have any tips or tricks. Ho do others manage it, especially the font scaling?

\$\endgroup\$
11
  • \$\begingroup\$ You really shouldn't ask questions that are specifically directed at developers from King. I also don't think mentioning their game in your question is actually relevant to the question. Use larger images, they can scale down better. Scaling up smaller images, looks awful. Also, the artist needs to work hard to create art that looks good when it's scaled down. Normally that means very smooth graphics. \$\endgroup\$
    – AturSams
    Commented Mar 13, 2014 at 8:40
  • \$\begingroup\$ This question appears to be off-topic because it is about how a certain company is doing something. While sometimes employees of companies do answer question, it is irrelevant to the question (if it's good) how a certain company accomplishes an effect. The question should concentrate on the desired effect with some screenshots possibly. \$\endgroup\$
    – AturSams
    Commented Mar 13, 2014 at 8:42
  • \$\begingroup\$ Thanks, it was meant as a scaling question focusing on a company that's doing it well rather than a question directed at a company. I'll reword. \$\endgroup\$
    – Will Calderwood
    Commented Mar 13, 2014 at 8:53
  • 1
    \$\begingroup\$ @ArthurWulfWhite I edited the question to be more game-agnostic. \$\endgroup\$
    – Philipp
    Commented Mar 13, 2014 at 9:01
  • 1
    \$\begingroup\$ This is a really interesting question. I would love to hear an artist's perspective o this cause I'm sure there is much to be said on how to create images that scale well (it's not trivial). \$\endgroup\$
    – AturSams
    Commented Mar 13, 2014 at 9:32

2 Answers 2

Reset to default
4
\$\begingroup\$

There is no magic filter that will make your game look good on high resolution devices, you simply need to increase the resolution of your assets.

Down-scaling high resolution sprites looks considerable better than up-scaling of low resolution sprites.

Edit:
Fonts and pixel art are a special case because they are so small and shape that important that each single pixel is important. As a basic rule of thumb, don't ever scale bitmap fonts down and only scale up to multiples to integers using nearest neighbor filtering (e.g. only 2x, 3x, 4x, not 2.25x).

You might want to create a few fixed font sizes and chose the most appropriate one for each resolution.

If you really need arbitrary font sizes you'll need to use either vector fonts (.ttf extension) or use distance field rendering (probably more suited for games since faster).

A few resources on distance field based rendering:

\$\endgroup\$
5
  • 1
    \$\begingroup\$ I am down-scaling. Things still don't look crisp though, especially fonts. I've tried creating bitmap fonts dynamically and runtime, but this is very slow, and the fonts created by the library I'm using aren't great quality. \$\endgroup\$
    – Will Calderwood
    Commented Mar 13, 2014 at 10:28
  • \$\begingroup\$ Ah, fonts, that's a very special case, since every single character is so small. \$\endgroup\$
    – API-Beast
    Commented Mar 13, 2014 at 11:21
  • \$\begingroup\$ Do u have any reresources on optimizing scaling of bitmaps? \$\endgroup\$
    – Green_qaue
    Commented Mar 13, 2014 at 12:29
  • \$\begingroup\$ I had a play with distance field fonts this morning... strangely they look great when scaled up, but not so good when scaled down. They also don't work well for the smaller font sizes scaled up. I was using Hiero to generate the fonts. Using the distance field setting to create a soft edged font (scale 4, spread 1), but not render as a distance field font, it would scale down and still look pretty good. So, 1 large distance field font that can be scaled up, and 1 small soft font that can be scaled down might be my answer. \$\endgroup\$
    – Will Calderwood
    Commented Mar 13, 2014 at 12:36
  • \$\begingroup\$ Remember to generate mip-map chains when downscaling this often improves the quality a lot. \$\endgroup\$
    – Roy T.
    Commented Mar 13, 2014 at 12:51
2
\$\begingroup\$

Down-scaling assets can still look bad. This is especially the case for weird ratios (e.g. 1600 width to 800 works well, but to 900 gives uneven sampling patterns).

People also pay very close attention to fonts. Even things like texture compression are usually avoided, because it can screw up anti-aliasing of edges. Also, a font might simply not be designed for small sizes (intuitively it's clear that you cannot scale Comic Sans to 6px height very well), so you will need an entirely different font for extreme cases.

If you want to scale well, what you will need to do is either

  1. provide assets optimized for prominent display sizes (and for outliers, use the closest one), or
  2. Use vector graphics, raster them at the client's resolution, cache the result. For example you can use libfreetype to raster ComicSans.ttf to a texture (which you can store to disk to not have this loading time again). Then you use that texture for rendering (texture atlas with single characters, or whole UI elements if you don't have much text). The big advantage is that you can even rotate the text properly, then rasterize it and you will get perfect anti-aliasing (instead of anti-aliasing, then rotating, which will break it).
\$\endgroup\$
1
  • 1
    \$\begingroup\$ "Down-scaling assets can still look bad." This is really important. A digital image is an approximation of some ideal analog image. The human brain is clever, and with the right choice of shapes it can extrapolate a great deal from very small amounts of information (think of retro game sprites). The lower the resolution, the more care you have to take in crafting a meaningful approximation. When you downscale, you're throwing away information in an uncontrolled manner. The bigger the resolution gap, the more you throw away. \$\endgroup\$
    – Doval
    Commented Mar 13, 2014 at 13:29

Not the answer you're looking for? Browse other questions tagged .