Kineticjs Drag & Drop

KineticJS inherently supports dragging of elements, but what if you need “Drop” as well, sure you may drop anything anywhere on the stage but most of the times we want to be able to drop stuff in a pre-defined position and then apply some transformation. This is an example how we can achieve something like this easily.

Here is a codepen DEMO:

See the Pen Kinetic JS drag n drop by Michael Dobekidis (@netgfx) on CodePen.

So let us break it down and see how it is constructed.

Continue reading

Replay system for KineticJS and HTML5 Canvas

I have been struggling with the lack of replay procedures in HTML5 gaming, with flash things were quite easy because we could save all of our game sessions as movies or swf files that could be later on viewed. With HTML5 we don’t quite have that, or it is not as easy. So I was thinking of ways to produce movies from canvas.
And then it hit me… images can produced as urls and canvas can be exported as an image, and what are continuously changing images? A movie!

So I went on and made a codepen about this. And quite frankly it kinda looks awesome. Of course some more brilliant minds than mine could dig into this and help me make it truly useful for all.

So let’s see the pen first. The procedure is as follows:

We click record and move the box around
Then we stop and we watch the movie that was produced.

See the Pen Record & playback for canvas by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Particles with KineticJS and collision detection

Hello once again, this time I will show a nice technique to create exploding particles with KineticJS.

First of all we setup the stage and the canvas objects.

DEMO:

http://cdpn.io/IwAoc

See the Pen kineticjs collision detection by Michael Dobekidis (@netgfx) on CodePen.

Continue reading

Zoom to point and scale (kineticjs+mousewheel)

This is a simple tip of how to create a zoom to point effect with kineticjs and mousewheel event.

So lets say that you want to zoom into a specific point on a canvas, of course you have used the excellent kineticjs framework, well then you are in luck.

To begin with this is the end-result for all the “quick-fix” people out there.

See the Pen Kineticjs zoom to point by Michael Dobekidis (@netgfx) on CodePen

The rest… come along…

Continue reading