• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Basic questions about graphics on different devices

Explorer ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

I've googled this, and read articles, but I'm still not clear on how it works in regards to creating graphics for apps that are suited for different screen sizes. When you create the iOS file, it sets it up as a certain screen dimensions, so am I right in presuming that you have to have different .fla's for different devices? one for the iPhone one for the iPad etc? because I keep seeing games that's that are advertised as compatible with the iPhone and iPad, does the app somehow know that what screen it's on and then resize the graphics automatically?

Thanks for any advice.

Regards

Phil

TOPICS
Development

Views

1.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

Yes that app does know, you can use stage.stageWidth and stage.stageHeight to scale your movie clips and place them accordingly. Both of the apps I have out orient all the elements to the stage. This allows me to build one app and distribute it on multiple OSs and all screen sizes. As far as graphics go, pick something middle of the road, iPhone 4 is a good jumping off point, its high res enough to be scaled up to an iPad or a Xoom but low res enough to still look good on the smaller 3gs screen and its almost the same size as most android phones 840 x 400.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

Ok, so you're saying change the standard iOS .fla stage width/height to 840x400? or just set the stageWidth/Height to whatever the device is that it's on anyway, so it doesn't matter what the starting .fla stageWidth/height is? in regards to the graphics, what do you design them for though? the iPad? and then just shrink down (bitmap or vector) or design them say the iPhone 4 as vector, and then scale up/convert to bitmap on the fly when needed?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

I would set the stage size  to what ever device you consider your primary for me it seems to be the iPhone 4 so thats my stage size, although my stage size is usually 480 x 320, which is the older iphone resolution, but its perfectly 1/4 of the iPhone 4 so it works out.

The graphics are usually scaled for somewhere middle of the road so on the iPhone 4 they might look just right, on the tablets they get scaled up a bit but its really unnoticeable and on the older phones they shrink a bit so sometimes you get little weird pixelation going on but its better to target future devices than older ones that are phasing out.

I tend to use bitmaps for everything visible since gpu tends to work best for me and vectors dont mix with gpu mode very well.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

The first time I used the trick I described, I did make the stage be 480x320, and with graphics that were iPad resolution but scaled down on the stage. They looked great on iPad. But, the problem is that with 480x320 you would have extra content above and below the stage to be revealed on the iPad, which is the only screen ratio that is narrower than iPhone. By making the content be iPad ratio, you can then support any number of wider ratios just by having extra content off to the sides.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

The only thing that would mess up that method is if somebody came out with a perfectly square tablet.

Colin when you design with that method don't you also have to consider the most narrow / wide screen device (depending on orientation) because your content will essentially get cropped on other devices, so you cant have any crucial elements outside that live area is this a correct assumption?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

I'm working on the assumption that the iPad is the narrowest device. If a narrower device came out there would just be black bars above and below the iPad sized content, and that would be ok with me.

Also, what I've talked about is specific to landscape only apps. If you were doing portrait only you would have a 768x1024 stage, with extra content above and below the stage. If you plan to have the app be landscape and portrait, then having a 768x768 stage, with extra content in all directions would be what you would have to do.

One thing I didn't yet do, but will on the apps I'm working on at the moment, is to have code to push some buttons off to the edges of the screen. That's slightly tricky, because the stage width and height will appear to be 1024x768 on any screen (I think). There are fullscreen width and height values that I'm hoping to use, to know where to push the buttons out to.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

This might seem like a stupid point, but would it not be possible to just have a system that not only takes into account dimensions, but also the orientation and dynamically resizes and lays the visuals out accordingly, or is that a step too far?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

What you describe is one of the uses people have for Flex apps, the library code takes care of those things for you. But, the app size can end up being pretty big. It also doesn't help the more graphical apps, like the ones I do.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

why would the app size get bigger? couldn't you just rotate the mc's dynamically? and you would just setup 2 positions for everything depending if it's portrait or not? I'm using Flash CS5.5. I must admit as well that I'm curious if Flash CS6 will have anything that will help in regards to all of this.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

Many apps do what you're saying now, but I was talking about how it would deal with lots of different screen sizes, not just two.

The app won't get bigger if you do that switching yourself, it just gets bigger if you use a large code library, such as Flex.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

You have two main choices. Either set the stage to no scale, and then do all the laying out of things using code, to look right for the screen that the app is running on. Or, don't set the stage scale at all. With the default setting the stage will scale itself to be as big as it can be, and still be all in view.

So, make your FLA be iPad sized, but with extra content on the left and right of the stage. If you have enough extra content to fill a width of 1366 pixels, that's enough to take care of all current devices. On iPad you'll get exactly what you saw in the stage area. On Retina you'll get the 768 height scaled to be 640 tall, and you'll see a bit of the extra content on the sides. For typical Android you'll get the 768 scaled to 480, and you'll see even more of the contents from the sides.

The widest current device is the Galaxy Nexus, which is 1280x720. The iPad content would be scaled to a height of 720, and all of the 1366 wide spare content you made would be visible. You do have to have interesting but not important stuff off to the sides. Also, when animation things on and off the sides, make sure they go far enough to go beyond the extra content before being removed.

If you're doing a utility like application, doing the code layout may be the right way. If it's a graphically laid out application, then the way I just described works very well, and you end up supporting all sizes using one FLA.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

Colin I am going to try your method on my next app, you keep preaching it and it seems to work for you I like the idea of just one file and everything is exactly where you  expect it.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

Is this with your visuals being bitmaps or vectors? or vectors being converted to bitmaps on the fly? I'll be creating a game.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 06, 2012 Feb 06, 2012

Copy link to clipboard

Copied

All my graphics are bitmaps, pngs for transparencies and jpegs for edge to edge stuff.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 07, 2012 Apr 07, 2012

Copy link to clipboard

Copied

LATEST

Hello, I would like to ask somebody who have already submited their apps to the android market on how many devices you have tested you app before submiting it? Basicly how many devices you have to test on?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines