Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

How to activate "Optimized for iPhone 6 / iPhone 6 Plus"
Started by ingemar Oct 10 2014 08:15 PM

92 replies to this topic
[TOPIC CONTROLS]
Page 1 of 4 1 2 3 »
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

Acknowledgement: This post was prompted by posts from fellow developers toga and newbieLUA which made me start thinking about how to create a useable workflow for existing Corona developers.

 

It looks like having a UILaunchImages array with launch screens isn't enough to active the "Optimized for iPhone 6, iPhone 6 Plus" tag in the Apple App Store.

 

Apple state that a Launch Screen File is necessary to activate this tag for their new devices. A Launch Screen File is a new feature in Xcode 6 where one file can replace all the previous launch screens we've had to make in the past. This new file is only used by iOS 8 devices, which means if you are targeting previous iOS versions you still need to supply your old PNG files in addition to the new Launch Screen File.

 

The problem is; How can Corona developers get a Launch Screen File into their project?

The good news is it isn't too difficult to achieve. The bad news is having to learn how to use Interface Builder to create your file, however that's out-of-scope of this post.

 

Below are a few simple steps on how to get a Launch Screen File into your Corona project.

 

1. Create a Launch Screen file in Xcode Interface Builder (example: LaunchScreen.xib)

2. Use ibtool --compile LaunchScreen.nib LaunchScreen.xib to compile your Launch Screen File.

3. Copy the nib file to your Corona project's root folder.

4. Add a UILaunchStoryboardName entry to your build.settings file

settings = {
  iphone = {
    plist = {
      UILaunchStoryboardName = "LaunchScreen"
    }
  }
}

Done!

 

Build your app for the Xcode Simulator (remember to choose iOS 8) and you'll see the Launch Screen File being used.

 

 

To create a Launch Screen File in Interface Builder:

• Start Xcode, then select File->New->File...

• Choose "Launch Screen" and give it a name (I use LaunchScreen)

• Design your Launch Screen and save.

 

NOTE: Don't save the Launch Screen (uncompiled xib-file) in your project root directory. You don't want to have it distributed with the app. Only the compiled nib should be in the root folder of your project.



[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

This is quite helpful.  Now to solve having to touch Interface builder.

 

Rob



[TOPIC: post.html]
#3

jonjonsson

[GLOBAL: userInfoPane.html]
jonjonsson
  • Corona Geek

  • 1,051 posts
  • Corona SDK

 

To create a Launch Screen File in Interface Builder:

• Start Xcode, then select File->New->File...
• Choose "Launch Screen" and give it a name (I use LaunchScreen)
• Design your Launch Screen and save.

 

Oh wow, not exactly self explanatory the steps after that (the designing part). I hope Corona comes with up something cool.



[TOPIC: post.html]
#4

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

Oh wow, not exactly self explanatory the steps after that (the designing part).

 

Like I said above, the bad news is having to learn how to use Interface Builder.

 

Xcode's Interface Builder has a learning curve for sure, however once you get the hang of it, designing a launch screen isn't too difficult as there's no interactive content to have to worry about.

 

Unfortunately there's no shortcut to creating it either and I don't think that CoronaLabs will be able to come up with anything useful regarding any form of auto-generated file. It's like trying to auto-generate the app icon. Both depend heavily on what kind of design and content you want.



[TOPIC: post.html]
#5

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 531 posts
  • Corona Staff

Can you please create and share a LaunchScreen file with all images being black?

That would be an easy solution for most apps.



[TOPIC: post.html]
#6

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

No need to have an image in that case. Just set the view's fill color to black.



[TOPIC: post.html]
#7

Prathap Murthy

[GLOBAL: userInfoPane.html]
Prathap Murthy
  • Enthusiast

  • 78 posts
  • Corona SDK

@ingemar

 

What Lerg is saying is --

 

Since you're familiar with Interface Builder and others may not want to familiarize themselves with it at this point in time, you can probably create a black launching screen using Interface Builder, compile it and share the nib file with the Corona community. Everybody else can just inject that nib file into their project folders and build.settings files.

 

I think it's a good suggestion.

 

If somebody doesn't really want a complete black loading screen for iOS 8, then they can overlay some elements on it (like developer logo, "loading..." text etc.) until the game loads fully so that the splash screen is a bit more appealing than just a blank screen. Note that if a game takes a while to load (especially if assets are being preloaded) and just shows a black screen for the entire duration, some users may grow impatient and write a negative review on the app store ("Game doesn't load! All I get is a black screen!!").

 

Those of us who are nitpicky about every detail will obviously try to tame the bull that Interface Builder is. :)



[TOPIC: post.html]
#8

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 531 posts
  • Corona Staff

Thank you, Prathap, that's indeed what I am saying.



[TOPIC: post.html]
#9

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

@Lerg

Sorry for misunderstanding. Since I saw you were Enterprise I thought otherwise...

 

@Everybody

Here's a ZIP file containing the Interface Builder xib and compiled nib. Remember to only include the nib in your project's root folder.

Attached File  BlackScreen.zip   1.44KB   98 downloads

 

It a black screen and the name to use in your build.settings is (surprise!)  "BlackScreen".

 

( I have to admit though... I cringe every time I see an app with a black launch screen  ;) )



[TOPIC: post.html]
#10

Prathap Murthy

[GLOBAL: userInfoPane.html]
Prathap Murthy
  • Enthusiast

  • 78 posts
  • Corona SDK

Thanks man!



[TOPIC: post.html]
#11

newbieLUA

[GLOBAL: userInfoPane.html]
newbieLUA
  • Enthusiast

  • 48 posts
  • Corona SDK

For those that wanted a crash course on Interface Builder, I can suggest watching these 2 videos:

 

http://www.youtube.com/watch?v=mS3CH_bKabw

 

http://www.youtube.com/watch?v=p5wD8dvSDbM

 

I had no prior knowledge on Interface Builder but I was able to create a launch screen after watching those videos plus some exploring on my own. Took couple of hours but now I got my logo (dynamically) center aligned on a colored background.

 

Hope this helps !



[TOPIC: post.html]
#12

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

That was helpful.

 

Rob



[TOPIC: post.html]
#13

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 531 posts
  • Corona Staff

@ingemar, I've been struggling with this LaunchScreen.xib file the whole day.

Please help understanding what am I doing wrong.

 

I've tried Xcode -> New File -> Launch Screen, but it doesn't let me to add any images to it.

According to the tutorial I have created a Single View project and work in it.

Now I can create Image Set and add some images. At this point I have no idea how Universal set of images (1x, 2x, 3x) works on iPad Retina, because there is no 4x. I figured I can avoid using Universal and instead supply 6 versions of the same image (iphone 1x, 2x, Retina 4 2x (iphone 5, 5S), 3x for iphone 6 plus, ipad 1x and 2x). Now where in that list simple iPhone 6, which is 4.7" ?

 

 Live preview of launch screens shows wrong images for some iPhones.

 

After I figured out how to position elements so they are displayed in the center on all devices, I save the project, locate LaunchScreen.xib file and convert it to LaunchScreen.nib file. However the filesize of that nib file is a couple of KB - images are not inside that file. Where should I put all the image sets that are used on the screen?

 

Finally, when I start the iOS simulator, app launches too quick, most of the times I can't see the launch screen and I don't know if elements are positioned correctly on iPhone 6 and 6 Plus.

 

The launch screen is quite simple - background image, logo image at the center, "Loading..." image at the bottom, decorative cap image at the top. Only four images.

 

I had to create 4 * 6 = 24 image files for each device. And that seems to be an overkill for such task.

 

So, any ideas on what's wrong? I don't think I ask too much.



[TOPIC: post.html]
#14

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

@Lerg

All my projects are Enterprise and I use Xcode with asset catalogs which links in to Interface Builder automatically. I assumed that it would be possible to add images to Interface Builder in stand alone mode, but apparently I was wrong. There seems to be a need for a project with some sort of image assets in it.

 

Interface Builder is a b**ch at times I know. Also, I too don't yet understand how the concept of Universal 1x, 2x and 3x works across the different devices. However if you decide to use device specific images you will end up having to create images for each asset when you choose bitmap. If you choose vector you'll only need one image. I toyed around with vectors and it turns out that SVG is not supported :wacko: . For vectors it only accepted PDF. To get the vector image to display as I wanted it, I created the whole launch screen in Adobe Illustrator and saved it as a PDF and used an IB Image View to display it. The Artboard in AI was set to the same size/aspect ratio of the base size in Corona's config.lua so that the generated PDF would scale properly.

FYI. I don't use any of the above for production though. This was only for testing purposes.

 

In production I just use very simple launch screens (with no images). Solid blocks of color and *maybe* some text which can be achieved by adding simple UIViews/UILabels. Sometimes I use image gradients that stretch to fill the entire screen, and in that case I just supply a Universal 1x image in an asset catalog and leave the others (2x, 3x) blank. I don't know how to use asset catalogs in a standard Corona project (non Enterprise). From my understanding, Xcode will compile the catalog into a binary. How that is to be linked into Corona will need to be investigated.

 

I admit that using constraints to dynamically position objects across the different devices is no easy task. To be able to fully understand this, an understanding of the width/height settings of Any/Compact/Regular is needed. I have yet to master this myself since I've hardly touched IB since I started using Corona 4 years ago. 

 

As for which asset is used for the iPhone 6, my current understanding is this:

• 1x: Legacy 3.5" (non-retina)

• 2x: 3.5", 4" and 4.7" 
• 3x: 5.5"
• Retina 4 2x: 4" if the image aspect ratio is different from the 3.5". (image has the same width but a different height)


[TOPIC: post.html]
#15

newbieLUA

[GLOBAL: userInfoPane.html]
newbieLUA
  • Enthusiast

  • 48 posts
  • Corona SDK

@Lerg, I may have a couple pieces of information that could be helpful:

 

  • Turns out the .xib/.nib file is just a "shell" , like a .html file. The images still needs to be carried along with the app.
    • If you right-click on the .xib file in XCode, then "Open as..." , "source code", you will see your images are referenced in some XML nodes <images name="">
    • Those will be your images' file name without extension.
  • In your AppDelegate file, you can set a breakpoint inside the UIApplicationDelegate function to freeze your test app at the launch screen. (Mine environment is Swift, so I placed it right after var window: UIWindow? from a fresh new project (line 15).
  • In the live preview (Interface Builder), no matter what I do those device previews are always wrong.
    • I just lock myself at one device and worked with that interface
    • After having things aligned to just one device, I immediately build & run the project for Simulator.
    • Building for different simulator devices seems to position my logo correctly at runtime.
    • My logo (.png) looks crisp enough on 1x, 2x, and 3x devices from the Simulator. I think on IB's live preview, it'll always show the 1x variation.
  • Again, you'll need to carry your .nib file , and any external image (logo / graphic) files to the Corona project root folder and then build.


[TOPIC: post.html]
#16

Lerg

[GLOBAL: userInfoPane.html]
Lerg
  • Contributor

  • 531 posts
  • Corona Staff

Thank you @newbieLUA and @ingemar,

 

There is a problem with  <images name=""> nodes, as I understand it's not images, but Image Set names and each image set has it's own folder inside Xcode project with 3 or 6 images for different versions. So do I just copy over these image sets or they should be somehow converted?



[TOPIC: post.html]
#17

newbieLUA

[GLOBAL: userInfoPane.html]
newbieLUA
  • Enthusiast

  • 48 posts
  • Corona SDK

@Lerg

 

I could be wrong or are about to introduce a *very* inefficient in solving this problem, but....

 

Based on my results <images name="MyLogo"> is actually the file name that you had in the root folder without any retina @2x or @3x suffix. Although this name "MyLogo" is created when you made the Image Set, but it is also pulling files with such same name at launch.

 

Once found, iOS will grab the correct density automagically (-no suffix-, @2x , @3x)

 

In my example (see attached screenshot), All I have is <images name="MyLogo"> and then the images sitting side-by-side with the .nib file, and it works.

 

Once having those few files ready, I let Corona build the app and then everything got bundled up and it works. I verified this by pulling out all the launch .png files and running the app in iOS8 devices. I was able to see a launch screen so it must be pulling MyLogo + .nib file.

Attached Files



[TOPIC: post.html]
#18

davemikesell

[GLOBAL: userInfoPane.html]
davemikesell
  • Contributor

  • 527 posts
  • Corona SDK

For those that wanted a crash course on Interface Builder, I can suggest watching these 2 videos:

 

http://www.youtube.com/watch?v=mS3CH_bKabw

 

http://www.youtube.com/watch?v=p5wD8dvSDbM

 

I had no prior knowledge on Interface Builder but I was able to create a launch screen after watching those videos plus some exploring on my own. Took couple of hours but now I got my logo (dynamically) center aligned on a colored background.

 

Hope this helps !

 

I'm following the first tutorial and nothing shows up for the launch screen - just a black screen in the Xcode Simulator.   Anyone else have this problem?    I followed the instructions verbatim.



[TOPIC: post.html]
#19

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

I was able to get Xcode to build the nib file but I've not tried to build my app and put it on the device yet.  Perhaps I can get through this tonight.



[TOPIC: post.html]
#20

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

Ingemar and gang.... Are you cool if I use this for this week's tutorial?

 

I'll cover the Xcode bits and provide a default project that sets up a basic Universal launch image project.

 

Rob



[TOPIC: post.html]
#21

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

I'm perfectly cool with it...  B)



[TOPIC: post.html]
#22

roballison182

[GLOBAL: userInfoPane.html]
roballison182
  • Contributor

  • 181 posts
  • Corona SDK

Thanks for the info here guys! How do I actually build the nib file from the xib?

 

Edit: It's in the first post <facepalm.jpg>



[TOPIC: post.html]
#23

dislam

[GLOBAL: userInfoPane.html]
dislam
  • Contributor

  • 179 posts
  • Corona SDK

 

@Lerg, I may have a couple pieces of information that could be helpful:

 

  • Turns out the .xib/.nib file is just a "shell" , like a .html file. The images still needs to be carried along with the app.
    • If you right-click on the .xib file in XCode, then "Open as..." , "source code", you will see your images are referenced in some XML nodes <images name="">
    • Those will be your images' file name without extension.
  • In your AppDelegate file, you can set a breakpoint inside the UIApplicationDelegate function to freeze your test app at the launch screen. (Mine environment is Swift, so I placed it right after var window: UIWindow? from a fresh new project (line 15).
  • In the live preview (Interface Builder), no matter what I do those device previews are always wrong.
    • I just lock myself at one device and worked with that interface
    • After having things aligned to just one device, I immediately build & run the project for Simulator.
    • Building for different simulator devices seems to position my logo correctly at runtime.
    • My logo (.png) looks crisp enough on 1x, 2x, and 3x devices from the Simulator. I think on IB's live preview, it'll always show the 1x variation.
  • Again, you'll need to carry your .nib file , and any external image (logo / graphic) files to the Corona project root folder and then build.

 

 

How did you manage to center the logo image for every device?  Whenever I switch between iPhone 4, 5, 6, iPad, etc., the Interface Builder messes up the alignment of the image.  I don't think I'm doing the constraints correctly.



[TOPIC: post.html]
#24

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 24,865 posts
  • Corona Staff

The video that @newbieLua posted above:  

 

should show you how to build a universal storyboard and center things.  I screwed it up several times before I finally got it right.

 

Rob



[TOPIC: post.html]
#25

newbieLUA

[GLOBAL: userInfoPane.html]
newbieLUA
  • Enthusiast

  • 48 posts
  • Corona SDK

hello @dislam, my launchscreen doesn't align too when switching between devices inside IB.

But I lined it up with just one device and then immediately compile + build it into my project. I didn't switch to another device inside Interface Builder... 

 

It actually works everywhere, my logos was lined up regardless which devices I tested on.

 

I must have missed something but I just opened my .nib file again and it behaves the same ---- it doesn't line up when switching device views inside Interface Builder. And this exact file lines compiled and lines up perfectly on my devices.

 

 

 

And thanks @Rob for the tutorial and followups on this.




[topic_controls]
Page 1 of 4 1 2 3 »
 
[/topic_controls]