Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Quick Links
Categories
- 7.8K All Categories
- 11 Help with translations
- 4.2K General questions
- 107 Roadmap
- 358 Game & application design
- 316 Plugins
- 70 User experience
- 75 Marketplace
- 291 Code snippets
- 34 Building a team?
- 269 Suggestions & requests
- 352 Announce your apps made with Gideros.
- 90 Step by step tutorials
- 668 Bugs and issues
- 195 Introduce yourself
- 239 Announcements
- 106 Forum talk
- 404 Relax cafe
Working with scale ratios & resolutions in mind
Mells
Guru
Hi,
I am trying to find the best workflow for the creation of my artwork, to be displayed on iOs devices.
I won't stretch my images, but instead will try to make it work in Pixel Perfect mode.
I would like to create some guidelines, and would be interested in hearing how you handle multiple resolutions & ratios.
I just need to know if I'm on the right track.
Here is what I have so far.
What do you think about it, and what would you do differently?
I sticked to 2048 and 1536 as the highest width/height because I create my art directly on the ipad. Procreate only exports to 1920x1408 though, but that's another story.
External resource :
I am trying to find the best workflow for the creation of my artwork, to be displayed on iOs devices.
I won't stretch my images, but instead will try to make it work in Pixel Perfect mode.
I would like to create some guidelines, and would be interested in hearing how you handle multiple resolutions & ratios.
I just need to know if I'm on the right track.
Here is what I have so far.
What do you think about it, and what would you do differently?
I sticked to 2048 and 1536 as the highest width/height because I create my art directly on the ipad. Procreate only exports to 1920x1408 though, but that's another story.
External resource :
- List of iOS devices
- Aspect Ratio Calculator
- The image is from the open movie project : Big Buck Bunny, available under the Creative Commons Attribution 3.0 license. Watch here.
Dislikes: Sush19, paul_k_clark
twitter@TheWindApps Artful applications : The Wind Forest. #art #japan #apps
+1 -1 (+0 / -2 )Share on Facebook
Comments
Below is what I'd use when starting to layout a design if I was doing it for iOS only, it's an image that overlays the different screens, combined, to give me overall safe areas and a guide to how big background images etc. need to be.
The white area is iPhone 4, blue area is iPhone 5 and orange is iPad. I've shrunk it down to the right size for retina iPhones and standard iPad resolution just to upload it here. The problem with the images you've uploaded is that you're only taking into account width or height differences, where as if you're going for pixel perfect scaling you need to take both into account as, in portrait for instance there is extra width on the iPad and extra height on an iPhone 5. For Android development I use something more complex with additional screen ratios on. I tend to setup the document based on my base resolution at 1 inch = 100 pixels and then convert any Android screen resolutions to this base resolution according to what image scale it would use, e.g. 600 x 800 I'd convert to 300 x 400 etc. for the purposes of this document. I guess this all sounds a bit confusing, but it isn't really.
When creating imagery, for instance if I'm using Illustrator, I will export at double the maximum resolution I want to use, e.g. double the iPad Retina in this case, and resize that image in Photoshop to the correct resolution (don't ask why, I just prefer the final aliasing this way). That's the only one I'll do now that TexturePacker has enhanced Auto-SD functionality as you can create all the lower resolutions automatically from within that.
One thing on that, however, is that ensure that the dimensions of your images will divide to even numbers otherwise you may get display issues (this is part of the reason why BMFont produces such poor results at the moment from Glyph Designer, for instance). So, if your super high iPad retina images are 400 x 400 then that's ok, at iPhone retina they'll be 200 x 200 and at sd they'll be at 100 x 100. But if you'r original image is 404 x 404 then you'll get into issues as the sd will be 101 x 101. Just remember, even numbers - use transparency padding if you need to.
Anyway, that's pretty much the basics of how I do it, although there's much more to think about if you're starting to use 1.5x resolution images etc.
Does that help at all?
Likes: Mells
I'm trying to understand well : I can see how the version you provided would allow me to spread the extra width/height, which would result in visuals that "look" less different on iPhone5 and iPad (the content to be added or subtracted being narrower).
Actually, I prefer yours and will use it.
However, I don't really understand how the one I linked above failed to take both width and height into account?
If my images are all created with the same width or height, and if I am well aware of the parts that will be cropped on the iPhone and the iPad (I tried to keep screen ratios and scale it to max-width or max-height), I believe that both width and height are taken into account, am I mistaking?
I want to (digital) paint at the highest resolution needed, that's why I sticked to max-width or max-height first. You said iPad retina/iphone retina then sd.
Did you mean iPad retina / ipad and sd? (keeping same ratio).
If you really meant ipad retina/iphone retina, then that means that it's a bit more confusing for me than I thought
You can think iPhone retina or iPad at 200 x 200 - either is fine as the same x2 assets would be used for either (well, apart from in some areas where you actually want popups and buttons to be different sizes on a tablet than on a mobile, otherwise they look huge on a tablet - that's why I asked Atilim for the screen density function that's been added, so you can work out if it's a tablet or mobile).
Yes I believe this is similar and now I understand that I didn't explain my graphic well enough.
Those resolutions are the ones of my working files (respecting the ratios) and later I will scale things down for each device.
I intend to store those frames in dropbox as layers with transparency and import to each painting that I'll start on the ipad.
My goal is to spend as much time as possible working on the ipad because I'm very mobile : and as the canvas size in Procreate (my favorite app) can't be resized I need to clamp (?) everything either to the ipad width, or the ipad height.
Then yes, after scaling it will be a pixel perfect resolution. So even for the iphone, I will work on a higher resolution than the device can display first.
So when the "New" Retina (2272x1280) will be out in a year or two, I'll be ready
- My example 1 requires that I paint extra parts on my desktop (width).
- Example 2 : I can do everything on the iPad (automate scaling later with Hazel, TexturePacker has command line access also, etc)
- Your example (3) requires that I paint extra parts on my desktop (width and height) but those parts being narrow, I don't need to create additional elements : blending my central artwork would be enough in most cases.
Oh, so that is the purpose of getScreenDensity! Now I get why you were asking for it and this is, indeed, very useful.I really hope that we can get test files with each release soon, there are so many things that we could take advantage of in Gideros.
Hi @Mells, I think your approach is perfectly valid, as @moopf said, just scale down carefully.
Author of Learn Lua for iOS Game Development from Apress ( http://www.apress.com/9781430246626 )
Cool Vizify Profile at https://www.vizify.com/oz-apps