Crafty Blog - JavaScript Game Engine Development

Development of Crafty

Posts tagged html5

1 note &

0.4.6 Released!

  • Better documentation for internals, including HashMap and DrawManager.
  • Crafty.module supports uppercase versions (RELEASE etc.) and now uses as default repo
  • .color() now acts as a getter
  • Rename .delay to .timeout and introduce a new Delay component that is smarter about game pause etc.
  • Fix the play sound forever issue
  • Crafty.isPaused() returns whether the game is paused or not.
  • Better support for tween chaining
  • Remove the div representation when DOM component is removed from entity. This enables you to switch between DOM and canvas without polluting the dom.
  • .toggleComponent added
  • .getDomId added to DOM component
  • .dragDirection added to Draggable component

Filed under html5 crafty version release gamedev game

24 notes &

How Crafty will kill Flash

Disclaimer: Sarcasm ahead

Now you know my secret mission. There is little Flash can do that HTML5 can’t (so much so that I can’t even think of one). Therefore it only makes sense to replace Flash entirely by taking the remaining good points and implementing an equivalent in HTML5.


Flash has an awesome interface. It is very flexible and easy to use.

Flash Interface

Welcome Crafty Builder, an interface to introduce an easier learning curve for people wanting to start developing games but don’t know where to start.

Crafty Interface

Currently the Crafty Builder has a Code view and Preview mode for quick testing but eventually an interface as easy to use as Flash will exist for animations and placing objects on the stage.


Unfortunately HTML5 relies on lots of different assets whereas Flash can be compiled down to a single SWF file.

There is no real way to include everything in one HTML file but it is possible to externally reference it through an IFrame.

Eventually Crafty will have a service to host HTML5 games by uploading a ZIP containing all the needed assets. Hosting games across servers will be a matter of:

<iframe src=""></iframe>

Not perfect but would work (any ideas are welcomed).


Vector drawing as opposed to bitmaps means it can infinitely scale without losing quality. I don’t know how much of a benefit this is but it can certainly be done.

ActionScript 3

AS3 is a very nice language and has an easy to use API. Implementing a similar API for Crafty would not be too hard and would ease the transition for Flash developers.

If anyone can think of more benefits of Flash, I’d be happy to shoot it down ;)

Filed under html5 flash actionscript game canvas javascript

1 note &

Fastest Canvas Drawing Library Ever!

This is a fairly bold statement but I would like to know if any other libraries manage drawing for pure performance as Crafty does.

Crafty will now redraw rectangles that have been changed (by an object moving etc) rather than redrawing the entire canvas element but if more than 60% of the screen is changing (meaning lots of redraw rectangles) then it switches to the naive method where the entire canvas is cleared and then every visible object is redrawn.

A register of changed DOM objects is kept and updated on every game tick which provides the best possible speeds. On top of that; every recommendation by JSGameBench is heeded.

All that’s left is to release!

The change-log for v1.0 is as follows:

  • Everything unit tested
  • Mobile devices
  • .css() should accept both JS and CSS notation
  • Detect the browser ext (moz, webkit, o)
  • Make sure IE browser can still attempt things. Add option for filters to do rotation and opacity.
  • Kick Ass Draw Manager

Filed under html5 javascript js library framework canvas