Hi. I`ve never made any mobile / starling app before and i wonder what should be app (game) resolutions, and how to resolve problem of resolution varity in different devices.
How the scaling is working in starling? Is it good idea to make i.e 800x480 app and scale it up/down to fit other resoltution screens?
Cheers
Have a look at this thread, it might get you started!
http://forum.starling-framework.org/topic/retina-display-support
Download the demo project from the thread I'm linking to above! If I remember correctly, that contains a retina project.
(The textures are not HD, but its rendered in full resolution.)
After a long time of testing and playing around with supporting both retina and standard resolution iPhone display, I find out that when doing:
star.addEventListener(Event.CONTEXT3D_CREATE, function(e:Event):void { viewPortRectangle.width = stage.stageWidth; viewPortRectangle.height = stage.stageHeight; star.stage.stageWidth = 320; star.stage.stageHeight = 480; });
all object on the stage are scaled up and they look really bad and blurred (especially text). So I managed to do that in a little different way: First of all my SWF is 320x480 and I don't listen to ResizeEvent or CONTEXT3D_CREATE event at all. So I check if app is running on iPhone with retina display via system.Capabilities:
if(Capabilities.screenResolutionX == 640 || Capabilities.screenResolutionY == 960) { Game.GlobalScale = 2; }
and if it does I change the value of GlobalScale integer variable to 2 witch is in my Game.as class. (the default value for GlobalScale is 1). And finally I multiply every number witch indicates any size or position by GlobalScale. So for example if I have a textField with font size of 16 and I want to place it on coordinate (100;100). On iPhone 3Gs all numbers(width, height and font size) will be multiplied by 1(witch is the default value of GlobalScale) and will be the same, but on retina display those numbers will be multiplied by 2 witch will give me good quality of text and correct position on the screen. By the way I don't know if this is the best way of dealing with retina and non retina display so if you do it some other way please let me know about it 
I recommend you update to the latest Starling version on Git! It contains something very similar: "Starling.contentScaleFactor". It makes sure that e.g. text is always rendered in full resolution. Look at the updated Demo project to see how to work with that feature. If you start it up in 320x480, it uses SD textures; if you start it up in 640x960, it uses HD textures. (Just edit the SWF startup attribute.)
Hey Daniel,
but how does it handle way more than 2 sets of assets when developing android app?
@Thynsiia, given iPad retina is 264 ppi and iPhone retina is 326 ppi you can certainly just use a Starling.contentScaleFactor = 2 for both and also use the same 2x assets if you are willing to have your 2x iPhone retina content display a little smaller than on the iPad retina display.
Additionally though, and related to Andrius123 previous comment on more than 2 sets of assets, the design technically doesn't preclude you from supporting more than 2 sets.
You could for example support three sets like, 1x, 1.5x, and 2x and choose them based on iOS device type and on Android choosing based on Capabilities.screenDPI
(similar to how some Adobe AIR projects suggest supporting 160dpi, 240dpi, and 320dpi asset set 'sweet spots') (if you go this discrete pre-created bitmap route)
Well sorry for being dumb but I stil don't realy get why do I have to know the actual size of the screen? Why the stage.stageHeight and width doesin't work here? And what do you mean by: (if you go this discrete pre-created bitmap route)?
What I mean is the technique where you go with a set of somewhat 'hard-baked' asset sizes (1x, 2x, ...) and at runtime pick one of these scales based on either the device you know or a bucket of Capabilities.screenDPI ranges.
This isn't the only way to do multiple screen size/screen density apps. Other techniques to support multiple-screen sizes go with more dynamic resized components that will expand or collapse to arbitrary non-discrete sizes.
The Starling.contentScaleFactor and Starling sample goes with the idea you choose one of two 1x or 2x asset sizes and only discrete pre-created bitmaps (fonts and textures).
It is true all your app logic only worries about one stageWidth/stageHeight coordinate system, but you would still create the different asset sizes that would support all the contentScaleFactor values you would need.
So if for example if I would make
Starling.contentScaleFactor = 3No not automatically. As Daniel states above, the latest Starling will support a 'scale' property on textures as well as scaled rendered text based on a computed Starling.contentScaleFactor. It is up to your code though to use non 1.0 scale values.
Starling.contentScaleFactor is not something you set directly but is a computed ratio of your current Starling stage's viewport size compared to the stage's stageWidth/stageHeight
You would need to check the Starling sample code for an example of how to take advantage of this feature. The sample uses an Assets class to choose to load different assets from alternate 1x, 2x classes and also creating textures with a scale parameter overriding the default '1'.
Typically when your app isn't worrying about different resolutions you are either manually or having Starling automatically set its
stage's stageWidth and stageHeight equal to it's viewport rect's width and height respectively.
This means your stage's coordinate system is mapped 1-to-1, pixel-to-points when they are set to the same width and height values.
In the case of the Starling sample iOS demo code it uses explicit iPhone sizes.
It *always* sets stageWidth = 320, stageHeight = 480. On a non-retina iPhone
the viewport width will be set to 320 and viewport height will be set to 480, and the Starling.contentScaleFactor will be 1. But on an iPhone retina device the viewport width will be set to 640 and the viewport height to 960 and now Starling.contentScaleFactor will report '2'. The Assets class in the demo app uses Starling.contentScaleFactor to help it figure out which of the 1x or 2x asset classes and texture scale values to use.
As another more generic example that isn't iOS specific:
Lets say that you add a resize listener in your startup class on the flash stage:
// this is the flash stage stage.addEventListener(flash.events.Event.RESIZE, onResize, false, 0, true);
then, where you might normally update the Starling stageWidth and stageHeight *and* the viewport rect width and height to the same new values, you instead inject some conditional logic to decide whether this device should instead use 2x (or even 3x) scaled coordinate system:
private function onResize(e:flash.events.Event):void { // note this is the flash stage.stageWidth/Height in a startup class, not root class var newViewportWidth:Number = stage.stageWidth; var newViewportHeight:Number = stage.stageHeight; var desiredScaleFactor:Number = 1; // you want to check if on iPhone or iPad retina... if (iOSRetinaDeviceTest) desiredScaleFactor = 2; // maybe for Android you use 2x assets with high screenDPI if (Capabilities.screenDPI >= 220) desiredScaleFactor = 2; // maybe you have some super-rocked out device needing 3x assets if (amazingSuperHDTest) desiredScaleFactor = 3; // note you might need to check if Starling stage is up yet... Starling.current.stage.stageWidth = newViewportWidth/desiredScaleFactor; Starling.current.stage.stageHeight = newViewportHeight/desiredScaleFactor; Starling.current.viewPort = new Rectangle(0,0, newViewportWidth, newViewportHeight); }
Now Starling's stage stageWidth/stageHeight might not match the viewport dimensions so the pixel-to-points ratio will change and Starling.contentScaleFactor will reflect the proper scale factor.
It is still up to you if you implement something like the Starling demo's Assets class to check and use the current Starling.contentScaleFactor to pick the right 1x,1.5x.2x,3x.. asset class (and actually implement that new scale class) and also when it calls for loading textures to ensure the scale parameter reflects the current Starling.contentScaleFactor.
Hope some of that helps a bit...
Thanks allot Jeff, I finaly got it
Hi guys,
I have developed a game using Starling and Away3D and I have a resolution problem. On Android big screen size or small screen size the resolution is ok. The problem is on Iphone 4 in my case. From my debugging i saw that the resolution is incorrect because the scaleFactor property is 1 and for Iphone I know that should be 2. Also the screen width and height is also wrong.
I read multiple threads but without no luck.
Thanks
You must log in to post.
