something in the way

A sweet engine for getting started with Android game development is the andengine 2D OpenGL ES engine. This is very simple and compares with cocos2d-iphone for iOS development in 2D with OpenGL ES.  They both support a wide range of 2d techniques with an OpenGL renderer.  Some great videos are posted on the andengine google code page showing a box2D example, multiplayer example and more.

Mobile games are on slower hardware, similar to later 90′s computers so native is a great way to go for 3d and 2d game development because of this limitation at the current time and well into the next few years.  Take this time to learn you some native gamedev. andengine isn’t native directly as it is Java based but compiled with the Dalvik JIT virtual machine. Another way to go native on Android is the Android NDK which allows C and C++.

• andengine download at google code
• andengine examples at google code
• andengine blog
• Mercurial repository at google code
• cocos2d-android port of cocos2d-iphone with BSD license
• rokon android is another BSD licensed android game engine

The engine also has extensions that can be easily added and some great ones exist already.

• AndEngine Live-Wallpaper Extension
• AndEngine .MOD-Player Extension
• AndEngine Multiplayer Extension
• AndEngine MultiTouch Extension
• AndEngine Physics Box2D Extension
• AndEngine Augmented-Reality Extension

• Opinion Cloud: Summarizes comments on YouTube videos and Flickr photos to provide an overview of the crowd’s overall opinion.
• Google Voice: All sorts of helpful Voice features directly from the browser. See how many messages you have, initiate calls and texts, or call numbers on a site by clicking on them.
• AutoPager. Automatically loads the next page of a site. You can just scroll down instead of having to click to the next page.
  
• Turn Off the Lights: Fades the page to improve the video-watching experience.
• Google Dictionary: Double-click any word to see its definition, or click on the icon in the address bar to look up any word.
• After the Deadline: Checks spelling, style, and grammar on your emails, blog, tweets, etc.
• Invisible Hand: Does a quick price check and lets you know if the product you are looking at is available at a lower price elsewhere.
• Secbrowsing: Checks that your plug-ins (e.g. Java, Flash) are up to date.
• Tineye: Image search utility to find exact matches (including cropped, edited, or re-sized images).
• Slideshow: Turns photo sites such as Flickr, Picasa, Facebook, and Google Images into slideshows.
• Google Docs/PDF Viewer: Automatically previews pdfs, powerpoint presentations, and other documents in Google Docs Viewer.
• Readability: Reformat the page into a single column of text.
• Chromed Bird: A nice Twitter viewing extension.
• Feedsquares: Cool way of viewing your feeds via Google Reader.
• ScribeFire: Full-featured blog editor that lets you easily post to any of your blogs.
• Note Anywhere: Digital post-it notes that can be pasted and saved on any webpage.
• Instant Messaging Notifier: IM on multiple clients.
• Remember the Milk: The popular to-do app.
• Extension.fm: Turns the web into a music library.

iPhone developer Jason Ting has a hot app. He is the first to market with an application that will activate the iPhone 4’s built in LED camera flash, turning your smartphone into a flashlight. Now, while the flashlight application itself isn’t all that exciting (although it was downloaded over 9,000 times in one day) this next bit of news is. Ting boasts that he grossed just under $1,400 on 9,300 ad impressions with a 11.8% click-through rate. Fourteen hundred dollars in one day!? Yikes. The high click-through rate can partially be credited to iPhone users who were curious about the new iAds system; clicking through to see how the system worked. Whatever the reason, Ting has an extra $1,400 in his pocket.Read

As I walked around Moscone last week, I saw some prophets speaking of a future that isn't all Native. A future where the Web is the platform. Others saw it too:

I pondered who would be behind the act and smiled as I had a good idea. The group behind this all is the newly named Sencha (formerly Ext JS). On the back of news of the new company and Sencha Labs, we get a glimpse of their new product: Sencha Touch:

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.

There are some good demos of apps such as GeoCongress, which shows off:

• HTML5 Geolocation
• Sench Touch icon set
• JSONP Proxy
• YQL Data Proxy
• Momentum scrolling
• Scroll touch event
• Pop-up Overlays
• Mobile form elements
• CSS3 Gradients
• CSS3 Transitions
• Multi-Card Layout
• Tab Panel Component
• Scrollable list view
• Swappable headers

Once you see what the framework can do with examples, what better way to get a deeper look than walking though as much of it as possible? Michael Mullany, VP Products, sat down and gave us just that. Sencha Touch comes with a "kitchen sink" demo that shows off much of its abilities. Here we see Michael showing off said demo:

After seeing this at work, we asked Michael some questions about the new product:

How are Ext JS, jQTouch, and Sencha Touch related?

We talked about some of this in the Sencha name change post. Jonathan Stark is taking over jQTouch maintainership, Dave Kaneda will remain involved but he's been spending most of his energy on Sencha Touch. Sencha Touch has some Ext JS DNA (OO javascript, a lot of the data package is common), but the UI components are completely different.

Having David part of Sencha Touch has been incredibly important. That's one of the reasons why the UI components are staggeringly beautiful, and there's been so much attention to ease of styling.

With respect to jQTouch vs. Sencha Touch. jQTouch is a good solution for people who need some progressive enhancement of web content, but it's not a full application framework.

What is the licensing plan for Sencha Touch?

The initial beta is under a GPLv3 + FLOSS license. We’d like to give open source folks the benefit before we introduce a commercial trial license. And we’d like to take the opportunity to emphasize something that many people miss: that we have Free and Open Source exceptions as part of our GPLv3 license. So if you want to, you can include Sencha Touch in your Apache and OSI approved licensed projects without triggering the GPL’ing of your project.

Can I make native looking controls for the particular platform at runtime?

In the beta, you can build multiple themes easily (for example, our Android theme is 20 lines of customized SASS), and serve them up to different clients based on user agent. We do want to provide a client-side switcher by release time. SASS is really an extraordinary technology. This would be far, far harder without it.

Are there any differences between it running on various platforms?

There are some minor differences, for example CSS 3D Transitions don't work on Android, for example (no cube transitions). And Apple GPU accelerates more stuff. You can look at our demo apps across iPhone and Android. They really do work cross-platform.

How do I do layout with Sencha Touch?

We think most people will use fairly simple layouts with the built-in components since the screen sizes are small. Tabs, carousels, lists. If they want to get more complex, they can use the more complex layouts or just extend the built-in classes.

Can I create native apps from these? How do I access native services on the device?

Right now, you're going to take Sencha and wrap it with phone-gap. But about two third of non-game apps don't do any special device access, and camera access is on its way.

How does Sencha Touch feel to program (e.g. just like Ext?)

It's still object oriented javascript but it's really very simple. People can just look at the source to the demo apps (which are reasonably rich apps) and make their own decision.

Can I progressively enhance a mobile Web app and sprinkle in some of this goodness?

I think the success of iPhone native mobile apps shows that for mobile factors, it's better if you think about layout and navigation first, then pour content into your containers & paths. In many ways, I think it's the reverse of the desktop web. Desktop web apps can be random access in their user pathing, mobile apps have to be hierarchical or otherwise constrained -- because you don't have a lot of space and you can't waste it on navigation controls.

You have those times when you get an idea, so you sit down and start building it? You know, maybe you are a designer, and that means cracking up Flash Pro CS5. Or perhaps you are a developer and you start messing with item renderers. As I travel around from conference to conference, I get a lot of ideas like that. And for most of them, I either run out of steam, get distracted, or simply get bored. Over the next several weeks I’ll be dropping projects like that on the old blog – starting with these Flash components that look like Android.

I wanted to get to know Android – intimately. So I started examining the user interface controls. At first this was mostly on the device, to get a feel for the types of controls that were available, and the way they transitioned states. Next I started using the “ddms” screen capture utility that comes with the Android SDK to get a closer look at the pixels. I’d get the screen to a state I wanted, capture it, and then dissect it using Fireworks CS5. Finally, I started reassembling the controls in Flash Pro CS5 and putting ActionScript logic behind them.

The result is a pretty performant, and decent foundation of controls that look and feel like Android, but are done all with Flash, and expected to be deployed using AIR for Android. I could go a lot further with these, but then again, there’s that running out of steam thing. For example, these are really designed for the NexusOne – I don’t account for screen density. I also don’t account for screen orientation, though there’s hooks in the components for some basic sizing.

Okay, enough about what’s not there, what is there?

• Button
• CheckBox
• ComboBox
• DateChooser
• Footer
• Label
• List
• Menu
• NumericStepper
• TextInput
• TimeChooser
• Title

Some of these components need additional explanation. For example, the “DateChooser”. Most of the dates in Android are presented via a modal dialog box. Mine is no different. Though I don’t call them out as components in the above list, there’s stepper controls used by the dialog to control month, date and year. Likewise for the “TimeChooser” where you will find controls for the hour and minute.

“Footer” is the bar you find at the bottom of most Android forms. The Footer control accepts up to three strings, that will give you up to three buttons. Why three? Well, because that’s the most I saw in use on any Android application. The “Title” is the gray bar you see at the top of most Android forms. The “Menu” takes up to six buttons, and shows up at the bottom of the screen when you use the hard menu button on the device.

Regardless of the component, they are designed to be pretty atomic, and although they were designed in Flash Pro CS5, then can easily be used in Flash Builder 4 from an ActionScript project, because I include a SWC in the build. Here’s some example code, and the result user interface. In short, you instantiate the control you want, position it and size it if necessary, and then add it to the stage. Register for any events you may want to drive the rest of the application at runtime.

package  
{
  import flash.display.Sprite;
  import flash.display.StageScaleMode;
  import flash.display.StageAlign;
  import flash.events.MouseEvent;
 
  public class Components extends Sprite 
  {
    private var btn:Button = null;
    private var chk:CheckBox = null;
    private var cmb:ComboBox = null;
    private var day:DatePicker = null;
    private var ftr:Footer = null;
    private var lbl:Label = null;
    private var listing:ListPicker = null;
    private var opt:OptionPicker = null;
    private var time:TimePicker = null;
    private var mnu:Menu = null;
    private var tme:Button = null;
    private var ttl:Title = null;
    private var txt:TextInput = null;
 
    public function Components() 
    {
      super();
      init();
    }
 
    private function init():void
    {
      var btnx:Button = null;
      var lblx:Label = null;
      var today:String = DateDialog.formatShort( new Date() );
 
      stage.scaleMode = StageScaleMode.NO_SCALE;
      stage.align = StageAlign.TOP_LEFT;
 
      ttl = new Title( "Event details" );
      addChild( ttl );
 
      lbl = new Label( "What" );
      lbl.x = 9;
      lbl.y = 52;
      addChild( lbl );
 
      txt = new TextInput( "Event name" );
      txt.x = 9;
      txt.y = 85;
      addChild( txt );
 
      lblx = new Label( "From" );
      lblx.x = 9;
      lblx.y = 170;
      addChild( lblx );
 
      btn = new Button( today, 282, Button.TRIGGER );
      btn.x = 14;
      btn.y = 203;
      btn.addEventListener( MouseEvent.CLICK, doDateClick );
      addChild( btn );
 
      tme = new Button( "1:00pm", 158, Button.TRIGGER );
      tme.x = 306;
      tme.y = 203;
      tme.addEventListener( MouseEvent.CLICK, doTimeClick );
      addChild( tme );			
 
      lblx = new Label( "To" );
      lblx.x = 9;
      lblx.y = 276;
      addChild( lblx );
 
      btnx = new Button( today, 282, Button.TRIGGER );
      btnx.x = 14;
      btnx.y = 309;
      addChild( btnx );
 
      btnx = new Button( "2:00pm", 158, Button.TRIGGER );
      btnx.name = "to";
      btnx.x = 306;
      btnx.y = 309;
      addChild( btnx );			
 
      chk = new CheckBox();
      chk.x = 416;
      chk.y = 396;
      chk.addEventListener( MouseEvent.CLICK, doCheckClick );
      addChild( chk );
 
      cmb = new ComboBox( "Home" );
      cmb.x = 13;
      cmb.y = 487;
      cmb.addEventListener( MouseEvent.CLICK, doComboClick );
      addChild( cmb );
 
      ftr = new Footer( "Done", "Revert" );
      ftr.y = 680;
      addChild( ftr );
 
      mnu = new Menu( [
        {path: "search.png", label: "One"},
        {path: "search.png", label: "Two"},
        {path: "search.png", label: "Three"},
        {path: "search.png", label: "Four"},
        {path: "search.png", label: "Five"},
        {path: "search.png", label: "Six"}
      ] );
      mnu.addEventListener( MenuEvent.CLICK, doMenuClick );
      addChild( mnu );
 
      day = new DatePicker();
      day.addEventListener( DialogEvent.OK, doDateOk );
      day.addEventListener( DialogEvent.CANCEL, doDialogCancel );
      addChild( day );
 
      time = new TimePicker();
      time.addEventListener( DialogEvent.OK, doTimeOk );
      time.addEventListener( DialogEvent.CANCEL, doDialogCancel );
      addChild( time );			
 
      listing = new ListPicker();
      listing.addEventListener( ListEvent.CLICK, doListingClick );
      addChild( listing );
    }
 
    protected function doCheckClick( event:MouseEvent ):void
    {
      var btnx:Button = null;
 
      if( chk.selected )
      {
        tme.visible = false;
        btn.setWidth( 450 );
      } else {
        tme.visible = true;
        btn.setWidth( 282 );				
      }
    }
 
    protected function doComboClick( event:MouseEvent ):void
    {
      listing.show( [
        "Default ringtone", "Backroad", "Bell Phone", "Big Easy",
        "Bird Loop", "Bollywood", "Bus' a Move", "Cairo",
        "Calypso Steel", "Champagne Edition", "Chimey Phone",
        "Club Cubano", "Crayon Rock", "Curve Ball Blend", "Dancin Fool",
        "Digital Phone", "Ding", "Don' Mess Wiv It", "Eastern Sky",
        "Enter the Nexus", "Ether Shake", "Flutey Phone", "Free Flight",
        "Funk Y'all", "Gimme Mo' Town", "Glacial Groove", "Growl",
        "Halfway Home", "Loopy Lounge", "Los Angeles, 2019", 
        "Love FLute", "Medieval Jaunt", "Mildly Alarming", "Nairobi",
        "Nassau", "No Limits", "Organ Dub", "Paradise Island", "Playa",
        "Radiation by Spagnola", "Road Trip", "Safari", "Seville", 
        "She's All That", "Silky Way", "Steppin' Out", "Terminated",
        "Third Eye", "Twirl Away", "World"], 
        "Ringtones" 
      );
    }
 
    protected function doDialogCancel( event:DialogEvent ):void
    {
      trace( "Dialog cancel." );
    }
 
    protected function doDateClick( event:MouseEvent ):void
    {
      day.show( new Date() );
    }
 
    protected function doDateOk( event:DialogEvent ):void
    {
      btn.label = DateDialog.formatShort( day.date );
    }
 
    protected function doListingClick( event:ListEvent ):void
    {
      cmb.label = event.label;
    }
 
    protected function doMenuClick( event:MenuEvent ):void
    {
      trace( event.label );
    }
 
    protected function doTimeClick( event:MouseEvent ):void
    {
      time.show( new Date() );
    }
 
    protected function doTimeOk( event:DialogEvent ):void
    {
      tme.label = TimeDialog.formatShort( time.time );
    }		
  }
}

Again, I want to note that this is a random idea project. It’s pretty modular, but may not be to the liking of many. The package structure is totally flat, though I suppose that’s a nit-pick more than a problem. If you are thinking that I should have skinned Keith Peters’ Minimal Comps, you’re probably right, but I started this on a plane, and it grew from there before Keith’s components could be skinned. All of it is available for download. If you find it useful, or have any questions about the architecture, don’t hesitate to ask.

Last week at the Google I/O conference, we announced the public availability of the Adobe AIR for Android Developer Prerelease program. This week, we wanted to highlight a few excellent examples of AIR and Android powered enterprise applications developed by two members of our evangelism team, Christophe Coenraets and James Ward.

Both Christophe and James recently recorded inspiring video demonstrations of some of the sample applications they have been working on lately.

• Employee Directory Application sample using Flex and AIR for Android by Christophe Coenraets
• Android Trader Application with Flex 4 and AIR by Christophe Coenraets
• Flex on Android in Flash Player and AIR by James Ward

Mobile version of Employee Directory application by Christophe Coenraets.

Trading sample application by Christophe Coenraets.

Example of a Flex and AIR application that includes multi-touch support by James Ward.