Lance JS library: Spaaace tutorial unresponsive to touch input on mobile

Question

Started trying out the Lance JS library for building multiplayer games. I can't get the Spaace tutorial to accept input on my Android device, a Pixel 2 XL running Android 8.1.0. The game works fine on my laptop.

When connecting my phone to my laptop I saw this error message in the Javascript console:

bundle.js:60989 Uncaught TypeError: Utils.shortestArc is not a function
    at MobileControls.handleMovementInput (bundle.js:60989)
    at onRequestAnimationFrame (bundle.js:60921)

Replacing this line in MobileControls.js

const Utils = require('../common/Utils');

with this line

import Utils from '../common/Utils';

fixed that TypeError.

But the game still isn't responsive to touch input. The game runs and the AI ships occasionally fly by and shot at my ship.

Answer 1

Thanks for pointing out this bug!

Looks like it was introduced with Lance 2.0.0 when KeyboardControls were first implemented in Lance, and the the Spaaace tutorial was updated to use those.

The first step in the solution was to introduce ES6 style imports like you mentioned. The extra step was to follow the same logic of KeyboardControls, and register the actual sending of input to the server. As long as there's a finger touching the screen, the relevant input (up + calculated left or right) is considered 'active' and is then sent.

Principal code:

constructor(clientEngine){

    ....

    this.clientEngine.gameEngine.on('client__preStep', ()=>{
        for (let keyName in this.activeInput){
            if (this.activeInput[keyName]){
                this.clientEngine.sendInput(keyName);
            }
        }
    });

}

The relevant commit is here

Check out the update demo:

https://spaaace.herokuapp.com/