Thoughts on "Best" Screen Size

[EwanG]

I'm targeting 1024x768 currently, but there was a recent article on Reddit and Hacker News implying that the "default" screen size now for PCs and Macs is bigger. In my case I'm thinking this will be easier to "crop down" if I build a mobile version.

What do you think?

[nyaatrap]

I chose 1024x640 because 1024px is optimized to image cash size. 1280 is bad at performance. And why height is 640? because 768 doesn't allow laptops to play in window mode (it also goes to height 720)

[KomiTsuku]

We've had this argument a thousand times over! XD I still stick by my larger 1280x960 sizes for higher definition. We are aren't going to live with midget sizes forever and my large screens hate the smaller sizes. If people want smaller sizes, ren'py scales down. Scaling up just looks awful.

http://lemmasoft.renai.us/forums/viewto ... =4&t=13331
http://lemmasoft.renai.us/forums/viewto ... =4&t=13603

[LateWhiteRabbit]

I'm targeting 1024x768 currently, but there was a recent article on Reddit and Hacker News implying that the "default" screen size now for PCs and Macs is bigger. In my case I'm thinking this will be easier to "crop down" if I build a mobile version.

What do you think?

Of course the default screen size is higher now for PCs and Macs - widescreen monitors are the norm on all new systems from the last few years. Widescreen resolutions generally START at 1280x800, and they just go up from there.

NOW, 1024 x 768 IS the most common screen resolution in the world at the moment - but that includes non-gamers and third world countries. The important thing to remember is that scaling graphics DOWN makes them look better the majority of the time, while scaling graphics UP makes them look worse. Also you need to remember that LCD monitors do NOT do well displaying anything other than their native resolution.

Users of higher resolutions HATE rescaling things, because LCD monitors cause the result to look blurry. And playing games in a window often isn't an ideal solution - pixel per inch density means a 1024x768 windowed game looks very different on a 20 inch monitor running a high resolution than it would look on a 20 inch monitor with a resolution of 1024x768. And keep in mind, LCD monitor users CAN'T just change their monitor resolution from its native setting without blurry pixels happening.

I've used this image before - this is what a windowed game running a small resolution looks like on my HD monitor:

Gah! My eyes! In a Visual Novel, the very definition of which means I should be doing a lot of reading and enjoying visuals, this is a definition for eye strain and difficultly.

It might be worth it to have two versions - an HD and a normal version. With a little work you can also make your game screen size independent by not hard coding any of your screen coordinates. For instance, instead of placing a graphic in the center of the screen using specific screen coordinates, you can instead place it by using variables like screen.y and screen.x.

I chose 1024x640 because 1024px is optimized to image cash size. 1280 is bad at performance. And why height is 640? because 768 doesn't allow notebooks to play in window mode (it also goes to height 720)

Is image cache optimization really that important outside of website loading? Besides, you lose other optimization with your processor by 640 not being a power of 2. And 1280 being bad at performance is likely going to depend on the system. For instance, maybe your notebook does poorly at 1280, but it would probably be smooth as butter for my desktop workstation.

But we can see a sort of obvious problem here - my screen is really big and I can't make it smaller. Yours is small and you can't make it big. It is why I think VN makers should design their games for multiple screen resolutions.

I'm making my own games as screen resolution independent as possible, like I described above. I have three different resolutions of graphics as well, with different cut off points. If the resolution is in the low end range, the smaller graphic set is used. If in the middle resolutions, the middle sized graphic set is used. If the resolution is on the high end, then the large sized graphic set is used. It really isn't a lot of extra work for me, since graphics are made very large to begin with, then scaled down. So I am still just doing the art and graphics one time, but I am saving out 3 different versions at different sizes.

The game size will be larger, but I don't think many people will care if it means the game looks and plays well regardless of their screen size and resolution, be that big or small.

EDIT: KomiTsuku is right. We've had the discussion before, but I truly think it is fundamentally wrong to ask the question "What is the BEST screen size?" because there ISN'T one. There is not ANY resolution that will work for everyone. It is why professional games always have a setting in their options screen to set the game to your screen resolution. And as to midget screen sizes - I want to force every VN maker who puts out a 640x480 game to play it on an HD monitor and time how long it takes until their eyes start bleeding.

[nyaatrap]

Is image cache optimization really that important outside of website loading? Besides, you lose other optimization with your processor by 640 not being a power of 2. And 1280 being bad at performance is likely going to depend on the system. For instance, maybe your notebook does poorly at 1280, but it would probably be smooth as butter for my desktop workstation.

It's practically important on my game which using heavily animations. when I developed at 1280, it's not just getting speed slow, also memory usage goes up high and it had possible memory crash problem.

[LateWhiteRabbit]

Is image cache optimization really that important outside of website loading? Besides, you lose other optimization with your processor by 640 not being a power of 2. And 1280 being bad at performance is likely going to depend on the system. For instance, maybe your notebook does poorly at 1280, but it would probably be smooth as butter for my desktop workstation.

It's practically important on my game which using heavily animations. when I developed at 1280, it's not just getting speed slow, also memory usage goes up high and it had possible memory crash problem.

Just out of curiosity, what's the memory on your system, and how many frames do your animations have?

[nyaatrap]

4~20 flames on one battle effect. Memory of my PC doesn't matter, because Ren'py couldn't use over 1.5 GB even it's running on 64bit PC. I met several crash when ren'py's memory usage reached at 1.5 GB, regardless of setting of the cash size.

[EwanG]

It might be worth it to have two versions - an HD and a normal version. With a little work you can also make your game screen size independent by not hard coding any of your screen coordinates. For instance, instead of placing a graphic in the center of the screen using specific screen coordinates, you can instead place it by using variables like screen.y and screen.x

I presume you are asking the user to choose which version they want? Or is there an option to find screen resolution you are using that you trust? I presume I would just set my BGs with a different variable name with a common start (or end) that I could then use globally. If you have some example code on how you set the menus and such, that would be gravy.

The game size will be larger, but I don't think many people will care if it means the game looks and plays well regardless of their screen size and resolution, be that big or small.

I used to think the same, but if you are eventually going to do a mobile version that become problematic (though I would point out that at least in Android you usually end up having to do something like you describe anyway) given the file size limitations. I also know that if you are targeting an international audience that there are some areas where the difference between 20 megs and 50 megs can have a significant impact on distribution. Granted at some point you have to draw the line (pardon the pun) between optimizing size and the quality of your game.

Thanks for the suggestions!

[LateWhiteRabbit]

I presume you are asking the user to choose which version they want? Or is there an option to find screen resolution you are using that you trust?

Ha. No, I don't have any option to automatically find a screen resolution that I trust. Instead I am going to ask the player for the resolution they want, possibly by presenting options to choose from. For instance, you offer 800x600, 1024x768, etc. etc. I'm still playing around with the idea and haven't done much coding in Ren'Py. My previous experience comes from languages like C# using Windows libraries.

If you have some example code on how you set the menus and such, that would be gravy.

No example code I'm afraid, but I can be more specific with the concept by writing out some of the code logic.

Get Screen.width
Get Screen.height
Determine whether or not the ratio is widescreen (This affects where you will want to place your screen elements and graphics.)
Set flag to 4:3 or widescreen ratio
Set flag for low, medium, or high resolution graphic set depending on the range the screen.width and screen.height fell into.

You will have earlier determined the best layout of the screen by proportions according to widescreen or 4:3 ratios. To do this, you will have divided the screen up into a grid based on percentages. You divide up both the width and height by 10. Each block now represents 1% of your screen area.



You can now block in the placement of your game elements and the general area you want them on screen. Now you can get numbers for the anchor points of the graphics. For instance, using my image above:
Anchor point X1 will be (Screen.width x .05) and (Screen.height x .2)
Anchor point X2 will be (Screen.width x .4) and (Screen.height x .2)
Anchor point X3 will be (Screen.width x .75) and (Screen.height x .2)
Anchor point X4 will be (Screen.width x .2) and (Screen.height x .65)

You will get some discrepancy based on the exact dimensions of your low, medium, or high graphics, but it gives you a good starting point. You can have different anchor point numbers for placing graphics on the screen area for a 4:3 ratio - for instance your text box and sprite locations may overlap more or be closer together.

Is the general idea making any sense? I hope I'm explaining it okay.

I used to think the same, but if you are eventually going to do a mobile version that become problematic (though I would point out that at least in Android you usually end up having to do something like you describe anyway) given the file size limitations. I also know that if you are targeting an international audience that there are some areas where the difference between 20 megs and 50 megs can have a significant impact on distribution. Granted at some point you have to draw the line (pardon the pun) between optimizing size and the quality of your game.

I don't mess with mobile versions. The price point is too low on the devices to make it worth it, and the piracy rate is too high. I sympathize with those who have bandwidth issues though, which is why I plan to offer boxed copies for an extra charge if someone feels the size is too large to download or they just want a physical copy. But I don't feel like I should hold back on quality or content over a few megs - even Plants vs. Zombies is 50 megs. Bejeweled 3 is somewhere north of 80 megs. Sim City 2000 from over a decade ago is 235 megs.

[AxemRed]

I'm targeting 1024x768 currently, but there was a recent article on Reddit and Hacker News implying that the "default" screen size now for PCs and Macs is bigger. In my case I'm thinking this will be easier to "crop down" if I build a mobile version.

Aspect ratio is more problematic in this case. Android phones are 3:2/5:3/16:9, only super low-end devices are 4:3 (320x240).