Crafty.js workshop

A Good Engine for the Web

Small: 15k compressed and gzip'd
Simple: 1 file to include
DOM or Canvas Rendering
Open-source: MIT or GPL (Take it and do what you will)

A Good Engine for Javascript

No classical inheritance model (Protoypes! Javscript is made of Prototypes!)
Entity-component system instead
Entities (sprites) built up out of reusable components.
jQuery style selector mechanism for working with entities
Good Event support to reduced coupling

A Good box of Tools

Asset Loading
Sprite Map support
Audio Support
Isometric support
SAT collision detection

Using Crafty

Just include the crafty.js file, and then your game code, whatever that is

<!DOCTYPE html> 
<html> 
    <head> 
        <title>My Awesome Game</title>
        <script src="crafty.js" type="text/javascript"></script> 
        <script src="game.js" type="text/javascript"></script> 
    </head> 
    <body> 
    </body> 
</html>

Bootstrapping Crafty

// When the DOM has loaded
$(document).ready(function() {

  // Initialize Crafty
  Crafty.init(640, // 640 Pixels Wide
              480  // 480 Pixels Tall
              );

  Crafty.canvas.init(); // Create a Canvas Element 

});

Add Some Entities + Components

// Create a player entity
var player = Crafty.e(); 

// Add some components to the entity
player.addComponent("2D, Canvas, Color"); 

// Set some attribute values 
// (Available methods dependant on components added)
player.color("red").attr({ w:50, h:50 });

Putting it all together

Let's Bootstrap crafty and start our Game

$(document).ready(function() {

  Crafty.init(640,480);
  Crafty.canvas.init();

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

  player.color("red").attr({w:50, h:50});
});

Chaining with Crafty

Most of crafty elements support chaining (aka jQuery style)

$(document).ready(function() {

  Crafty.init(640,480).canvas.init();

  var player = Crafty.e("2D, Canvas, Color")
          .color("red")
          .attr({w:50, h:50});
});

Selection

Calling Crafty as a function will do component-based selection (However, Crafty("Color").color("red"); won't work, primarily for performance reasons (Issue 91, we need to use each instead)

$(document).ready(function() {

  Crafty.init(640,480).canvas.init();

  var box1 = Crafty.e("2D, Canvas, Color").attr({w:50, h:50}).color("red");
  var box2 = Crafty.e("2D, Canvas, Color").attr({w:50, h:50, x:100}).color("blue");

  //Crafty("Color").each(function() { this.color("pink"); });

});

Controls

We can add a simple four-way controls component (You'll need to click in the black iframe on the right)

$(document).ready(function() {

  Crafty.init(640,480).canvas.init();
  Crafty.background("black");

  var player = Crafty.e("2D, Canvas, Color")
          .color("red")
          .attr({w:50, h:50});


  // Can use the arrow keys as well,
  // but we don't want to accidentally change slides
  player.addComponent("Fourway").fourway(5)
});

2 Player Controls

Why stick with 1 player? Let's add another, speedier player, use custom Multiway keys

$(document).ready(function() {

  Crafty.init(640,480).canvas.init();
  Crafty.background("black");

  var player1 = Crafty.e("2D, Canvas, Color")
          .color("red")
          .attr({w:50, h:50});


  var player2 = Crafty.e("2D, Canvas, Color")
          .color("green")
          .attr({w:50, h:50, x: 50, y:50});


  player1.addComponent("Multiway").multiway(3,{ 
          W: -90, S: 90, D: 0, A: 180});

  player2.addComponent("Multiway").multiway(10,{ 
          UP_ARROW: -90, DOWN_ARROW: 90, 
          RIGHT_ARROW: 0, LEFT_ARROW: 180});
});

Simple Collision Detection

Let's prevent our players from running over each other. Docs

$(document).ready(function() {

  Crafty.init(640,480).canvas.init();
  Crafty.background("black");

  var player1 = Crafty.e("2D, Canvas, Color")
          .color("red")
          .attr({w:50, h:50});


  var player2 = Crafty.e("2D, Canvas, Color")
          .color("green")
          .attr({w:50, h:50, x: 50, y:50});

  /* Collision Code */
  player1.addComponent("Collision").bind('Moved', function(from) {
    if(this.hit('2D')) {
       this.attr({x: from.x, y:from.y});
    }
  });
  player2.addComponent("Collision").bind('Moved', function(from) {
    if(this.hit('2D')) {
       this.attr({x: from.x, y:from.y});
    }
  });



  player1.addComponent("Multiway").multiway(3,{ 
          W: -90, S: 90, D: 0, A: 180});

  player2.addComponent("Multiway").multiway(10,{ 
          UP_ARROW: -90, DOWN_ARROW: 90, 
          RIGHT_ARROW: 0, LEFT_ARROW: 180});
});

Gravity

Let's add in the Gravity component. Note: code below s going to skip the initial stuff to save space.

  var player1 = Crafty.e("2D, Canvas, Color")
       .color("white")
       .attr({w:50, h:50, x:150});

  player1.addComponent('Gravity').gravity();

Adding in a floor

Let's add in a floor


  var player = Crafty.e("2D, Canvas, Color, Player, Physics")
       .color("white")
       .attr({w:50, h:50, x:126, y:0});

  player.addComponent('Gravity').gravity("Floor");
  player.addComponent("Twoway").twoway(5,50)
  player.addComponent("Collision");


  var floor = Crafty.e("2D, Canvas, Color, Collision, Floor")
		.color("blue")
 	        .attr({h:30, w:400, x:0, y:380 })

platformer collisions :(

Built in controls / collisions aren't good for platformers


  var player = Crafty.e("2D, Canvas, Color, Player")
       .color("white")
       .attr({w:50, h:50, x:126, y:0});

  player.addComponent('Gravity').gravity("Floor");
  player.addComponent("Twoway").twoway(5)
  player.addComponent("Collision").collision();


  var floor = Crafty.e("2D, Canvas, Color, Collision, Floor")
		.color("blue")
		.attr({h:30, w:400, x:0, y:380 })
		.collision()

  var block = Crafty.e("2D, Canvas, Color, Collision, Block")
		.color("red")
		.attr({h:30, w:400, x:50, y:200 })
		.collision()

  player.onHit("Block",function(hit) {
    this._falling = false;
    this.attr({x: this._x + hit[0].normal.y * hit[0].overlap * 1.1, 
               y: this._y + hit[0].normal.x * hit[0].overlap * 1.1});
  });

Let's do a nethack clone instead

Asset Loading Dungeon Monsters (Assets from http://rltiles.sourceforge.net/)

  Crafty.load(["images/dungeon.png",
               "images/characters.png"], function() {
     // Our assets are now pre-loaded
     alert("Yay loaded!");
  });

Scenes..

Calling scene will destroy all entities on the page


  // Set up a (ugly) loading screen
  Crafty.scene("loading", function() {

    // Load our assets
    Crafty.load(["images/dungeon.png","images/characters.png"], function() {
      // Put in a fake timeout so we can see this in action
      // DONT do this in a real game please
      setTimeout(function() { 
         Crafty.scene("main"); // Play the main scene
      }, 2000);
    });

    // White background and some ugle text
    Crafty.background("#FFF");
    Crafty.e("2D, DOM, Text").attr({w: 640, h: 20, x: 0, y: 120})
    .text("Loading")
    .css({"text-align": "center"});
  });
 
  Crafty.scene("main",function() {
    alert("Awesome Main Scene Playing");
  });

  Crafty.scene("loading");

Sprites

Crafty.sprite creates an entity with the name specifieid Dungeon Monsters


  // This will create entities called floor, wall1 and stairs
  Crafty.sprite(32,"images/dungeon.png", {
     floor: [0,0],
     wall1: [2,1],
     stairs: [3,1]
  });

  // This will create entities called hero1 and blob1
  Crafty.sprite(32,"images/characters.png", {
     hero1: [5,3],
     blob1: [4,7]
  });

  Crafty.scene("loading", function() {
    Crafty.load(["images/dungeon.png","images/characters.png"], function() {
         Crafty.scene("main"); // Run the main scene
    });
  });
 
  // Let's draw us a Hero and a Blob
  Crafty.scene("main",function() {
    Crafty.background("#FFF");
    var player = Crafty.e("2D, Canvas, hero1")
         .attr({x:0, y:0});

    var blob = Crafty.e("2D, Canvas, blob1")
         .attr({x:50, y:50});
  });

  Crafty.scene("loading");

Binding Controls

Let's add movement to our hero


Crafty.c("PlayerControls", {
    _keys: { 
    UP_ARROW: [0,-1],
    DOWN_ARROW: [0,1],
    RIGHT_ARROW: [1,0],
    LEFT_ARROW: [-1,0],
    W: [0,-1],
    S: [0,1],
    D: [1,0],
    A: [-1,0],
    }, 

    init: function() {
      this._moveX = 0;
      this._moveY = 0;

      for(var k in this._keys) {
        var keyCode = Crafty.keys[k] || k;
        this._keys[keyCode] = this._keys[k];
      }

      this.bind("KeyDown",function(e) {
        if(this._keys[e.key]) {
          this._moveX = this._keys[e.key][0];
          this._moveY = this._keys[e.key][1];
        }
      }).bind("EnterFrame",function() {
        if(this._moveX || this._moveY) {
           this.x += this._moveX * 32;
           this.y += this._moveY * 32;
           this.trigger('Moved', {x: this.x, y: this.y});
           this._moveX = 0;
           this._moveY = 0;
        }
      });
    }
    
  });

  Crafty.sprite(32,"images/dungeon.png", {
     floor: [0,0],
     wall1: [2,1],
     stairs: [1,3]
  });

  Crafty.sprite(32,"images/characters.png", {
     hero1: [5,3],
     blob1: [4,7]
  });

  //the loading screen that will display while our assets load
  Crafty.scene("loading", function() {
    Crafty.load(["images/dungeon.png","images/characters.png"], function() {
         Crafty.scene("main"); //when everything is loaded, run the main scene
    });
  });
 
  Crafty.scene("main",function() {
    Crafty.background("#FFF");
    var player = Crafty.e("2D, Canvas, PlayerControls, hero1")
         .attr({x:0, y:0});

    var blob = Crafty.e("2D, Canvas, blob1")
         .attr({x:50, y:50});
  });

  Crafty.scene("loading");

Separating Movement from Controls

Let's separate our movement out from our control and let's make it a little smoother. We'll create a PlayerControls components that just sends "Slide" events to our "Slide" component, which makes our little knight guy slide around the screen. We'll also have the PlayerControls trigger a global "Turn" action which represents 1-turn in our game.


Crafty.c("PlayerControls", {
    _keys: { 
    UP_ARROW: [0,-1],
    DOWN_ARROW: [0,1],
    RIGHT_ARROW: [1,0],
    LEFT_ARROW: [-1,0],
    W: [0,-1],
    S: [0,1],
    D: [1,0],
    A: [-1,0],
    }, 

    init: function() {
      for(var k in this._keys) {
        var keyCode = Crafty.keys[k] || k;
        this._keys[keyCode] = this._keys[k];
      }

      this.bind("KeyDown",function(e) {
        if(this._keys[e.key]) {
         
          var direction = this._keys[e.key];

          this.trigger('Slide',direction);
          Crafty.trigger('Turn');
        }
      })
    }
    
  });


  // Our slide component - listens for slide events
  // and smoothly slides to another tile location
  Crafty.c("Slide", {
    init: function() {
      this._stepFrames = 5;
      this._tileSize = 32;
      this._moving = false;
      this._vx = 0; this._destX = 0; this._sourceX = 0;
      this._vy = 0; this._destY = 0; this._sourceY = 0;
      this._frames = 0;

      this.bind("Slide", function(direction) {
        // Don't continue to slide if we're already moving
        if(this._moving) return false;
        this._moving = true;

        // Let's keep our pre-movement location
        // Hey, Maybe we'll need it later :)
        this._sourceX = this.x;
        this._sourceY = this.y;

        // Figure out our destination
        this._destX = this.x + direction[0] * 32;
        this._destY = this.y + direction[1] * 32;

        // Get our x and y velocity
        this._vx = direction[0] * this._tileSize / this._stepFrames;
        this._vy = direction[1] * this._tileSize / this._stepFrames;

        this._frames = this._stepFrames;
      }).bind("EnterFrame",function(e) {
        if(!this._moving) return false;

        // If we'removing, update our position by our per-frame velocity
        this.x += this._vx;
        this.y += this._vy;
        this._frames--;

        if(this._frames == 0) {
          // If we've run out of frames,
          // move us to our destination to avoid rounding errors.
          this._moving = false;
          this.x = this._destX;
          this.y = this._destY;
        }
        this.trigger('Moved', {x: this.x, y: this.y});
      });

    }, 
    slideFrames: function(frames) { 
       this._stepFrames = frames;
    },

    // A function we'll use later to 
    // cancel our movement and send us back to where we started
    cancelSlide: function() {
      this.x = this._sourceX;
      this.y = this._sourceY;
      this._moving = false;
    }
  });


  Crafty.sprite(32,"images/dungeon.png", {
     floor: [0,0],
     wall1: [2,1],
     stairs: [1,3]
  });

  Crafty.sprite(32,"images/characters.png", {
     hero1: [5,3],
     blob1: [4,7]
  });

  //the loading screen that will display while our assets load
  Crafty.scene("loading", function() {
    Crafty.load(["images/dungeon.png","images/characters.png"], function() {
         Crafty.scene("main"); //when everything is loaded, run the main scene
    });
  });
 
  Crafty.scene("main",function() {
    Crafty.background("#FFF");
    var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1")
         .attr({x:0, y:0});

    var blob = Crafty.e("2D, Canvas, blob1")
         .attr({x:50, y:50});
  });

  Crafty.scene("loading");

Cleaning up

Let's start to extract each of our components into it's own file along with our game loading code.

<script src='components/player_controls.js'></script>
<script src='components/slide.js'></script>
<script src='scenes/loading.js'></script>

<script>
// Scenes/loading.js defines the "loading" scene
// and loads our sprites

// Start Game will be called on document ready
function startGame() {

  Crafty.scene("main",function() {
    Crafty.background("#FFF");
    var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1")
         .attr({x:0, y:0});

    var blob = Crafty.e("2D, Canvas, blob1")
         .attr({x:32, y:32});
  });

  Crafty.scene("loading");
}

</script>

"AI"

Let's have our blob move every turn as well. We'll define a new component called AI which moves randomly every turn. Let's create two blobs: one slow and one fast. <script src='components/player_controls.js?'></script> <script src='components/slide.js'></script> <script src='scenes/loading.js'></script> <script> Crafty.c("AI",{ _directions: [[0,-1], [0,1], [1,0], [-1,0]], init: function() { this._moveChance = 0.5; this.requires('Slide'); this.bind("Turn",function() { if(Math.random() < this._moveChance) { this.trigger("Slide", this._randomDirection()); } }); }, moveChance: function(val) { this._moveChance = val; }, _randomDirection: function() { return this._directions[Math.floor(Math.random()*4)]; } }); // Start Game will be called on document ready function startGame() { Crafty.scene("main",function() { Crafty.background("#FFF"); var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1") .attr({x:0, y:0}); var slowBlob = Crafty.e("2D, Canvas, blob1, AI").attr({x:32, y:32}).moveChance(0.2); var fastBlob = Crafty.e("2D, Canvas, blob1, AI").attr({x:96, y:32}).moveChance(0.8); }); Crafty.scene("loading"); } </script>

Loading a Map

Now, where do we get a dungeon? Instead of worrying about generation algorithms, let's just download a map from an online map creator like: http://donjon.bin.sh/d20/dungeon/. I've generated a map, downloaded the tab-separated-values and put it in levels/map.tsv. Let's load it via $.get.

<script src='components/player_controls.js?'></script>
<script src='components/slide.js'></script>
<script src='scenes/loading.js'></script>

  <script>
  function startGame() {

    $.get("levels/map1.tsv",function(data) {
       alert(data);
    });

  }
</script>

Rendering a Map

Let's turn our map into a dungeon tiles. We're using $.each to iterate - please don't do this in a real game, I just think it's easier to see what's going on than with for loops.

<script src='components/player_controls.js'></script>
<script src='components/slide.js'></script>
<script src='scenes/loading.js'></script>

  <script>

function loadMap(file, callback) {
  $.get(file,function(data) {
    var level = [];
    // Split out each row
    $.each(data.split("\n"),function(y,row) { 
      var columns = row.split("\t");
      level.push(columns);
      // Then split out each column
      $.each(columns,function(x,column) {
        if(column) {
          Crafty.e("2D, Canvas, floor, Floor").attr({x:x * 32, y: y * 32});            
        } else {
          Crafty.e("2D, Canvas, wall1, Wall").attr({x:x * 32, y: y * 32});            
        }
      });

    });

    // Phone back home when we're done
    callback(level);
  });
}

 
  function startGame() {

    Crafty.scene("main",function() {
      Crafty.background("#FFF");
      loadMap("levels/map1.tsv",function(levelData) {
        var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1")
        .attr({x:0, y:11 * 32, z: 1});
      });
    });

    Crafty.scene("loading");

  }


</script>

Following the player

Crafty has support for a 2D Camera accessible via the "viewport", let's add in a camera component that tracks player movement (loadMap has been moved to loading.js)

<script src='components/player_controls.js'></script>
<script src='components/slide.js'></script>
<script src='scenes/loading.js'></script>

  <script>

  Crafty.c("Camera",{
    init: function() {  },
    camera: function(obj) {
      this.set(obj);
      var that = this;
      obj.bind("Moved",function(location) { that.set(location); });
    },
    set: function(obj) {
      Crafty.viewport.x = -obj.x + Crafty.viewport.width / 2;
      Crafty.viewport.y = -obj.y + Crafty.viewport.height / 2;
    }
  });


  function startGame() {

    Crafty.scene("main",function() {
      Crafty.background("#000");
      loadMap("levels/map1.tsv",function() {
          var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1")
                              .attr({x:0, y:11 * 32, z: 1});

          var camera = Crafty.e("Camera").camera(player);
        });
    });

    Crafty.scene("loading");

  }


</script>

Wall Collisions

Let's make it so that the player can't walk through walls amymore...

<script src='components/player_controls.js?'></script>
<script src='components/slide.js'></script>
<script src='components/camera.js'></script>
<script src='scenes/loading.js'></script>

  <script>
  function startGame() {

    Crafty.scene("main",function() {
      Crafty.background("#000");
      loadMap("levels/map1.tsv", function() {
      // 
        var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1")
                              .attr({x:0, y:11 * 32, z: 1});
        player.addComponent("Collision").onHit("Wall",function(obj) {
          this.cancelSlide();
        });

        var camera = Crafty.e("Camera").camera(player);
      });
    });

    Crafty.scene("loading");

  }
</script>

Enemies

We need enemies! Let's add some random enemies onto the page. We'll also extract out a "Solid" component so we don't need to duplicate on hit methods

<script src='components/player_controls.js?'></script>
<script src='components/slide.js'></script>
<script src='components/ai.js'></script>
<script src='components/camera.js'></script>
<script src='scenes/loading.js'></script>

<script>
  Crafty.c("Solid",{
    init: function() {
      this.requires("Collision").onHit("Wall",function(obj) {
        this.cancelSlide();
      });
    }
  });

  function populateLevel(chance,level) {
    $.each(level,function(y,row) {
      $.each(row,function(x,entry) {
        if(entry != "") {
          if((Math.random() < chance)) {
            Crafty.e("2D, Canvas, blob1, AI, Solid").attr({x:x*32, y:y*32, z:1}).moveChance(Math.random()*0.5);
          }
        }
      });
    });
  }

  function startGame() {

    Crafty.scene("main",function() {
      Crafty.background("#000");
      loadMap("levels/map1.tsv", function(level) {
        // 
        var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1, Solid")
                        .attr({x:0, y:11 * 32, z: 1})

        var camera = Crafty.e("Camera").camera(player);
        populateLevel(0.05, level);
      });
    });

    Crafty.scene("loading");

  }
</script>

Fight!

Let's assume our hero is awesome, and just automatically kill the enemies on contact. Populate level has been moved to loading.js

<script src='components/player_controls.js?'></script>
<script src='components/slide.js'></script>
<script src='components/ai.js'></script>
<script src='components/camera.js'></script>
<script src='components/solid.js'></script>
<script src='scenes/loading.js?'></script>

<script>
  function startGame() {

    Crafty.scene("main",function() {
      Crafty.background("#000");
      loadMap("levels/map1.tsv", function(level) {
        // 
        var player = Crafty.e("2D, Canvas, PlayerControls, Slide, hero1, Solid")
             .attr({x:0, y:11 * 32, z: 1})
             .onHit("Enemy",function(hit) {
               this.cancelSlide();
               hit[0].obj.destroy();
             });

        var camera = Crafty.e("Camera").camera(player);

        populateLevel(0.05, level);
      });
    });

    Crafty.scene("loading");

  }
</script>

To Do:

Add health to player and enemies
Add Sound Effects
Add Hud
Add Level up support
Add Chests and items
Add an inventory
Add multiple scenes / levels

Crafty.js

http://bit.ly/crafty-workshop use the arrow-keys go between slides. http://craftyjs.com/ Pascal Rettig / @cykod Built in CoderDeck

Why Crafty?

A Good Engine for the Web

Small: 15k compressed and gzip'd

Simple: 1 file to include

DOM or Canvas Rendering

Open-source: MIT or GPL (Take it and do what you will)

A Good Engine for Javascript

No classical inheritance model (Protoypes! Javscript is made of Prototypes!)

Entity-component system instead

Entities (sprites) built up out of reusable components.

jQuery style selector mechanism for working with entities

Good Event support to reduced coupling

A Good box of Tools

Asset Loading

Sprite Map support

Audio Support

Isometric support

SAT collision detection