CH. 08 Controls Part II (Touch) [JS Game Dev Tutorial]

Touch

Intro

Touch controls are controls implemented on a touchable interface.

Disclaimer: I still can't quite get these to be perfect; but touch controls have been known to be awkward anyway, so I did not give up!

Disclaimer 2: Newer browser versions have broken touch events. Stuff like holding to select or touch and drag to scroll are harder to disable, thus causing more problems for game development. So be prepared if an error occurs; on soloLearn I get ignored attemp [blah blah] scrolling cant be interrupted. It will work without all this page content. Trust meeee. I have tested it already.
What are controls made of

Well for one, we have to make sure a listener is available for capturing user-triggered events. They also consist of buttons, which we will look at later.

In JS, these are known as event listeners. I won't be going too deep into detail with this, as this tutoral is not focused on that.

Anyway... let's add a touch event listener to our window

I use window rather than canvas to get an automatic request focus (this is a Java term, I don't remember the JS equivalent).
```
/*
    I prefer to create the events
    before the game has even loaded.
    Pre-ES6 I placed them at the very end
    of the document.
    Now I place them in a key or touch listener
    class and create it there.
    The listener class is constructed
    in a game class constructor.
 */
 // This will be at the end for now
 // What to do when a touch has been detected
 window.addEventListener("touchstart", callback, options);
 // What to do after the touch has been removed, e.g. lift a finger or stylus
 window.addEventListener("touchend", callback, options);
 // What to do if the touch point has moved location without raising the source (finger or stylus)
 window.addEventListener("touchmove", callback, options);
 // What to do if the touch has been disrupted. Commonly triggered when too many touchpoints are created.
 window.addEventListener("touchcancel", callback, options);
                            
```
Touchstart is ideal for simulating a button push.

Touchmove is ideal for simulating a button release then pushing something else action.

Touchend is ideal for releasing a button.

I never use touchcancel, but that is ideal for halting all touch actions if any error in the page or device occurs.

A callback is a function to be called when the caller's work has completed. These event listeners don't visually have any work to be done, so the callback is, technically, called immediately. One argument it does pass to the callback is an Event object, which we will use.

The options are extra characteristics to add to the event listener. capture and passive are the most well known and used. Read more.

We will use passive: false in order to use preventDefault, explained below.

The Event Object

The Event object has a lot to it, but we will only be using targetTouches (to get the touch list of touch objects) and preventDefault (to prevent the browser's default touch operation(s)).

// Test touchstart
window.addEventListener("touchstart", function(event){
    // Prevent default operations from taking place.
    // Such as hold to select, drag to scroll, etc.
    event.preventDefault();
    
    // Index 0 means the first touch detected
    var t = event.targetTouches[0];
    
    // Client X and Y refer th the coordinates inside the browser window.
    // The searchbar and tabs are excluded from this.
    console.log("Touch started at X: " + t.clientX + " Y: " + t.clientY);
}, {passive: false});

// move
window.addEventListener("touchmove", function(event){
    // Prevent default operations from taking place.
    // Such as hold to select, drag to scroll, etc.
    event.preventDefault();
    
    // Index 0 means the first touch detected
    var t = event.targetTouches[0];
    
    // Client X and Y refer th the coordinates inside the browser window.
    // The searchbar and tabs are excluded from this.
    console.log("Touch move X: " + t.clientX + " Y: " + t.clientY);
}, {passive: false});

// end
window.addEventListener("touchend", function(event){
    // Prevent default operations from taking place.
    // Such as hold to select, drag to scroll, etc.
    event.preventDefault();
    
    // Index 0 means the first touch detected
    var t = event.targetTouches[0];
    
    // Client X and Y refer th the coordinates inside the browser window.
    // The searchbar and tabs are excluded from this.
    console.log("Touch end X: " + t.clientX + " Y: " + t.clientY);
}, {passive: false});

The above is just so you can see when the events are triggered.

If you want, look at MDN to see more of the Event object; however, these are all we need for simple touch controls.

Buttons

Well we got a touch listener set up, but it doesn't do anything to our game world... that is where buttons come into play.

Note: you can use a path finding algorithm as a touch control, which is a lot more pleasing and less frustruating for the player, but slightly more complicated. I'm keeping it simple for everyone to participate. If interested, I suggest looking up the A* (pronounced a star) algorithm.

To make a button class, we must think up everyhting a button has. I thought up: x and y positions for placing on the screen, width and height for size and touchable area, and a isTriggered boolean to know if the button has been, or is being, pressed.
```
// Button class. Takes x and y for placement
// w and h for width and height
function Button(x, y, w, h){
    this.x = x;
    this.y = y;
    this.width  = w;
    this.height = h;
    
    // Has the button been triggered/pressed/used/down
    this.isTriggered = false;
}

                            
```
Cool, we have touches and buttons down, but how to make them interact...

Collisions.

Collisions

There will be a chapter on collisions, but I am introducing it early for obvious reasons.

The most basic collision algorithm is the AABB algorithm. It is for squares only, but more details in the collision chapter.

A square has an x and y position, and a width and height. Anything inside those bounds is considered colliding. The only reason you don't see merging of two objects is because a resolusion exists before drawing the frame, but we will cover that in the collisions chapter.

Remember x is left and right and y is up and down. Width is how wide something is, so left and right, and height is how high something is, so up and down.

Given a collision occurs when overlap happens, let's pseudo-code it up!

// For demo purposes, don't copy quite yet
Function isColliding
    Pass In: Object a
    Pass In: Object b
    
    If 
        // A is hitting B from A's left
        a.x is less than b.x + b.width    And
        
        // A is hitting B from A's right
        a.x + a.width is greater than b.x And
        
        // A is hitting B from A's top
        a.y is less than b.y + b.height   And
        
        // A is hitting B from A's bottom
        a.y + a.height is greater than b.y
    Then
        // We have a hit!
        Pass Out: True 
    
    // Always return false
    Pass Out: False
Endfunction

There is an OR equivalent, which always checks if the point is outside the rectangle, and returns false if so. I will be using that one. Shouldn't be confusing, it is just the opposite of above.

I encourage you to try to code the above yourself, but in JS, the answer is below (edit: NOT!! Sorry)!

Since the button is the one that is collided-with, I will add the prototype to the button class

function Button(x, y, width, height){
    ...
}
// X and Y since we are testing against
// clientX and clientY
Button.prototype.isColliding(x, y){
    // All this does is check for points outside the rectangle
    // If any statement is true, auto return false
    // This method is BAD for game object collisions, but great for touch detection
    if (
        x < this.x ||  // x is to the right
        x > this.x + this.width || // x is to the left
        y < this.y ||  // y is to the top
        y > this.y + this.height || // y is to the bottom
    ) return false; // No touch
    
    // If the above is all false
    return true;
}

Putting it All Together

Lengthy! But time to conclude this.

Everytime a touch has been detected, we test the buttons to see which one was tested.

Lets make a testButtons callback.

// Array of our buttons
// Let size be 32 for now
var buttons = [
    // Very left
    new Button(0, canvas.height - 32, 32, 32),
    
    // Very right
    new Button(canvas.width-32, canvas.height - 32, 32, 32)
];
// Array of touches to test multitouch
function testButtons(targetTouches){
    // Go through every button
    for (var i = 0; i < buttons.length; i++){
        var b = buttons[i]; // Get button
        b.isTriggered = false;
        
        // Go through every touch
        // Must go backwards for some reason or else many errors.
        // Didnt debug 100% but going backwards worked...
        // I think because of touchend
        for (var j = targetTouches.length-1; j > -1; --j){
            var t = targetTouches[j]; // Reference touch
            
            // If colliding
            if (b.isColliding(t.clientX, t.clientY)){
                // The button is pressed
                b.isTriggered = true;
                
                // No need for checking more points
                break;
            }
        }
    }
}

That is about it :phew.png:

After this, you assign a button in the buttons array a role, so buttons[0] is left, buttons[1] is right, and iterate through the object you want to take input and update their behavior (this will be 9 times out of 10, our player).

And of course draw the buttons in the main render method by iterating through the buttons array and drawing a rect, or even better, add a draw method to the button class.

Try to code a simple left and right square movement; for a challenge, do a collecting items game using the AABB algorithm given for detecting collisions.

Touch control code sample in JS tab

Thanks for reading, next chapter iiiiis collisions. See you then!

Interactive touch control below. Note you will likely get an error. I noticed touchmove causes this error so press the black buttons like buttons. :L

Ch. 08 Controls Part II (Touch)

Touch

Intro

What are controls made of

The Event Object

Buttons

Collisions

Putting it All Together

CH 08 Controls II: Touch [JS Game Dev Tutorial]