Starling Forum » Topic: app resolutions

Starling Forum » Topic: app resolutions http://forum.starling-framework.org/topic/app-resolutions The Starling Framework Community en-US Wed, 22 May 2013 17:32:31 +0000 http://bbpress.org/?v=1.0.3 <![CDATA[Search]]> q http://forum.starling-framework.org/search.php AlexGo on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-30294 Wed, 17 Apr 2013 11:14:20 +0000 AlexGo 30294@http://forum.starling-framework.org/ 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 Andrius on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4879 Sat, 14 Apr 2012 10:00:43 +0000 Andrius 4879@http://forum.starling-framework.org/ Thanks allot Jeff, I finaly got it <img src="http://forum.starling-framework.org/my-plugins/bb-smilies/default/icon_wink.gif" title=";)" class="bb_smilies" /> Jeff on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4869 Fri, 13 Apr 2012 22:52:07 +0000 Jeff 4869@http://forum.starling-framework.org/ No 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: <div class="bb_syntax"><div class="code"><pre class="as3" style="font-family:monospace;">// this is the flash stage stage.addEventListener(flash.events.Event.RESIZE, onResize, false, 0, true);</pre></div></div> 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: <div class="bb_syntax"><div class="code"><pre class="as3" style="font-family:monospace;">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); }</pre></div></div> 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... Andrius on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4861 Fri, 13 Apr 2012 21:14:37 +0000 Andrius 4861@http://forum.starling-framework.org/ So if for example if I would make <div class="bb_syntax"><div class="code"><pre class="as3" style="font-family:monospace;">Starling.contentScaleFactor = 3</pre></div></div> then starling would automatically load assets from 3x class and so on? Jeff on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4774 Thu, 12 Apr 2012 22:59:32 +0000 Jeff 4774@http://forum.starling-framework.org/ 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. Andrius on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4771 Thu, 12 Apr 2012 22:36:46 +0000 Andrius 4771@http://forum.starling-framework.org/ 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)? Jeff on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4752 Thu, 12 Apr 2012 18:10:17 +0000 Jeff 4752@http://forum.starling-framework.org/ @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 <code>Capabilities.screenDPI</code> (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) Thynsiia on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4751 Thu, 12 Apr 2012 17:57:14 +0000 Thynsiia 4751@http://forum.starling-framework.org/ can this be used then for working with iPhone retina/no-retina and with iPad retina/no-retina? all in the same project? Andrius on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4667 Tue, 10 Apr 2012 14:57:44 +0000 Andrius 4667@http://forum.starling-framework.org/ Hey Daniel, but how does it handle way more than 2 sets of assets when developing android app? Daniel on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4564 Fri, 06 Apr 2012 16:47:02 +0000 Daniel 4564@http://forum.starling-framework.org/ 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.) Andrius on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-4531 Fri, 06 Apr 2012 12:47:18 +0000 Andrius 4531@http://forum.starling-framework.org/ After a long time of testing and playing around with supporting both retina and standard resolution iPhone display, I find out that when doing: <div class="bb_syntax"><div class="code"><pre class="as3" style="font-family:monospace;">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; });</pre></div></div> 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: <div class="bb_syntax"><div class="code"><pre class="as3" style="font-family:monospace;">if(Capabilities.screenResolutionX == 640 || Capabilities.screenResolutionY == 960) { Game.GlobalScale = 2; }</pre></div></div> 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 <img src="http://forum.starling-framework.org/my-plugins/bb-smilies/default/icon_wink.gif" title=";)" class="bb_smilies" /> Daniel on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-3119 Mon, 05 Mar 2012 17:41:29 +0000 Daniel 3119@http://forum.starling-framework.org/ 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.) Makuro on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-3118 Mon, 05 Mar 2012 17:37:25 +0000 Makuro 3118@http://forum.starling-framework.org/ Any chance to see an example having the stage HD (640x960) as main resolution? I am trying to downscale to 3GS or upscale to iPad but no luck at all (viewport seems to work well but coordinate space for touch events don't). Daniel on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-3113 Mon, 05 Mar 2012 16:08:24 +0000 Daniel 3113@http://forum.starling-framework.org/ Have a look at this thread, it might get you started! <a href="http://forum.starling-framework.org/topic/retina-display-support" rel="nofollow">http://forum.starling-framework.org/topic/retina-display-support</a> lokhy on "app resolutions" http://forum.starling-framework.org/topic/app-resolutions#post-3109 Mon, 05 Mar 2012 15:44:49 +0000 lokhy 3109@http://forum.starling-framework.org/ 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