8bitrocket.com
19Aug/100

Tutorial: Turn Your Flash Game Into A Google Chrome Web App (beta)

While the Google Chrome App Store will not be available until October 2010, you can still package-up your apps and test them as Chrome Web Apps.   Google has some extensive documentation on the subject, but we are going to slice it down and show you the easiest path to success.

Step 1: Get The Right Browser...Windows Only!

Yep, the only Chrome build that supports the installation of Chrome Web Apps, right now, is Chrome for Windows.  You will have to subscribe to the Chrome "Dev Channel" and then download the browser.  This is really simple.  I didn't really "subscribe" at all, I just downloaded the dev channel version of Chrome to my Windows machine.

Step 2: Set-up The Browser To Load Apps

After you have downloaded Chrome, you need to create a short-cut in Windows so you can change the path to the Chrome.exe executable.  You need to do this so you can add the "--enable-apps" option to the execution path.  This option allows you to test the "loading extensions" functionality which is the basis of the Chrome Web App technology.

Here is an example of the link to put in the Target box of a short-cut in Windows XP:

[cc lang="javascript" width="550"]

"C:\Documents and Settings\username\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" -enable-apps

[/cc]

Step 3: Prepare Your Flash Game

Now you need to get all the assets together in a folder/directory that you will provide as part of the Chrome App installable package.  This includes:

  1. .swf file
  2. An HTML file that holds your .swf
  3. a 24x24 px .png icon
  4. a 124x124.png icon
  5. Any other assets the .swf needs to load externally

For this example, I decided to use our game "Palindromes Plus". First I found the Mochi version of palindromesplus.swf and the converted the cartridge icon image we use into  24x24 and 124x124 icons.

I then created a palindromesplus.html page.  To make it simple, I made the background of the HTML page black, and centered the game on the screen.

Step 4: Create Your Manifest.json File

The manifest.json file is required for every Chrome Web App.  It describes  meta-data about the game you are creating, and where to find some essential assets.  Most of this file is  (like name, description, version) self-explanatory.   However, a couple items could use a little sunlight to make them clear:

  • "app:launch" section:  The "app:launch" section contained describes how this app will execute:
  • web_url: This is the complete URL to an app that exists on the web.  You can deploy an app a s a Chrome web app without embedding the code in your directory/.crx file (more on that later)
  • local_path : a relative path to the html file that will launch your app.  This is required for a "server-less" app that can run offline.  This is the style we are creating for our Flash game.
  • "permissions" section:  This section defines some security constraints around your app for specific Chrome APIs and storage.   This is where you would place urls that your app might call for web services and xml rpc requests. We don't really use this, so we left the default from the Google example ( here)
    • notifications : Allows the app to use the proposed HTML5 notifications
    • unlimited_storage : Allows for unlimited HTML5 Server-side storage.

There are other options you can read about all the manifest.json file options here: http://code.google.com/chrome/extensions/manifest.html

[cc lang="javascript" width="550"]
{
"name": "Palindromes Plus",
"description": "Unscramble The Palindromes",
"version": "1",
"app": {
"launch": {
"local_path": "palindromesplus.html"
}
},
"icons": {
"24": "24.png",
"128": "128.png"
},
"permissions": [
"unlimited_storage",
"notifications"
]
}

[/cc]

Step 5: Create Your Application Folder

After you have your manifest.json, .html file, .swf, and and .png file files,  you need to create a folder file to hold them all.  Create a folder and place all of the files inside of it.

Step 6: Launch The Chrome Developer Version

Find the shortcut you created to the Chrome Browser  with the "-enable-apps" command line option and launch it.

Step 7: Install The Extension (Chrome Web App)

  1. Find the Wrench icon in the upper right hand corner of Chrome and click it.
  2. Choose The Tools Menu
  3. Choose The Extension menu
  4. Click the (+) next to Developer to open Developer mode

You should see the following screen:

To load your extension, click the [load packed extension] button and find the folder you put the files into.  Once you find it and click [OK], the extension will load.

Now, to try the Chrome Web App, simply click on a New Tab, and you should see the icon you created:

Click the icon to play the game.

Step 8: Create a .crx File

A .CRX file will be needed to distribute your app in the Chrome App Store.  This is very easy to create.  Follow the directions to get back to the developer mode.   Then click the [pack extension] button.

This will bring-up the following screen:

For the "extension root directory", find the folder you created with the manifest.json, etc.

Click [OK]

A .crx and .pem license file will be created for your app.  Hold on to these for when the Google App Store is ready to accept new applications, or for when Google Chrome can load packed extensions (not available yet).

A .crx is simple a .zip file with the extension changed.  You should be able make these without using Chrome very easily.

That's It...But It's Still Beta

Google says all of this could change wholly or partly by the time the Google App Store launches, but we thought it would be cool to give some idea of what the process and work flow will look like once the Chrome Web App Store is ready for action.

Here is a zipped directory for the Palindromes Plus extension: palindromes.zip that you use to try this on your own.  It includes the .swf, a sample manifest.json file, and icons.

Here is the .crx  abd pem files we created for Palindromes Plus:  palindromes.crx and palindroms.pem (.zip)


0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
This site is protected by Comment SPAM Wiper.