Jump to content

Pixi + spine for retina displays


Recommended Posts



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?



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...