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

Multi-resolution issues with iPad Pro and iPhone 6 plus

Engaged ,
Aug 25, 2016 Aug 25, 2016

Copy link to clipboard

Copied

I have successfully set up my project to recognize a device and load the appropriate sized assets. I have four resolutions (4 sizes): (4x) 1920 x 1280, (3x) 1440 x 960, (2x) 960 x 640, (1x) 480 x 320. The project launches the correct assets for each device but I have two issues when I test on an actual device. One is on the iPadPro and the other is on iPhone 6plus.

My development environment: Windows10, FlashDevelop, Starling 2.0.1, Air 21.0, iOS 9.3.4

  1. Issue #1 - iPad Pro - There are two white bars that stretches the width of the device about 50 pixels high on the top and bottom. See image:

    14095853_10208820614567166_1434240423098932899_n.jpg
  2. Issue #2 - iPhone 6Plus - There are black bars on each side of the project. See image below:

IMG_3676.PNG

From my research and suggestions in Facebook groups I thought the issue may have been caused by the wrong launch images. I have the following launch images:

Questions:

  1. How can I fix this?
  2. Is there a problem putting some many  launch images?

Here is my code:

Main.as

package

{

     import flash.desktop.NativeApplication;

    import flash.display.Sprite;

    import flash.display.StageAlign;

    import flash.display.StageScaleMode;

    import flash.events.Event;

    import flash.geom.Rectangle;

    import starling.core.Starling;

    import starling.utils.RectangleUtil;

    import starling.utils.ScaleMode;

   

    //import com.demonsters.debugger.MonsterDebugger;

   

   

   

    [SWF (frameRate = "60" , backgroundColor = "#ff4434")]

   

       

    public class Main extends Sprite

    {

        private static const STAGE_WIDTH:int = 480;

        private static const STAGE_HEIGHT:int = 320;

       

        private var _starling:Starling;

       

        public function Main()

        {

        // Tell Flash not to scale, that will be done by Starling instead

            stage.scaleMode = StageScaleMode.NO_SCALE;

            stage.align = StageAlign.TOP_LEFT;   

           

            // Trigger an event handler when application looses focus (see note in handler).

            stage.addEventListener(Event.DEACTIVATE, deactivate);

           

            setupStarling();

                       

           

        }

       

         private function setupStarling():void {

            // Get the preferred stage size based on our smallest target resolution

            var stageArea:Rectangle = new Rectangle(0, 0, STAGE_WIDTH, STAGE_HEIGHT);

           

            // Get the fullscreen size available

            var fullscreenArea:Rectangle = new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

           

            // Fit the stage to the full screen. ScaleMode.SHOW_ALL ensures that everything will be visible (not croping will occur).

            var viewport:Rectangle = RectangleUtil.fit(stageArea, fullscreenArea, ScaleMode.SHOW_ALL);

           

            // Create a new instance and pass our class, the stage and the wished viewport

            _starling = new Starling(Test, stage, viewport);

           

            // Show debug stats

            _starling.showStats = true;

           

            // Define level of antialiasing,

            _starling.antiAliasing = 1;

           

            // Set to our preferred stage size

            _starling.stage.stageWidth = STAGE_WIDTH;

            _starling.stage.stageHeight = STAGE_HEIGHT;

           

            _starling.start();

        }

       

       

        private function deactivate(e:Event):void {

            // Auto-close the application when it looses focus. This is what you want

            // to do if you don't want that your application continues to run in the

            // background if the user switch program, answer a call or anything else

            // that would cause your application to lose focus.

            //

            // If you want to keep it running you should at least pause it until the

            // user returns. That's achieved by calling _starling.stop(). You should

            // also add an event listener for the Event.ACTIVATE event that will

            // trigger _starling.start() once the application get's focus again.

            //

            NativeApplication.nativeApplication.exit();

        }

    //************************ END OF CLASS *****************************       

    }   

   

//************************ END OF PACKAGE *****************************           

}

Test.as

package

{

    //Use this to test

   

    import flash.filesystem.File;

    import starling.core.Starling;

    import starling.display.Image;

    import starling.display.Sprite;

    import starling.events.Event;

    import starling.textures.Texture;

    import starling.utils.AssetManager;

    import starling.utils.StringUtil;

   

   

    //This is the splash screen   

    public class Test extends Sprite

    {

       

       

        private var scaleFactor:int = Math.round(Starling.contentScaleFactor);

       

        private var appDir:File = File.applicationDirectory;

        private var assets:AssetManager = new AssetManager(scaleFactor);

        private var purpleBackground:Image;

        private var bubble:Image;

       

        //Contructor

        public function Test()

        {

           

            this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

       

        }

       

        private function onAddedToStage(e:Event):void

        {

            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);

            trace("Test screen Initialized");

           

           

        trace ("--------------------------------------");

        trace ("(int)scaleFactor is: " + scaleFactor);

        trace ("Starling Stage Width is: " + Starling.current.stage.stageWidth);

        trace ("Starling Stage Height is: " + Starling.current.stage.stageHeight);

        trace (" ");

        trace ("Starling Content Scale Factor is: " + Starling.contentScaleFactor);

        trace ("Starling Native Stage Width is: " + Starling.current.nativeStage.stageWidth);

        trace ("Starling Native Stage Height is: " + Starling.current.nativeStage.stageHeight);

        trace ("--------------------------------------");

           

       

            assets.enqueue(

            //appDir.resolvePath("audio"),

            appDir.resolvePath(StringUtil.format("assets/{0}x",    scaleFactor))

            );

           

           

           

           

            assets.loadQueue(function(ratio:Number):void

            {

                trace("Loading assets, progress:", ratio);

                // -> When the ratio equals '1', we are finished.

                if (ratio == 1.0)

                    drawSplashScreen();

            });

           

       

        }

       

        //Creates the first splash scene with Starling movie clips coming from the sprite sheet.

        private function drawSplashScreen():void

        {

            //Purple background

            var texture:Texture = assets.getTexture("backgroundPurple");

            purpleBackground = new Image(texture);

            this.addChild(purpleBackground);

           

            var textureBubble:Texture = assets.getTexture("bubble");

            bubble = new Image(textureBubble);

            bubble.pivotX = bubble.width / 2;

            bubble.pivotY = bubble.height;

            bubble.x = stage.stageWidth / 2;

            bubble.y = stage.stageHeight +10;

            this.addChild(bubble);           

        }           

   

        //************************ END OF CLASS *****************************

    }

    //************************ END OF PACKAGE *****************************

}

XML file

<?xml version="1.0" encoding="utf-8"?>

<application xmlns="http://ns.adobe.com/air/application/21.0">

  <id>com.test.testproject</id>

  <versionNumber>1.0</versionNumber>

  <supportedProfiles>mobileDevice</supportedProfiles>

  <filename>TestProject</filename>

  <name>

   <text xml:lang="en">TestProject</text>

  </name>

  <copyright>Me</copyright>

  <android>

   <manifestAdditions><![CDATA[<manifest android:installLocation="auto">

<uses-sdk android:minSdkVersion="8" />

<uses-permission android:name="android.permission.INTERNET" />

<uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch" />

</manifest>]]></manifestAdditions>

  </android>

  <iPhone>

   <InfoAdditions><![CDATA[<key>UIStatusBarStyle</key>

<string>UIStatusBarStyleBlackOpaque</string>

<key>UIRequiresPersistentWiFi</key>

<string>NO</string>

<key>UIApplicationExitsOnSuspend</key>

<true />

<key>UIDeviceFamily</key>

<array>

<string>1</string>

<string>2</string>

</array>]]></InfoAdditions>

   <requestedDisplayResolution>high</requestedDisplayResolution>

  </iPhone>

  <initialWindow>

   <title>TestProject</title>

   <content>TestProject.swf</content>

   <visible>true</visible>

   <fullScreen>true</fullScreen>

   <autoOrients>true</autoOrients>

   <aspectRatio>landscape</aspectRatio>

   <renderMode>direct</renderMode>

   <!--<depthAndStencil>true</depthAndStencil>-->

   <!-- required for 3D -->

   <systemChrome>standard</systemChrome>

   <requestedDisplayResolution>high</requestedDisplayResolution>

  </initialWindow>

  <icon>

   <image29x29>icons/29.png</image29x29>

   <image57x57>icons/57.png</image57x57>

   <image114x114>icons/114.png</image114x114>

   <image512x512>icons/512.png</image512x512>

   <image48x48>icons/48.png</image48x48>

   <image72x72>icons/72.png</image72x72>

   <image50x50>icons/50.png</image50x50>

   <image58x58>icons/58.png</image58x58>

   <image100x100>icons/100.png</image100x100>

   <image144x144>icons/144.png</image144x144>

   <image1024x1024>icons/1024.png</image1024x1024>

   <image76x76>icons/76.png</image76x76>

   <image80x80>icons/80.png</image80x80>

   <image120x120>icons/120.png</image120x120>

   <image152x152>icons/152.png</image152x152>

   <image40x40>icons/40.png</image40x40>

   <image180x180>icons/180.png</image180x180>

   <image60x60>icons/60.png</image60x60>

   <image75x75>icons/75.png</image75x75>

   <image87x87>icons/87.png</image87x87>

   <image167x167>icons/167.png</image167x167>

  </icon>

  <!--

AIR options:

<a href="http://livedocs.adobe.com/flex/3/html/File_formats_1.html#1043413" rel="nofollow">http://livedocs.adobe.com/flex/3/html/File_formats_1.html#1043413</a>

AIR mobile options:

<a href="http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-7ffe.html" rel="nofollow">http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-7ffe.html</a>

iOS icons guidelines:

<a href="http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImage..." rel="nofollow">http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html</a>

Android manifest documentation:

<a href="http://developer.android.com/guide/topics/manifest/manifest-intro.html" rel="nofollow">http://developer.android.com/guide/topics/manifest/manifest-intro.html</a>

-->

  <supportedLanguages>en</supportedLanguages>

  <description>

   <text xml:lang="en">

   </text>

  </description>

</application>

TOPICS
Development

Views

2.0K

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
Adobe Employee ,
Aug 26, 2016 Aug 26, 2016

Copy link to clipboard

Copied

Hi Baker,

You have to use respective launch images of below sizes for iPad Pro and iPhone 6 Plus:

(1.) iPad Pro:

Default-Portrait@2x~ipad.png (2048 x 2732)

Default-Landscape@2x~ipad.png (2732 X 2048)

(2.) iPhone 6 Plus

Default-414w-736h@3x.png (1242 x 2208)

Default-Landscape-414w-736h@3x.png (2208 x 1242)

Please share your results if it works for you.

Thanks,

Adobe AIR Team

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
Engaged ,
Aug 26, 2016 Aug 26, 2016

Copy link to clipboard

Copied

I'm developing for landscape. Should I still include the portrait versions?

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
Engaged ,
Aug 28, 2016 Aug 28, 2016

Copy link to clipboard

Copied

Shouldn't Starling or Flash fit the graphics into the screen? I'm noticing that whenever the graphics don't fit the screen I get letter box. I have assets at the following sizes:

(4x) 1920 x 1280

(3x) 1440 x 960

(2x) 960 x 640

(1x) 480 x 320

Here are the results when I test on the following devices:

iPhone (480 x 320)

scaleFactor:1

Asset size I'm adding to stage: 480 x 320

Result: OKAY

iPad (1024 x 768)

scaleFactor: 2

Asset size I'm adding to stage: 960 x 640

Result: FAILED - Letter box on top and bottom

iPhone6 (1334 x 750)

scaleFactor: 2

Asset size I'm adding to stage: 960 x 640

Result: FAILED - Letter box on left and right

iPhone6Plus (2208 x 1242)

scaleFactor: 2208 x 1242

Asset size I'm adding to stage: 1920 x 1280

Result: FAILED - Letter box on left and right

iPhoneRetina (960 x 640)

scaleFactor: 2

Asset size I'm adding to stage: 960 x 640

Result: OKAY

NexusOne (800 x 400)

scaleFactor: 1.5 (rounded up to 2)

Asset size I'm adding to stage: 960 x 640

Result: FAILED - Letter box on left and right

If Starling/Flash is not fitting the assets to the stage then should I just include assets for the actual stage size of the various iPhones and iPads, etc? I thought I would have to do this.

Very confused and frustrated right now.

Here are my launch image sizes:

Default~iphone.png

Default@2x~iphone.png

Default-568h@2x~iphone.png

Default-375w-667h@2x~iphone.png

Default-414w-736h@3x~iphone.png

Default-Landscape-414w-736h@3x~iphone.png

Default-Portrait~ipad.png

Default-PortraitUpsideDown~ipad.png

Default-Landscape~ipad.png

Default-LandscapeRight~ipad.png

Default-Portrait@2x~ipad.png

Default-PortraitUpsideDown@2x~ipad.png

Default-LandscapeLeft@2x~ipad.png

Default-LandscapeRight@2x~ipad.png

Default-Portrait@2x~ipad.png

Default-Landscape@2x~ipad.png

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
Adobe Employee ,
Aug 28, 2016 Aug 28, 2016

Copy link to clipboard

Copied

Hi Baker,

I had a look at your code and observed that you are using stage. scaleMode = StageScaleMode.NO_SCALE;

Please try packaging your application using stage.scaleMode = StageScaleMode.EXACT_FIT;

Kindly refer to the below link for more information about scale modes:

StageScaleMode - Adobe ActionScript® 3 (AS3 ) API Reference

Thanks,

Adobe AIR Team

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
Engaged ,
Aug 29, 2016 Aug 29, 2016

Copy link to clipboard

Copied

I am posting the results from two examples, Coding Example #1 (above in the original post) AND Coding Example #2 (below). FYI, I tried

EXACT_FIT and got the same results.

Observations:

1)  There are no issues with  iPhone and iPhone Retina

2) I got mixed results with iPhone 6.

3) iPad and iPhone6 Plus failed both times.

4) I'm surprised about the iPad results because of the following code that considers the size of the screen.

        var isPad:Boolean = (screenWidth == 1024 || screenWidth == 2048);

        trace(starling.stage.stageWidth);

        starling.stage.stageWidth  = isPad ? 512 : 480;

        starling.stage.stageHeight = isPad ? 384 : 320;

Here are the results:

testingResults.JPG

I used Main2.(Coding Example #2):

package

{

    import flash.desktop.NativeApplication;

    import flash.display.Sprite;

    import flash.display.StageAlign;

    import flash.display.StageScaleMode;

    import flash.events.Event;

    import flash.geom.Rectangle;

    import starling.core.Starling;

    import starling.utils.ScaleMode;

   

   

    public class Main2 extends Sprite

    {

        private var starling: Starling

       

        public function Main2()

        {   

       

            setupStarling();

            stage.scaleMode = StageScaleMode.EXACT_FIT;

            stage.align = StageAlign.TOP_LEFT;

                       

           

        }

       

        private function setupStarling():void

        {

        var screenWidth:int  = stage.fullScreenWidth;

        var screenHeight:int = stage.fullScreenHeight;

        var viewPort:Rectangle = new Rectangle(0,0, screenWidth, screenHeight)   

        

        //starling = new Starling(Test, stage, viewPort);

        starling = new Starling(Test, stage, new Rectangle(0,0,screenWidth, screenHeight));

       

        var isPad:Boolean = (screenWidth == 1024 || screenWidth == 2048);

        trace(starling.stage.stageWidth);

        starling.stage.stageWidth  = isPad ? 512 : 480;

        starling.stage.stageHeight = isPad ? 384 : 320;

        starling.showStatsAt("left", "top", 1);

        trace("The view port is: ", viewPort);

        starling.start();

       

        }

       

       

        /*private function deactivate(e:Event):void

        {

           

            //NativeApplication.nativeApplication.exit();

        }*/

       

    }

}

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
Adobe Employee ,
Aug 29, 2016 Aug 29, 2016

Copy link to clipboard

Copied

Hi Baker,

Thank you for your reply.

It would be helpful to us if you can share a sample application with us. We will be able to look into the issue more closely.

Thanks,

Adobe AIR Team

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
Engaged ,
Sep 01, 2016 Sep 01, 2016

Copy link to clipboard

Copied

Here is the link for the project.

I'm using Flash Develop. I have included all of the assets: icons, launch images, and images at different resolutions. Just for review:

1) I am using Starling and developing for both iPad and iPhone.

2) I have developed assets at 4 sizes: (4x) 1920 x 1280, (3x) 1440 x 960, (2x) 960 x 640, (1x) 480 x 320.

3) The Main.as file determines the screen size and then loads the appropriate assets: 4x, 3x, 2x, or 1x.

Please let me know if you have any questions.

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
Adobe Employee ,
Sep 05, 2016 Sep 05, 2016

Copy link to clipboard

Copied

LATEST

Hi Baker,

I tried packaging your project using command line with below command:

bin/adt -package -target ipa-app-store -provisioning-profile **PROFILE** -storetype pkcs12 -keystore **CERTIFICATE** -storepass **PASSWORD** Test.ipa application.xml fdTestingMultipleScreens.swf assets/ icons/ Default-375w-667h@2x\~iphone.png Default-414w-736h@3x\~iphone.png Default-568h@2x\~iphone.png Default-Landscape-414w-736h@3x\~iphone.png Default-Landscape@2x\~ipad.png Default-Landscape\~ipad.png Default-LandscapeLeft@2x\~ipad.png Default-LandscapeRight@2x\~ipad.png Default-LandscapeRight\~ipad.png Default-Portrait@2x\~ipad.png Default-Portrait\~ipad.png Default-PortraitUpsideDown@2x\~ipad.png Default-PortraitUpsideDown\~ipad.png Default@2x\~iphone.png Default\~iphone.png

The ipa got packaged successfully and I then tested it on iPad Pro and iPhone 6+.

But when I launch IPA on these devices, it just shows the red launch screens and then a white screen reflects. The swf file that you provided is not able to launch further assets.

Will you please guide me further how to use the project provided by you using command line.

Thanks,

Adobe AIR Team

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