Sprite.js vs

A comparison between JavaScript Game Engines

Sprite.js vs

Sprite.js is a framework that lets you create animations and games using sprites in an efficient way. Its purpose is to allow a common framework for desktop and mobile browsers and use the latest technology available on each platform.

Crafty is a lightweight, modular JavaScript game engine to easily produce high quality games. Includes a large variety of components such as animation, event management, redraw regions, collision detection, sprites and more.

Sprite.js vs

From now on, this row and anything with this colour is related to Sprite.js.

From now on, this row and anything with this colour is related to Crafty.js.

Sprite.js vs

It's centered on animation making, and it doesn't provide all the possible features other provide.

It's a full game engine and supports a great deal of features, but lacks physics support.

Sprite.js vs

Provides detailed animation making via sprites (2D, Parallel and Isometric views).

Provides animation making via sprites (2D, Parallel and Isometric views).

Sprite.js vs

Basic physics support.

...

Sprite.js vs

Collision detection.

Collision detection.

Sprite.js vs

Explosion special effects.

...

Sprite.js vs

Time tracking (via Ticker objects).

...

Sprite.js vs

Input control (of keyboard, mouse and touchscreen).

Input control (of keyboard and mouse).

Sprite.js vs

Layers.

...

Sprite.js vs

Events, path finding.

Basic euclidean operations support...

Events, path finding.

Basic euclidean operations support...

Sprite.js vs

Dynamic background support.

...

Sprite.js vs

...

Entity/Component system (modular, easier and faster to program with).

Sprite.js vs

...

Multiple graphics support (text, images, sprites...).

Audio support.

Random numbers generator.

Sprite.js vs

Cross browser compatible (WebKit, Firefox, Android phones, Opera and IE9).

It works with both DOM and Canvas.

Weighs 45.2KB.

Cross browser compatible (all modern browsers).

It works with both DOM and Canvas.

Weighs 140KB (14.5KB when minified and compressed).

Sprite.js vs

See the documentation here: http://readthedocs.org/docs/spritejs/en/latest/

See the documentation here: http://craftyjs.com/

Sprite.js vs

Ok, now that both have been defined, it's time to get our hands dirty...

Sprite.js vs

The following code makes the basics of a shooter (a game loop and a crosshair) for Sprite.js...

Sprite.js vs

Sprite.js vs

Sprite.js vs

The following code makes the basics of a shooter (a game loop and a crosshair) for Crafty.js...

Sprite.js vs

Sprite.js vs

Sprite.js vs

From Crafty.js, we still have the Entity/Component Model, it sounds complicated, but think of Components as Classes and of Entities as their Instances.

The following code will exemplify it perfectly...

Sprite.js vs

Sprite.js vs

After having played with both engines, I can come to the conclusion that Sprite.js is better when dealing with animations or simple games, and Crafty.js excels at building complex games that require large amounts of code.

Sprite.js vs

Sprite.js makes your life extremely easy when dealing with physics and animations, and being able to work with touchscreens gives it a fair advantage when aiming towards the cell phone market.

Crafty.js boasts the Entity/Component Model, that allows you to simplify the complex abstractions that a bigger game implies. We can make an analogy with the classic Object Orientated Programming by comparing Components to Classes and Entities to Instancies.

Sprite.js vs

And well, that was all. I hope it will be useful to you all.

Thanks for watching!

Sprite.js vs