Android Icon and Splash Screen Sizes in Phonegap Build Config

In the config.xml:

<!-- Define app icon -->
<icon src="assets/icons/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="assets/icons/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="assets/icons/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="assets/icons/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
<!-- Define app splash screen -->
<gap:splash src="ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
<gap:splash src="mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
<gap:splash src="hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
<gap:splash src="xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
<gap:splash src="fr-xhdpi.png" gap:platform="android" gap:qualifier="fr-xhdpi" />
<gap:splash src="portrait-xxhdpi.png" gap:platform="android" gap:qualifier="port-xxhdpi" />
<gap:splash src="landscape-xxhdpi.png" gap:platform="android" gap:qualifier="land-xxhdpi" />

 

But how do these translate to pixels?

Icons:

  • LDPI:
    • 36x36px
  • MDPI:
    • 48x48px
  • HDPI:
    • 72x72px
  • XHDPI:
    • 96x96px
  • XXHDPI:
    • 144x144px
  • XXHDPI:
    • 192x192px
  • 512 x 512 pixel – only used in Android Market; resized to various sizes

Splash Screens:

  • LDPI:
    • Portrait: 200x320px
    • Landscape: 320x200px
  • MDPI:
    • Portrait: 320x480px
    • Landscape: 480x320px
  • HDPI:
    • Portrait: 480x800px
    • Landscape: 800x480px
  • XHDPI:
    • Portrait: 720px1280px
    • Landscape: 1280x720px

References:

Scuba Chibi: What’s Next?

In as much as I would like to move on to my next project, there are still a few things I need to finish with Scuba Chibi:

1. Android Support

Android friends, I haven’t forgotten about you.  I’ve tried out the game on Android, but it appears that Ad Mob and Phaser.js are not working well together.  If I remove Ad Mob, then the game loads fine.  I might have to look into using another Ad Mob plugin that works in Phonegap, or maybe I’ll do some Javascript magic without a library.  We’ll see.  There are also some resizing issues that I would need to take care of.  The game does not resize to the screen for my Android tablet.  This will be fun…

2. Suggestions?

I’ve had some suggestions as far as leaderboards, more enemies, and more backgrounds.  All are possibilites!  🙂  Any other suggestions?  🙂

Stay tuned for my upcoming blog post when I do my Postmortem #2 – Data and Analytics!

Scuba Chibi Released to the iOS App Store!

Scuba Chibi is now available on the iOS App Store!  Check it out!

https://itunes.apple.com/us/app/scuba-chibi/id970197009?ls=1&mt=8

appstore

Other links:

Scuba Chibi website:  http://melkybee.com/scubachibi/

Facebook page:  https://www.facebook.com/scubachibi

Twitter:  https://twitter.com/scubachibi

SlideDB:  http://www.slidedb.com/games/scuba-chibi

Scuba Chibi Postmortem #1: The Technical Learnings

I can finally say that Scuba Chibi is done and will soon be released to the iOS App Store!

As simple as this game is, it actually took me a whole lot longer to finish than I had expected.  Most of it was due to finding the free time to actually work on it.  But it was a lingering item on my To-Do list and I wanted it done and over with so that I can move on to my next project.  🙂

Nevertheless, from a technical and artistic standpoint, it was fun to work on.  It was a game that I had made with Phaser, Javascript, and Phonegap Build.  I do Javascript for work and I have played around with some small Phaser examples, but I am new to Phonegap Build.  So there would be times when I ran into some issues here and there and after googling for some solutions, I could not find any, so I resulted in doing a bit of trial and error.  That is where my blog comes into play.  I’ve always thought that my blog would be my way to remind my future self on how to do things.  Because let’s face it, I have a bad memory :-).

So here is a compilation of technical things that I have learned along the way while making Scuba Chibi:

Also, here are some blog entries for the art that I made for the game:

So, look out for my game Scuba Chibi, coming soon to the iOS App Store! 😀

iOS Icons and Splashes in Phonegap Config

Here’s what I put in my Phonegap build config.xml.  Note that I’ve got an icon.png and splash.png at the root level.

<!-- Icon -->
<icon src="icon.png" />
<!-- iPhone / iPod Touch -->
<icon src="assets/icons/ios/icon.png" gap:platform="ios" width="57" height="57" />
<icon src="assets/icons/ios/icon@2x.png" gap:platform="ios" width="114" height="114" />
<!-- iPhone 6 / 6+ -->
<icon src="assets/icons/ios/icon-60@3x.png" gap:platform="ios" width="180" height="180" />
<!-- iPhone / iPod Touch -->
<icon src="assets/icons/ios/icon-60.png" gap:platform="ios" width="60" height="60" />
<icon src="assets/icons/ios/icon-60@2x.png" gap:platform="ios" width="120" height="120" />
<!-- iPad -->
<icon src="assets/icons/ios/icon-76.png" gap:platform="ios" width="76" height="76" />
<icon src="assets/icons/ios/icon-76@2x.png" gap:platform="ios" width="152" height="152" />
<!-- Settings Icon -->
<icon src="assets/icons/ios/icon-small.png" gap:platform="ios" width="29" height="29" />
<icon src="assets/icons/ios/icon-small@2x.png" gap:platform="ios" width="58" height="58" />
<!-- Spotlight Icon -->
<icon src="assets/icons/ios/icon-40.png" gap:platform="ios" width="40" height="40" />
<icon src="assets/icons/ios/icon-40@2x.png" gap:platform="ios" width="80" height="80" />
<!-- iPad -->
<icon src="assets/icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="assets/icons/ios/icon-72@2x.png" gap:platform="ios" width="144" height="144" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="assets/icons/ios/icon-50.png" gap:platform="ios" width="50" height="50" />
<icon src="assets/icons/ios/icon-50@2x.png" gap:platform="ios" width="100" height="100" />
<!-- Splash screen -->
<gap:splash src="splash.png" />
<!-- iPhone and iPod touch -->
<gap:splash src="assets/splash/ios/Default-iphone.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="assets/splash/ios/Default@2x-iphone.png" gap:platform="ios" width="640" height="960" />
<!-- iPhone 5 / iPod Touch (5th Generation) -->
<gap:splash src="assets/splash/ios/Default-568h@2x-iphone.png" gap:platform="ios" width="640" height="1136" />
<!-- iPhone 6 -->
<gap:splash src="assets/splash/ios/Default-667h.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="assets/splash/ios/Default-736h.png" gap:platform="ios" width="1242" height="2208" />
<gap:splash src="assets/splash/ios/Default-Landscape-736h.png" gap:platform="ios" width="2208" height="1242" />
<!-- iPad -->
<gap:splash src="assets/splash/ios/Default-Portrait-ipad.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="assets/splash/ios/Default-Landscape-ipad.png" gap:platform="ios" width="1024" height="768" />
<!-- Retina iPad -->
<gap:splash src="assets/splash/ios/Default-Portrait@2x-ipad.png" gap:platform="ios" width="1536" height="2048" />
<gap:splash src="assets/splash/ios/Default-Landscape@2x-ipad.png" gap:platform="ios" width="2048" height="1536" />