Starling Forum

1. 

   digitaloranges
   

   Competent Bird
   Joined: Feb '12
   Posts: 56

   Hello,

   I'm using Starling to develop a game that although initially will be a browser based game, I'm building it with a view to maybe releasing it on mobile devices (iOS especially) and was wondering how to best manage my HD and SD graphics?

   I'm using Texture Packer which will output -hd and -sd versions of my atlases, but I was wondering if anyone had any thoughts on the best way to manage the SD and Retina graphics files while still using the same codebase?

   Ideas and opinions would be appreciated!

   Posted 1 year ago #
2. 

   Daniel
   

   Primary Feather
   Joined: Jan '10
   Posts: 2,461

   Hi digitaloranges,

   to run a game on a retina device, you can set it's "requestedDisplayResolution" to "high"; that way, it will run in HD resolution on a retina iPhone and in half that resolution on a non-retina device.

   The problem is that the HD textures will likely be too expensive to render on a non-retina device.

   On iOS, this is normally solved by using 2 sets of textures: normal textures and HD textures. You always create the game in a coordinate system of 480x320 (low resolution), and at run-time, different textures will be loaded depending on the device.

   The problem is that both sets of textures always have to return the SD "width" and "height", so that your images are displayed at the correct level.

   Starling does not support this currently, but you could easily add this manually for now, by adding a "scaleFactor" property to your textures, and using that factor in the "width" and "height" properties. Then, depending on the device you're running, use different textures and set the "scaleFactor" accordingly.

   I know this is a rather rough how-to, but perhaps it gets you going! I plan to write a tutorial on that when I implement that feature -- but it might take me a while.

   Posted 1 year ago #
3. 

   digitaloranges
   

   Competent Bird
   Joined: Feb '12
   Posts: 56

   Thanks for the response!

   Well, what I'm doing is embedding 2 sets of textures (sd and hd) and at startup, checking the stage size. I then set a suffix ("" for sd and "_hd" for hd) that my getTexture() method uses to get the reference to the correct texture e.g. tiles.png or tiles-hd.png, which seems to work like a charm.

   Posted 1 year ago #
4. 

   digitaloranges
   

   Competent Bird
   Joined: Feb '12
   Posts: 56

   However - another question.

   Will the stage height/width be set correctly when the app starts? As I'm setting the .swf height and width via an embed statement (to 480x320) in the StartUp.as file, surely the stage size will always be 480x320 even on a retina display?

   Now I'm thinking I may be missing something here ...

   Posted 1 year ago #
5. 

   Daniel
   

   Primary Feather
   Joined: Jan '10
   Posts: 2,461

   It's important to know that the stage can (and should, in that case) always have the same size, in both resolutions. The stage size is actually not a "size" per se, but indicates the size of its coordinate system. The actual size on the screen (in pixels) is indicated by the "viewPort" property of the Starling object.

   So, on an iPhone, the stage size should always be 320x480. The viewPort size will be either 320x480 (<= 3GS) or 640x960 (Retina display).

   I *think* that when you enable the high resolution in the AIR config file, the conventional (Flash) stage size will be the same as the screen resolution, and the viewport is per default (if you don't set it manually) that value. So you just have to make sure that the stage size is set to 480x320. -- HOWEVER: I didn't find the time to test that yet, so I'm not 100% sure.

   If you try it out, it would be great to post the outcome here -- thanks! =)

   Posted 1 year ago #
6. 

   Daniel
   

   Primary Feather
   Joined: Jan '10
   Posts: 2,461

   OK, I was curious myself and tried it out. Here is what you have to do to have the app run with the correct resolution on a retina iPhone.

   First, enable the high resolution the AIR startup XML file:

   <iPhone>
     <requestedDisplayResolution>high</requestedDisplayResolution>
   </iPhone>

   Then, init Starling in the following way:

   var displaySize:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
    
   mStarling = new Starling(Game, stage, displaySize);
   mStarling.start();
    
   mStarling.addEventListener(Event.CONTEXT3D_CREATE, function(e:Event):void
   {
      mStarling.stage.stageWidth = 320;
      mStarling.stage.stageHeight = 480;
   });

   This will allow you to create your game in the coordinate system 320x480, while its being rendering in HD.

   HOWEVER, this doesn't load HD textures, of course -- at the moment, you'll have to modify Starling to do that. But in a future version, this should be as simple as in Apple's UIKit.

   Alternatively, you can go the other way round: make your stage HD (640x960) and downscale on the 3GS. Then it will look sharp on all devices, but the 3GS might have a hard time fitting the HD textures into RAM.

   [Disclaimer: you'll need the latest (head revision) Starling version for that event I'm using above.]

   Posted 1 year ago #
7. 

   digitaloranges
   

   Competent Bird
   Joined: Feb '12
   Posts: 56

   Awesome! I was going to try it today - you beat me to it!

   Posted 1 year ago #
8. 

   digitaloranges
   

   Competent Bird
   Joined: Feb '12
   Posts: 56

   Hmmm ...

   Ok, so I've set my document stage size to 480x320 and in the CONTEXT3D_CREATE event, I set the starling.stage properties to 480x320.

   If I run it from Flash Builder as iPhone 4, it displays the larger 960x640 window but as the stage settings are 480x320, the game is half the size of the window on the top left.

   I think I'm still a little confused tbh. Surely I have to set the viewPort rect to be 960x640? Also, how do I determine whether the load hd or standard textures? Do I look at Capabilities.screenResolution?

   Sorry for being so dumb, but I'm not getting it at the moment

   Posted 1 year ago #
9. 

   Daniel
   

   Primary Feather
   Joined: Jan '10
   Posts: 2,461

   Don't worry, it's indeed slightly confusing!

   First: I forgot to mention that this code, for some reason, does not work in Flash Builder's iPhone simulator. In the simulator, the content of the game is moved somewhat upwards. (I guess a beta problem.) On the device, it worked fine for me.

   You do set the viewPort rectangle to 960x640, because the (Flash) stageWidth and stageHeight will be the screen resolution (I guess you could use the Capabilities method, too, but I didn't try).

   Then, depending on these values, you'd decide which textures to load. (And, as I said, give them some scale factor so that they're displayed in the correct size. This is not yet contained in Starling.)

   Posted 1 year ago #
10. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 2,461

    And remember that the Starling stage size has nothing to do with pixels: it's only the size of your coordinate system. You want to make sure that a point at x=320, y=480 is always at the bottom right of the screen.

    The stage always fills the entire viewport, no matter which "stageWidth" and "stageHeight" properties it has.

    Posted 1 year ago #
11. 

    digitaloranges
    

    Competent Bird
    Joined: Feb '12
    Posts: 56

    Right I think I've managed it.

    What I do is set the Starling coordinate space to 480x320 (starlings stage.stageWidth/stage.stageHeight) which ensures that whatever the device resolution is I can rely on these coordinates to be consistent on all devices.

    I then check the devices pixel resolution via flash's stage.stageHeight/stage.stageWidth property. From this I can decide whether I'm using standard or HD assets.

    I then look at this flag whenever I request a texture from the Asset manager which will return the appropriate sized texture from the embedded assets (using a dictionary class as is suggested in the documentation).

    I have a base sprite class that all images in my game are derived from, so if the system is running in HD mode, then it scales the image accordingly so that it looks the proper size in the 480x320 coordinate space.

    Phew! I can't test on a device yet tho, but fingers crossed!

    Thanks for all your help!

    Posted 1 year ago #
12. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 2,461

    Exactly!!! You've described it perfectly accurately! =)

    Posted 1 year ago #
13. 

    digitaloranges
    

    Competent Bird
    Joined: Feb '12
    Posts: 56

    I just thought I'd write it down so if anyone else has the same problems, they can see how I did it.

    Thanks for your help again, Starling rocks. And cannot wait to try it on mobile

    Posted 1 year ago #
14. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 2,461

    Yes, thanks for writing it down that way! When I'm writing the tutorial on that part, I might steal some parts of your wording, if that's fine with you! =)

    You're welcome - and thanks for the compliments!! =)

    Posted 1 year ago #
15. 

    digitaloranges
    

    Competent Bird
    Joined: Feb '12
    Posts: 56

    Sure, you go ahead! Glad to be of help

    Posted 1 year ago #
16. 

    The Big Burrito
    

    Novice Bird
    Joined: Dec '11
    Posts: 11

    Hi Daniel, following your example, when I try to add the Event.CONTEXT3D_CREATE event listener to my starling object, I get an error "1061: Call to a possibly undefined method addEventListener through a reference with static type starling.core:Starling."

    Are you importing the Starling Event class for this to work? Can you post a zip of your working file for us to reference? I've tried using fully qualified class names and I'm still getting this error.

    Posted 1 year ago #
17. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 2,461

    You have to use the head revision of Starling (and compile it yourself)! In that version, the Starling class inherits from starling.events.EventDispatcher, and the starling.events.Event class contains "CONTEXT3D_CREATE".

    But here's the zipped Flash Builder project!

    http://dl.dropbox.com/u/60976364/2012-02-15-Starling-Mobile-Demo.zip

    The zip does not contain Starling, though: you have to add that as a separate project and reference it from that project.

    Posted 1 year ago #
18. 

    The Big Burrito
    

    Novice Bird
    Joined: Dec '11
    Posts: 11

    Thanks for the quick response Daniel. I pulled the latest head revision, I see the new code you mentioned in there. However, I'm using the Particle System extension (https://github.com/PrimaryFeather/Starling-Extension-Particle-System), and after using the new Starling code, I'm now getting an error (1023: Incompatible override), with the below line of code in the Particle System engine:

    public override function getBounds(targetSpace:DisplayObject):Rectangle

    Can you steer me in the right direction?

    Posted 1 year ago #
19. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 2,461

    Sorry for the issues with the particle system -- that's because of API changes in Starling. I wanted to make sure that the latest stable version of Starling (0.9.1) works with the particle system.

    To fix that, download the following particle system version instead:

    https://github.com/PrimaryFeather/Starling-Extension-Particle-System/zipball/ee0623d962bf99934de23ed410f9283d7dad5270

    That should do it! -- sorry for those issues, I'll fix that when Starling 1.0 comes out, which will be soon.

    Posted 1 year ago #
20. 

    The Big Burrito
    

    Novice Bird
    Joined: Dec '11
    Posts: 11

    Cool, thanks again for the quick response and Particle System fix. Your dedicated support for Starling is amazing Daniel!

    Posted 1 year ago #
21. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 2,461

    Thanks for the compliments! I'm happy to help! =)

    Posted 1 year ago #
22. 

    grit
    

    Novice Bird
    Joined: Apr '12
    Posts: 7

    Maybe I can bring this thread up again; I have an app on the iStore which I'm redeveloping with Starling. I'm very happy with the performance but about the SD/HD graphics:
    Since the AIR packager is quite big I thought it was a shame to incorporate extra graphics for the different resolutions. What I did was create the HD graphics (iPad) and created a on-the-fly scaled bitmap when creating the textures example:

    - embed bitmap (e.g. 1024x768 ipad2 resolution)

    - if necessary (depending on actual device resolution); the OnTheFly class scales the bitmap's bitmapdata to new dimensions with matrix.scale() and smoothing on

    - This way I can use the scaled bitmapdata to create texture with: Texture.fromBitmapData(new OnTheFly(<bitmap>,<scalefactor>));

    This works flawlessly and looks smooth, Starling does not scale itself. I noticed Starling does need some more time to startup than the 'normal' flash environment I was used to (especially on the iPhone 4) maybe copying or scaling a spritesheet would be faster?

    So drawback would be that the coordinate system will change on the lower resolutions, but for my application that's not really a big problem. I'm just wondering if there's another issue to this approach which I'm not aware of (be gentle pls. )

    Posted 11 months ago #
23. 

    Daniel
    

    Primary Feather
    Joined: Jan '10
    Posts: 2,461

    Sorry for the late reply! I think this approach should work fine! As long as the startup time is acceptable, that's great.

    The only downside is that (I guess) you're not using a texture atlas that way, which can bring the performance down. But you could create your atlas on the fly with the same method, by drawing the scaled images into a bitmap and then creating an atlas from those images. The difficult part will be arranging the textures in a smart way, though. But it's possible.

    Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.