Combine HTML and OpenGL content seamlessly in a single app

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0

One of the big debates going around is whether a mobile developer should use HTML5 or go native.  Well, what if you didn’t have to make a choice? Even better, what if you could combine HTML inside a native app and still leverage the full power of OpenGL?

Now you can! Just check out Corona’s web popup API which lets you embed a web view right inside your app.

What this means is that you can create fluid OpenGL-based animations and combine them with HTML content, all in literally a couple of lines.  For example, here’s how you would animate an image moving diagonally across the screen, and make the bottom third of the screen open up a web page:
[cc lang=”lua”] local image = display.newImage( “sprite.png” ) image, { x=200, y=300, time=1000 } )
native.showWebPopup( 0, 320, 320, 160, “” )[/cc]
You can even use them to do things like integrate with Facebook Connect as I’ve discussed previously.

One of the best demonstrations of this feature is an app called MOAS made by the folks at HD Interactive.  It really shows what you can do with web popups like pulling event calendar info dynamically off the web or showing gallery tours via local content.  But the coolest part is that you can also seamlessly add transition effects to the images loaded directly by Corona’s engine.  It’s hard to tell where the HTML ends and OpenGL begins.

In short, add web content when you want and add OpenGL content when you want.  Either way, you get the best of both worlds — how often in life does that happen?

Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0

This entry has 10 replies

  1. jules says:

    This is a nice looking app but it’s achingly slow on an iPhone 4. Tap the buttons at the bottom and nothing happens for a while. Hopefully this isn’t representative of how an app like this responds.

    • Walter says:

      Yes, it was, but it’s much faster in the version 1.1 update of MOAS. I asked them why the performance was slow and they told me they were making unnecessary network connectivity checks before opening a web popup.

  2. David says:

    Works great on an iPhone 3G running iOS 4.1!!! Very nice app.

  3. dbonneville says:

    Can you call local html files, like one saved in a project folder?

  4. Tim Statler says:

    @dbonneville, yes you can open local html files from your project folder.

  5. sphan says:

    @tim_statler, would you be kind enough to point me to how to open local html files within a project folder? Are there specific demos out there? Thanks in advance.

    • Klaus says:

      @sphan, I think this is what you are looking for:
      Taken from here:
      Web Popup Options

      There is an optional sixth parameter, options, that allows you to customize certain features. The parameter must be passed as a table. For example:


      native.showWebPopup( 10, 10, 300, 300, “”, {urlRequest=listener} )

      You may assign the following properties in your options table:

      options.baseUrl determines whether url is interpreted as a relative or absolute url. The default (nil) implies that the url is absolute. To load a local file, set the base url to one of the base directory constants, e.g. system.ResourceDirectory. Then the url parameter is relative to that base directory. For remote files, you can also specify a remote base, and the url parameter will be relative to the remote base.

  6. Joe says:

    Does this work with android or is it ios only?


  7. Why would they use Corona and then release ONLY the iOS version of this app? I see that happen a lot….why limit your market to only iOS?

  8. Brent Sorrentino says:

    Hi Chuck,
    It really depends on the developer. Although Corona makes it easy to go cross-platform, there are some subtle things that differentiate the two platforms, like supported audio file types and various hardware considerations. There are also market considerations, including which types of apps sell better or are more popular on one platform or the other.