Retina UI-text

Post your help queries and engine programming questions here

Retina UI-text

Postby Sandstedt » Wed Dec 07, 2016 3:37 pm

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);
User avatar
Sandstedt
 
Posts: 15
Joined: Fri Oct 21, 2016 4:17 pm

Re: Retina UI-text

Postby Sandstedt » Mon Jan 23, 2017 2:12 pm

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.
User avatar
Sandstedt
 
Posts: 15
Joined: Fri Oct 21, 2016 4:17 pm

Re: Retina UI-text

Postby Sandstedt » Fri Mar 24, 2017 10:03 am

Potarloyna wrote:What's so great about it?

About what?
User avatar
Sandstedt
 
Posts: 15
Joined: Fri Oct 21, 2016 4:17 pm


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron