Enchant.js Guide

by Patrick Casao, Cal Poly

04 Player Input

The codeleap for this section may be accessed here. In this section, we will discuss a few different ways you can read in player input. Following this explanation, we will implement Keyboard Input and Mouse Input.

Subsections
01 A Word on Input
02 Keyboard Input
03 Mouse/Touch Input

04.01 - A Word on Input

Reading in player input connects the player to the game. It gives the player control over a character, and gets them properly involved. It lets the player walk, jump, defend, attack, and so on. As useful as player input is, reading player input poorly could easily break a game. With these concerns in mind, let’s take a crack at implementing input.

Top.

04.02 - Keyboard Input

By default, enchant.js provides input listeners for six buttons: UP, DOWN, LEFT, RIGHT, A, and B. By default, the directions are bound to the arrow keys. Any of the six buttons may also be bound to any key with an ASCII value. We’ll address that later.

Let’s implement Keyboard Input in our example code. (Once again, you can access it from here.)

CODE EXAMPLE: Adding Keyboard Input

First, we’ll alter the ‘onenterframe’ function of the Sprite class in the code so that it listens to keyboard input. In the Player1 class’s ‘onenterframe’ function under 04.2 Keyboard Input add:


if (game.input.left && !game.input.right) {
	this.tx = this.x -= moveSpeed;
} 
else if (game.input.right && !game.input.left) {
	this.tx = this.x += moveSpeed;
}

if (game.input.up && !game.input.down) {
	this.ty = this.y -= moveSpeed;
} 
else if (game.input.down && !game.input.up) {
	this.ty = this.y += moveSpeed;
}

This code makes it so that the sprite moves in the direction of the keys that are pressed. Confirm key listeners work by clicking RUN and moving the sprite around with the arrow keys.

Now that we’ve got a basic form of keyboard input working, let’s bind the buttons to a set of alternate keys. This can be accomplished using game.keybind(ASCII_VALUE, ‘BUTTON_NAME’), where ASCII_VALUE is the integer value of a key and BUTTON_NAME is a one of the button values.
i.e.) game.keybind(65, ‘left’) will bind the left button to the ‘W’ key.

Let's set some new key bindings. Under 04.2 Key Binding, add:


game.keybind(65, 'left');	
game.keybind(68, 'right');
game.keybind(87, 'up');
game.keybind(83, 'down');

This should bind the directional inputs to the keys W, A, S, and D. Confirm that these new key bindings work by clicking on the RUN button and testing it.

Note: To test the key bindings, click on the "New window" button underneath the game frame. A new window should pop up and it should read in your WASD key input just fine.

Now that we have keyboard input working, let's add mouse input.

Top.

04.03 - Mouse/Touch Input

The mouse listener of enchant.js can also be used to read in touch input. This means that games written in enchant.js that depend on mouse input can also be played on mobile devices with touch input. We will implement mouse input in another sprite class.

CODE EXAMPLE: Adding Mouse Input

In the Player2 class’s initialize function under 04.3 Add Tvalues, add:

 
this.tx = this.x;
this.ty = this.y;

This will create the variables tx and ty, which we'll use to adjust the player's x and y attributes. In the Player2 class's onenterframe function under 04.3 Mouse Input add:

 
this.x += (this.tx - this.x)/4;
this.y += (this.ty - this.y)/4;

This will actually adjust x and y by adding 1/4th of the distance from tx to x and ty to y until the player sprite reaches the mouse click location. Under 04.3 Mouse Listener add:


game.rootScene.addEventListener('touchend', function(e){
	player2.tx = e.x-16;
 	player2.ty = e.y-16;
});

This code creates an event listener that sets the sprite's tx and ty values to x and y position of a mouse click.

In this case we’re using touchend. This listener returns true when a touch or click is released. Alternatively, we can use touchstart. This listener returns true when a touch or click initially occurs, whether or not it’s been released.

In the next section we will discuss Labels.

Top.

[Previous] [Home] [Top] [Next]