Kinetic.js tutorials

[McLaren]

When I try to search kinetic.js tutorials, I mostly get links to http://www.html5canvastutorials.com or http://www.kineticjs.com/ . There are example in those sites, but not much explainnation. Documantation is also very poor comparing to lets say jquery documentation. There are also other sitesm but as I see they most often post same tutorials/examples as in http://www.html5canvastutorials.com . Do you know any tutorials with detailed explainations how to make animations, physics for noobs in animation?

Or maybe I choose wrong library? It looked good from the examples I saw what can you do with it. BUt maybe the community is not big. Maybe there are some equivalent libs with lots of tutorials and big community?

[Taywin]

When you talked about kinetic, at first I was thinking about kinetic movement. I did implement an animation of kinetic movement in JavaScript a couple years ago. The name of this library may be a pun though.

Anyway, displaying using HTML5 canvas and display animation are two different tasks. The animation will involve more maths if you want it to be more realistic. On the website, it actually teaches you the "behind the scene" of JavaScript. I am sure that someone would come up with JQuery later on. The JQuery is simply a repackage JavaScript language which hides a lot of stuff from the user.

If you are going to do animation in JavaScript, you need to understand window.setTimeout(...) and window.setInterval(...). These functions allows you to do animation. Think about it as displaying one frame at a time. You need to pass a value which controls how long the frame will be displayed. The shorter it is, the smoother the animation would be.

For example, a video is a composition of a lot of images. You watch it and you think things are moving as in real life. The reality is that an image is being shown at a time but it is swapped out frequently. What you need to control is how long each image should be on the display.

Anyway, I hope you start to understand how animation is created.

[McLaren]

yeah, I also yerterday readed http://joshondesign.com/p/books/canvasdeepdive/toc.html , its not about kinetic.js but general animation and drawing with canvas. And there were explainations about those frames. I read it until sprites section.

WIth kinetic.js as I saw in examples and did my experiments - there is no need of set timeout, it has its own animation function. Also it has layers which I think is cool thinng because as I understand - without layers you have to redraw the whole frame. So redraw same static pictures and moving ones.

For example how to rotate with kinetic.js:

anim_big_ball = new Kinetic.Animation({
              func: function(frame) {
                //console.log('anim big_ball_image');
                big_ball.rotate(frame.timeDiff * Math.PI / 1000 * (-1));

              },
              node: layer_balls
            });

But anyway I guess I will have to understand kinetic.js from the examples and short descriptions and read about general animation with canvas without kinitic.js for general understanding.

[Taywin]

Yes, it does have the setTimeout() function. :) You see, the library is similar to JQuery -- hide stuff from users. The source code link of kinetic.js is here. If you search for setTimeout(), you will see plenty of it. :) What you are passing in is an inline function to the Animation() function of the Kinetic object. Whatever it does inside the function, you will need to dig a bit deeper to understand. :)

[McLaren]

Yes, it does have the setTimeout() function. :) You see, the library is similar to JQuery -- hide stuff from users.

I understand that :) I meant I don't need set timeout in MY code :)

[McLaren]

Actually we don't need setTimeout as I read from this :)

http://blog.sethladd.com/2011/09/box2d-javascript-example-walkthrough.html

Animating

Before we look at Box2D, it's important to understand how the above simulation is animated. You might think setInterval or setTimeout is your friend. Wrong, they are evil little buggers. For smart animating, you should use requestAnimationFrame. Mozilla also recommends requestAnimationFrame for efficient animation. In fact, they wrote about it again.

[Taywin]

Watch out. It is a new feature that is not supported by every browser/phone. I think it is for HTML5?

[McLaren]

yeah, luckily for now we only have to make it work in chrome engine.

[gamingthinktank]

You may want to read these threads:

Snake Game with KineticJs:

http://www.daniweb.com/software-development/game-development/threads/458965/create-snake-game-using-kineticjs-and-html5-canvas

Collision Detection using Bounding Box and KineticJS sprites:

http://www.daniweb.com/software-development/game-development/threads/458966/collision-detection-using-bounding-rectangle-method-kineticjs-and-html5