Directional swipe and double-click in ImpactJS

Posted on July 4, 2012 | 3 minute read

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.




Categories:game dev dev games
comments powered by Disqus