Highlighted

Can't get proper pixel size of iOS devices

Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

I'm testing an iOS app made in Animate CC on an iPhone 7 Plus.

Allegedly the (portrait) resolution is 1080x1920px

(according to this: Displays )

Everything works great when I test it inside Animate, no matter what I set the size to.

But testing on the phone, using stage.fullScreenHeight (/Width), it thinks the phone is 640x960.  At least that's what it echos back when I ask in the app while testing.

I found other threads that suggested using Capabilities.screenResolutionX (/Y)

That yielded the exact same result.. 640x960.

Another thread said the launch images dictate the resolution, so I created all the required (portrait) launch images according to this: Launch Images on iOS with Adobe AIR  I appended all the png images in the "AIR for iOS" Settings.

Interestingly, according to this, the 7 Plus is 1242x2208px

Why are two pages reporting different sizes?  At least it's the same ratio.. Well, the code is meant to accommodate sizing on all devices so it shouldn't really matter but anyway...

The point is, sizing works beautiful testing within Animate.  But I can't get it to work on devices, mainly the iPhone 7+ but I've also tested the iPhone X and two sizes of iPad and they all look pretty bad.  Why isn't it picking up the launch image(s)?  Why does it think the phone is 640x960???

TOPICS
Development

Views

1.9K

Likes

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

Can't get proper pixel size of iOS devices

Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

I'm testing an iOS app made in Animate CC on an iPhone 7 Plus.

Allegedly the (portrait) resolution is 1080x1920px

(according to this: Displays )

Everything works great when I test it inside Animate, no matter what I set the size to.

But testing on the phone, using stage.fullScreenHeight (/Width), it thinks the phone is 640x960.  At least that's what it echos back when I ask in the app while testing.

I found other threads that suggested using Capabilities.screenResolutionX (/Y)

That yielded the exact same result.. 640x960.

Another thread said the launch images dictate the resolution, so I created all the required (portrait) launch images according to this: Launch Images on iOS with Adobe AIR  I appended all the png images in the "AIR for iOS" Settings.

Interestingly, according to this, the 7 Plus is 1242x2208px

Why are two pages reporting different sizes?  At least it's the same ratio.. Well, the code is meant to accommodate sizing on all devices so it shouldn't really matter but anyway...

The point is, sizing works beautiful testing within Animate.  But I can't get it to work on devices, mainly the iPhone 7+ but I've also tested the iPhone X and two sizes of iPad and they all look pretty bad.  Why isn't it picking up the launch image(s)?  Why does it think the phone is 640x960???

TOPICS
Development

Views

1.9K

Likes

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
Nov 07, 2018 0
Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

I understand the newer models do some kind of 2x, 3x scaling magic, but that still doesn't explain why the app thinks the phone has a ratio of 1.5, because it's more like 1.78...  very strange.  Where is it getting 640x960 from?  It's not what the stage is set to or anything..

Likes

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
Reply
Loading...
Nov 07, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

The one that determine whether the phone is old iPhone ratio or 9:16 ratio, is  Default-568h@2x.png. It might also be named Default-568h@2x~iphone.png, I tend to include both of those. Once that is in place an iPhone 5 will fill its 640x1136 instead of 640x960, and all other 9:16 or greater phones will show at least that much. For iPhone X you need other splash screens for it to fill the full height of those phones.

So, although you're testing iPhone 7 Plus, make sure to include the iPhone 5 Default-568h@2x~iphone.png image.

Likes

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
Reply
Loading...
Nov 07, 2018 0
Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

Thanks Colin.  I do believe I have that...

Btw, I got to re-test on my ipads now with the size trace statements, and I believe they are actually tracing correctly, both saying 1536x2048, and they both fill the screen and look crisp.  I don't see the splash screen pop up though, so I'm not sure if it's registering (is it just too fast to see when testing?)

I'm seeing that the first two launch images are actually 640x960.. the ones for the iPhone 4.  Maybe I should take those out?  Are they overriding the others?

Likes

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
Reply
Loading...
Nov 07, 2018 0
Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

Is the order in which they are added to the "AIR for iOS" settings important?

Likes

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
Reply
Loading...
Nov 07, 2018 0
Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

Weird.. I removed the two images for the iPhone 4/640x960 size and that didn't help either..

Where is it pulling this size from? O_O

Likes

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
Reply
Loading...
Nov 07, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

Might be worth duplicating the Default-568h@2x~iphone.png and name the other one as Default-568h@2x.png.

Here's the list of files I'm now including (some of these are probably not needed for a portrait app):

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

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

Default-568h@2x.png

Default-568h@2x~iphone.png

Default-812h@3x~iphone.png

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

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

Default-Landscape-568h@2x~iphone.png

Default-Landscape-812h@3x~iphone.png

Default-Landscape-1112h@2x.png

Default-Landscape-1792h@2x.png

Default-Landscape-2688h@3x.png

Default-Landscape@2x.png

Default-Landscape@2x~ipad.png

Default-Landscape~ipad.png

Default-Portrait-1792h@2x.png

Default-Portrait-2688h@3x.png

Default-Portrait@2x.png

Default@2x~iphone.png

Default~iphone.png

The list includes the ones needed for iPhone XS Max and XR. I expect I'm missing some portrait ones.

Likes

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
Reply
Loading...
Nov 07, 2018 0
Adobe Community Professional ,
Nov 07, 2018

Copy link to clipboard

Copied

The order doesn't matter.

Likes

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
Reply
Loading...
Nov 07, 2018 0
Advocate ,
Nov 08, 2018

Copy link to clipboard

Copied

What scaleMode are you using?

Likes

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
Reply
Loading...
Nov 08, 2018 1
Contributor ,
Nov 08, 2018

Copy link to clipboard

Copied

Thanks Colin.  I'm missing some of the larger X ones, so I've added those.  I also found yet another list of launch images and added some more.  I've added everythign that could be linked to a 7+ or predecessor.  No change.

I don't see the launch image at all though.. not on any device.  I found my old app from last year, where this worked, and the launch image can be seen flashing by for a second (it's a different colour.. I didn't take Apple's advice to make it look like the opening screen so it's obvious when it flashes by).

If I don't see it on any device, does that mean it's not being read?  The IPA is 15 MB.  The old game where I can see it flash was 11 MB.

Likes

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
Reply
Loading...
Nov 08, 2018 0
Contributor ,
Nov 08, 2018

Copy link to clipboard

Copied

I was using NO_SCALE, because that's what I used in the app I made last year, where everything worked fine.  I have also tried not specifying one at all.

Right now I tried EXACT_FIT and it messed things up in a different way, but it's still a 1.5 ratio on the 7+, BUT, some news, it's now broken on the iPad as well, where it was working previously.  FullScreen is checked off now as well.

So what I'm gathering is, my code for resizing individual things in the app is probably working okay.  It's just got the wrong stage size for some reason.

What combination of settings is best practice?

I want my app to fill the screen completely.

I have code that then resizes individual movieclips based on the screensize.

But if my launch image isn't flashing by, then I should probably solve that first, right?

Likes

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
Reply
Loading...
Nov 08, 2018 0
Contributor ,
Nov 08, 2018

Copy link to clipboard

Copied

I deleted all my launch images, and replaced them with a generic set from the internet and.. it worked! 😮

Immediately the app filled the whole screen on the iphone 7+, iphone X, and both ipads.

But I had to uncheck FullScreen and return scalemode to NO_SCALE (and turn on stage.align = StageAlign.TOP_LEFT;)

Now it's all perfect!

They don't seem to have sizes I was missing though.  I don't know what the issue was.

I'm trying to compare my launch images to the downloaded ones.  One difference I see is that mine are significantly larger in size.. about 100x larger (eg. 121 KB vs 150 bytes).  I wasn't focusing on optimizing them at this point.. Ironically, I generated them in Animate with the image export option.  Interesting.

Thanks everyone!!!

Likes

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
Reply
Loading...
Nov 08, 2018 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

Can you say where you got the generic ones from?

These days I just use a flat color for the splash screen, and the color is the average of the colors in my title screen. That makes it less jarring than coming from black or white. The total size of the 20 splash screens I have is only 600 kb.

Likes

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
Reply
Loading...
Nov 08, 2018 0
Contributor ,
Nov 08, 2018

Copy link to clipboard

Copied

Yeah, it's this github set here: GitHub - mesmotronic/air-ios-launch-images: Blank launch images for use with Adobe AIR for iOS

I like your idea of an average colour.

My app has a randomized start so screenshot isn't an option.  But now I'm thinking I should just make the launch image lead into a splash screen.  Brand things a bit more.  Just gotta figure out how not to break these images haha.

Likes

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
Reply
Loading...
Nov 08, 2018 0
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

Thanks. These are ones that I had that they don't have:

Default-568h@2x.png

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

Default-Landscape-568h@2x~iphone.png

Default-Landscape-2688h@3x.png

Default-Landscape-1792h@2x.png

Default-Landscape@2x~ipad.png

Default-Portrait-1792h@2x.png

Default-Portrait-2688h@3x.png

and these are ones they have that I didn't have:

Default-PortraitUpsideDown~ipad.png

Default-Portrait@2x~ipad.png

Default-Portrait~ipad.png

Default-PortraitUpsideDown@2x~ipad.png

Default-LandscapeLeft@2x~ipad.png

Default-LandscapeRight@2x~ipad.png

Default-LandscapeRight~ipad.png

Default-Portrait-1112h@2x.png

Most times you're doing either portrait or landscape, and many of them won't be needed. Also some of the variations within landscape or portrait  won't be needed, like the upside down ones, left or right variations, etc.

I think I will add in the ones I was missing.

Likes

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
Reply
Loading...
Nov 08, 2018 1
Contributor ,
Nov 08, 2018

Copy link to clipboard

Copied

Np and thanks!  Good idea.

I removed all the landscape and odd (upsidedown) ones from my app, because I only want it to work in portrait mode, and so far so good at least.

Likes

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
Reply
Loading...
Nov 08, 2018 0
Enthusiast ,
Nov 08, 2018

Copy link to clipboard

Copied

Just wanted to add a link to Adobe's info on the subject: http://blogs.adobe.com/airodynamics/2015/03/09/launch-images-on-ios-with-adobe-air/

I've also read on the Starling forums that the iPad Pro might need both “Portrait” and “Landscape” versions of the file, even if the app only supports one orientation. I haven't yet been able to test if this is true though.

Likes

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
Reply
Loading...
Nov 08, 2018 0
Enthusiast ,
Nov 08, 2018

Copy link to clipboard

Copied

Also, from the Starling forums:

"Default-828h@2x~iphone" => "828x1792", # iPhone Xr

"Default-1242h@3x~iphone" => "1242x2688", # iPhone Xs Max

"Default-Landscape-828h@2x~iphone" => "1792x828", # iPhone Xr Landscape

"Default-Landscape-1242h@3x~iphone" => "2688x1242", # iPhone Xs Max Landscape

Might be worth adding them as well.

Likes

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
Reply
Loading...
Nov 08, 2018 0
Contributor ,
Nov 09, 2018

Copy link to clipboard

Copied

Thanks Lars!

So, I went back and tried to re-make more complex launch images, but using the github images as templates (to make sure file names and pixel sizes stay the same) and... it doesn't work!

So in this case at least, it's not the file names.. it's not the sizes.. I'm not missing a set etc.  There's just something about the way I'm saving my png files that either adobe or apple isn't accepting.  I used Photoshop this time, and made the files smaller (10 KB vs 100 KB), but that didn't work.  After more googling, I read that "interlaced" pngs are not recommended.  I couldnt' tell what I had, so I re-saved all my files using "Save for Web" to make sure that they are NOT interlaced.  That didn't work either.

I'm re-marking the question as un-answered since using the github images is more of a hack than an answer haha.

I'm attaching one of the new images, in case anyone has any idea if there's anything about the formatting that I'm doing wrong?  The weird thing is, I used the same process with my first app, one or two years ago, and the images worked fine! Arg.

Default@2x~iphone.png

Likes

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
Reply
Loading...
Nov 09, 2018 0
Contributor ,
Nov 09, 2018

Copy link to clipboard

Copied

Okay.. this is insanity.

I tried simply taking the github images as templates and changing the colour to a different flat colour.  I'm thinking, that will be much better for file size, and I'll just program the splash screen to appear after the colour.. Kind of what Colin was saying about the colour being less disruptive.

In Photoshop I switched the Mode to RGB, changed the colour, then switched back to Indexed, no transparency, exact, 1 colour, save as new png, NOT interlaced.

These images are about 5KB.  Not sure how to get them smaller, or if it matters.  Anyway.. this didn't work either!!!  So, exporting images out of Animate didn't work.  Saving images, multiple ways, out of Photoshop didn't work.  How are you guys saving your files?

I'm attaching one of these new files to see if anyone has any idea.

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

Likes

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
Reply
Loading...
Nov 09, 2018 0
Advocate ,
Nov 09, 2018

Copy link to clipboard

Copied

You are doing the assets.car stuff right?

Likes

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
Reply
Loading...
Nov 09, 2018 0
Contributor ,
Nov 09, 2018

Copy link to clipboard

Copied

I don't know.. I'm just doing everything inside Animate CC and exporting from there..

Likes

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
Reply
Loading...
Nov 09, 2018 0
Adobe Community Professional ,
Nov 09, 2018

Copy link to clipboard

Copied

Assets.car is needed for making the app icons. I use this online tool to make those:

Generate ios、android app ICON and Assets.car online

Give it a 1024x1024 icon, and it will give you all the icons you need for older iOS, Asset.car for new iOS, and Android.

The problem with your splash screens is perhaps that you are using indexed color. There isn't a file size issue, but I think iOS wants RGB images. Don't think the transparency setting matters.

Likes

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
Reply
Loading...
Nov 09, 2018 0
Adobe Community Professional ,
Nov 09, 2018

Copy link to clipboard

Copied

I see that the GitHub images are index too, so that suggests they should work. I would still try RGB.


About the Assets.car file, once you have made it you would add it to the files in General, same place you're adding the splash screens.

Likes

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
Reply
Loading...
Nov 09, 2018 0
Contributor ,
Nov 14, 2018

Copy link to clipboard

Copied

Thanks Colin.

Yeah, exactly.. the github aren't RGB and they are indexed, that's why I tried it that way.  I would think if Apple chose PNG files, it would be for their excellent compression, and limiting the colours is a big part of that capability, as I understand.  It wouldn't be logical for them to want RGB O.o

So right now I'm running with the generic black images, leading to the dark maroon splash screen.. It's not too jarring but I wonder if this would prevent me getting approved.  Guess we'll find out.

What still confuses me is that a year or two ago I had no trouble.  I wonder what changed.  I wish Apple would be a bit more explicit with their requirements and sizes.

Likes

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
Reply
Loading...
Nov 14, 2018 0
Adobe Community Professional ,
Nov 14, 2018

Copy link to clipboard

Copied

I see that sending RGB images through tinypng.com both reduces them to the small size and makes them be indexed. I'm about to have an app update submitted, but as it's a client that will do their own submitting I'm hesitant to test whether it would work! The 28 splash screens I have only total 634k, so that's not a huge overhead.

Likes

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
Reply
Loading...
Nov 14, 2018 0
Contributor ,
Nov 14, 2018

Copy link to clipboard

Copied

Hey, so I tried putting them through tinypng.com.  It compressed them some 90+% which is nice but... these don't work either!  This is nuts!  I guess I have no choice but to stick with the black ones.

So it's not the file size, and from earlier tests I know it's not the pixel dimensions or naming of the images.  I guess it could still be some really obscure formatting setting that I haven't discovered, but I find that hard to believe.   I expect putting them through tinypng would override any weird formatting I could have had?  And I don't technically know if this is Adobe or Apple that's having the issue.

Likes

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
Reply
Loading...
Nov 14, 2018 0
Adobe Community Professional ,
Nov 14, 2018

Copy link to clipboard

Copied

You could do a test where you put a number on the splash screens, then make them be indexed color, and watch to see which image iOS shows you. You may see a brief flash of one than another. If the first one that is used makes sense for that device, but the second one doesn't make sense, it's Adobe's fault. If the first is not right too, it's Apple's fault.

There have been cases in the past where the first splash screen is correct, and the second one isn't, and it was something Adobe could fix.

Likes

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
Reply
Loading...
Nov 14, 2018 0
Contributor ,
Nov 14, 2018

Copy link to clipboard

Copied

Well, it's funny that you say that..

I just tried a test with my *old* launch images from my old app, but on the new app.  At first, on my phone, they didn't work.  This wasn't surprising as this phone probably didn't exist when I made this set.

Then I tried on the larger iPad.  It did work... it pulled up an image, but by the pixelation, I think it was one smaller than what was meant, but the app resolution filled properly regardless. """Success"""

Then I went back and copy/pasted some of the iphone images and gave them names more like the current list of required images and appended those too (eg. Default-414w-736h@3x~iphone.png created from an old Default-736h@3x~iphone6ps.png)

I re-tried the 7+ iphone.  And... It flashes 2, like you're saying!

The first one appears "correct" in aspect ratio, anyway.  It flashes by too quick to gauge the resolution.

Then it quickly switches to one that looks squished.. perhaps the Default@2x~iphone4s.png ?

What does this mean?  What a puzzle!  So there's an Adobe issue going on for sure, but to what extent?  But when neither loads, who's fault is it then?

Likes

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
Reply
Loading...
Nov 14, 2018 0
Contributor ,
Nov 07, 2018

Copy link to clipboard

Copied

I added an additional Default-568h@2x.png image, but that didn't solve it unfortunately

Likes

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
Reply
Loading...
Nov 07, 2018 0
Enthusiast ,
Nov 08, 2018

Copy link to clipboard

Copied

Since you're working in Animate CC, be sure to set resolution to high and check "Full screen" in the AIR for iOS Settings, if you haven't already.

Likes

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
Reply
Loading...
Nov 08, 2018 1
Adobe Community Professional ,
Nov 08, 2018

Copy link to clipboard

Copied

Full screen might only gain a little bit of difference in the height value.

If you are using a scalemode of noScale, use the resize event to get your first reading of the stage size.

Likes

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
Reply
Loading...
Nov 08, 2018 1
Contributor ,
Nov 08, 2018

Copy link to clipboard

Copied

Thanks Lars.  I already had High resolution because it looked awful without it hehe.  I toggle FullScreen now and again and there seems to be no change 😕

Likes

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
Reply
Loading...
Nov 08, 2018 0