Retina (HDPI) KineticJS sprites

203 views Asked by At

I am working with KineticJS sprites and can't work out a way to get them to appear as HDPI - I have tried using scale to half size (my images are 2x the size I want them to appear) - which makes the image smaller without making it 'denser'.

I have also tried defining the width and height of the sprite as half values, but these properties seem to have no effect.

Any help would be greatly appreciated. Heres and example of the kind of thing I am doing, with my attempts commented out:

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();

  var imageObj = new Image();
  imageObj.onload = function() {
    var blob = new Kinetic.Sprite({
      x: 250,
      y: 40,
      image: imageObj,
      animation: 'idle',
      animations: {
        idle: [
          2,2,70,119,
          71,2,74,119,
          146,2,81,119,
          226,2,76,119
        ],
        punch: [
          2,138,74,122,
          76,138,84,122,
          346,138,120,122
        ]
      },
      frameRate: 7,
      frameIndex: 0,
      //width: imageObj.width / 2,
      //height: imageObj.height / 2
    });

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

    // Scale image down?
    //layer.scaleX(0.5).scaleY(0.5);

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

    // start sprite animation
    blob.start();
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/blob-sprite.png';
0

There are 0 answers