in Code

Add a touch gamepad to your HTML5 game

Screenshot (104)

As we discussed in the last post, Design a game that stands out, a great way to differentiate your game is by having touch interactivity. Many touch games are not nearly as great as their console counterparts simply because they have crummy controllers.

For many games, it’s appropriate to have some sort of game controller UI to move your character around, and trigger an attack or jump. Like designing other custom touch interactions, this is hard to get right. Seb Lee-Delisle has a great write up on Multi-touch game controller in JavaScript/HTML5 for iPad, so I adapted his design to be easily reusable in your WinJS HTML5 games.

In this post, I’ll show you how to quickly get it added to a game, step-by-step.

TouchControls: GamePad

gamepad

I’ve added a new WinJS GamePad control to TouchControls control library. It lets you plug and play a gamepad into your existing game implementation, as easy as detecting keyboard or physical game controller input.

Step 1: Add the TouchControls NuGet package

In order to add the TouchControls GamePad to your game, the first step is to add the DWCares.TouchControls.WinJS NuGet package to your game.

To do this, it’s super easy. Start by opening up your WinJS game solution in Visual Studio and then right-click on your solution and click ‘Manage NuGet packages.’

image

In the dialog that pops up, just go ahead and search for “TouchControls” and click the “Install” button next to the TouchControls search result.

image

The last step for adding the NuGet package is to add a script reference to the TouchControls javascript file that you just added in your Default.html file.

<!-- Game dependencies -->
<script src="TouchControls/touchControls.js"></script>

Step 2: Add the GamePad control to your <canvas>

The next step is to instantiate the TouchControls.GamePad WinJS control. You can do this either in HTML using the data-win-control pattern, or in JavaScript. You must add the control on an HTML element of type <canvas>, so it can be drawn and sized correctly.

How to add it using HTML

<canvas id="canvas" 
        data-win-control="TouchControls.GamePad">
</canvas>

How to add it using JavaScript

function init() {
   _canvas = document.querySelector("canvas");
    _gamepad = new TouchControls.GamePad(_canvas);
 }

Step 3: Draw the GamePad every frame

I designed the control to be integrated in an existing HTML5 game loop, so I let you call draw from your game loop so you have control over it’s visibility, like any other game elements.

function draw() {   
    if(_gameOver) {
        drawMenu();   
    } else {
      _gamepad.draw();
      drawSprites();
      drawTiles();
      drawWorld();   
    }
}

Step 4: Handle input in your game loop

Like the draw loop, you can just as easily handle game controller input in your game update loop. Just like you were handling a key press or a physical game controller state.

function update() {
    if (_gamepad.leftController.position.x < 0 || 
        jaws.pressed("left")) {
           goLeft();
    }

    if (_gamepad.leftController.position.x > 0 || 
        jaws.pressed("right")) {
            goRight();
    }
}

Tweak till you’re done

After you handle input you’re gamepad will be fully operational. Just put your thumbs on your canvas and watch your player respond to your touch input! You can go further to tweak colors, opacity and controller mode. Read the github readme for full documentation.

Write a Comment

Comment