Skip navigation
Currently Being Moderated

Basic questions about graphics on different devices

Feb 6, 2012 3:40 PM

Tags: #air #app #iphone #cs5.5 #mobile #display #ipad

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

 
Replies
  • Currently Being Moderated
    Feb 6, 2012 4:05 PM   in reply to GameViewPoint

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 4:33 PM   in reply to GameViewPoint

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 4:34 PM   in reply to GameViewPoint

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 4:36 PM   in reply to Colin Holgate

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 4:37 PM   in reply to Mark.Raykhenberg

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 4:52 PM   in reply to Colin Holgate

    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?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 5:02 PM   in reply to GameViewPoint

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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 5:12 PM   in reply to Mark.Raykhenberg

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 5:28 PM   in reply to GameViewPoint

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2012 5:34 PM   in reply to GameViewPoint

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 7, 2012 2:03 AM   in reply to GameViewPoint

    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?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points