Introduction to CraftyJS : Entity Component System

  • Rather than having a long hierarchy of inheritance, Crafty uses the Entity-Component paradigm or data oriented.  Basically, every game object is an entity and every bit of functionality is a component. All you need to do to give your entities (or game objects) functionality is to assign some components.
  • Crafty provides a system very similar to what is known as mixins, multiple inheritance or traits depending on the specific language. An easy way to think about this is that an entity (like say the player or an enemy) is composed of many reusable components that enhance the entity with some new functionality. One way to add components to an entity is to call Crafty.e(string) which will create a new entity with the functionality provided by the comma-separated list of components specified in the string parameter.
  • Components

    Components are just objects that contain properties and methods and once attached to an entity, extend the functionality of that entity. Note, many components can be applied to many entities (a many to many relationship).

    • Define attributes
    • Define methods
    • Define events
    • Can have/require other components
    • Used to extend entities
  • Entities

    First and foremost, every object in the game is an entity; pure and simple. As soon as you want these entities to do something, then we need components.

    • Has an ID
    • Has components
  • Code example

    // When the DOM has loaded
    $(document).ready(function() {
    
    // Height and Width
     var WIDTH = 500, HEIGHT = 320;
    
    // Initialize Crafty
     Crafty.init(WIDTH, HEIGHT);
    
    // Background
     Crafty.background("black");
    
    //Define a component
     Crafty.c("MyBox", {
     init : function() {
     // Add code for some default behaviour
     },
     posit : function(xAxis, yAxis, height, width) {
     this.x = xAxis;
     this.y = yAxis;
     this.h = height;
     this.w = width;
     }
     });
    
     //Define entity 1 with component MyBox
     var objBox1 = Crafty.e("2D, DOM");
     objBox1.addComponent("MyBox").posit(10,10,100,480);
     objBox1.addComponent("Color").color("red");
    
     //Define entity 2 with component MyBox
     var objBox2 = Crafty.e("2D, DOM");
     objBox2.addComponent("MyBox").posit(10,110,100,480);
     objBox2.addComponent("Color").color("white");
    
     //Define entity 3 with component MyBox
     var objBox3 = Crafty.e("2D, DOM");
     objBox3.addComponent("MyBox").posit(10,210,100,480);
     objBox3.addComponent("Color").color("green");
    });
    
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s