Page 1 of 1

Retina UI-text

PostPosted: Wed Dec 07, 2016 3:37 pm
by Sandstedt
Is it possible to add "retina" / high resolution display support for UI text ( IgeUiLabel ). With the default viewport I solved it like this to make all texture "retina ready". But then you can't position things relative to the viewport (without a lot of math).

Code: Select all
ige.globalSmoothing(true);

var sVp = new IgeViewport()
   .id('sVp')
   .autoSize(true)
   .camera.scaleTo(0.4, 0.4, 0.4); // default scaling

// Check the size of the viewport
function getViewport() {
   return viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
   return viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
}

// Scale the camera depending on viewport width
function setCamera() {
   getViewport();
   if (viewportWidth > 1600 ) {
      this.scaleValue = 0.6;
   } else if (viewportWidth > 600 ) {
      this.scaleValue = 0.4;
   } else {
      this.scaleValue = 0.2;
   }
   sVp.camera.scaleTo(this.scaleValue, this.scaleValue, this.scaleValue)
}
setCamera();

//run setCamera every time the window resizes
window.addEventListener("resize", setCamera);

Re: Retina UI-text

PostPosted: Mon Jan 23, 2017 2:12 pm
by Sandstedt
It seems you just can use a fontSheet with higher resolution using the font sheet generator http://www.isogenicengine.com/tools/fontSheetGenerator/, (i generated a font in 60px, and then scale down the FontEntity width .scaleTo(0.5). Then you will get a 30px large retina redy text.

Re: Retina UI-text

PostPosted: Fri Mar 24, 2017 10:03 am
by Sandstedt
Potarloyna wrote:What's so great about it?

About what?