Design, CG Graphics & Inspiration
Fifteen puzzle in LibCanvas

Fifteen puzzle in LibCanvas

In this topic I will tell you how to make this game quite undemanding to the processor and good looking with the help of LibCanvas.

All what was necessary to do in the game on that link is to remove the unnecessary redrawing of each frame and call it only when you change the canvas. But we won’t stop here and will implement the animated movement of the chips. During the animation and redrawing of the entire canvas, we will have the same problem – overloaded processor, so we should think about what can we do here.

Fifteen puzzle in LibCanvas

Fifteen puzzle in LibCanvas

Dirty Rectangles

It is easy to see that the image is changing not very frequently. So we should take the advantage and instead of redrawing the entire canvas we erase the old location with the help of clearRect and make a new one.

All we need is to paint over the old square and clean the new one (in fact, you could always save the previous place of chips’ redrawing, but it is not that critical).

var Tile = atom.Class({
	[...]
	redraw: function () {
		this.libcanvas.ctx
			.clearRect( this.lastPositionRectangle )
			.clearRect( this.field.emptyRectangle );
		this.draw()
	},
	[...]
})

So now we have a code of chip’s redrawing. Earlier, our application was redrawing each frame. The code of chip’s movement was like this:

var Tile = atom.Class({
	[...]
	move: function (point) {
		// we block the field, in order that nobody could move the chips until the movement stops
		this.field.blocked = true;
		this.animate({
			time: 150,
			props: { x: point.x, y: point.y },
			onFinish: function () {
				// unblock the field
				this.field.blocked = false;
			},
			fn: 'sine-out'
		});
	},
	[...]
})

Now, each step will call canvas redrawing. Theoretically, it’s quite enough for completely smooth animation and not overloading your processor, but let’s go ahead.

Buffering

If you’ll inspect the application in Javascript console you’ll notice that the largest part it’s the redrawing of the canvas, which causes such heavy features as redrawing of the gradient.

console in Fifteen puzzle in LibCanvas

For your application, you can roughly assume that (program) == ‘System failure’
We can fix this annoying misunderstanding by preliminary drawing of the chips in the buffer. We’ll create a new hidden canvas, redraw the chip in it and will continue to draw the canvas itself instead of calling a pile of heavy features. For these purposes I use atom.Class.Mutators.Generators plugin- a simple way to generate the object once and then to take from the cache.
Let’s suppose that earlier we had the following code that was redrawing the chip:

var Tile = atom.Class({
	[...]
	draw: function () {
		this.callHardDrawFunctions( this.libcanvas.ctx );
	}
	[...]
})

We’ll replace it with the following code:

var Tile = atom.Class({
	[...]
	Generators: {
		buffer: function () {
			var buffer = LibCanvas.buffer( this.shape, true );
			this.callHardDrawFunctions( buffer.ctx );
			return buffer;
		}
	},
	draw: function () {
		this.libcanvas.ctx.drawImage({
			image: this.buffer,
			draw : this.shape
		});
	}
	[...]
})

Yes, it has become less elegant, but, on the other hand, we have achieved the goal – drawing of our fifteen puzzle is very fast and has a very low system requirements:

Before buffering in Fifteen puzzle in LibCanvas

After buffering in Fifteen puzzle in LibCanvas

Conclusion

Keep on programming and enjoy the result!

You might also be interested in..

Creating a Framework For Canvas: Objects and Mouse
How to create a Progress bar with HTML5 Canvas

TheShock
Pavel is 21 year old web developer from Ukraine. In his spare time he writes articles about the basics of LibCanvas, AtomJS and JavaScript
TheShock

Latest posts by TheShock (see all)

SHARE THIS POST

Pavel is 21 year old web developer from Ukraine. In his spare time he writes articles about the basics of LibCanvas, AtomJS and JavaScript

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

Google Plus

Follow Me on Pinterest
  • Unusual Geometry in Web Design

    Pinned: 8 Jul 2012
  • David Lynch Films: Collection of Artworks

    Pinned: 7 Jul 2012
  • Web Design Inspirational Cocktail

    Pinned: 7 Jul 2012
  • 45 New jQuery Plugins for Web Developers

    Pinned: 5 Jul 2012
  • Showcase of Beautiful Underwater Photography

    Pinned: 4 Jul 2012
  • Film Illustrations by Rhys James

    Pinned: 3 Jul 2012
  • A Showcase of Art Deco Design Inspiration

    Pinned: 3 Jul 2012
  • Giveaway: Win $300 for PSD to HTML Services from XHTMLGenius

    Pinned: 2 Jul 2012
  • Amazing Collection of Tilt-Shift Photography and Video

    Pinned: 1 Jul 2012
  • 40 Creative Examples of Business Cards

    Pinned: 1 Jul 2012