Getting Started With Crafty: Controls, Events, and Text

Getting Started With Crafty: Controls, Events, and Text

In the last tutorial, you learned about entities in Crafty and how you can manipulate them using different methods. In this tutorial, you will learn about different components that will allow you to move different entities around using the keyboard.

Crafty has three different components to move elements around. These are Twoway, Fourway, and Multiway. This tutorial will introduce you to all these components. In the end, you will learn about the Keyboard component and various methods associated with it. 

Twoway and Fourway

The Twoway component allows an entity to move left or right using arrow keys or A and D. It also allows the entity to jump using the up arrow or the W key. You will have to add a Gravity component to your entities to make them jump. 

The .twoway() method accepts two arguments. The first one determines the speed of the entity in the horizontal direction, while the second argument determines the jump speed of the entity. Leaving out the second argument will set the value of the jump speed equal to twice the speed in the horizontal direction.

The Fourway component will allow an entity to move in four different directions by either using the arrow keys or W, A, S, D. The .fourway() method only accepts one argument, which will determine the speed of the given entity in all directions.

Multiway

One major drawback of the Fourway component is that it does not allow you to set different speeds for the horizontal and vertical directions. 

On the other hand, the Multiway component allows you to set the speed in each axis individually. It also allows you to assign different keys to move the entity in different directions. The first argument in the .multiway() method is the speed of our entity. The second argument is an object to determine which key will move the entity in which direction.

The directions are specified in degrees. 180 is left, 0 is right, -90 is up, and 90 is down. Here are a few examples:

blackBox.multiway({x:150,y:75}, {W: -90, S: 90, D: 0, A: 180});

orangeBox.multiway(150, {I: -90, K: 90, L: 0, J: 180});

purpleBox.multiway(150, {Y: -45, G: -135, B: 135, H: 45});

The code above sets the speed of the black box equal to 150 in the horizontal direction and 75 in the vertical direction. The orange box moves at a speed of 150 in all directions but has been assigned different keys for movement. The purple box does not move strictly horizontally or vertically but at a 45-degree angle. The speed here is in pixels per second.

Basically, you can assign any key to any direction using the Multiway component. This can be very helpful when you want to move multiple entities independently.

This component also has a .speed() method, which can be used to change the speed of an entity at a later time. You can also disable the key controls at any time using the .disableControl() method.

The Keyboard Component

The three components in the previous sections allow you to move an entity around using different keys. However, you might want more control over what happens when a key is pressed. For example, you might want to make the player bigger once a specific key is pressed or make the player more powerful once another key is pressed. This can be achieved using the Keyboard component.

This component also gives you access to the .isDown(String keyName/KeyCode) method, which will return true or false based on whether the key pressed has the given KeyName or KeyCode.

Crafty also has two different keyboard events, KeyDown and KeyUp. You can bind these events to any entity in your game without using the Keyboard component. The KeyDown event is triggered whenever the DOM keydown event occurs. Similarly, the KeyUp event is triggered whenever the DOM keyup event occurs.

blackBox.bind('KeyDown', function() {
  if (this.isDown('L')) {
    this.w += 5;
  }
});

orangeBox.bind('KeyDown', function(e) {
  if (e.key == Crafty.keys.K) {
    this.h += 5;
  }
});

In the above code, the blackBox already had the Keyboard component. This allowed us to use the .isDown() method to determine the key pressed.

Try pressing L and K in the following demo to increase the width and height of the two boxes respectively.

The Text Component

It is very easy to add text to your game using Crafty. First, you need to create an entity with the Text component. Then, you can add text to your entity using the .text() method, which accepts a string as its parameter. 

The location of the text can be controlled by using the .attr() method to set the value of x and y co-ordinates. Similarly, the color of the text can be specified using the .textColor() method. A few other properties like the size, weight, and family of the font can be set using the .textFont() method. Here is an example:

var playerName = Crafty.e('2D, DOM, Text')
  .attr({
    x: 10,
    y: 10
  });
  
playerName.text('ZombieHunter');
playerName.textColor('red');

As I mentioned earlier, the .text() method requires you to supply a string as parameter. This means that if the game score is a number, you will have to convert it to a string for the .text() method to render it.

Most of the 2D properties and methods will work without any issue with the Text component. For example, you can rotate and move it around with ease. However, there are two things that you need to keep in mind. Styling of the text works best when rendered using the DOM. When rendered on Canvas, the width and height of the text entity will be set automatically.

Final Thoughts

Using the knowledge from this and the last tutorial, you should now be able to move different entities around using the keyboard. You can also change the appearance of the main player and other entities based on the different keys pressed.

If you have any questions about this tutorial, let me know in the comments.