Create a Swipe Tracker

I made this same issue previously, but on an alternate account where I would not be subscribed properly to this issue. I’ve remade it.

It would be useful to have a feature that allows you to track swipes on a mobile device. I’ve created my own using Excaliburs’ current features. I’m not sure if it’s suitable for the engines’ scope, however. The code is below for reference, but I believe that a utility for swipe gestures would be handy.

The math isn’t fantastic in this Swipe Tracker either. I’m still playing around with it.

import { Vector, Class, Engine, GameEvent } from "excalibur";
import { PointerDownEvent, PointerMoveEvent, PointerUpEvent } from "excalibur/dist/Input";

export enum STSensitivity {
    High,
    Medium,
    Low
}

export enum SwipeDirection {
    NONE,
    UP,
    RIGHT,
    DOWN,
    LEFT
}

export class SwipeEvent extends GameEvent<any> {
    constructor(public direction: SwipeDirection) {
      super();
    }
}

export default class SwipeTracker extends Class {    

    public sensitivity: STSensitivity;

    get swipeTimeDelay(): number { 
        return this.sensitivity == STSensitivity.High ? 50 : STSensitivity.Medium ? 100 :  200;
    }

    get swipePositionThreshold(): number { 
        return this.sensitivity == STSensitivity.High ? 80 : STSensitivity.Medium ? 120 :  180;
    }

    private _timerComplete: Boolean;
    private _initialPointerPosition: Vector;
    private _swipeEventEmitted: Boolean;

    constructor(_engine : Engine) {
        super();
        this.sensitivity = STSensitivity.High;

        _engine.input.pointers.primary.on('down', (pe) => {
            let castPE = pe as PointerDownEvent;
            this._initialPointerPosition = new Vector(castPE.screenPos.x, castPE.screenPos.x);
            this._swipeEventEmitted = false;
            this._timerComplete = false;

            setTimeout(() => {
                this._timerComplete = true
            }, this.swipeTimeDelay);
        });

        _engine.input.pointers.primary.on('move', (pe) => {
            let castPE = pe as PointerMoveEvent;
            this.emitSwipeIfNecessary(castPE);
        });

        _engine.input.pointers.primary.on('up', (pe) => {
            let castPE = pe as PointerMoveEvent;
            this.emitSwipeIfNecessary(castPE);
        });
    }

    private emitSwipeIfNecessary( pe: PointerMoveEvent | PointerUpEvent) {
        let swipeDirection = SwipeDirection.NONE;
        
        if (this._timerComplete && !this._swipeEventEmitted) {
            if (pe.screenPos.x > this._initialPointerPosition.x + this.swipePositionThreshold) {
                swipeDirection = SwipeDirection.RIGHT;
            } else if (pe.screenPos.x < this._initialPointerPosition.x - this.swipePositionThreshold) {
                swipeDirection = SwipeDirection.LEFT;
            } else if (pe.screenPos.y > this._initialPointerPosition.y + this.swipePositionThreshold) {
                swipeDirection = SwipeDirection.DOWN;
            } else if (pe.screenPos.y < this._initialPointerPosition.y - this.swipePositionThreshold) {
                swipeDirection = SwipeDirection.UP;
            }
            
            if (swipeDirection != undefined) {
                this.emit('swipe', new SwipeEvent(swipeDirection));
                this._swipeEventEmitted = true;
            }
        }
    }
}

Usage:

let tracker = new SwipeTracker(_engine);
tracker.on('swipe', (sw: SwipeEvent) => { console.log(sw.direction) })

[eonarheim]

@justjoeyuk As for working on the engine while building a game I’ve done a couple approaches

• Git submodule in your game project with a fork of excalibur included, then reference the build files in your game.
• NPM file reference in your game’s package.json to a local build of excalibur on your machine

I’ll make an issue later to update our readme to include this in our documentation 👍

[github-actions[bot]]

This issue hasn’t had any recent activity lately and is being marked as stale automatically.