DPI Scaling for PE, much more important than resolution

[mstark]

This issue is related to the "resolution" of PE, and is a suggestion for not rendering it to any particular modern day standard, but in a more future-proof way. It's a long and fairly complicated post, but I'm hoping that the devs of PE are considering DPI scaling, or their game risks looking outdated before it's even been released.

 

As a web designer, the importance of DPI scaling is a very real issue to me today, and will become even more important in the next few years. As the web is rendered in 2D, these issues are immediately translatable to Project Eternity. For 3D games it's not much of a problem, because they scale very well with higher resolutions, but since 2D games are, as a rule, only rendered at one resolution, this will become a very real problem for the PE team soon. Let me give you some examples.

 

For the sake of simplicity, let's pretend that all areas of PE are being rendered at 400px by 400px resolution. On common desktop screens today (with a DPI of 100 - 120), this will appear as a 2-3" (5-7.5cm) square, and will be made readable with that in mind. In the past 10 years, the DPI of screens have barely changed, most screens during IEs days of glory being 96 DPI. For such a long period of time, this is a relatively small increase, which is why these games are at all playable on modern day monitors. There's never been any reason to consider DPI scaling, because High DPI screens have never existed before.

 

 

However, today we're already seeing an explosion in the popularity of High DPI screens, which started with phones. Around 90% of smartphones released today have a DPI somewhere between 260-420. They look incredibly sharp compared to the chunky pixels of most monitors today (did you look at the PE screenshot on a Galaxy S3? It's tiny, but Oh. My. God. so pretty). And this is the direction that computers are moving in, too.

 

We're already seeing 1080p 11" laptops at ~220dpi, or the 15" Retina MacBook with ~220dpi. High DPI desktop screens are just about to enter the market, too. In a matter of years, they will be the new standard. Think of it as television jumping from 640*480 to 1920*1080 within the span of a few years, but even more extreme. Think of how terrible old TV programs look when scaled up to 1080p.

 

 

So why's this a problem for PE? With screens already entering the market that are 2-4 times higher DPI than what's remained a standard for near 15 years, this will need to be considered during the development process. The old IE games are completely unplayable on such devices, unless they're played at non-native resolutions, but you wouldn't want to do that. Upscaling is terrible. The 400px x 400px area render I mentioned earlier that would usually appear as 2-3" appears 0.5"-1" on such a screen, making it unreadable.

 

The web has been wrestling with this problem for years, how to make websites readable on devices that would render text and images too small to be seen? What's the solution that the web industry has gone for? Enter DPI scaling. The iPhone 4 has a DPI scaling factor of 2.0, meaning it will render everything 2x as big. For vector graphics, such as text, it's easy enough, since it's infinitely scaleable without losing quality. But bitmap images, as the 2D renders of PE will be, are stretched. For the image quality, this has the same effect as playing BG in 800x600, but stretched to fit a 1080p screen. It. Looks. Terrible. So what we do, as a web designers, is to serve the same 400px image, but rendered in 2x the resolution (800px) scaled to half the size. This makes the image appear as large and readable on the phone, as it would on a 24" screen, with the benefit of it being twice as sharp without being unreadably small.

 

What does this mean for PE? It means that PE, as a 2D game, needs to allow the user to select DPI scaling. Normal scaling on devices today, for the web, is 1x, 1.3x, 1.5x and 2.0x. For vector graphics and 3D props this is easy enogh. But it also means that all bitmap images: area renders, character portraits, UI graphics, etc. needs to be rendered at not only "normal" resolution, but 1.3x, 1.5x, 2.0x in order to remain playable on High DPI screens that are already on the market.

 

Adding DPI scaling means that on super high resolution (high DPI) monitors you would still see the same amount of area on the screen, but it'll appear far, far sharper, rather than what's happening with current IE games, where areas appear smaller and smaller, until they're so tiny you can't play it. The issue stems from old IE games only having their area files rendered at one resolution. Ever tried playing BG2 at the native resolution of a Retina MacBook pro? For your own sanity: don't.

 

Ever looked at the PE screenshot on an 11" 1080p screen? It looks gorgeous, but it's also tiny. Really. Tiny. If the same area was also rendered at 2x the resolution, then scaled to a DPI factor of 2.0, the game would remain playable, and still look incredibly sharp and beautiful.

 

As a bonus, allowing for DPI scaling would indirectly allow users to zoom, without the backgrounds becoming 'pixelated'/upscaled.

 

The drawback to this is that it would make the game's image files take up an insane amount of space, so my suggestion would be to add DPI scaling packs as optional downloadable content.

 

I should probably mention that the team behind BG:EE discussed re-rendering all the area files to better fit modern day resolutions, but apparently much of the original work has been lost, making this an impossibility .

 

Hope this makes sense to you all, and that the PE dev team will consider implementing solutions that allows the game to remain playable on high DPI monitors!

 

Since the PE team has mentioned that they are intending to allow limited zooming, I'm guessing they're already thinking along the lines of rendering their areas at a higher resolution than "needed" for "normal" monitors today, this post is suggesting that you take it a step further, and allow the user to select DPI scaling to best fit their monitor. I suppose this could be achieved indirectly by letting the user simply zoom to a comfortable level, but that leaves the issue with the UI and character portraits appearing tiny.

 

I'd like to end this post with saying how incredibly excited I am about this game, and that I love everything you guys have revealed about it so far

 

Regards,

M

 

(for the sake of sanity, DPI = PPI in this post)

[Archmage Silver]

I think this should be located in Project Eternity: Widgets & Bytes (Engine & Technology).

[mstark]

You're probably right, I almost only read this board, so I never thought about that! Could someone please move it for me?

[Matthiasa]

To be fair scaling only typically looks bad if done on a non integer base. 1 pixel being expanded to 4, 9, 16... etc. It is when they are stretched to the be n.x of a pixel where issues occur. It's the fractional pixels that cause problems.

 

And yeah UI I'll agree the UI needs to be able to be adjusted independently.

Edited October 14, 2012 by Matthiasa

[Ieo]

You're probably right, I almost only read this board, so I never thought about that! Could someone please move it for me?

 

You can go to the root of the Obsidian forums and see which mods are active and send a PM for them to move it.

 

I agree that both DPI and resolution are critical for future-proofing...

[mstark]

To be fair scaling only typically looks bad if done on a non integer base. 1 pixel being expanded to 4, 9, 16... etc. It is when they are stretched to the be n.x of a pixel where issues occur. It's the fractional pixels that cause problems.

This is not true, a 400x400 image scaled up to 800x800, as it would be on an iPhone 4 (2.0x dpi scaling), or 600x600 as it would be on a Galaxy S2 (1.5x DPI scaling), still looks terribly blurry if you compare it side by side to an image that has been rendered at that resolution and not up-scaled. The bad thing is that I can't show you this in action, since we're all probably reading this on "normal" DPI monitors right now. I would prepare a quick example on a website for you if you have a high DPI device ready to view it on (most smartphones, or a retina iPad/MBP, Nexus 7 tablet). You will see the difference

 

Went looking for an article on DPI scaling that would explain better than I can why this is the case, but I can't find it... will post it if I can!

Edited October 14, 2012 by mstark

[AwesomeOcelot]

I find that platforms with high DPI handle lower DPI content pretty well. Sure, you can take advantage of it if you want, but the percentage of people with Retina Macbooks or those Samsung high DPI laptops is quite low, even amongst gamers. Only a minority of web designers are going to be concerned about the iPad 3 hits they're getting, because low dpi sites work just fine for most purposes on the iPad 3.

 

I do think it's a great idea for them to render all assets at as high a resolution and for as high a dpi as is reasonable, and then to scale the content down, because that could come in handy later on if they want to release an updated version. Crysis 2 shipped with shockingly bad textures for the PC, but they had better assets available. Of course this made the game larger, so it's not necessarily something everybody wants, it's a trade off.

 

Making sure they keep all their sound assets in high quality lossless format would also be a good idea.

Edited October 14, 2012 by AwesomeOcelot

[jb.]

Absolutely agree with op

[metiman]

It's a good point I think. With 2D you're basically dealing with bitmaps. Which, by definition, are of a fixed size. That means that the game would ideally be played on a display with the same resolution. In fact, I bought my current monitor with this sort of thing in mind. It's a 20" display with a 1600x1200 native resolution. Most of the games that I currently play are IE games with a resolution of 800x600. So the scaling works out. It's less than ideal for watching 1080p movies though.

[mstark]

I find that platforms with high DPI handle lower DPI content pretty well. Sure, you can take advantage of it if you want, but the percentage of people with Retina Macbooks or those Samsung high DPI laptops is quite low, even amongst gamers. Only a minority of web designers are going to be concerned about the iPad 3 hits they're getting, because low dpi sites work just fine for most purposes on the iPad 3.

This is exactly the point I'm arguing against. We shouldn't look at today's market if we want the game to be future proofed. Yes, "retina" or "high dpi" screens are rare, because they have just entered the market. 1080p HDTVs were rare when they were first introduced too, but today no one would ever consider watching a VHS over a BluRay.

 

The IE games have aged well because their areas were, for the time, rendered at very high resolutions, and DPI hasn't changed much since then. But it is changing now. Rapidly. At the end of this month, Windows 8 and an army of reasonably priced 1080p 11" screens are being unleashed on the market. By 2014, it'll have started to be widely adapted.

 

It's hard to realize how terrible old 2D games can look at these screens without having actually seen it. When you have, you will spend two hours, like me, writing a post like this, to try to convince people of the importance of this .

 

I do think it's a great idea for them to render all assets at as high a resolution and for as high a dpi as is reasonable, and then to scale the content down, because that could come in handy later on if they want to release an updated version. Crysis 2 shipped with shockingly bad textures for the PC, but they had better assets available. Of course this made the game larger, so it's not necessarily something everybody wants, it's a trade off.

Which is exactly why I'm suggesting it to be downloadable extras. Release it at a resolution that's good for the majority, but also make sure that the game has the capacity of handling DPI scaling. Like I said, for 3D games it's not such an issue, because you can simply upgrade the textures. For a 2D game, you need to consider it from the start.

 

Making sure they keep all their sound assets in high quality lossless format would also be a good idea.

As much as I would love this, lossy audio is much less of a problem . And on that note, the songs they've released so far were lossless wave files! Edited October 14, 2012 by mstark

[Waywocket]

I find that platforms with high DPI handle lower DPI content pretty well. Sure, you can take advantage of it if you want, but the percentage of people with Retina Macbooks or those Samsung high DPI laptops is quite low, even amongst gamers. Only a minority of web designers are going to be concerned about the iPad 3 hits they're getting, because low dpi sites work just fine for most purposes on the iPad 3.

This is exactly the point I'm arguing against. We shouldn't look at today's market if we want the game to be future proofed. Yes, "retina" or "high dpi" screens are rare, because they have just entered the market. 1080p HDTVs were rare when they were first introduced too, but today no one would ever consider watching a VHS over a BluRay.

 

The IE games have aged well because their areas were, for the time, rendered at very high resolutions, and DPI hasn't changed much since then. But it is changing now. Rapidly. At the end of this month, Windows 8 and an army of reasonably priced 1080p 11" screens are being unleashed on the market. By 2014, it'll have started to be widely adapted.

 

It's hard to realize how terrible old 2D games can look at these screens without having actually seen it. When you have, you will spend two hours, like me, writing a post like this, to try to convince people of the importance of this .

 

This is definitely a valid point - in fact, I was taking it as a given that the backgrounds would be rendered at a high enough resolution to look decent on screens at 300dpi or so.

 

However, there's no good reason things need to look quite so bad as they do. If you think about it, on a screen at (say) 17", the picture quality should never get worse as you increase the DPI. The image features aren't getting any less detailed; as you increase the DPI and scale the image to the same physical size, all that should happen is that you're not getting the value of the higher DPI screen.

 

Sadly, the image scalers in today's screens are terrible. In particular, they're optimised for video, with relatively few high-frequency features and the assumption that the viewer is a fair distance away, so the scaler performs smoothing. A lot of smoothing. Looking at photographs or watching videos using these scalers doesn't look too bad, but as soon as you have any text or sharp edges it turns into a mess, as we've all seen. If you do the upscaling in software it can look dramatically better though, and there's no technical reason monitors can't scale far better than they do. BTW some graphics cards give you the option to do scaling on the card and send the result at the monitor's native resolution, and that can look a bit better than letting the monitor do its own scaling (plus might reduce input lag).

 

I'm hopeful that this problem can be improved at both ends - on the one hand by producing new content with sufficient resolution to make optimal use of higher DPI screens than we're used to, and on the other hand improving the methods used to render lower resolution content so that it at least doesn't look any worse than on the screen it was designed for.

 

Alas, I was hopeful a decade ago that we'd all be using 300dpi screens all the time by now, so I fully expect my hopes to be dashed once again.

[Matthiasa]

To be fair scaling only typically looks bad if done on a non integer base. 1 pixel being expanded to 4, 9, 16... etc. It is when they are stretched to the be n.x of a pixel where issues occur. It's the fractional pixels that cause problems.

This is not true, a 400x400 image scaled up to 800x800, as it would be on an iPhone 4 (2.0x dpi scaling), or 600x600 as it would be on a Galaxy S2 (1.5x DPI scaling), still looks terribly blurry if you compare it side by side to an image that has been rendered at that resolution and not up-scaled. The bad thing is that I can't show you this in action, since we're all probably reading this on "normal" DPI monitors right now. I would prepare a quick example on a website for you if you have a high DPI device ready to view it on (most smartphones, or a retina iPad/MBP, Nexus 7 tablet). You will see the difference

 

Went looking for an article on DPI scaling that would explain better than I can why this is the case, but I can't find it... will post it if I can!

 

Well yeah a 1 to 1 mapping would look cleaner as it has 4 times the information.

It is if the detail being displayed isn't different the image is identical just larger in a way that does not distort the image.

Edited October 14, 2012 by Matthiasa

[mstark]

Alas, I was hopeful a decade ago that we'd all be using 300dpi screens all the time by now, so I fully expect my hopes to be dashed once again.

I'm just thankful that the wave of smartphones finally brought High DPI screens to the attention of a broader market, that way monitor manufacturers can't continue to ignore this issue as they have been doing for ages (to great profitability for them). Now they have to up their game in more ways than meaningless "1:2,000,000 dynamic contrast ratio (an outright lie)" or "1ms response time (input lag nullifies this achievement)".

 

Imagine when screens reach true print quality... 16000dpi screens anyone? It'll take some time before graphics cards & cables can handle that, though.

 

If the PE team takes dpi scaling into consideration, their game will look amazing on this new generation of screens that are now entering the market, leaving current-gen 3D games far behind, simply because there aren't many affordable graphics cards on the market that can render good looking 3D in real time at those resolutions. The very reason why the original IE games looked so much better than the 3D games of its time. The PE team has the chance to achieve the same thing, for a new generation of hardware, because we're experiencing a paradigm shift now, too, that they can take into consideration.

Edited October 14, 2012 by mstark

[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:

 

 

 

 

To achieve this, all bitmap graphics would have to be produced at both their "regular", and 2x resolution.

Edited October 14, 2012 by mstark

[AwesomeOcelot]

That shouldn't happen, and if it does, it's not the game developers fault, it's whoever made the crappy hardware. I've viewed low dpi content on an iPad 3 and it doesn't look more blurry than a normal screen.

[mstark]

Do you have an iPad 3 right there with you? I do, along with a couple of different high DPI devices, and I will gladly prepare a demo for you that you can view on it to see that it will, indeed, look terrible. Or tiny. Terrible or tiny, unless a 2x resolution version is prepared of the same area/image. I, too, didn't care about this at all until I saw it in action... it truly makes a difference.

 

If you look at screen 2 & 3 in my example, this demos the two options than an iPad 3 uses for image scaling. It will either upscale the image to not become so tiny that you can't make out details in it, at the same time making it blurry... or it will show more of the image on the screen, making details tiny. The 4th example demos what happens if the iPad 3 has access to a 2x version of said image, it will load that image instead, resulting in an unbelievably sharp image, while retaining the scale the image creator intended for it to be seen at.

 

(This article, though quite technical, and completely aimed at the web, will give you a primer on why http://coding.smashi...rds-retina-web/)

Edited October 14, 2012 by mstark

[AwesomeOcelot]

Prepare a demo then. I do not have a high dpi display, but perhaps we can get to the bottom of this. That article does not explain why this would happen, it doesn't actually say it will happen as far as I can tell.

 

I found an article on a incredibly stupid Safari bug that effects downsampling when opening images in it (not webpages): Safari Downsamples Your Images, No HD. This of course would not effect most content on the iPad 3, or games on other platforms using high dpi. Also, it's very fixable in software, as it's a software mistake, not an issue with the display.

Edited October 14, 2012 by AwesomeOcelot

[mrmud]

You have to keep in mind though that PE will be a 3-3.5 million dollar game. This is not alot. Especially considering that they are already forced to render at a significantly higher resolution than in the IE games, putting a greater strain on art resources.

[jethro]

I'm just thankful that the wave of smartphones finally brought High DPI screens to the attention of a broader market, that way monitor manufacturers can't continue to ignore this issue as they have been doing for ages (to great profitability for them). Now they have to up their game in more ways than meaningless "1:2,000,000 dynamic contrast ratio (an outright lie)" or "1ms response time (input lag nullifies this achievement)".

 

Ah right, monitor manufacturers are happy that consumers don't need to change their monitor and buy a new one, they prefer to ignore the replacement bussiness that might fill their pockets.

 

For the average consumer not all is good though. If they fall for the "hype" they need a 4 times stronger graphics card. And the monitor and the card will drain more power naturally.

[mstark]

Prepare a demo then. I do not have a high dpi display, but perhaps we can get to the bottom of this. That article does not explain why this would happen, it doesn't actually say it will happen as far as I can tell.

 

I found an article on a incredibly stupid Safari bug that effects downsampling when opening images in it (not webpages): Safari Downsamples Your Images, No HD. This of course would not effect most content on the iPad 3, or games on other platforms using high dpi. Also, it's very fixable in software, as it's a software mistake, not an issue with the display.

Downsampling is fine, if the imagery for Project Eternity is prepared at retina level and then downsampled for standard dpi devices, this would be the same thing as I tried explaining in my first post. What I'm trying to get at is that we'll need [at least] 2 sets of graphical assets, one generated for high dpi monitors, and one generated for standard dpi monitors.

 

A single set of assets is OK it you are okay with them being either upscaled, making them appear blurred, or not not scaled at all, which would make them appear tiny on a retina screen. But why should the PE team accept that, when all it takes is to generate a second set of assets, and include a DPI toggle option?

 

What I desperately want to avoid is upsampling, or game areas & characters appearing so tiny (as is happening with IE games now, unless you play them at lower resolutions on your shiny high resolution monitor, which looks terrible). This is why there's a need for more than one set of graphical assets. If they render everything at retina resolution, and then downsample all of it for regular monitors, it'd have the same effect. As long as there are two sets of assets, and a way of toggling between them.

 

I'm preparing a website that'll demo the effect of using different assets for a retina device.

 

It might help you visualize the the issue if you imagine playing Baldur's Gate on an iPad 3. At native resolution, because BG only has a single set of graphical assets, the characters and UI would be so small that you could barely make them out. You could, of course, play it at 1024*768, but that would make it look very blurry compared to anything else you view on the device. If you had access to a second set of assets generated at twice the resolution of the original assets, you could still play the game at the iPad 3's native resolution, without it looking blurry, or tiny.

 

You have to keep in mind though that PE will be a 3-3.5 million dollar game. This is not alot. Especially considering that they are already forced to render at a significantly higher resolution than in the IE games, putting a greater strain on art resources.

A great thing about what I'm suggesting is that it wouldn't take up much extra time at all. It'd mean some additional rendering time, but the great thing about rendering is that it can be done over night, and without anyone attending to it. They's simply need to tell their machine to render it at a sufficiently high resolution, then leave it for the time it takes it to do so.

[mstark]

I'm just thankful that the wave of smartphones finally brought High DPI screens to the attention of a broader market, that way monitor manufacturers can't continue to ignore this issue as they have been doing for ages (to great profitability for them). Now they have to up their game in more ways than meaningless "1:2,000,000 dynamic contrast ratio (an outright lie)" or "1ms response time (input lag nullifies this achievement)".

 

Ah right, monitor manufacturers are happy that consumers don't need to change their monitor and buy a new one, they prefer to ignore the replacement bussiness that might fill their pockets.

 

For the average consumer not all is good though. If they fall for the "hype" they need a 4 times stronger graphics card. And the monitor and the card will drain more power naturally.

It's always cheaper for manufacturers to cling to what they are doing for as long as is possible. They've already got the factories that can produce standard resolution monitors, and can churn these out virtually at parts cost. To produce high DPI monitors they'd need to build new factories, that can do so... a major investment, that many are reluctant to take. Samsung was one of the first companies to invest in factories for producing high DPI screens, thanks to this, they are now a market leader, together with LG/AU (Apple's screen manufacturer).

 

For the average consumer it is always good when the tech world moves forward. Yes, it'd introduce new, more expensive hardware on the marked, but this would greatly drive down the prices of today's 1080p monitors, in addition to bringing higher-cost, high DPI monitors to the market. Graphics cards designed to drive today's 1080p monitors would become cheaper, and the tech world would move forward.

[AwesomeOcelot]

My blu-ray player, tv, and pc monitor all upscale DVD content to 1080p and it looks no worse than playing the DVD on a SD display. The same with low res photos that they upscale, as each has SD card readers attached.

 

I don't think it's simple as generating a second set of assets. It's like making higher res textures, you have to put more work into them because the low resolution textures would allow you to "hide" detail, so you could get away with texture artists spending less time and effort.

[mrmud]

A great thing about what I'm suggesting is that it wouldn't take up much extra time at all. It'd mean some additional rendering time, but the great thing about rendering is that it can be done over night, and without anyone attending to it. They's simply need to tell their machine to render it at a sufficiently high resolution, then leave it for the time it takes it to do so.

They still have to put in sufficient detail in the high resolution textures to prevent them from looking flat. That means additional man hours. Not to mention the fact that they are painting on top of the 3d mesh.

[pid]

Good idea and post, I agree with OP.

 

Older games had an "obstructive" UI, meaning that they took a fixed amount of space away from the viewport.

Modern games normaly "detach" single UI elements from each other (hotbars, windows, etc).

This allows those elements to be overlayed and scaled independently.

So, beyond the availability of high-res UI elements the UI should also be scalable independently from the background.

 

Now Unity is VERY bad on the UI side. There's very limited support for it, so I think this will require a lot of work.

And rendering text with a scalable font size (beyond the general UI scaling) is even more tricky.

 

Much tricky work, but it would be perfect if those elements were combined:

- ultra high resolution assets (2D UI and 3D world);

- independent scalability of world, UI and fonts.

[Ieo]

I see good arguments on both sides. There's no way to truly take into account potential technology ten years from now and of course we have to consider Obsidian's resource limitation; perhaps there's a compromise point. Render for our current tech, but go just a bit further... up to what point is up to Obsidian's judgment by resources?