Game Graphics with CutJS

Alex R. Young





html5 graphics games 2d

Game Graphics with CutJS

Posted by Alex R. Young on .

html5 graphics games 2d

Game Graphics with CutJS

Posted by Alex R. Young on .
CutJS demos and examples.

CutJS (GitHub: piqnt/cutjs, License: MIT) is a new game graphics library by Ali Shakiba. It's aimed at 2D graphics for cross-browser development, with support for desktop and mobile browsers.

The API is jQuery inspired, but because it works with the Canvas the author has introduced an interesting way of styling elements called "pinning":

A CutJS app consists of a tree of nodes, each node is pinned (transformed) against its parent and have zero, one or more image cutouts. Image cutouts comes from either image textures or Canvas drawing.

Each rendering cycle consists of ticking and painting the tree. On ticking nodes adjust themselves to recent updates and then on painting each node transforms according to its pinning, pastes its cutouts and then delegates to its children.

Cut "apps" are created by calling Cut with a function, and then textures can be added and manipulated with tween animations and events.

// Create new app
Cut(function(root, container) {  
  // Subscribe to Cut.Mouse
  Cut.Mouse(root, container);

  // Set view box
  root.viewbox(500, 300);

  // Create an image node
    // on mouse click on this node
    .on(Cut.Mouse.CLICK, function(ev, point) {
      // Tween scale values of this node
        scaleX: Math.random() + 0.5,
        scaleY: Math.random() + 0.5
      return true;

// Register an image texture
  name: 'base',
  imagePath: 'base.png',
  cutouts: [
    { name: 'box', x: 0, y: 0, width: 30, height: 30 }

There's a cool Asteroids game example that shows off some of the main features of the library.