Tuesday, August 7, 2012

HTML5 RPG TUTORIAL - Component and Entity [Crafty]

Hi, this is the second part of the long tutorial "HTML5 RPG TUTORIAL" for Crafty. In this part, we will learn how crafty works, how we can create components and entities, and how to implement it to the real role-playing games.

You can visit another part of this tutorial here:

4. Controlling Player Movement
5. Collision Detection
6. Moving NPC

How Crafty Works?
Crafty works based on two main thing, they are components and entities. Hmm, how can I describe this? Entity is everything in your game that needs to interact with the world. And a Component is a reusable piece of functionality that can be added to one or more entities. When you use crafty, the only thing you need to do is creating components, attach it to an entity or entities, than add the entity to the stage. So we can say that, a component is equal to a class, and an entity is equal to an instance in object oriented programming. 

Learning by Doing!
When we want to add a Hero [Player] to the stage, we must create a component for the hero. Lets say that, our hero have a tag  name on his head. So, we need to create a tag name component, before we create a hero entity. Ok, lets create a tag name component :

Crafty.c("TagName", {
        this.phrase = "unknown";
        this.phrase = theName;

You can attach this component to one or more entities. Example, hero and NPC has a tag name. Now, we need to create an entity and place it to the stage. Don't forget to attach the component as well. Lets create a hero entity:

var Player = Crafty.e("2D, Canvas, Hero, LeftControls, TagName")
    .attr({ x: 16, y: 104, z: 21 })

There are also a lot of built in component in crafty, like 2D, Color, Fourway, Twoway, Multiway, etc that can be use together to create your own component. You must read this docs to understand more about crafty. And, there are many ways to attach component to an entity. You can also use this way to attach component to an entity:

var player = Crafty.e();
player.addComponent("2D, Canvas, Color");

Here you go!
Now lets make a very simple HTML5 RPG game where...
  1. there are one Hero in the stage.
  2. there are one NPC in the stage.
  3. hero have a red color
  4. npc have a blue color
First thing to do, we need to initialize crafty when the page is loaded (read my first tutorial).

window.onload = function() {
//Game Script goes here

Then, create two component, hero and npc component. In each component, add a "Color" component, and set it to the right color.

Crafty.c("Hero", {
      init: function() {
          this.addComponent("2D, Canvas, Color");
          this.w = 32;    // width
          this.h = 32;    // height

Crafty.c("NPC", {
      init: function() {
          this.addComponent("2D, Canvas, Color");
          this.w = 32;    // width
          this.h = 32;    // height

Create a hero entity and npc entity. Attach a hero component to a hero entity. Attach a npc component to a npc entity.

var Player = Crafty.e("Hero")
    .attr({x:10, y:10});
var NPC1 = Crafty.e("NPC")
    .attr({x:50, y:50});

Yay! Your very simple game has been finished. You can see the demo Live here.

Live Demo (New)


  1. mumpung masih suasana lebaran di bulan syawal, saya mengucapkan mohon maaf lahir batin...keep happy blogging always ..salam :-)