DailyJS

Mibbu, LibCanvas, Zeon

06 May 2011 | By Alex Young | Tags webgl graphics games

Mibbu

Mibbu (GitHub: michalbe / mibbu, MIT License) by Michal Budzynski is a small games development framework that supports:

  • Canvas or DOM rendering
  • Sprites
  • Collision detection

Michal has written an example Mibbu game which demonstrates the API. Here’s an extract:

var Game = new mibbu(500, 500);

Game.init();

var sprite = new Game.spr('img/reptile.png', 200, 200, 7, 0),
    sprite2 = new Game.spr('img/reptile.png', 200, 200, 7, 0),
    background = new Game.bg('img/bg.jpg', 6, "S", {x:0,y:0});

If you want to read more details, mibbu.eu is a good place to start. He’s also written a post about it: Mibbu – javascript html5 game framework.

If Mibbu sounds familiar, then you may have read about it when we covered OpenOdyssey which is a game implemented in an early version of Mibbu.

LibCanvas

LibCanvas (GitHub: theshock / libcanvas, LGPL) by Pavel Ponomarenko is a Canvas library which includes APIs for:

  • Animation
  • Mouse events
  • Drag and drop
  • Image preloading

There are a lot of examples on libcanvas.github.com that show off these features. A simple LibCanvas looped animation can be implemented fairly painlessly:

var libcanvas = new LibCanvas('canvas').start();

var shaper = libcanvas
  .createShaper({
    shape : new LibCanvas.Shapes.Circle(150, 75, 60),
    fill  : '#900',
    stroke: 'red',
    lineWidth: 7
  });

// Changing size and color
shaper.animate({
  props: {
    radius: 15,
    fill  : '#2d2d2d',
    stroke: '#4c4c4c',
    lineWidth: 1
  },
  time : 1200,
  onFinish: function (prevAnim, prevProps) {
    shaper.animate({
      props: prevProps,
      fn : 'bounce-out',
      time : 800,
      onFinish: prevAnim.repeat
    });
  }
});

This library is built on Atom by the same authors:

Atom is compact JavaScript framework oriented on modern browsers, which allows to support quite broad list of features without keeping a lot of cruft necessary to implement them in old browsers.

Zeon

Zeon.js by Peter van der Zee is a tool for analysing JavaScript. It has a custom parser, and an interesting interface for exploring possible problems. It seems like the project is still at an early stage, but I’m looking forward to seeing what Peter does with it.


blog comments powered by Disqus