Directional swipe and double-click in ImpactJS

I’ve been experimenting with simple gestures and double-clicking in ImpactJS. Over the past couple of days I’ve implemented a directional swipe and double-click. As always, not sure if this is a good approach, but it works for now.

Ok so first we bind the left mouse button in main.js:

			ig.input.bind( ig.KEY.MOUSE1, 'click');

Next, we go into player.js and start a new timer (and pause it):

		this.clickTime = new ig.Timer(0.35);
		this.clickTime.pause();

I set the timer to 350 milliseconds - our double-click allowance.

In the player update() function, we start counting clicks, releases, and their locations (over-commented for this post):

		// Each time player clicks, record click X and Y coordinates
		if (ig.input.pressed('click')) {
			this.gestureStartX = ig.input.mouse.x;
			this.gestureStartY = ig.input.mouse.y;
		}

		// Each time player unclicks, record release X and Y coordinates,
		// mark gesture as complete (all 4 click & unclick coordinates present),
		// and increment click count
		else if (ig.input.released('click')) {
			this.gestureEndX = ig.input.mouse.x;
			this.gestureEndY = ig.input.mouse.y;
			this.gesturesReady = true;
			// Click count increments by 1 each time player unclicks
			this.clickCount++;
		}

		// If the player clicks once, unpause clickTime timer
		if (this.clickCount === 1) {
			this.clickTime.unpause();
		}

		// If more than 350ms passes since first click,
		// reset click count and timer, pause timer, and clear coordinates
		if (this.clickTime.delta() > 0) {
			this.clickCount = 0;
			this.clickTime.reset();
			this.clickTime.pause();
            this.clearGesture();
		}

		// If click count reaches 2 before 350ms is up,
		// perform double-click action, then reset + pause timer and click count,
        // and clear coordinates
		else if (this.clickCount === 2) {
			console.log('DOUBLE CLICKED YO!');
			this.clickTime.reset();
			this.clickTime.pause();
			this.clickCount = 0;
            this.clearGesture();
		}

		// If gesture is complete
		if (this.gesturesReady) {
				// Check to make sure swipe was left to right & long enough
				// By subtracting end/release coordinates from start coordinates
				// And run any other checks for your action
				if (this.gestureStartX < this.gestureEndX
					&& this.gestureEndX - this.gestureStartX > ig.system.width / 3
					&& !this.boosted 
					&& this.boostsLeft > 0) {
					// Do stuff if all conditions are met
					this.boosting();
					// Clear the old gesture
					this.clearGesture();
				}

				// If conditions for the swipe action aren't met
				// Clear the gesture
				else {
					this.clearGesture();
				}
		}

And of course here’s that clearGesture() function we’re using, to make sure the boost doesn’t keep constantly triggering with the first swipe’s coordinates:

	// Clear all gestures
	clearGesture: function() {
		this.gestureEndX = null;
		this.gestureStartX = null;
		this.gestureStartY = null;
		this.gestureEndY = null;
		this.gesturesReady = false;
	},

This works when tested in Chrome or deployed to iOS 5.1.1.

As always, please let me know if you see anything going wrong with this. Like I said, it’s functional and currently works, but you never know when I’m missing something important. I’m just stumbling along here.

Jul 4, 2012