use the arrow-keys go between slides.

Pascal Rettig / @cykod
Built in CoderDeck

Why Crafty?

A Good Engine for the Web

A Good Engine for Javascript

A Good box of Tools

Using Crafty

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

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

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

Chaining with Crafty

Most of crafty elements support chaining (aka jQuery style)


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)


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

2 Player Controls

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

Simple Collision Detection

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


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

Adding in a floor

Let's add in a floor

platformer collisions :(

Built in controls / collisions aren't good for platformers

Let's do a nethack clone instead

Asset Loading Dungeon Monsters (Assets from


Calling scene will destroy all entities on the page


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

Binding Controls

Let's add movement to our hero

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.

Cleaning up

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


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.

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: I've generated a map, downloaded the tab-separated-values and put it in levels/map.tsv. Let's load it via $.get.

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.

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)

Wall Collisions

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


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


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

To Do: