Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Updated Freewill.js implementation. #24

Merged
merged 2 commits into from

2 participants

@oros

A few issues were found here:
blackberry/WebGL-Samples#14

They were fixed in Freewill.js and the sample was updated to reflect the new controls.

@oros oros referenced this pull request in blackberry/WebGL-Samples
Closed

freewill.addJoystick didn't show up any joystick .. #14

@pelegri pelegri merged commit 1d32f94 into blackberry:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 7, 2013
  1. @oros
  2. @oros

    Updated comment.

    oros authored
This page is out of date. Refresh to see the latest.
Showing with 25 additions and 6 deletions.
  1. +24 −5 BoxQuest/js/Freewill.js
  2. +1 −1  BoxQuest/js/SceneStart.js
View
29 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);
View
2  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. */
Something went wrong with that request. Please try again.