DPI Scaling for PE, much more important than resolution

[MaximKat]

Sorry for double post, but here's a quick graphic I made explaining the effect, that is understandable when viewed on standard DPI monitors:

Unless I'm missing something, the 2nd image shouldn't look like that. An integer factor scaling doesn't cause blurriness, it'll look just the same as the last picture.

[mstark]

The great thing about image sampling is that you can downsample images with virtually no loss of quality. This means that, as long as they prepare the original set of assets to be high-DPI friendly, they can easily be downsampled to a standard resolution and still look as good, or, more likely, better. Yes, it would increase rendering time, and marginally increase post-production, but I doubt rendering times are their biggest worry, since it doesn't actually use up any manpower.

 

That way, they could ship the game with standard resolution imagery, not to take up too much disk space, and offer a retina (2x) download pack. I doubt it would affect production time much. Another scenario is that they render the game only for standard resolution monitors at first, but include a DPI toggle that's hidden, so that they could release high dpi imagery at a later point. Maybe as a patch. I actually have a hard time thinking they wouldn't, at some point, release high dpi versions of the renders, because the shift is happening, whether people want to acknowledge it or now .

 

DPI scaling demo available here now: http://martinstark.net/dpi/ (YOU WILL ONLY SEE THE EFFECT ON HIGH DPI SCREENS). Look at it without zooming the page. On a standard DPI monitor you won't actually see any difference between the images, you need to view it at a device with 2.0x DPI scaling (currently, that means a few Android flagship phones, though most of them are 1.5x, and iPhone 4, iPad 3 and Retina MBP). The effect will be most apparent on a retina iPad 3 & MBP because of screen real-estate. Landscape mode for side-by-side comparison recommended.

[mstark]

Sorry for double post, but here's a quick graphic I made explaining the effect, that is understandable when viewed on standard DPI monitors:

Unless I'm missing something, the 2nd image shouldn't look like that. An integer factor scaling doesn't cause blurriness, it'll look just the same as the last picture.

You are missing something If you got access to a high DPI device, do have a look at the demo posted above .

 

Editing the demo page with a third example that will further illustrate the issue!

[MaximKat]

Umm.. The dpi scaling images on your website look better because they have more detail, not because of some magic scaling.

[AwesomeOcelot]

I'm getting no difference with the scales images on a iPod Touch 4 with a retina display 960×640 px at 326 PPI.

[mstark]

Umm.. The dpi scaling images on your website look better because they have more detail, not because of some magic scaling.

My point exactly. What I'm saying is that we need "more detailed" (2x DPI versions) for high DPI monitors. Did you view the site at a high DPI device? If you do, I think you will understand the issue. On a standard monitor, all 3 examples will look the same. On a high DPI device, you will see that they are all rendered quite differently, with the 3rd image looking far better. You'll see that anything not rendered at high-dpi resolution will either appear blurry, because of upscaling, or tiny, when rendered at its actual resolution.

 

The answer is DPI scaling, a second set of assets, rendered to "have more detail", to put it in your words .

 

Again, this is only relevant if you understand the issue that high DPI screens bring to the market for all forms of bitmap graphics.

[mstark]

I'm getting no difference with the scales images on a iPod Touch 4 with a retina display 960×640 px at 326 PPI.

Hmm, I wish I had one of those lying around, I am seeing a clear difference on the various devices I have here, I might have messed something up in my code for iOS Safari :S

 

On a retina device you should see the following:

 

First image appears slightly blurry when compared to the third one, this is barely visible if viewed on a tiny phone screen, but very visible on iPad 3/Retina MBP).

 

Second image is the same image as the first image, but with DPI scaling enabled. This shows the effect you would see if you played, for example, BG2 on a retina screen. Everything would look sharp, but TINY.

 

Third image is the high-DPI image. It's the same size as the first image, but rendered at twice the resolution, making it appear much sharper.

Edited October 14, 2012 by mstark

[AwesomeOcelot]

OK, I've figured it out, MaximKat is right, it doesn't matter that you set css to 400px, safari doesn't comply with that, you're not comparing like with like. Of course a higher dpi asset is going to look nicer on a high dpi screen, you're not comparing upscaled on high dpi screen vs upscaled on normal screen.

Edited October 14, 2012 by AwesomeOcelot

[MaximKat]

Did you view the site at a high DPI device?

Yes, I did.

My point exactly. What I'm saying is that we need "more detailed" (2x DPI versions) for high DPI monitors.

Well, duh. However, you're making an assumption that the devs can get these "more detailed" graphics "for free". This is only true if the original assets are high enough resolution. I don't know much about creating game graphics resources, but from what I understand, a lot would actually be hand-drawn, so you can't just flip a switch and make it twice the resolution overnight.

[MaximKat]

Have you tried this outside of safari? or on non-apple products?

It works on a Galaxy Nexus. You can see the difference, for example, by looking at the statue teeth. It's nowhere near as dramatic as in the 4 monitor picture from the previous page, though.

[mstark]

The Galaxy Nexus is a 1.5x DPI device, I've enabled the demo for any device with 1.3x DPI scaling or higher, but for the full effect it really has to be viewed on a retina MBP/iPad 3.

 

Have you tried this outside of safari? or on non-apple products?

It works on a Galaxy Nexus. You can see the difference, for example, by looking at the statue teeth. It's nowhere near as dramatic as in the 4 monitor picture from the previous page, though.

I did state that the example was exaggerated, to the benefit of non-hi-dpi monitors, that can't actually see the effect in action. No, it's no where near as bad as in that picture.

 

I'm not assuming it'll be free. I know for a fact that the rendering time will take exactly 4 times as long (2x the scale = 4 times as many pixels to render), which is significant, but won't use up any extra manpower, just rendering hours. The hand drawn parts will be less of an issue, since they take pretty much just as much time to hand draw on a large picture, as on a smaller one. Hand drawing isn't limited in the same way.

 

Either way, it's up to PE to decide if they can do it or not, without it affecting the quality of game play (game play above all!), but I certainly think it's something they should consider.

Edited October 14, 2012 by mstark

[MaximKat]

The Galaxy Nexus is a 1.5x DPI device,

1.5x compared to what exactly?

 

The hand drawn parts will be less of an issue, since they take pretty much just as much time to hand draw on a large picture, as on a smaller

I don't know about that. Higher resolution=more small detail=more work.

[AwesomeOcelot]

If I take my ipod, put the image into safari, scale the image so it's the size it is on my 1080p monitor, they don't look different side by side. I mean, same viewing distance, same physical size, same brightness.

Edited October 14, 2012 by AwesomeOcelot

[AwesomeOcelot]

Umm.. The dpi scaling images on your website look better because they have more detail, not because of some magic scaling.

My point exactly. What I'm saying is that we need "more detailed" (2x DPI versions) for high DPI monitors. Did you view the site at a high DPI device? If you do, I think you will understand the issue. On a standard monitor, all 3 examples will look the same. On a high DPI device, you will see that they are all rendered quite differently, with the 3rd image looking far better. You'll see that anything not rendered at high-dpi resolution will either appear blurry, because of upscaling, or tiny, when rendered at its actual resolution.

 

The answer is DPI scaling, a second set of assets, rendered to "have more detail", to put it in your words .

 

Again, this is only relevant if you understand the issue that high DPI screens bring to the market for all forms of bitmap graphics.

 

You are wrong, in your example the two on the left will be the same, the only way they get worse on a high ppi screen is if there's an error with the scaler.

 

 

The 2nd from the left thing doesn't happen unless it's an unfair comparison, all things being equal a 120 ppi and a 220 ppi screen will display the same image almost the same. The two on the right are correct, not arguing with them.

Edited October 14, 2012 by AwesomeOcelot

[mstark]

The Galaxy Nexus is a 1.5x DPI device,

1.5x compared to what exactly?

The Galaxy Nexus will render everything on the web at 1.5x the size, meaning that an image that is 400x400px physical pixels will be upscaled to cover 600x600px on the device. This results in a less sharp image, as you experienced on the demo site. This scaling has been implemented because if they didn't, websites would appear unreadable. The Apple retina screens has a scaling factor of 2.0 instead of 1.5.

 

On the web, this can be overwritten by using DPI scaling, which is why one of the images appears sharper, while still remaining the same size as the first image that's rendered at default settings.

 

I'm suggesting using DPI scaling in PE because if they don't, everything would become tiny, as in the second image of each example, on retina screens. Or slightly blurry, as you notice when comparing the first to the third image. It's not the end of the world if they do not to this, but it will certainly make a difference.

 

More on why this is happening:

A pixel is not a pixel is not a pixel: http://www.quirksmod...xel_is_not.html

A pixel identity crisis: http://www.alistapar...dentity-crisis/

 

The web, and apps, are scrambling to find a way to deal with the higher DPI screens, and the two solutions are: use only vector graphics (not viable for a sprites based game), or render all your assets at twice the resolution.

 

I know I'm talking about web and apps here... but as I said in the first post, the issue stems from the usage of bitmap files that don't scale well on retina screens, making this issue very much a reality for PE, too, since it's using 2D rendered bitmap files.

Edited October 14, 2012 by mstark

[mstark]

Umm.. The dpi scaling images on your website look better because they have more detail, not because of some magic scaling.

My point exactly. What I'm saying is that we need "more detailed" (2x DPI versions) for high DPI monitors. Did you view the site at a high DPI device? If you do, I think you will understand the issue. On a standard monitor, all 3 examples will look the same. On a high DPI device, you will see that they are all rendered quite differently, with the 3rd image looking far better. You'll see that anything not rendered at high-dpi resolution will either appear blurry, because of upscaling, or tiny, when rendered at its actual resolution.

 

The answer is DPI scaling, a second set of assets, rendered to "have more detail", to put it in your words .

 

Again, this is only relevant if you understand the issue that high DPI screens bring to the market for all forms of bitmap graphics.

 

You are wrong, in your example the two on the left will be the same, the only way they get worse on a high ppi screen is if there's an error with the scaler.

No offence, but you're actually missing the point I'm trying to make entirely :/

 

Consider this:

 

1. Try playing BG2 on a 15" retina MacBook Pro at native resolution. This will make everything so tiny you can't play it. BG2 was made at a time when 15" screens were topping out at 1024*768px.

 

2. Changing the resolution to a more playable 1024px*768 px (on a 2880*1800px screen) will make it look unbelievably blurry, yes, it would look worse than on a normal 15" 1024*768 screen because of upscaling, but it would be playable.

 

3. Now, if the assets for BG2 had been rendered at two different resolutions, one which is twice as high, you could play BG2 at the Retina MBP at native resolution. The game would not appear unplayable and tiny, and still appear sharp, because you're using the higher resolution assets.

 

That's probably the clearest way I can explain it in. It's not the end of the world if Project Eternity doesn't keep this in mind, retina screen owners will simply have to cope with the game appearing slightly blurry, or that the graphics appear tiny. My point is that they have the chance to keep this in mind from the start, without adding too much development time to the project they could make it future-proof by providing 2 sets of assets, or at least making the game capable of handling DPI scaling so that it can be patched at a later point.

Edited October 14, 2012 by mstark

[AwesomeOcelot]

If I take my ipod, put the image into safari, scale the image so it's the size it is on my 1080p monitor, they don't look different side by side. I mean, same viewing distance, same physical size, same brightness.

 

Even better idea, if you have a mac book pro with retina display, put a 1920x1200 image on it and compare it to a 1920x1200 display with the same image, if you you only have a 1080p screen add black bars to the image and use that on the retina display. They will look the same.

 

A pixel is not a pixel is not a pixel: http://www.quirksmod...xel_is_not.html

 

That is an entirely different problem, and it's partly Apple's fault for ignoring CSS.

 

No offence, but you're actually missing the point I'm trying to make entirely :/

 

Probably, but your example was wrong, the 2nd image would not be more blurry than the first from the left.

Edited October 14, 2012 by AwesomeOcelot

[MaximKat]

I'm suggesting using DPI scaling in PE because if they don't, everything would become tiny, as in the second image of each example, on retina screens. Or slightly blurry, as you notice when comparing the first to the third image. It's not the end of the world if they do not to this, but it will certainly make a difference.

I agree with the argument that they should take measures so that the amount of content that fits on the screen (e.g. viewport size) doesn't depend on the resolution. That's just silly: if the game was designed with a certain "camera" in mind, it shouldn't change because of my display settings (case in point: I played BG2 at 1280*800, because 1920*1200 was making the text unreadably small)

 

What I don't necessarily agree with is that the graphics quality should be aimed at the hypothetical high-dpi screens that might or might not be "in every household" in a couple of years. Unless it's trivial and requires almost no extra effort, having just the current-gen assets is enough. No matter what you say, an upscaled image on a high-dpi screen doesn't look any worse than the original image on a low-dpi screen. It's true that It doesn't take advantage of the high-res capability, but it doesn't automatically become ugly, just because it could have been better, if more work had been put into it.

 

 

2. Changing the resolution to a more playable 1024px*768 px (on a 2880*1800px screen) will make it look unbelievably blurry, yes, it would look worse than on a normal 15" 1024*768 screen because of upscaling, but it would be playable.

It'd look worse, because 1024 to 2880 is not integer factor scaling. If you set it to 1440*900 and it still looks worse than a normal 15" 1440*900 screen, then it's a problem with the scaler and not the game, as AwesomeOcelot said.

Edited October 14, 2012 by MaximKat

[AwesomeOcelot]

2. Changing the resolution to a more playable 1024px*768 px (on a 2880*1800px screen) will make it look unbelievably blurry, yes, it would look worse than on a normal 15" 1024*768 screen because of upscaling, but it would be playable.

It'd look worse, because 1024 to 2880 is not integer factor scaling. If you set it to 1440*900 and it still looks worse than a normal 15" 1440*900 screen, then it's a problem with the scaler and not the game, as AwesomeOcelot said.

 

Which is the problem detailed here I believe:

 

A pixel is not a pixel is not a pixel: http://www.quirksmod...xel_is_not.html

[mstark]

I must say it's not really not theoretical if high DPI screens will or will not be in homes in the years to come, the market has already spoken, look at smartphones, and look at the resolution of tablets/laptops being released in the near future.

 

It's only a matter of time before desktop monitors must follow suit. I'd say 1-2 years before 2160p 24" monitors make it to the market, and by that time, high DPI laptops/tablets will be very common. The first 1080p 5" phone is just about to be released, too . (My future & work depends on me being informed about this, so I'm not just guessing!)

 

"Current gen assets" would equal making your asset scale well on to 120dpi monitors. That's easily 95% of today's desktop screens. That's what BG2 did, they made their assets scale well to 96dpi monitors, which was actually closer to 99.9% of desktop screens at the time. The issue is slightly bigger now, because the paradigm shift is about 200% (2.0x scaling): 220-240dpi. The difference is huge, and the opportunity to include retina graphics is too great to ignore, in my opinion .

 

If I take my ipod, put the image into safari, scale the image so it's the size it is on my 1080p monitor, they don't look different side by side. I mean, same viewing distance, same physical size, same brightness.

 

Even better idea, if you have a mac book pro with retina display, put a 1920x1200 image on it and compare it to a 1920x1200 display with the same image, if you you only have a 1080p screen add black bars to the image and use that on the retina display.

Now read this again, and then read what I said in the post above.

 

The issue is that the 1920*1200 will appear twice as small on the retina MBP as on the regular screen (if you think in in-game terms, it would make the game models appear tiny). Or blurry, if compared to what the retina screen is capable of, if you upscale it to match the regular 1080p monitor.

 

If that image was also rendered at 3840*2400 (2.0x) it would appear the same size, but twice as sharp, on the MBP screen. This is what I wish they will do .

 

 

On the point with integer factor scaling: I'm fully aware of this, I just don't want any scaling at all to be done in the game. Ever . I want it to use the capabilities of retina screens to their fullest, because: why not? It'd be gorgeous. The "a pixel is not a pixel is not a pixel" is not just about this, however.

 

Only the PE team can decide if this is prohibitively expensive, but as far as I'm aware, it really shouldn't be, as long as it's considered from the start.

Edited October 14, 2012 by mstark

[AwesomeOcelot]

Or blurry, if compared to what the retina screen is capable of, if you upscale it to match the regular 1080p monitor.

 

Not blurry compared to the 1080p monitor, virtually the same as the 1080p monitor, which isn't bad. And that what your example suggested, which is factually wrong.

Edited October 14, 2012 by AwesomeOcelot

[mstark]

Or blurry, if compared to what the retina screen is capable of, if you upscale it to match the regular 1080p monitor.

 

Not blurry compared to the 1080p monitor, virtually the same as the 1080p monitor, which isn't bad.

In my opinion, compared to what a 2160p monitor of the same size looks like, it is bad. Terribly bad. It's hard to realize just how bad until you've used a retina screen for some time, and then go back to non-retina. You will literally see the pixels. It's almost a joke that the manufacturers have managed to keep us on low dpi devices for such a long time, the print world is miles ahead in quality, and phone screens are just about catching up with print.

 

In a few years, the consumers will likely agree . 220dpi+ will become the norm. Not over night, but the shift is happening. Why ignore it just because it's not a necessity right now, when you have the potential to gain a lot by taking it into account?

 

I reiterate, it's not a necessity, but certainly something worth considering. It'd make the game that much more gorgeous on these screens. An edge over all real time rendered 3D games.

Edited October 14, 2012 by mstark

[MaximKat]

I must say it's not really not theoretical if high DPI screens will or will not be in homes in the years to come, the market has already spoken, look at smartphones, and look at the resolution of tablets/laptops being released in the near future.

 

It's only a matter of time before desktop monitors must follow suit. I'd say 1-2 years before 2160p 24" monitors make it to the market, and by that time, high DPI laptops/tablets will be very common. The first 1080p 5" phone is just about to be released, too . (My future & work depends on me being informed about this, so I'm not just guessing!)

You normally hold smartphones and tablets much closer to your face than a desktop monitor. If you're sitting 35" from the screen with a perfect eyesight, you won't be able to see the difference beyond 114ppi. To fully use the 220ppi screen, you'll need to sit at the distance of about 15", which is hardly a good idea.

 

Not to forget the obvious disadvantages of increasing the pixel count by a factor of 4 when it comes to gaming. I'd rather have 60fps at a reasonable resolution, than 15fps for something that I can't even see with my much less than perfect eyesight

[mstark]

I must say it's not really not theoretical if high DPI screens will or will not be in homes in the years to come, the market has already spoken, look at smartphones, and look at the resolution of tablets/laptops being released in the near future.

 

It's only a matter of time before desktop monitors must follow suit. I'd say 1-2 years before 2160p 24" monitors make it to the market, and by that time, high DPI laptops/tablets will be very common. The first 1080p 5" phone is just about to be released, too . (My future & work depends on me being informed about this, so I'm not just guessing!)

You normally hold smartphones and tablets much closer to your face than a desktop monitor. If you're sitting 35" from the screen with a perfect eyesight, you won't be able to see the difference beyond 114ppi. To fully use the 220ppi screen, you'll need to sit at the distance of about 15", which is hardly a good idea.

 

Not to forget the obvious disadvantages of increasing the pixel count by a factor of 4 when it comes to gaming. I'd rather have 60fps at a reasonable resolution, than 15fps for something that I can't even see with my much less than perfect eyesight

Do please please please read this: http://www.cultofmac...enough-feature/ also, think of printed photographs. They are anywhere between 300-16000dpi, and yes, you can see the difference both near and at a distance. We're being fooled with 120dpi monitors, simply because we never had anything better to look at.

 

Yes, 3D gaming will take a massive hit by the new high dpi monitors, but PE won't. PE has the opportunity to looks just as gorgeous, without a better graphics card, on these screens. Because it's 2D!

Edited October 14, 2012 by mstark

[Frenetic Pony]

Because the game is pre-rendered (or at least the backgrounds are) DPI and resolution are the same thing. Certainly, in other terms, you should then just be able to select whatever "zoom" level you are comfortable with once multiple resolutions are rendered and available.

 

Which is pretty much all there this is to this conversation, which makes me wonder how the heck this went on for three pages.

Edited October 14, 2012 by Frenetic Pony