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
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:
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>
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
Copy link to clipboard
Copied
I'm developing for landscape. Should I still include the portrait versions?
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
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
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:
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();
}*/
}
}
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
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.
Copy link to clipboard
Copied
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