Web Development: Getting Started With Crafty: Introduction

Wednesday, February 15, 2017

Getting Started With Crafty: Introduction

If you have ever developed HTML5 games before, you might be familiar with a few game engines that can make game development a lot easier. They have all the code you need to detect collisions, spawn different entities, or add sound effects to your game. In this tutorial, you will learn about another such game engine called Crafty. It is very easy to use and supports all major browsers, including IE9.

Once minified, the library is only 127kb in size, so it won't result in any major delay in loading your game. It supports sprite maps, so you can easily draw game entities on the screen. You can also create custom events that can be triggered whenever you want and on whatever object you want.

There are also components for sounds, animation, and other effects. Overall, this game engine is a great choice if you want to develop some basic HTML5 games.

Initial Setup

The first thing that you need to do is include Crafty in your project. You can either download the file and load it in your projects or you can directly link to the minified version hosted on a CDN. Once the library has been loaded, you can use the following line to initialize Crafty:

Crafty.init([Number width, Number height, stage_elem]);

The first two arguments determine the width and height of our stage. The third argument is used to specify the element that we are going to use as our stage. If the third argument is not provided, Crafty will use a div with id cr-stage as its stage. Similarly, if the width and height arguments are missing, Crafty will set the width and height of our stage equal to the window width and height.

At this point, you should have the following code:

<html>
  <head></head>
  <body>
    <div id="crafty-game"></div>
    <script type="text/javascript" src="path/to/crafty.min.js"></script>
    <script>
      Crafty.init(600,400, document.getElementById('crafty-game'));
    </script>
  </body>
</html>

Creating Entities

Entities are building blocks of a Crafty game. Everything from the player to the enemies and obstacles is represented using entities. You can pass a list of components to an entity. Each of these components will add extra functionality to our entity by assigning properties and methods from that component to the entity. You can also chain other methods to an entity to set various properties like its width, height, location, and color. Here is a very basic example of adding components to an entity:

Crafty.e('2D, Canvas, Color');

Every entity that you want to display to the user will need both the 2D component and a rendering layer. The rendering layer can be DOM, Canvas, or WebGL. Please note that WebGL support was added in version 0.7.1. Currently, only the Sprite, Image, SpriteAnimation, and Color components support WebGL rendering. Text entities still need to use DOM or Canvas for now.

Now, you can use the attr() method to set the value of various properties including the width, height, and position of your entity. Most methods in Crafty will return the entity they are called on, and attr() is no exception. This means that you will be able to chain more methods to set other properties of your elements. Here is an example:

Crafty.e("2D, Canvas, Color")
      .attr({x:200, y:100, w:200, h:50})
      .color("orange");

This will create an orange rectangular entity on the stage.

Moving Entities Around

Now that you have created the entity, let's write some code to move it around using the keyboard. You can move an entity in four different directions, i.e. up, down, left, and right, by adding the Fourway component to it.

The entity can then be moved by either using the arrow keys or W, A, S, and D. You can pass a number as an argument to the fourway constructor to set the speed of the entity. Here is what the code of the entity should look like now:

Crafty.e("2D, Canvas, Color, Fourway")
      .attr({x:200, y:100, w:200, h:50})
      .color("orange")
      .fourway(300);

You can restrict the movement of an entity to just two directions using the Twoway component. Replacing the Fourway component in the code above with Twoway will confine the movement of the box to just the horizontal direction. This is evident from the following demo:

You can also add your own components to different entities for identification or to group similar entities together. In this case, I am adding the Floor component to our orange box. You can use some other descriptive names to help you identify different entities.

Crafty.e("2D, Canvas, Color, Twoway, Floor")
  .attr({ x: 200, y: 340, w: 200, h: 50 })
  .color("orange")
  .twoway(300);

There is another very useful component that you can use to move elements around, and it is called the Gravity component. When added to an entity, it will make that entity fall down. You might want to stop the given entity from falling further, once it encounters some other entities. This can be achieved by passing an identifier component as an argument to the gravity function. Here is the code that makes the small black square fall on the floor or platform:

Crafty.e("2D, Canvas, Color, Gravity")
  .attr({ x: 200, y: 50, w: 50, h: 50 })
  .color("black")
  .gravity("Floor");

Final Thoughts

As you see in the tutorial, we were able to create the basic structure of a simple game using very little code. All we had to do was add components to our entities and specify the values of different properties like width, height, or movement speed.

This tutorial was meant give you a basic idea of entities and other concepts related to Crafty. In the next part, you will learn about entities in much more detail. If you have any questions about this tutorial, let me know in the comments.

Web Development