geddski

I'm exporting a project in JSON format and importing it to the Widget runtime. I'm trying to make the end result look sharp on retina screens like the macbook pro. The way to do this with regular images is to use images that are twice as big as the space they need to take up, and scale them down with CSS. The following things I've tried all end up looking either blurry or pixelated:

- exporting from spine at scale:1 and setting scale: .5 in the runtime config
- exporting at scale:1 and setting "fitToCanvas: true" in the runtime config

The only thing that does seem to work is exporting at "scale:1", using "scale:1" in the runtime config, and then scaling the canvas object down using CSS "transform: scale(.5)". This works but is not ideal because then the elements take up twice the space in the DOM than what is visible.

Is there a recommended method for getting crisp retina exports with the Widget runtime?
geddski
  • Posts: 23

badlogic

The widget uses WebGL under the hood. Please try the recommendations from this site https://www.khronos.org/webgl/wiki/HandlingHighDPI
User avatar
badlogic

Mario
  • Posts: 1936

geddski

Thanks for that link that was helpful. But it looks like spine Widget makes it pretty hard to use that technique because of the Widget.prototype.resize() method, which automatically resets the canvas's width and height properties back to the lower resolution. For example I set it to this to make it look sharp:

<canvas width="1000" height="1000" style="width: 500px; height: 500px;"/>

and the resize() method automatically kicks in and changes it down to:

<canvas width="500" height="500" style="width: 500px; height: 500px;"/>

making it look blurry again.

I can override the widget.resize method but then it gets called endlessly



maybe that's not a problem but it doesn't seem necessary.

In any case, Widget should make it easy to render a Spine object in retina quality. Maybe a "DPI: 2" option could set the canvas' dimensions to double the element's dimensions, and disable the auto-resize function?
geddski
  • Posts: 23

badlogic

Could you modify the widget example to reproduce the issue? I'll see what I can do based on that.
User avatar
badlogic

Mario
  • Posts: 1936

geddski

will do!
geddski
  • Posts: 23

nimbling

Did someone find a good solution for this, perhaps?
User avatar
nimbling
  • Posts: 156

badlogic

This should actually be fixed in the new spine-ts web player out of the box. Do you see an issue? If so, could you describe it and send me a reproduction sample?
User avatar
badlogic

Mario
  • Posts: 1936


Return to Runtimes