Merge pull request #3 from blackberry/master

Update Repo

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "boxquest/cocos"]
+	path = BoxQuest/cocos
+	url = https://github.com/cocos2d/cocos2d-html5.git

BoxQuest/README.md

@@ -24,19 +24,24 @@
 >   *   Modify **index.html** to explicitly call **onwebworksready();** instead of adding the event listener; or
 >   *   Leverage the [Ripple Emulator](https://developer.blackberry.com/html5/download/) in Chrome for the missing WebWorks functionality.
 >   
->   To successfully compile this application, you will need to copy the the **cocos2d** and **CocosDenshion** folders from the Cocos2d-HTML5 Github
->   repository into the **cocos** subfolder of this project. The repository is available here:
->   https://github.com/cocos2d/cocos2d-html5
+>   To successfully compile this application, there are two approaches. First, if you've cloned this repository from Github, you're
+>   already set as the **BB10-WebWorks-Community-Samples/Boxquest/cocos** folder should already be populated. You can also copy
+>   the **cocos** folder to the appropriate **tutorials** to allow them to run as well. This is possible since the
+>   Cocos2d-HTML5 framework is included as a submodule in Github and *is the recommended approach*.
+>   
+>   Alternatively, you can download the Cocos2d-HTML5 framework from Github, however for best results please use this
+>   specific version: https://github.com/cocos2d/cocos2d-html5/tree/a02ffc496de71ec3c51a98ce4a71dffaab0a69e8
+>   
+>   Once downloaded, the process would be the same; specifically to copy the Cocos2d-HTML5 framework into the **cocos**
+>   subfolders of the main project and tutorials. For reference, the file structure should be that **cocos2d** is a direct
+>   child of the **cocos** folder.
 
 ### Virtual Controls (Freewill.js)
 >   
 >   Freewill.js is a Joystick and Button framework intially developed for Cocos2d-HTML5. It was then generalized to be framework
 >   agnostic while developing [PeaksAndValleys](https://github.com/blackberry/WebGL-Samples/tree/master/PeaksAndValleys). There have been some
 >   slight modifications to meet the requirements for this sample, but ultimately Freewill.js can be leveraged in any HTML5 application
->   requiring virtual controls.
->   
->   Currently, a hidden Joystick is used to move the hero by dragging anywhere on the left half of the screen and a hidden
->   button is used to make the hero jump by tapping anywhere on the right half of the screen.
+>   requiring virtual controls. For a basic sample implementation, please see: https://github.com/oros/Freewill.js
 >   
 >   The code is currently commented out, but if you would like to use the keyboard to control the hero, you can make the modifications
 >   in SceneStart.js to accept keyboard input instead of leveraging Freewill.js.
@@ -106,8 +111,8 @@
 
 ## Tested With
 >   
->   *   BlackBerry 10 WebWorks SDK 1.0.2.9
->   *   BlackBerry Dev Alpha B, 10.0.9.388
+>   *   BlackBerry 10 WebWorks SDK 1.0.4.5
+>   *   BlackBerry Dev Alpha B, 10.0.9.1675
 
 ## Known Issues
 >   
@@ -118,4 +123,4 @@
 >   Immense thanks to the following people. They might not know how much they
 >   helped me, but I appreciate it none the less.
 >   *   The [Cocos2d-HTML5 Community](http://www.cocos2d-x.org/projects/cocos2d-x/boards/19)
->   *   [Seb Lee-Delisle (@seb_ly)](http://creativejs.com/2011/09/box2d-javascript-tutorial-series-by-seth-ladd/) for compiling, and [Seth Ladd (@sethladd)](http://blog.sethladd.com/) for writing, the Box2dWeb tutorials.
+>   *   [Seb Lee-Delisle (@seb_ly)](http://creativejs.com/2011/09/box2d-javascript-tutorial-series-by-seth-ladd/) for compiling the Box2DWeb tutorials by [Seth Ladd (@sethladd)](http://blog.sethladd.com/)

BoxQuest/config.xml

@@ -19,7 +19,7 @@
 <widget xmlns="http://www.w3.org/ns/widgets"
 		xmlns:rim="http://www.blackberry.com/ns/widgets"
 		id="com.oros.boxquest"
-		version="1.0.0">
+		version="1.0.0.0">
 
 	<name>BoxQuest</name>
 	<author>Erik Oros</author>

BoxQuest/index.html

@@ -21,7 +21,7 @@
 		<script type="text/javascript">
 			/* Ensure that our viewport is scaled properly. */
 			(function () {
-				var meta = document.createElement("meta");
+				var meta = document.createElement('meta');
 				meta.setAttribute('name', 'viewport');
 				meta.setAttribute('content', 'initial-scale=' + (1.0 / window.devicePixelRatio) + ',user-scalable=no');
 				document.getElementsByTagName('head')[0].appendChild(meta);
@@ -32,7 +32,7 @@
 	<body>
 		<div id="freewill"></div>
 		<canvas id="ccCanvas"></canvas>
-		<script type="text/javascript" src="./js/webworks-1.0.2.9.js"></script>
+		<script type="text/javascript" src="local:///chrome/webworks.js"></script>
 		<script type="text/javascript">
 			/* Once WebWorks is ready, we will begin our Cocos2d-HTML5 initailization. */
 			function onwebworksready() {
@@ -52,6 +52,7 @@
 					]
 				};
 				script.src = script.c.engineDir + 'platform/jsloader.js';
+				document.ccConfig = script.c;
 				document.body.appendChild(script);
 				/* Once the noted script completes, it will load and trigger main.js. */
 			}

BoxQuest/js/Box2dWebWorker.js

@@ -42,7 +42,7 @@ self.update = function () {
 		);
 	}
 
-	/* Cap the maximum horizontal veloicities between -5.0 and 5.0. */
+	/* Cap the maximum horizontal velocities between -5.0 and 5.0. */
 	self.hero.SetLinearVelocity(
 		new Box2D.Common.Math.b2Vec2(
 			Math.max(-5.0, Math.min(self.hero.GetLinearVelocity().x, 5.0)),

BoxQuest/js/Freewill.js

@@ -34,6 +34,12 @@ var Freewill = function (params) {
 		/* Initialize our controls arrays. */
 		controls = this.controls = [];
 		this.container = params.container;
+		this.container.style.position = 'fixed';
+		this.container.style.left = '0px'; this.container.style.right = '0px';
+		this.container.style.top = '0px'; this.container.style.bottom = '0px';
+		this.container.style.border = '0px'; this.container.style.margin = '0px'; this.container.style.padding = '0px';
+		this.container.style.overflow = 'hidden';
+		this.container.style.zIndex = '999';
 
 		/* The global 'touchstart' listener for the container. Will cycle through all of our
 		 * controls to find the appropriate owner.
@@ -139,6 +145,8 @@ Freewill.prototype.addJoystick = function (params) {
 				joystick.velocity = [0.0, 0.0];
 				joystick.direction = 0;
 				joystick.context = joystick.getContext('2d');
+				joystick.context.drawImage(base, 0.0, 0.0);
+				joystick.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
 
 				/* Set the Joystick's position. */
 				params.pos = typeof params.pos !== 'undefined' ? params.pos : [0.0, 0.0];
@@ -165,13 +173,22 @@ Freewill.prototype.addJoystick = function (params) {
 					if (this.fixed === false) {
 						this.style.left	= (point[0] - base.width / 2.0) + 'px';
 						this.style.top	= (point[1] - base.height / 2.0) + 'px';
+						this.x = point[0];
+						this.y = point[1];
+
+						/* Draw the control. */
+						this.context.clearRect(0.0, 0.0, this.width, this.height);
+						this.context.drawImage(base, 0.0, 0.0);
+						this.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
+					} else {
+						this.x = parseFloat(this.style.left.replace('px', '')) + base.width / 2.0;
+						this.y = parseFloat(this.style.top.replace('px', '')) + base.height / 2.0;
+
+						/* Draw the control based on movement from center. */
+						this._onTouchMove(touch, point);
 					}
-					this.x = point[0];
-					this.y = point[1];
 
-					/* Draw the control. */
-					this.context.drawImage(base, 0.0, 0.0);
-					this.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
+
 
 					/* If there is a user-defined onTouchStart function, invoke it now. */
 					if (this.onTouchStart) {
@@ -218,6 +235,7 @@ Freewill.prototype.addJoystick = function (params) {
 					this.direction = Math.floor(4 + (-Math.atan2(dy, dx) + Math.PI / 8) * 4 / Math.PI) % 8;
 
 					/* Draw the control. */
+					this.context.clearRect(0.0, 0.0, this.width, this.height);
 					this.context.drawImage(base, 0.0, 0.0);
 					this.context.drawImage(pad, dx + (base.width - pad.width) / 2.0, dy + (base.height - pad.height) / 2.0);
 
@@ -233,6 +251,7 @@ Freewill.prototype.addJoystick = function (params) {
 					this.velocity = [0.0, 0.0];
 
 					/* Draw the control. */
+					this.context.clearRect(0.0, 0.0, this.width, this.height);
 					this.context.drawImage(base, 0.0, 0.0);
 					this.context.drawImage(pad, (base.width - pad.width) / 2.0, (base.height - pad.height) / 2.0);
 

BoxQuest/js/SceneStart.js

@@ -123,7 +123,7 @@ var LayerStart = cc.Layer.extend({
 		this.freewill.move = this.freewill.addJoystick({
 			imageBase: './images/freewill/buttonblue.png',						/* Irrelevant since we never see the Joystick. */
 			imagePad: './images/freewill/buttonblue.png',						/* Irrelevant since we never see the Joystick. */
-			fixed: true,														/* Joystick won't move. */
+			fixed: false,														/* Joystick will move. */
 			pos: [0.0, 0.0],													/* Irrelevant since we never see the Joystick. */
 			trigger: [0.0, 0.0, window.innerWidth / 2.0, window.innerHeight],	/* The touch area that triggers this Joystick will be the left half of the screen. */
 			opacLow: 0.0,														/* Lowest opacity is 0; invisible. */