iPad/iOS touch controls

Lars

Hi, is there support for touch controls in GameQuery yet, if so how can I bind events from onscreen HTML elements (arrow keys) to act as keydown or mousedown to trigger the player movement?

Basically I've got 4 arrow keys in the corner of the screen, is there a relatively easy way to map these to trigger as keypresses so that the existing gamequery keyTracker still works as well as recognise touch input.

If it's not supported to you have any suggestions for a plugin or solution to use that will add this support? Would I need to include something like jQuery mobile to recognise the touch inputs?

selim

Hi Lars,

You could bind the touche event to manipulate the keyTracker Array if you want, it would look something like that:

$("#leftKey").bind("touchstart", function(event){   for(var i=0; i < touches.length; i++){ if(touches[i].target==this){ $.gameQuery.keyTracker[theKeyYouEmulate] = true; } } return false; }); $("#leftKey").bind("touchend", function(event){ for(var i=0; i < touches.length; i++){ if(touches[i].target==this){ $.gameQuery.keyTracker[theKeyYouEmulate] = false; } } return false; });

I never used it that way but instead wrote a control methode without using the keyTracker. But if you want your code to run using touch as well as keys this is a good idea.

You may want to disable scrolling to, it may help for a touch based game:

document.ontouchmove = function(e) {e.preventDefault()};

selim

How and by the way there is a shim for mobile device. It's uses a very strange methode to control the game and I wouldn't use it 'as is' but it may help you for some details: https://github.com/onaluf/gameQuery/blob/master/tools/shim-mobile/index.html

Lars

Hi Selim,

Thanks for your responses. I actually figured it out myself in the end. Basically what I ended up doing was to bind the touchstart event to the html elements that I was using as arrow buttons. Within each of these I triggered the keypress event that I was using already for controls. This meant that I didn't have to rewrite the desktop functions at all.

			$('.move-up').bind('mousedown touchstart', function() { 
				var w = jQuery.Event("keydown");
				w.which = 38; // # Some key code value
				w.keyCode = 38;
				$('.move-up').trigger(w);				
			});

I then also called the keyup event for touchend

			$('.move-up').bind('mouseup touchend', function(){
				var w = jQuery.Event("keyup");
				w.which = 38; // # Some key code value
				w.keyCode = 38;
				$('.move-up').trigger(w);	
			});