Designing graphics for multiple targets ... ?
Monkey Forums/Monkey Beginners/Designing graphics for multiple targets ... ?
| ||
| I'm sure this has been asked and answered before, but I can't seem to find it. Apologies in advance. I want to build my game for iOS and (probably) Android. I know that each iOS device has its own screen resolution. I don't own any Android devices but I'm sure the same is true there too. So my question simply is this: how do you design graphics when you can't be sure of the screen resolution? Do you research every possible device and create a version for each one - and if so, how do you know at runtime which one(s) to use? Or, do you design really big graphics and then use global scaling to draw everything - presumably calculating the X and Y scale by first detecting the actual screen resolution? In the case of the first game I'm working on, it has a static screen with a bunch of buttons on it - there won't be any animation to speak of at all. I'll design the graphics using iDraw (vector drawing app) so I can export at any size. I don't necessarily need code examples, just an understanding of how to proceed. Thanks, Lindsay PS: Based on the fantastic help I received to my last question, I went ahead and purchased the pro version - thank you all again :) |
| ||
| It's different for every game. One of the more typical things to do is to scale the screen using AutoScale or AutoFit because trying to test out or know every resolution is unrealistic. In my case right now, for the game I'm working on, the background is not scaled but is instead centered, and the layout is scaled. The layout was made in full HD as to scale to devices properly. However, we're going to also make a HD layout so that devices beyond a certain lower threshold will use those graphics instead. Because scaling can sometimes make graphics awkward looking. Back to the point though. Pick a size and stick with it. Scale later. If you worry about the scaling process early on it will only hinder your progress. how do you know at runtime which one(s) to use? Use DeviceWidth() and DeviceHeight(). Although I remember hearing something about it not giving the right size in certain cases. Maybe someone else can shed light on that. Edit: I think it had to do with the Android menu bar which would take up part of that screen space. Someone correct me if I'm wrong. Edit 2: On common resolutions, read this topic -> http://www.monkey-x.com/Community/posts.php?topic=8454 |
| ||
| Thanks Goodlookinguy (and DruggedBunny!)- I wasn't aware of Autofit. Dropped it into my project and had it working fine in minutes. That's a heck of a lot easier than I was anticipating :) I think using 800x480 will be my plan as well, but it'll be interesting to see how that looks scaled up on a Retina iPad! |
| ||
| There's no easy answer. If you have sprite-type graphics, you probably scale them. If like me you do puzzles with lots of straight lines you find an integer size that will fit in the device metrics. But you're always going to have to scale buttons and stuff. iOS has a few different sizes... Android has a huge range of possibilities! |
| ||
| The game I'm working on now is indeed a puzzle game, with static areas to click on to drive the gameplay. Will have to ponder this awhile! Thanks, Lindsay |
| ||
| One approach is to supply different versions of assets, such as HD and SD. Detect the resolution of the device (and the DPI) then use the correct asset set. |
| ||
| Use percentage's to position objects Ie: x= 0 to 100 |
| ||
| Wait, I have to consider DPI as well?? OK, yeah, that makes sense. I'd pretty much come to the same conclusion about having multiple versions of assets so the scaling is never too extreme. Thankfully my designs all start out as vector art so I can export them at multiple sizes without losing quality. Thanks for the % idea, Boulderdash, that's a great idea! ~ Lindsay |
| ||
If you're using Autofit you need to consider aspect ratio, a 3rd gen iPhone has not only a different resolution than a 5th gen but also a different aspect ratio;iphone 1G-4G = 3:2 iphone 5G = 16:9 ipad = 4:3 You'll need to account for these differences or have users deal with black bars when the chosen base ratio is not the same as the device it's running on. As you know you'll only ever (currently) need to account for 3 different aspect ratios all of which can be easily determined based on DeviceWidth and DeviceHeight. A simply method would be to use autofit but have three different layout styles and base resolutions for the different aspect ratios it that makes sense, or if this is your first app\game don't worry about any of the above and just get a game done. Welcome to the joys of mobile development. |
| ||
| Lindsay; I'm on my smart phone but later in the week I will post some source code, I can barely post here on my phone, screen jumps up and down as I type, I can't even see what I'm typing I position images using a percentage system therefore it just doesn't matter about screen size, and I use trig. for direction of image Also works when you rotate screen. |
| ||
| Lindsay; I'm on my smart phone but later in the week I will post some source code, I can barely post here on my phone, screen jumps up and down as I type, I can't even see what I'm typing I position images using a percentage system therefore it just doesn't matter about screen size, and I use trig. for direction of image Also works when you rotate screen. |
| ||
| I use a combination if screen percentage, typically I divide the width and height by 10 to get 10 positioning points per axis this allows me to easily layout elements and call on different layout profiles based on device, on top of that I use real world values to scale text and buttons this I derive from device bucket DPI (android - not perfect but does the job). |
   |