Crafty Blog - JavaScript Game Engine Development

Development of Crafty

0 notes &

0.4 Released

And with lots of new features. It’s been too long and I know 1.0 should be out by now but there are a few things I want completed such as full Mobile support and good amounts of test cases.

Here is the change log:

  • .css() should accept both JS and CSS notation
  • .requires() method for adding components if not already added
  • Detect the browser extension (Moz, webkit, o, ms)
  • IE rotation and transparency support
  • Faster Draw Manager for canvas and Dom
  • Tween component
  • Fixed an error in addEvent (Leo Koppelkamm)
  • Collision now has a justStoppedHitting event (Leo Koppelkamm)
  • Particles (Leo Koppelkamm)
  • Faster mouse events
  • Components now use title case
  • Crafty.pause method. Invoked when leaving the window or tab
  • Fixed crashing after inactivity
  • Global events, use Crafty.bind and Crafty.trigger
  • Repetition count for Animation component (Leo Koppelkamm)
  • Fixed typeahead find bug
  • .isDown() method for Controls component
  • Faster scrolling for DOM and canvas
  • .delay() and .requires() is chainable (sorenbs)
  • .DOM() will remove the previously created DOM element
  • Crafty.timer.getFPS() returns the current FPS (Leo Koppelkamm)

The API hasn’t been updated because of a new method of documentation that will move all the docs into the source code.

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

1 note &

Plug-in Canvas Performance

After all this work on bringing canvas up to a decent speed I am thinking about a new mini-library or shiv if you will for drop in performance in canvas.

Some of the optimizations that it could do:

  • Draw an image onto temp. canvas then temp canvas onto main canvas
  • Use putImageData when possible
  • requestAnimationFrame for draw updates
  • Implement redraw regions

The last one may be tricky as the way they are implemented in Crafty is with a spatial hash map of all the entities and setters on the properties that render regions dirty therefore need redrawing.

Once it’s bulletproof in Crafty I shall look into it.

0 notes &

Canvas Drawing for 1.0

If you have been following this blog you will know of all the different methods and areas researched to try and get some good performance from canvas.

I think I have finally found a solution that will be beneficial for all cases so I will post the general structure.

1. Any changed objects are added to a register
2. The dirty rect is calculated for each (based on area bounding old position and new)
    2.1. If the amount of dirty rects is over 60% of the total amount of ents, redraw everything
    2.2. clearRect on the main canvas of these dirty regions
3. Search for all entities in these dirty regions
4. Sort the list of dirty ents by the global Z
5. For Each dirt ent
    5.1. If it is rotated or is a repeating pattern, drawImage onto temp canvas
    5.2. Draw the region cleared from the temp canvas or its image

Confusing but necessary. It hasn’t been implemented yet but I predict it will make a world of difference. By checking how much needs redrawing we can calculate if a naive redraw (clear the entire frame and draw everything on stage) would be better.

There is another optimization I could make based on the previous post about drawing methods and that is to create a canvas object for every single canvas entity. This will very likely not be used however as the memory needed far outweighs the performance benefits.

1 note &

DAE Skew or Scale

Currently there is no support for skewing or scaling (scaling for canvas but looks hideous). I was wondering if anyone actually uses this and therefore should have an implementation?

Most of the time the browsers rendering looks awful anyway so I didn’t think it would be missed.

0 notes &

Drawing Methods on Canvas

I was playing around with different drawing methods on canvas to see which would be the fastest. The tests were drawImage with an image object, drawImage with a temporary canvas object containing nothing but that image already drawn and putImageData which is obtained by using getImageData on the previous temporary canvas.


In Chrome putImageData is slightly faster and little difference between drawing an image or canvas.


However in Firefox we see speeds comparable to Chrome when using putImageData! A very big difference. Even drawing canvas over an image is faster.

It looks like Crafty will be using this method for the next version but there is one problem. There are security constraints which means running the code as a local file will throw an error. Therefore you need a web server even if it is just JavaScript. There are settings in most browsers to turn the errors off but still a bit of a pain.

What I could do is try { getImageData } else use drawImage with the temporary canvas. It will be inconsistent but a minor compromise.