Pixi + spine for retina displays

[daviestar]

Hello,

 

Can someone please clear this up for me.... what is the best practice to display standard and retina graphics with pixi + spine?

 

I tried working with only retina files in spine, 1 set of retina sprites on top a retina-sized skeleton, then creating a pixi instance like this:

PIXI.loader.add('test', 'spine/test.json').load(function(loader, res) {  var renderer = PIXI.autoDetectRenderer(800, 600, {    transparent: true,    resolution: window.devicePixelRatio  });  var stage = new PIXI.Container();  var dude = new PIXI.spine.Spine(res.test.spineData);  var origin = {    x: (renderer.width / renderer.resolution) / 2,    y: (renderer.height / renderer.resolution)  };  dude.position.x = i.origin.x;  dude.position.y = i.origin.y;  dude.scale.set(0.5);  stage.addChild(dude);  // ------  var $elem = $('#container');  $elem.html(renderer.view);  $elem.find('canvas').css({    width: '800px',    height: '600px'  });});

but now low-res screens don't look as crisp with retina graphics scaled down, as they do with normal-sized assets and skeleton.

 

Now I am thinking I need to work with regular sized assets and skeleton in Spine, but output both the regular and retina sized assets, appending @2x to the retina .png which Pixi will automatically use on hi-res displays?  That seems to be what Pixi wants me to do, but is this possible in Spine?

 

Thanks.