Updated TouchControls and ShipControls with mobile fixes.

Author: BKcore

bkcore.coffee/TouchController.coffee

@@ -7,14 +7,17 @@
 ###
 class TouchController
 
+  @isTouchable: ->
+    return ('ontouchstart' of document.documentElement);
+
   ###
     Creates a new TouchController
 
     @param dom DOMElement The element that will listen to touch events
     @param stickMargin int The left margin in px for stick detection
     @param buttonCallback function Callback for non-stick touches
   ###
-  constructor: (@dom, @stickMargin, @buttonCallback) ->
+  constructor: (@dom, @stickMargin=200, @buttonCallback=null) ->
     @active = true
     @touches = null
     @stickID = -1
@@ -39,7 +42,7 @@ class TouchController
         @stickVector.set(0, 0)
         continue
       else
-        @buttonCallback?(touch, event)
+        @buttonCallback?(on, touch, event)
     @touches = event.touches
     false
 
@@ -68,6 +71,8 @@ class TouchController
         @stickID = -1
         @stickVector.set(0, 0)
         break
+      else
+        @buttonCallback?(off, touch, event)
     false
 
 ###

bkcore.coffee/TouchController.js

@@ -71,8 +71,6 @@ bkcore.Timer.prototype.update = function()
 
 /*!
  * Returns a formatted version of the current elapsed time using msToTime().
- *
- * 
  */
 bkcore.Timer.prototype.getElapsedTime = function()
 {

bkcore/Timer.js

@@ -57,7 +57,7 @@ bkcore.hexgl.Gameplay = function(opts)
 	{
 		self.raceData.tick(this.timer.time.elapsed);
 
-		self.hud.updateTime(self.timer.getElapsedTime());
+		self.hud != null && self.hud.updateTime(self.timer.getElapsedTime());
 		var cp = self.checkPoint();
 
 		if(cp == self.track.checkpoints.start && self.previousCheckPoint == self.track.checkpoints.last)
@@ -74,10 +74,10 @@ bkcore.hexgl.Gameplay = function(opts)
 			else
 			{
 				self.lap++;
-				self.hud.updateLap(self.lap, self.maxLaps);
+				self.hud != null && self.hud.updateLap(self.lap, self.maxLaps);
 
 				if(self.lap == self.maxLaps)
-					self.hud.display("Final lap", 0.5);
+					self.hud != null && self.hud.display("Final lap", 0.5);
 			}
 		}
 		else if(cp != -1 && cp != self.previousCheckPoint)
@@ -107,7 +107,7 @@ bkcore.hexgl.Gameplay.prototype.simu = function()
 {
 	this.lapTimes = [92300, 91250, 90365];
 	this.finishTime = this.lapTimes[0]+this.lapTimes[1]+this.lapTimes[2];
-	this.hud.display("Finish");
+	this.hud != null && this.hud.display("Finish");
 	this.step = 100;
 	this.result = this.results.FINISH;
 	this.shipControls.active = false;
@@ -128,7 +128,7 @@ bkcore.hexgl.Gameplay.prototype.start = function(opts)
 	if(this.mode == 'replay')
 	{
 		this.cameraControls.mode = this.cameraControls.modes.ORBIT;
-		this.hud.messageOnly = true;
+		this.hud != null && this.hud.messageOnly = true;
 
 		try {
 			var d = localStorage['race-'+this.track.name+'-replay'];
@@ -147,9 +147,12 @@ bkcore.hexgl.Gameplay.prototype.start = function(opts)
 	this.active = true;
 	this.step = 0;
 	this.timer.start();
-	this.hud.resetTime();
-	this.hud.display("Get ready", 1);
-	this.hud.updateLap(this.lap, this.maxLaps);
+	if(this.hud != null)
+	{
+		this.hud.resetTime();
+		this.hud.display("Get ready", 1);
+		this.hud.updateLap(this.lap, this.maxLaps);
+	}
 }
 
 bkcore.hexgl.Gameplay.prototype.end = function(result)
@@ -163,12 +166,12 @@ bkcore.hexgl.Gameplay.prototype.end = function(result)
 
 	if(result == this.results.FINISH)
 	{
-		this.hud.display("Finish");
+		this.hud != null && this.hud.display("Finish");
 		this.step = 100;
 	}
 	else if(result == this.results.DESTROYED)
 	{
-		this.hud.display("Destroyed");
+		this.hud != null && this.hud.display("Destroyed");
 		this.step = 100;
 	}
 }
@@ -181,22 +184,22 @@ bkcore.hexgl.Gameplay.prototype.update = function()
 
 	if(this.step == 0 && this.timer.time.elapsed >= this.countDownDelay+this.startDelay)
 	{
-		this.hud.display("3");
+		this.hud != null && this.hud.display("3");
 		this.step = 1;
 	}
 	else if(this.step == 1 && this.timer.time.elapsed >= 2*this.countDownDelay+this.startDelay)
 	{
-		this.hud.display("2");
+		this.hud != null && this.hud.display("2");
 		this.step = 2;
 	}
 	else if(this.step == 2 && this.timer.time.elapsed >= 3*this.countDownDelay+this.startDelay)
 	{
-		this.hud.display("1");
+		this.hud != null && this.hud.display("1");
 		this.step = 3;
 	}
 	else if(this.step == 3 && this.timer.time.elapsed >= 4*this.countDownDelay+this.startDelay)
 	{
-		this.hud.display("Go", 0.5);
+		this.hud != null && this.hud.display("Go", 0.5);
 		this.step = 4;
 		this.timer.start();
 

bkcore/hexgl/Gameplay.js

@@ -20,7 +20,7 @@ bkcore.hexgl.HexGL = function(opts)
 	this.a = window.location.href;
 
 	this.active = true;
-
+	this.displayHUD = opts.hud == undefined ? true : opts.hud;
 	this.width = opts.width == undefined ? window.innerWidth : opts.width;
 	this.height = opts.height == undefined ? window.innerHeight : opts.height;
 
@@ -265,12 +265,14 @@ bkcore.hexgl.HexGL.prototype.initRenderer = function()
 	renderer.domElement.style.position = "relative";
 
 	this.containers.main.appendChild( renderer.domElement );	
+	this.canvas = renderer.domElement;
 	this.renderer = renderer;
 	this.manager = new bkcore.threejs.RenderManager(renderer);
 }
 
 bkcore.hexgl.HexGL.prototype.initHUD = function()
 {
+	if(!this.displayHUD) return;
 	this.hud = new bkcore.hexgl.HUD({
 		width: this.width,
 		height: this.height,

bkcore/hexgl/HexGL.js

@@ -8,9 +8,10 @@
 var bkcore = bkcore || {};
 bkcore.hexgl = bkcore.hexgl || {};
 
-bkcore.hexgl.ShipControls = function(domElement)
+bkcore.hexgl.ShipControls = function(ctx)
 {
 	var self = this;
+	var domElement = ctx.document;
 
 	this.active = true;
 	this.destroyed = false;
@@ -114,6 +115,17 @@ bkcore.hexgl.ShipControls = function(domElement)
 		right: false
 	};
 
+	this.touchController = bkcore.TouchController.isTouchable() ? new bkcore.TouchController(
+		domElement, ctx.width/2, 
+		function(state, touch, event){
+			if(event.touches.length <= 1)
+				self.key.forward = false;
+			else
+				self.key.forward = true;
+			console.log(event.touches.length);
+			console.log(self.key.forward);
+		}) : null;
+
 	function onKeyDown(event) 
 	{
 		switch(event.keyCode) 
@@ -136,7 +148,7 @@ bkcore.hexgl.ShipControls = function(domElement)
 
 	function onKeyUp(event) 
 	{
-		switch(event.keyCode) 
+		switch(event.keyCode)
 		{
 			case 38: /*up*/	self.key.forward = false; break;
 
@@ -212,6 +224,12 @@ bkcore.hexgl.ShipControls.prototype.update = function(dt)
 	var rollAmount = 0.0;
 	var angularAmount = 0.0;
 
+	if(this.touchController != null)
+	{
+		angularAmount -= this.touchController.stickVector.x/100 * this.angularSpeed * dt;
+		rollAmount += this.touchController.stickVector.x/100 * this.rollAngle;
+	}
+
 	if(this.key.forward)
 		this.speed += this.thrust * dt;
 	else

bkcore/hexgl/ShipControls.js

@@ -350,7 +350,7 @@ bkcore.hexgl.tracks.Cityscape = {
 			ship.add(boosterLight);
 
 		// SHIP CONTROLS
-		var shipControls = new bkcore.hexgl.ShipControls(ctx.document);
+		var shipControls = new bkcore.hexgl.ShipControls(ctx);
 		shipControls.collisionMap = this.lib.get("analysers", "track.cityscape.collision");
 		shipControls.collisionPixelRatio = 2048.0 / 6000.0;
 		shipControls.collisionDetection = true;
@@ -423,7 +423,7 @@ bkcore.hexgl.tracks.Cityscape = {
 			this.objects.components.cameraChase.cameraCube.rotation.copy(c.rotation);*/
 
 			this.objects.composers.game.render(dt);
-			this.objects.hud.update(
+			if(this.objects.hud) this.objects.hud.update(
 				this.objects.components.shipControls.getRealSpeed(100), 
 				this.objects.components.shipControls.getRealSpeedRatio(), 
 				this.objects.components.shipControls.getShield(100),