Standard resolution for easy scaling...
Monkey Targets Forums/iOS/Standard resolution for easy scaling...
| ||
| What resolutions are people using to easily have it scale full screen across all devices? (using autofit or virtual resolution) Are people aiming for iPad res and scalng down, aiming for iPhone4 and scaling up or something else? |
| ||
| I'm targeting 640x480, then scaling to whatever's needed. As long as you've got nice high-res (and low-res) assets, it shouldn't result in anything ugly looking. Be sure to load the right assets for the job, and get your framework to rescale all co-ords to fit both the resolution, and the scale of the assets it loaded. |
| ||
| Most of my games are still 320x480 and scaled up. If I use nearest-pixel and do pixel art it works great, otherwise it gets blurry on tablets. I've also made games at 640x960 but scaling down looks kind-of rotten on 320x480 screens. So, my favorite resolution to start at now is 480x720 and it seems to go both ways pretty nicely. |
| ||
| Why did the scaling down look bad? Was it because you had some 1 pixel thick lines in the higher res that disappeared at low res? Anyway, at the moment I making a game with a 640x640 core area which scales depending on the device and then I put the UI around that depending on if the device is portrait or landscape. It's a port of Titan Attacks so the graphics are like fancy modern-style pixel art (hard to describe, take a look at it: http://www.puppygames.net/titan-attacks/ ) which looks fine scale up or down. |
| ||
| Yes, scaling down made the edges of graphics look grainy and choppy. I actually prefer a slightly blurry enlarged look when developing at 320x480 over the grainy look when scaling down. I updated my post, I said 480x800, but it's actually 480x720 which works fine on many iOS screens, and can be set to work right on Windows Phone. It seems most Android devices are around 800px wide, so I end up getting a "stretched" look when going full screen or I scale to the height of the device and leave black bars - but everything I've released just stretches. |
| ||
| I do everything at 1920x1080 / 16:9 - But I overdraw the background so that for 4:3 there are no black bars at the top and the bottom. |
| ||
| Thanks for the replies guys, interesting seeing the amount of variation in they way people deal with it. I'll do some research but I ideally just want to set 1 virtual resolution and forget about it knowing that it will scale fine without black bars in iPhone/iPod/iPad. The game will be locked to landscape. |
| ||
| I really hope rex rhino isn't doing that for phones. |
| ||
| smilertoo: I am doing it on iphones. I have tested it on an iphone 4 and iphone 5, and it runs great and looks great. I maybe could see a problem if I needed pixel perfect sprites, but all my graphics are 3D rendered and look more like a photographs, so they scale down very nicely. |
| ||
| I take it you are not targetting older devices with that Rex? What is the "magic" resolution then, where you can set it, and forget about it knowing it will scale from iPod/iPhone/iPad without any black borders? |
| ||
| rIKmAN: For mobile, I am targeting iphone 4 and above, which is why I am testing it on iphone 4 and iphone 5. As I said before, I overdraw the background - The background image is 1:1 aspect ratio. I scale the background image to 1920, and then draw it centred on the screen. Wider screens will have more of the background image cut off. Thus, it works on all aspect ratios without black bars. |
| ||
| I've finally managed to get access to an iPad today for testing, so have come back to this and wanted to try and get the scaling/resizing done while I have it in my possession. I've been playing for an hour or so, and have hit a bit of a problem... I have been working to the res of my device (iPod 4g) which is 960x640 (landscape), and have tried using autofit2 mod by James / Drugged Bunny. While it rotates and scales perfectly on my device, when I run it on the iPad although it rotates fine, there are still small black borders on it which I think are because 1024x786 (iPad res) is 4:3 and 960x640 is 16:9, so autofit is doing its job right, its just the aspect ratio that is the prob giving the black bars? Is the only way to fix this to detect the device, and then load separate assets? ie. background.960x640.png - iPhone/iPod (scales down perfectly) background.1136x640.png - iPhone 5 (Taller screen) background.1024x768.png - All iPads (Scales up correctly) It seems like there should be an easier way to do this than to have to bloat your App size with duplicate graphics, especially if there are a lot of assets and its more than just a few backgrounds. I only have direct access to the iPad today, so any quick help and advice appreciated. |
| ||
| You can check the DeviceWidth() and DeviceHeight() and then load the appropriate asset during the OnCreate() part of your app... |
| ||
| Thanks for the reply CopperCircle. I have code working which detects the correct device from the DeviceWidth() and DeviceHeight(), that's not the problem. The problem is getting it working on an iPad without black borders, as although autofit does seem to be doing its job, there are still small black bars at the top and bottom the screen (in landscape orientation) and it doesn't quite fill the screen due to the source image size. Is having multiple sets of assets really the only way? One set for iPhone/Ipod, one for iPhone 5 (taller screen), and one for iPad? It just seems an awful waste of space that bloats the size of the app. I guess I'm after being able to work to one resolution with one set of assets and have it scaled up/down accordingly without bars - if that is even possible? I assume not due to aspect ratio? |
| ||
| You can make the virtual display just stretch to fit the device but that will distort you images if they are for a different aspect ratio. Otherwise you just check the device size work out the aspect, load the correct assets and then set the virtual display. |
| ||
| Thanks again CopperCircle, but I think either I am not explaining it very well or you are misunderstanding my question. Basically, are we forced to ship multiple copies of assets with the app to avoid black bars, or is there a more elegant way? I have written code to detect the resolution and device and load the correct assets, but as I said it just seems so wasteful. |
| ||
| Yes pretty much that's what you have to do. |
| ||
| OK thanks mate for the confirmation :) |
   |