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
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
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
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
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::188.8.131.52 result::success
And we can now just enjoy your game!