AuthorTopic: How does scaling work in a game with Pixel sprites?  (Read 12011 times)

Offline Kepler4

  • 0001
  • *
  • Posts: 6
  • Karma: +0/-0
    • View Profile

How does scaling work in a game with Pixel sprites?

on: August 30, 2015, 10:58:46 pm
I'm new to pixel art and game design. I'm confused about how pixel art "scales" in a game played at 1080p to the same game played at 4k (or vice versa). Since pixel art is not like a 3D game texture which may have various resolution settings, and pixel art itself is bound to its own resolution, how does this work? Is it set to one resolution and the total picture just gets bigger or smaller depending on the screen resolution?

Am I thinking about this completely in the wrong way?  ???

Offline Ai

  • 0100
  • ***
  • Posts: 1057
  • Karma: +2/-0
  • finti
    • http://pixeljoint.com/pixels/profile.asp?id=1996
    • finticemo
    • View Profile

Re: How does scaling work in a game with Pixel sprites?

Reply #1 on: August 31, 2015, 12:09:27 pm
It's not particularly complex. If the resolution you're targeting is smaller than the resolution you are running at, a game can do one or both of:
a) Upscale the graphics by an integer factor (with no interpolation)
b) Expand the playing field to expose a larger area

Just doing a) is better from a game design perspective, IMO (but not always possible), since the amount you see onscreen does not change. The PC port of Pixel Dungeon is a good example of a game that does a) (on my system, the scaling factor appears to be 3)

Taking your specific example, 1080p is too high a resolution for a pixel art based game, so it's a reasonable presumption that the 1080p display was already upscaling the art by a factor of three (meaning that the resolution targeted was actually 640x320, a reasonable albeit somewhat high resolution for pixel art). Switching to a 4k resolution, a game might increase that scaling factor accordingly (to 6), or if that is considered too coarse, expand the playing field instead. It might also choose to do both (for example, use a scaling factor of 4+ a playing field that has been expanded to 150% of its original size (640 * 4 = 2560; 3840 / 2560 = 1.5).

Does that answer your question?
If you insist on being pessimistic about your own abilities, consider also being pessimistic about the accuracy of that pessimistic judgement.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: How does scaling work in a game with Pixel sprites?

Reply #2 on: August 31, 2015, 03:31:21 pm
I'm new to pixel art and game design. I'm confused about how pixel art "scales" in a game played at 1080p to the same game played at 4k (or vice versa). Since pixel art is not like a 3D game texture which may have various resolution settings, and pixel art itself is bound to its own resolution, how does this work? Is it set to one resolution and the total picture just gets bigger or smaller depending on the screen resolution?

Am I thinking about this completely in the wrong way?  ???

Basically what will happen is the game will be scaled by x amount based on the original design resolution. The actual mechanic that accomplishes this task will vary based on the design platform. Achieving pixel perfect resolution while maintaining the EXACT same scene within the frame is impossible unless you are locked into a single resolution, and your design resolution is an exact integer of your target resolution (i.e. target of 1920 x 1080, therefore a design resolution of 320 x  180). There has to be some kind of buffer around the border of your scene to accommodate either the increase in width, height, or both depending on the factor on which you are limiting your game.

Example:

Original design resolution: 256 x 144
Playing resolution: 1920 x 1080
Pixel Scale Factor: 1080/144 = 7.5 >> Round to 7 or 8
(The numbers used in the factor equation will be based on whether or not you want the height or width to remain constant, just in case your game needs to cover multiple screen layouts i.e. 16:9, 16:10, 4:3 etc.)

Therefore, at 1920 x 1080, the pixels will be distorted UNLESS you adjust what shows up in the window in order to hit a perfect round number, which in this case will be 7 or 8. So if you round up to 8 the amount of space you will LOSE is going to be 144 - 1080/8 = 144 - 135 = 9. So 9 pixels worth of information from the original frame will be lost. 4.5 pixels from the top, and 4.5 pixels from the bottom. (half pixel losses are possible in this case because when upscaled the actual pixels lost is 9 x 8 = 72, so 36 from the top and 36 from the bottom)

Therefore, that buffer must be built into the game. 4.5 pixels of information both top and bottom need to be practically useless. Black bars are a cop out in my opinion though. Just don't put any vital information in those 4.5 pixels top and bottom.

Another Example:

Original Design Resolution: 256 x 144
Display Resolution: 1366 x 768
Pixel Scale Factor = 768/144 =  5.33 >> 5

Rounding up in this case would be 144 - 768/5 = 144 - 153.6 = - 9.6 pixels; 4.8 top and 4.8 bottom (upscaled 24 top and 24 bottom). So you need to add 4.6 pixels worth of information beyond the original design resolution.

The point is that if you want pixel perfect graphics in a pixelated game, and you aren't going to force a specific resolution, this scaling factor must be built in to adjust the actual pixel size based on the screens current displayed resolution. This is a major factor in the design of a mobile game using pixel art.

IMPORTANT NOTE: Going SMALLER than your original design resolution is impossible for pixel art. It can't be done without distortion or loss of detail. Someone please correct me if I am wrong.
« Last Edit: August 31, 2015, 05:46:33 pm by RedSuinit »

Offline Streaksy

  • 0001
  • *
  • Posts: 15
  • Karma: +0/-0
    • View Profile

Re: How does scaling work in a game with Pixel sprites?

Reply #3 on: September 02, 2015, 02:47:01 am
Nothing's bound by resolution just because it's 2D.  Anything can be drawn bigger.

There's a bit distortion when, like, a 16x16 sprite is drawn to something like 19x19... and like.. some of the pixels will be doubled and some not.  But scaling up to 1080 resolution isn't much of a problem there because those fine details are tiny.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: How does scaling work in a game with Pixel sprites?

Reply #4 on: September 02, 2015, 03:22:58 am
Nothing's bound by resolution just because it's 2D.  Anything can be drawn bigger.

There's a bit distortion when, like, a 16x16 sprite is drawn to something like 19x19... and like.. some of the pixels will be doubled and some not.  But scaling up to 1080 resolution isn't much of a problem there because those fine details are tiny.

Having that distortion would completely defeat the purpose of doing pixel art for a game. In those instances just use vector graphics. For pixel art games resolution is EVERYTHING.

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: How does scaling work in a game with Pixel sprites?

Reply #5 on: September 02, 2015, 10:34:52 am
Not true RedSuinit. On 1080p resolution, the distortion is slightly iffy still, but way less noticeable than it used to be. If it's made for TV's I would go as far as to call it borderline acceptable. With 4k, that distortion is invisible and doesn't matter at all. The example given where you scale up by a factor 8, you can get away with it easily. Some pixels being 7/8 as wide as other pixels, you're probably not going to notice that at all.

So, instead of saying that games resolution is EVERYTHING, I'd say it's sometimes something to keep in mind. The best pixel art games have a scaling solution that works intelligently, going from cropping the playfield, to expanding it on certain resolutions and once they hit a certain PPI, just scaling it distorted.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: How does scaling work in a game with Pixel sprites?

Reply #6 on: September 02, 2015, 11:45:54 am
Not true RedSuinit. On 1080p resolution, the distortion is slightly iffy still, but way less noticeable than it used to be. If it's made for TV's I would go as far as to call it borderline acceptable. With 4k, that distortion is invisible and doesn't matter at all. The example given where you scale up by a factor 8, you can get away with it easily. Some pixels being 7/8 as wide as other pixels, you're probably not going to notice that at all.

So, instead of saying that games resolution is EVERYTHING, I'd say it's sometimes something to keep in mind. The best pixel art games have a scaling solution that works intelligently, going from cropping the playfield, to expanding it on certain resolutions and once they hit a certain PPI, just scaling it distorted.

Depends on the size of the screen. At 1080P even upscaled with a factor of 8, on my 70" TV, I would see the distortion. For 4k, then you're right, it would be practically invisible. But that also depends on the design resolution. To just say carte blanch that once you get to XPPI the distortion doesn't matter is still incorrect. But it's semantics at this point. In most situation you're right, most people wouldn't notice.

Offline yrizoud

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
    • View Profile

Re: How does scaling work in a game with Pixel sprites?

Reply #7 on: September 02, 2015, 01:59:28 pm
An important factor is whether a single graphic (sprite) is smoothly moving :
Rendered without interpolation, if the magnification factor is not constant, it will be noticeable that the sprite is "crossing uneven terrain". As the viewer's eye follow the movement of the entire shape, he will notice that straight lines, single pixels and dither patterns shrink and grow rapidly as they oscillate between different sizes.

For non-moving shapes, there is the specific issue of the perceived lightness : Ex draw a white rectangle on a black background, with 1-pixel-wide lines. If this is rendered at a factor between 3 and 4, the lines rendered as 3 pixels wide will appear less luminous than the lines rendered as 4 pixels.

Offline RedSuinit

  • 0010
  • *
  • Posts: 115
  • Karma: +0/-0
    • View Profile

Re: How does scaling work in a game with Pixel sprites?

Reply #8 on: September 02, 2015, 02:13:35 pm
An important factor is whether a single graphic (sprite) is smoothly moving :
Rendered without interpolation, if the magnification factor is not constant, it will be noticeable that the sprite is "crossing uneven terrain". As the viewer's eye follow the movement of the entire shape, he will notice that straight lines, single pixels and dither patterns shrink and grow rapidly as they oscillate between different sizes.

For non-moving shapes, there is the specific issue of the perceived lightness : Ex draw a white rectangle on a black background, with 1-pixel-wide lines. If this is rendered at a factor between 3 and 4, the lines rendered as 3 pixels wide will appear less luminous than the lines rendered as 4 pixels.

Good point. I still believe that if you have to accommodate multiple screen resolutions, the best solution is to just build in the necessary buffer, even if you're doing a large up/downscale.

Offline Gil

  • 0100
  • ***
  • Posts: 1543
  • Karma: +1/-0
  • Too square to be hip
    • http://pixeljoint.com/p/475.htm
    • View Profile
    • My Portfolio

Re: How does scaling work in a game with Pixel sprites?

Reply #9 on: September 02, 2015, 07:04:12 pm
I'm not convinced you can notice it at 7 or 8 times scale. Maybe we should do the test? Here's a classic Pawige piece in 750%. Does anyone notice that not all pixels are equally big? I can't spot it.