TunnelTilt - From GitHub to Your PlayBook

Last month, during MikeL‘s keynote at DevCon America, George showed a WebGL game running on the PlayBook (check at 24:18 in the screencast).  Last week we posted the sources at GitHub, in a new WebGL-Samples repository, and this post will show you how to download, compile and install the game on your PlayBook.

Note - the details in the post are from my Mac laptop, but the instructions for a Windows box are not very different.

Added – TunnelTilt is now Available on the BlackBerry App World

Prep Work
Start by getting yourself a PlayBook and then Install the Developers Beta of PlayBook OS 2.0 and Install a Debug Token.  The PlayBook will need to (still) be in Development Mode, and you will need to write down the DEVICEIP and the DEVICEPASS.

TunnelTilt and WebGL
WebGL (Web-Based Graphics Library, wikipedia, spec page) is a web standard for a low-level 3D graphics API based on  OpenGL ES 2.0, using GLSL, exposed through the HTML5 Canvas element as Document Object Model interfaces.  WebGL allows JavaScript applications to leverage the power of modern hardware platforms, specifically its Graphics processing pipelines.

TunnelTilt is a WebGL-based game that leverages the sensors in the PlayBook to race a ball inside a tunnel avoiding obstacles.  The application runs inside a WebWorks container, so what we are going to do is just create a WebWorks application that has the extensions needed by WebGL, then package everything together and install it into our PlayBook.

Install the WebWorks SDK
The Download area in the HTML5 micro-site has links to all the tools you need; some are used in this post, others are not.

• WebWorks SDK - To package your WebWork App (needed)
• Ripple - Usually used for testing your WebWork App (not needed)
• Simulators - Virtual Images of the Devices (not needed)

As indicated in the WebWorks instructions for PlayBook, you will also need

• Adobe AIR SDK

To follow along this note, you need to install the WebWorks SDK but you do not need to install the simulators or BlackBerry Ripple.

The rest of this note assumes that the WebWorks SDK has been installed under a directory $root/bbwp.

Get TunnelTilt from GitHub
The sources for TunnelTilt are in GitHub, in one of the repositories of the BlackBerry organization – the GitHub.com/BlackBerry/WebGL-Samples repository.

You can download the sources in several ways – the following does not require you to have a (free!) GitHub account:

bash-3.2$ cd $root

bash-3.2$ git clone http://github.com/blackberry/WebGL-Samples.git
Cloning into WebGL-Samples...
remote: Counting objects: 113, done.
remote: Compressing objects: 100% (77/77), done.
remote: Total 113 (delta 30), reused 102 (delta 19)
Receiving objects: 100% (113/113), 5.78 MiB | 303 KiB/s, done.
Resolving deltas: 100% (30/30), done.

bash-3.2$ ls
WebGL-Samples/

bash-3.2$ ls WebGL-Samples/tunneltilt/
LICENSE                                 config.xml                              gl-utils.js
NOTICE                                  data/                                   index.html
README.md                               events.js                               loader.js
blackberry.custom.accelerometer/        geometry.js                             shaders.html
blackberry.custom.audio/                gl-matrix/                              sound.js

We have now two subdirectories under $root: WebGL and bbwp.

Added: GitHub also provides git-less access to a repo’s sources via a zip-ball.  In this case, point your browser or curl to http://github.com/blackberry/WebGL-Samples/zipball/master and unzip.

Install the WebWorks Extensions
The blackberry.custom.* files need to be “installed” into $root/bbwp/ext. This will do it:

bash-3.2$ cd $root/WebGL-Samples/tunneltilt

bash-3.2$ mv blackberry.custom.accelerometer/ $root/bbwp/ext
bash-3.2$ mv blackberry.custom.audio/ $root/bbwp/ext

bash-3.2$ ls $root/bbwp/ext
blackberry.app/                         blackberry.io.dir/                      blackberry.system.event/
blackberry.app.event/                   blackberry.io.file/                     blackberry.ui.dialog/
blackberry.custom.accelerometer/        blackberry.media.camera/                blackberry.utils/
blackberry.custom.audio/                blackberry.media.microphone/            js/
blackberry.identity/                    blackberry.payment/                     library.xml
blackberry.invoke/                      blackberry.system/                      src/

Create a ZIP with the WebWorks/TunnelTilt Sources
Since the tunneltilt directory no longer has the extensions we can just zip the rest:

bash-3.2$ cd $root/WebGL-Samples/tunneltilt

bash-3.2$ zip -r ../tunneltilt.zip *
  adding: LICENSE (deflated 66%)
  adding: NOTICE (deflated 33%)
  adding: README.md (deflated 66%)
  adding: config.xml (deflated 46%)
  adding: data/ (stored 0%)
  adding: data/images/ (stored 0%)
  adding: data/images/ball_backglow_256.png (deflated 1%)
  adding: data/images/ball_center_256.png (deflated 3%)
  adding: data/images/bg1.png (deflated 78%)
  adding: data/images/bg2.png (deflated 75%)
  adding: data/images/bg3.png (deflated 77%)
  adding: data/images/bg4.png (deflated 78%)
  adding: data/images/bg5.png (deflated 75%)
  adding: data/images/progress_bar.gif (deflated 25%)
  adding: data/images/splash.png (deflated 0%)
  adding: data/images/tap_to_restart.png (deflated 21%)
  adding: data/images/tap_to_start.png (stored 0%)
  adding: data/images/tunnelTiltIcon.png (stored 0%)
  adding: data/images/wall1.png (stored 0%)
  adding: data/images/wall2.png (deflated 0%)
  adding: data/images/wall3.png (deflated 0%)
  adding: data/images/wall4.png (deflated 0%)
  adding: data/images/wall5.png (deflated 0%)
  adding: data/images/win.png (deflated 13%)
  adding: data/levels/ (stored 0%)
  adding: data/levels/level1.json (deflated 87%)
  adding: data/levels/level2.json (deflated 88%)
  adding: data/levels/level3.json (deflated 88%)
  adding: data/levels/level4.json (deflated 85%)
  adding: data/levels/level5.json (deflated 83%)
  adding: data/sound/ (stored 0%)
  adding: data/sound/crash.mp3 (deflated 1%)
  adding: data/sound/rocket.mp3 (deflated 9%)
  adding: events.js (deflated 64%)
  adding: geometry.js (deflated 72%)
  adding: gl-matrix/ (stored 0%)
  adding: gl-matrix/gl-matrix-min.js (deflated 67%)
  adding: gl-matrix/LICENSE.md (deflated 47%)
  adding: gl-matrix/README.md (deflated 58%)
  adding: gl-utils.js (deflated 65%)
  adding: index.html (deflated 69%)
  adding: loader.js (deflated 65%)
  adding: shaders.html (deflated 70%)
  adding: sound.js (deflated 42%)

bash-3.2$ ls $root/WebGL-Samples
README.md       tunneltilt/     tunneltilt.zip

Compile the WebWorks Application
Remember to compile “-d” for the debug token

bash-3.2$ cd $root/WebGL-Samples;

bash-3.2$ $root/bbwp tunneltilt.zip -d -o .
[INFO]                  Parsing command line options
[INFO]                  Parsing bbwp.properties
[INFO]                  Validating WebWorks archive
[INFO]                  Parsing config.xml
[INFO]                  Populating application source
[INFO]                  Compiling WebWorks application
[INFO]                  Packaging the bar file
[INFO]                  Bar packaging complete
[INFO]                  WebWorks application packaging complete

Install TunnelTilt
We are now all ready, just

bash-3.2$ cd $root/WebGL-Samples

bash-3.2$ $root/bbwp/blackberry-tablet-sdk/bin/blackberry-deploy \
-installApp -password DEVICEPASS \
-device DEVICEIP -package tunneltilt.bar
Info: Sending request: Install
Info: Action: Install
Info: File size: 6320643
Info: Installing ...
Info: Processing 6320643 bytes
Info: Progress 3%...
Info: Progress 13%...
Info: Progress 99%...
Info: Progress 100%...
actual_dname::tunneltilt11d42dee67902b699aef126ff4456cb.testDev_126ff4456cb2eeff07a
actual_id::testDev_126ff4456cb2eeff07a
actual_version::1.0.3.0
result::success

Enjoy!
And we can now just enjoy your game!

And…

About these ads