Category Archives: Android

New Version of My Halloween PhoneGap App

With Halloween less than a month away, I figured it’s about time to update my “Instant Halloween” PhoneGap sound effects app. I’m happy to say that the latest version is now out for both iOS and Android. It has a few new sounds, a new UI style, and has been updated for iOS 7. I also updated the low latency audio plugin so it now supports PhoneGap 3.0 method signatures and supports the command line tooling for installation.

halloweenThis app is fantastic for scaring people… Just hook it up to really loud speakers, and start playing the sounds to your heart’s content. It’s got everything from background/ambient loops to maniacal laughter, screams, ghosts, zombies, and other spooky sound effects.

It is available now, for FREE, for both iOS (5.0+) and Android (4.0+).

 

So what has changed in this version?

First, I updated the app to support iOS 7. For the most part, this is a non-issue. PhoneGap apps are based on web standards, and HTML/JS/CSS work pretty much everywhere. However, you do have to account for a few minor changes. One is that the OS status bar now sits over top of the application. You’ll need to update your UI on iOS 7, so there are no UI issues. Check out this post from Christophe Coenraets for details regarding creating PhoneGap apps for iOS 7.

iOS 7 also introduces some new UI design paradigms and guidelines. I simplified the user interface, got rid of all textures, and tried to make things as simple and minimalistic and native-feeling as possible. I also got rid of iScroll for touch-based scrolling – both the iOS and Android versions now use native inertial based scrolling from the operating system. This is the reason that the new Android version is only Android 4.0 and later, but it is also the reason that the app feels much closer to a fully native experience.

I updated the low latency audio native plugin to support PhoneGap PhoneGap 3. There were two parts to this: First, there is the updated method signature on the native interfaces. I just took the old plugin, and updated it for the new method signature. The new method signature was actually introduced a while back, but I never updated the plugin for it. Second, I added the appropriate XML metadata to enable CLI-based installation of the plugin for both iOS and Android. Take a look at the PhoneGap documentation for details on creating PhoneGap native plugins and plugin.xml.  Also check out this tutorial from Holly Schinsky for help creating native plugins for Android.

You can check out the full source code for the low latency audio native plugin for both iOS and Android, plus the plugin.xml specification on github at: https://github.com/triceam/LowLatencyAudio

To include it in your own PhoneGap 3.0 (or later) projects, you can just add it from the PhoneGap command line interface:

phonegap local plugin add https://github.com/triceam/LowLatencyAudio

Of course, as with all of my PhoneGap apps, this one is open source too. You can check out the full app source (minus the audio assets) at: https://github.com/triceam/Instant-Halloween

In the process, I also ran into an unexpected issue with Android deployment… Back in the spring I had a corrupted hard drive. I was able to recover *most* of my data, and I thought I had all of my app signing keys. It turns out that for Android, your apps must not only have the same signing keys, but also the same key store when you sign the APK files, or else Google won’t let you distribute the Android APK file as an update; it must be a new app. It turns out that I had recovered the key, but not the keystore. So, I had no choice but to distribute it as a new app.

Go download the free apps, get the source code, and start building your own PhoneGap apps today!

PhoneGap Day: PhoneGap & Hardware

I’d like to express a huge Thank You to everyone who attended PhoneGap Day in Portland last week, and to Colene and the team that put everything together! The day was loaded with fantastic presentations, and great community interaction… tons of information, tons of great questions, and tons of great people (oh, and beer – it wouldn’t be PhoneGap Day without beer).

My session was about the integration of PhoneGap with hardware. Basically, it was an overview and exploration how you can use native plugins to extend the capabilities of PhoneGap applications and interact with device peripherals. This enables new interaction paradigms, and helps evaluate and evolve what is attainable with web-related technologies.

In this session, I covered two use cases… The first use case is the use of a pressure-sensitive stylus for interacting with a PhoneGap application on iOS. The second use case is integration of a Moga gamepad with a PhoneGap application on Android. In both cases, the application experience is augmented by the peripheral device, which changes how it is possible for the user to interact and engage with the application content and context.

Pressure Sensitive Sketching in PhoneGap

In this example, the pressure-sensitive Pogo Connect Stylus uses a low energy Bluetooth 4 connection to relay touch/pressure information back to the PhoneGap application. This makes for a unique drawing and sketching experience powered with the HTML5 Canvas element. I’ve written about this example previously… Check out the video below to see it in action, and read the blog post for technical details and source code.

Moga Gamepad

The second example that I explored is a PhoneGap native plugin that is used to handle input from a Moga game controller inside of a PhoneGap application on Android.

This implementation is intended to be a proof of concept demonstrating how you could integrate the gamepad within your application. It currently only supports input from the joysticks (axisX and axisY) and the A and B buttons, and it does not handle all possible input from the controller.

This implementation is adapted directly from the com.bda.controller.example.demo.listen example from the Moga developers SDK samples available for download at:: http://www.mogaanywhere.com/developers/

Check out the video below to see it in action:

The game is based on the Universe prototype that was used as a sub-game inside of the MaxMe app for the recent Adobe MAX conference. I make no guarantees about the code for this game, it was in a huge rush!

Quick Links

If you want to see more images from PhoneGap Day, check out my Flickr photo set from the event.

Fresh Food Finder Featured in SELF Magazine

I am very excited to share that the Fresh Food Finder PhoneGap application which I built last summer was recently featured in the June 2013 issue of SELF Magazine. This app was built as a demonstration/sample application for PhoneGap, but has gained popularity for being an easy way to find farmers markets by leveraging the USDA farmers markets directory and has appeal to the general public.

In fact, I’ve seen so many downloads that I am working on an updated version of it based on user feedback, with more recent data (live services instead of embedded), and will be leveraging the awesome topcoat.io CSS framework for styling.

Fresh Food Finder in SELF Magazine
Fresh Food Finder in SELF Magazine

SELF Magazine has huge readership numbers (almost 1.5 million monthly subscribers according to Wikipedia). While it was just a very small callout in the magazine’s calendar, this has driven both app downloads and visitors to my blog (peaked at 348 downloads per day)!

App downloads May 1- July 8
App downloads May 1- July 8

This also brought the app higher up in the iOS market ranks (peak #57 in the “Food & Drink” category):

App store ranking May 1- July 8
App store ranking May 1- July 8

You can download the Fresh Food Finder app today in the following markets:

Grab the source code, read about how it was all put together, and see it in action in the video below:

Enjoy!

PhoneGap & Android Studio

Yesterday at GoogleIO, Google announced Android Studio, a new development environment for authoring Android applications. This is a great looking new IDE for Android, based off of IntelliJ IDEA, with some new Android-specific tools and features. You can read more about Android Studio on the Google Android Developers blog.

One of my first tasks upon downloading Android Studio was to get a PhoneGap app up and running in it. Here’s how to get started. Note: I used PhoneGap 2.7 to create a new project with the latest stable release, however you could use the same steps (minus the CLI create) to import an already-existing PhoneGap application. Be sure to backup your existing project before doing so, just in case you have issues (Android Studio is still in beta/preview).

First, follow the PhoneGap “Getting Started” instructions all the way up to (and including) the command line invocation of the “create” script.

01-cmd

Once you have the Java environment configured just run the create script to create a based PhoneGap project. In this case, I used the following command to create a new PhoneGap project:

./create ~/Documents/dev/android_studio_phonegap com.tricedesigns.AndroidStudioPhoneGap AndroidStudioPhoneGap

Next launch Android Studio. When the welcome screen appears, select the “Import Project” option.

02-welcome

Next, you’ll have to select the directory to import. Choose the directory for the PhoneGap project you just created via the command line tools.

03-select existing src

Once you click “OK”, you will proceed through several steps of the import wizard. On the next screen, make sure that “Create project from existing sources” is selected, and click the “Next” button.

04-create from existing src

You will next specify a project name and project location. Make sure that the project location is the same as the location you selected above (and used in the PhoneGap command line tools). I noticed that the default setting was to create a new directory, which you do not want. Once you’ve verified the name and location, click “Next”.

05-project location

On the next step, leave the default settings (everything checked), and click “Next”.

06-import project

Again, leave the default settings (everything checked), and click “Next”.

07-import project

Yet again, leave the default settings (everything checked), and click “Next”.

08-import project

For the last time, leave the default settings (everything checked), and click “Next”. This is the last one!

09-import project

Next, review the frameworks detected. If it looks correct to you, click the “Finish” button.

10-import project

Android Studio should now open the full IDE/editor. You can just double click on a file in the “Project” tree to open it.

11-android_studio

To run the project, you can either go to the “Run” menu and select “Run {project name}”, or click on the “Run” green triangle icon.

12-run

This will launch the application in your configured environment (either emulator or on a device). You can see the new PhoneGap application running in the Android emulator in the screenshot below. If you’d like to change your “Run” configuration profile, go to the “Run” menu and select “Edit Configurations”, and you can create multiple launch configurations, or modify existing launch configurations.

13-running

PhoneGap Legends – A Sample Game App

Next week I’ll be representing Adobe at GDC 2013, and demonstrating how Adobe Creative CloudPhoneGap, and PhoneGap Build can be great tools for building casual gaming experiences. In preparation, I’ve been working on a gaming sample application that shows off the potential of HTML games packaged with PhoneGap.

…and now I’d like to introduce you to PhoneGap Legends. PhoneGap Legends is a fantasy/RPG themed demo that leverages HTML DOM animation techniques and targets webkit browsers. I was able to get some really outstanding performance out of this example, so be sure to check out the video and read the details below. The name “PhoneGap Legends” doesn’t mean anything; I just thought it sounded videogame-ish and appropriately fitting.

PhoneGap Legends
PhoneGap Legends

This game demo is an infinitely-scrolling top-view RPG themed game that is implemented entirely in HTML, CSS, and JavaScript. There is a scrolling background, enemy characters, HUD overlays, and of course, our “protagonist” hero – all that’s missing is a story, and general game mechanics like interacting with sprites.

Again, I was able to get some *really outstanding performance* out of this sample, so I wanted to share, complete with source code, which you’ll find further in this post (and I encourage you to share it too). Take a look at the video below to see the game in action on a variety of devices. Every single bit of this is rendered completely with HTML, CSS, and JavaScript – there are no native portions of the application.

Update 3/24:  If you’d like to test this out on your own devices, you can now access it online at http://tricedesigns.com/portfolio/phonegap_legends/   However, it will still only work on webkit browsers (Chrome, Safari, Android, iOS, etc…), and is optimized for small-device screens.  If you attempt to use this on a very large screen, you’ll probably see some sprite clipping.

Disclaimer: This sample app is by no means a complete game or complete game engine. I’ve implemented some techniques for achieving great performance within a PhoneGap application with game-themed content, but it still needs additional game mechanics. I also wrote this code in about 2 days – it needs some additional cleanup/optimization before use in a real-world game.

Source

Full source code for this demo application is available on GitHub. This code is provided as-is: https://github.com/triceam/PhoneGap-Legends. I will be making a few updates over the next few days in preparation for GDC next week, but for the most part, it is stable.

Development Approach

The PhoneGap Legends application was built following the performance tips that I posted earlier this month. The game is built so that it uses a game loop based upon requestAnimationFrame to perform all UI updates. This gives it a scheduled interval that is in sequence with the browser’s redraw cycle.

In general, the DOM is as shallow as possible for achieving the desired experience. All “sprites”, or UI elements are basic DOM nodes with a fixed position and size.  All DOM elements have an absolute position at 0,0 and leverage translate3d for their x/y placement.  This is beneficial for 2 reasons: 1) It is hardware accelerated, and 2) there are very, very few reflow operations.  Since all the elements are statically positioned and of a fixed size, browser reflow operations are at an extreme minimum.

The background is made up a series of tiles that are repeated during the walk/movement sequence:

Sprite Sheet for Background Tiles

In the CSS styles, each tile is 256×256 square, with a background style that is defined for each “type” of tile:

.tile{
    width: 256px;
    height:256px;
    overflow: hidden;
    position: absolute;
    top:0px;
    left:0px;
    background-repeat: repeat;
    background-clip:border-box;
}
.tile_0 {      background: url('../images/background_tiles.png');     background-position: 0px 0px;}
.tile_1 {      background: url('../images/background_tiles.png');     background-position: 256px 0px;}
.tile_2 {      background: url('../images/background_tiles.png');     background-position: 512px 0px;}
.tile_3 {      background: url('../images/background_tiles.png');     background-position: 0px 256px;}
.tile_4 {      background: url('../images/background_tiles.png');     background-position: 256px 256px;}

The content displayed within each of the “sprite” DOM elements is applied using sprite sheets and regular CSS background styles. Each sprite sheet contains multiple images, the background for a node is set in CSS, and the position for each image is set using the “background-position” css style.  For example, the walking animation for the hero character is applied just by changing the CSS style that is applied to the “hero” <div> element.

Sprite Sheet for Hero

There is a sequence of CSS styles that are used to define each state within the walking sequence:

.hero_0_0{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 0px;}
.hero_0_1{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 96px;}
.hero_0_2{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 192px;}
.hero_0_3{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 288px;}
...

This game demo extensively uses translate3d for hardware accelerated composition.  However, note that the 3d transforms are all applied to relatively small elements, and are not nested. All of the “textures” are well below the max texture size across all platforms (1024×1024), and since it uses sprite sheets and reusable CSS styles, there are relatively few images to load into memory or upload to the GPU.

Attribution

The following Creative Commons assets were used in the creation of this sample app and the accompanying video:

Image – Grass Texture: http://opengameart.org/content/grass-with-moss
Image – Trees/Bushes: http://opengameart.org/content/lots-of-hyptosis-tiles-organized
Image – Main Character: http://opengameart.org/content/2d-rpg-character-walk-spritesheet
Image – Enemies: http://opengameart.org/content/rpg-enemies-11-dragons
Image – Compass Rose: http://en.wikipedia.org/wiki/File:Compass_rose_en_04p.svg

Font – Avalon Quest: http://www.ffonts.net/Avalon-Quest.font
Note: I used a free/open licensed font that could be embedded in the app for offline usage. This font was converted to a web-font package that can be embedded in the PhoneGap application using http://www.fontsquirrel.com/

Audio – Monster: http://www.freesound.org/people/Erdie/sounds/167890/
Audio – Music: http://www.freesound.org/people/rap2h/sounds/115261/

Source

Again, in case you missed it above, Full source code for this demo application is available on github. This code is provided as-is: https://github.com/triceam/PhoneGap-Legends.