Creating An Eternal Animation With Crafty.js

Crafty.js is not a game engine but a game framework, as says his developer Louis Stow. And in fact, Crafty.js is a tool that helps creating web games using only Open Web technologies (meaning, HTML, JS and CSS).

I discovered it recently, and it seemed interesting to me for our Web Game Engine project (I’ll be telling more about it soon), so I tried it out. Well, it appears to me that, as many young tools, the documentation is still not very complete, and so it’s not really easy to get Crafty to work fully. The real things that are missing in my opinion are examples of functional source code. And as I was doing some experiments on my own, I thought I could participate by giving some of those missing examples.

So, here we go: I set up a GitHub repository called crafty-examples. There is only a single example for the moment, but others will come as I will continue to work on Crafty. Let’s go a little further in the Crafty world, and explain how this first example works.

Component / Entity Model

The first and most important thing to understand if you want to go deep with Crafty is the Component / Entity model. This model seems to be particularly suitable to games. Basically, every object in the game is an Entity that is composed of many Components. An empty Entity does almost nothing, but every Component that is added to it extends its functionalities. Using this model, you avoid the problems induced by a classical hierarchical architecture, and get a very flexible code. To learn more about this model, I invite you to read Evolve Your Hierarchy by Mick West.

Creating a Component

Crafty comes with the main components you will need (check the API documentation out), but you will surely have to extend it with your own sooner or later. Creating a new Component is very simple :

Crafty.c("my_component_id", function() {
    // Here we define our component

The Crafty.c() function creates a new Component and adds it to the Crafty core object so you can use it later. The Crafty.e() function creates and returns a new Entity, that is an object you will manipulate and often display on your game.

Let’s take a look at the Animation example I was talking about:

// Declare a Component called "animation"
    Crafty.c("animation", {
        init: function() {
            // If the "animate" component is not added to this one, then add it
            if (!this.has("animate"))


There is already an Animate Component in Crafty, but it plays the animation once, then stops it if nothing is done. I wanted to have a component that plays an animation eternally. A cool thing about the Components is that one can contain some others: in the init() function of my Animation component, I check if it contains the Animate component, and if not, I add it so I can use it.

Note: the init() function of a component is automatically called when the Component is constructed.

Crafty Events

Now we have a component that can be animated (thanks to the Animate component), we have to relaunch the animation when it is finished. To do that, we will bind a function to the “enterframe” event. This event is fired every time a frame is displayed. That means, if you set 50 as frame rate in the Crafty.init() method, then the “enterframe” will be fired 50 times in a second.

// Bind the "enterframe" event, called every time the frame is displayed
this.bind("enterframe", function() {
    // If the animation is not playing anymore, then reload it
    if (!this.isPlaying("anim"))
        this.sprite(4, 0, 1, 1);   // Go back to the first sprite of the animation
        this.animate("anim", 20);  // Launch the animation, changing sprite every 20ms

What I am doing here is simple too: every frame, I check if the animation is still playing (the this.isPlaying() method comes from the Animate component), and if not, I reset the sprite to the first then launch the animation once again.

Some details about the parameters: “anim” is the name of the currently playing animation. Here I only have one so it works, but in a real case that code would be awful. Same thing for the sprite() parameters, which are hard-coded here for simplicity, but should absolutely not be!

Using our Entity

Okay, we built a cool Component that can infinitely animate some sprites. Now we have to use it, and to do so, we have to create a new Entity.

// Create a new entity which is a mino (previously declared sprite),
// an animation (previously declared component), a 2D and a DOM element.
var mino = Crafty.e("2D, DOM, mino, animation")
    .attr({x: 0, y: 0, w: 128, h: 128}) // Set the position
    .animate("anim", 5, 0, 11);         // Create the "anim" animation,
                                        // starting from coordinate x=5 and going to x=11, with y=0

As you can see in this code, Crafty methods can be chained as with jQuery for example. Here we create a new Entity containing 4 Components: 2D (for the position), DOM (so it can be displayed), mino (the sprite resource declared previously in the code) and animation (the component we just created). The animate() method creates the animation called “anim”, which goes from column x=5 to x=11 on the row y=0.

And that’s it! We have a beautiful minotaur running on our browser.

To Crafty or not to Crafty?

Crafty.js looks great to create web browser games. I still don’t know if it will be useful for our own game engine project, but there are surely good things to take from this tool. As you may see from this example, it’s not hard to do simple cool stuff, but I hope it will be easier with a tutorial like this one.

Oh, and Crafty is still very young, maybe it’s not a good idea to use it now in a “big” project. Hum. Well, I guess if we use WebSockets, we can certainly use Crafty!

To go further…

Posted in Tools | 2 Comments

RDF PyPath: Use RDF with XPath syntax in Python

Pierre-Antoine Champin, research professor in University of Lyon 1, recently released a little code that do great things. RDF PyPath is a Python code that allows to use RDF resources directly in your code, by playing with the / operator.

Let’s have a look at the “official” example. To load a RDF resource, begin with:

 me = Root(URIRef(""), a_graph)

This creates a Root object containing the data of your RDF file. You can then manipulate the data easily, with a XPath-like syntax. For example:

names = me/FOAF.knows/

This gets the names of all the people Pierre-Antoine knows. You can also go further and use conditions in the same way as XPath. To get all Pierre-Antoine’s friends that are named John, you can do the following:

johns = me/foaf:knows[X/foaf:name == "John"]

Isn’t it amazing? And I guess this can be very useful when using linked data in Python.

Browse the project or the main filePierre-Antoine Champin

Posted in Tools | Leave a comment

GRFTW #2: JSON validation, jQuery Templates, SFML Movies

Good Resources From The Web #2 – 2010/11/27

Welcome for this second GRFTW, a little review of good resources I found on the web in the past few days.

JSON Validation with JSON Schema

Here is a post from David Walsh, who presents JSON Schema. It can be compared to DTD for XML documents: a JSON Schema helps you validating a JSON item according to a set of rules you write. I think it can be very useful when you receive JSON messages from the network, and you want to be sure they are well-formed.

Read this blog postOfficial draft

Using Templates with jQuery

I’ve been discovering it recently: this plugin enables you to use templates with jQuery. Meaning, you can parse your DOM and replace some special tags by new HTML code. It’s impressive, it’s not for every website nor every situation (understand, you won’t do jQuery templating for your next showcase website), but I’m sure this can be very useful in some situations.

A complete guide to jQuery TemplatesSame for French peopleOfficial API

Playing movies with SFML and FFmpeg

Maybe you already know about the SFML library. At it’s name says, it is a Simple and Fast Multimedia Library. Created and maintened by Laurent Gomila, a French developer, SFML is a great object-oriented tool to create multimedia applications, like games.

In this article I present you, Ceylo introduces the sfe::Movie class, which deals with playing videos in your application. It uses FFmpeg and is integrated to SFML. I guess this is a good occasion to discover this amazing library if you don’t know it yet.

Read the articleSFML Website

Posted in GRFTW | Leave a comment

GRFTW #1: Lazy Loading Ads, JavaScript Patterns, CSS Arrows

Good Resources From The Web #1 – 2010/11/23

Welcome for this first GRFTW, a little review of good resources I found on the web in the past few days.

jQuery LazyLoad Ad

I think we all have experienced a website that did not load because of an ad server that didn’t want to respond. This is a real problem when one comes to put ads on his website. Using this jQuery plugin, your ads will be loaded only when the entire page is already displayed, so visitors can see the content (which is the more important for sure), and ads will come after.

Visit the Official WebsiteDemos

Essential JavaScript & jQuery Design Patterns For Beginners

Written by Addy Osmani, this book is a huge guide to design patterns in JavaScript. After coming back to what patterns and anti-patterns are, the author presents the major and more useful patterns known to date. Add concrete examples of JS implementations and you get a resource you should absolutely read.

Read this BookAddy Osmani

CSS Quick Tip: CSS Arrows and Shapes Without Markup

This post from the Yahoo! User Interface Blog shows how to create arrows and shapes using only CSS. It’s already a famous technique, but this article details the different ways of doing that.

Read this article

Posted in GRFTW | Leave a comment

Programmateur, the blog

Hi everyone, and welcome on this new blog!

Let me first introduce myself: my name is Adrian, and I am a developer mainly interested in Web stuff. If you are here, you certainly know me, be it via my personnal website or via my Twitter account.

This blog will be, as @programmateur is, development-oriented. I’ll talk about programming, new technologies, Web, tools, tricks, everything that is related to creating softwares. This is not a one-person blog, so I you feel like writing here, please tell me so.

I will write only in English here: this will help me improve my language, and will make this blog a little more accessible. Well, I hope so! :D For French articles, please read my personnal blog.

Let’s go know, and see you soon for my first real post!


Posted in Uncategorized | 3 Comments