How do I replace PhoneGap's default splash screen?

Get help using Construct 2

Post » Wed Dec 17, 2014 2:28 am

How can I get my own custom splash screens and icons to show up when using PhoneGap? I assumed this was done by editing the config.xml file of an exported C2 project, prior to zipping it for a PhoneGap build, but adding the following code to my config.xml hasn't worked...

Code: Select all
   <icon src="icon.png" />
   <gap:splash src="splash.png" />
   
   <!-- iPhone 6 / 6+ -->
   <icon src="[email protected]" gap:platform="ios" width="180" height="180" />

   <!-- iPhone / iPod Touch  -->
   <icon src="icon-60.png" gap:platform="ios" width="60" height="60" />
   <icon src="[email protected]" gap:platform="ios" width="120" height="120" />

   <!-- iPad -->
   <icon src="icon-76.png" gap:platform="ios" width="76" height="76" />
   <icon src="[email protected]" gap:platform="ios" width="152" height="152" />

   <!-- Settings Icon -->
   <icon src="icon-small.png" gap:platform="ios" width="29" height="29" />
   <icon src="[email protected]" gap:platform="ios" width="58" height="58" />

   <!-- Spotlight Icon -->
   <icon src="icon-40.png" gap:platform="ios" width="40" height="40" />
   <icon src="[email protected]" gap:platform="ios" width="80" height="80" />

   <!-- iPhone and iPod touch -->
   <gap:splash src="Default.png" gap:platform="ios" width="320" height="480" />
   <gap:splash src="[email protected]" gap:platform="ios" width="640" height="960" />

   <!-- iPhone 5 / iPod Touch (5th Generation) -->
   <gap:splash src="[email protected]" gap:platform="ios" width="640" height="1136" />

   <!-- iPhone 6 -->
   <gap:splash src="[email protected]" gap:platform="ios" width="750" height="1334" />
   <gap:splash src="[email protected]" gap:platform="ios" width="1242" height="2208" />
   <gap:splash src="[email protected]" gap:platform="ios" width="2208" height="1242" />

   <!-- iPad -->
   <gap:splash src="Default-Portrait.png" gap:platform="ios" width="768" height="1024" />
   <gap:splash src="Default-Landscape.png" gap:platform="ios" width="1024" height="768" />

   <!-- Retina iPad -->
   <gap:splash src="[email protected]" gap:platform="ios" width="1536" height="2048" />
   <gap:splash src="[email protected]" gap:platform="ios" width="2048" height="1536" />


I included all iOS 7.0+ icons, iOS 6.1 icons, and all splash screen files (properly named and sized) in the exported C2 project folder prior to zipping it for a PhoneGap build. However, none of my icons or splash screens show up after installing the .ipa file through iTunes and running the app on a test phone. Instead I get PhoneGap's default splash screen and missing icons.

PhoneGap provides some documentation on how to include iOS icons and splash screens here (http://docs.build.phonegap.com/en_US/co ... %20Screens), but perhaps I'm going about this the wrong way.
B
5
S
2
G
3
Posts: 16
Reputation: 1,007

Post » Wed Dec 17, 2014 4:33 am

Hello Incid,
I (think?) I've asked the same questions just a few days ago.

It just so turns out that you can look in your ejecta-master > Resources directory and replace the icons in there.

Hope that is what you are after,

V :)
B
14
S
4
Posts: 190
Reputation: 1,735

Post » Wed Dec 17, 2014 7:41 am

I'm exporting to PhoneGap, not Ejecta.

Ejecta doesn't seem to support 64-bit architectures, which Apple will require for all iOS apps in February and going forward. Ejecta's documentation on GitHub claims you can set Architectures in the Project Settings of Xcode to "Standard architectures (including 64-bit)", but doing so breaks the Ejecta build and gives me a huge list of errors. Leaving the Architectures as "ARMv7" removes all errors, but then I get a warning from Apple when validating the project that they are switching to 64-bit architectures in February so I don't want to bother uploading a version of my app that will quickly become non-functional.

Regardless, non-browser wrappers (Ejecta and CocoonJS) don't offer a performance boost anymore nor do they offer much in the way of feature support. PhoneGap seems to be the way to go for getting C2 games on iOS natively.

I just haven't figured out how to get the PhoneGap build to recognize all my iOS icons and replace its default splash screen with my own.
B
5
S
2
G
3
Posts: 16
Reputation: 1,007

Post » Sun Dec 21, 2014 8:47 pm

Did you add the files to your construct 2 project? With names matching those you typed in the config.xm?

I've just spent the better part of the day figuring out the correct settings to upload a phonegap project and I'll happily share (so that hopefully I'll remember it better).

I'll paste the contents of my config.xml file below and attatch an image showing the images so that you can see how I've set it up in construct 2.

Good luck!

iosPhoneGap-splashAndIcons.PNG


Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="se.onemuppet.draw" version="1.0.0">

  <name>myDraw</name>
  <description>Drawing</description>
  <author href="http://onemuppet.se/" email="[email protected]">David Borgenvik</author>

  <preference name="permissions" value="none"/>
  <preference name="android-targetSdkVersion" value="21" />

  <feature name="http://api.phonegap.com/1.0/network"/>

  <preference name="orientation" value="landscape" />
  <preference name="fullscreen" value="true" />
  <gap:config-file platform="ios" parent="UIStatusBarHidden">
    <true/>
  </gap:config-file>
  <gap:config-file platform="ios" parent="UIViewControllerBasedStatusBarAppearance">
    <false/>
  </gap:config-file>

  <preference name="deployment-target" value="8.0" />
  <preference name="android-minSdkVersion" value="14" />
  <preference name="target-device" value="universal" />

  <!-- iPhone / iPod Touch  -->
  <icon src="icon-57.png" gap:platform="ios" width="57" height="57" />
  <icon src="icon-60.png" gap:platform="ios" width="60" height="60" />
  <icon src="icon-120.png" gap:platform="ios" width="120" height="120" />
  <icon src="icon-114.png" gap:platform="ios" width="114" height="114" />

  <!-- iPad -->
  <icon src="icon-72.png" gap:platform="ios" width="72" height="72" />
  <icon src="icon-144.png" gap:platform="ios" width="144" height="144" />
  <icon src="icon-76.png" gap:platform="ios" width="76" height="76" />
  <icon src="icon-152.png" gap:platform="ios" width="152" height="152" />

  <!-- Settings Icon -->
  <icon src="icon-29.png" gap:platform="ios" width="29" height="29" />
  <icon src="icon-58.png" gap:platform="ios" width="58" height="58" />
  <icon src="icon-50.png" gap:platform="ios" width="50" height="50" />
  <icon src="icon-100.png" gap:platform="ios" width="100" height="100" />

  <!-- Spotlight Icon -->
  <icon src="icon-40.png" gap:platform="ios" width="40" height="40" />
  <icon src="icon-80.png" gap:platform="ios" width="80" height="80" />
 
  <!-- Optional splash screen image, e.g.: -->
  <gap:splash src="splash480.png" gap:platform="ios" width="480" height="320" />
  <gap:splash src="splash320x480.png" gap:platform="ios" width="320" height="480" />
 
  <gap:splash src="splash960.png" gap:platform="ios" width="960" height="640" />
  <gap:splash src="splash640x960.png" gap:platform="ios" width="640" height="960" />
 
  <gap:splash src="splash_iphone5.png" gap:platform="ios" width="1136" height="640" />
  <gap:splash src="splash640x1136.png" gap:platform="ios" width="640" height="1136" />
 
  <gap:splash src="splash.png" gap:platform="ios" width="1024" height="768" />
  <gap:splash src="splash768x1024.png" gap:platform="ios" width="768" height="1024" />
 
  <gap:splash src="splash568.png" gap:platform="ios" width="568" height="320" />
  <gap:splash src="splash320.png" gap:platform="ios" width="320" height="568" />
 
  <gap:splash src="splash1334.png" gap:platform="ios" width="1334" height="750" />
  <gap:splash src="splash750x1334.png" gap:platform="ios" width="750" height="1334" />
 
  <gap:splash src="splash2208.png" gap:platform="ios" width="2208" height="1242" />
  <gap:splash src="splash1242x2208.png" gap:platform="ios" width="1242" height="2208" />
 
  <gap:splash src="splash2048x1536.png" gap:platform="ios" width="2048" height="1536" />
  <gap:splash src="splash1536x2048.png" gap:platform="ios" width="1536" height="2048" />


</widget>
You do not have the required permissions to view the files attached to this post.
B
39
S
9
G
4
Posts: 163
Reputation: 6,516

Post » Mon Dec 29, 2014 9:36 pm

@OneMuppet Thank you very much for sharing! I will give this a try later today.
B
5
S
2
G
3
Posts: 16
Reputation: 1,007

Post » Tue Dec 30, 2014 11:42 pm

@OneMuppet That worked perfectly! My problem was that I didn't import the icon/splash screen files into C2 prior to exporting. I was just zipping them with the project.

I'm new to using PhoneGap so I have a few other questions about it that you might be able to answer.

Can I have more than 1 app uploaded to PhoneGap without paying a subscription? I think they limit you to 1 "private" app, but is there a danger in having public apps uploaded to PhoneGap? The files are run through C2's script minifier and then zipped before uploading so can anyone really access the code anyway?

Also, what features are ONLY available in PhoneGap by using third-party plugins? Things like in-app purchases and ads, I imagine. Do you recommend any plugins in particular? And can updates to C2, changes to PhoneGap, or iOS updates break these plugins at all? I'd hate to rely on one only to have it periodically stop working.

Thanks to anyone who has some insight on this.
B
5
S
2
G
3
Posts: 16
Reputation: 1,007


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 17 guests