HTML5 Canvas KineticJS Sprite Tutorial

To create an animated sprite with KineticJS, we can instantiate a Kinetic.Sprite() object. Sprites are most commonly used to animate game components that require predefined animation frames. For a full list of attributes and methods, check out the Kinetic.Sprite documentation.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-color: #222;
        display: inline-block;
        width: 580px;
        height: 202px;
      }
      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="punch" value="Punch">
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var animations = {
        idle: [{
          x: 2,
          y: 2,
          width: 70,
          height: 119
        }, {
          x: 71,
          y: 2,
          width: 74,
          height: 119
        }, {
          x: 146,
          y: 2,
          width: 81,
          height: 119
        }, {
          x: 226,
          y: 2,
          width: 76,
          height: 119
        }],
        punch: [{
          x: 2,
          y: 138,
          width: 74,
          height: 122
        }, {
          x: 76,
          y: 138,
          width: 84,
          height: 122
        }, {
          x: 346,
          y: 138,
          width: 120,
          height: 122
        }]
      };

var imageObj = new Image();
      imageObj.onload = function() {
        var blob = new Kinetic.Sprite({
          x: 250,
          y: 40,
          image: imageObj,
          animation: 'idle',
          animations: animations,
          frameRate: 7,
          index: 0
        });

// add the shape to the layer
        layer.add(blob);

// add the layer to the stage
        stage.add(layer);

// start sprite animation
        blob.start();

// resume transition
        document.getElementById('punch').addEventListener('click', function() {
          blob.setAnimation('punch');

blob.afterFrame(2, function() {
            blob.setAnimation('idle');
          });
        }, false);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/blob-sprite.png';
    </script>
  </body>
</html>

< Image Text >

More Examples

No Related Post

Modified on May 17th, 2013 by Eric Rowell