Text is blurry after scale

[CW-wgl2]

I want to make a puzzle game, where the user can zoom and pan on a grid. Some square has text which should be zoomable. First i have tried svg. It looked very nice, the zoomed text was very crisp, but the performance wasnt the best on mobile. I took a look on some benchmark test, and  WebGL was so much faster then canvas (or SVG of course), so i want to take a shot. There is eaven a project http://iewebgl.com/ which makes IE capable for WebGL.

I read some good review on pixie.js (performancewise too), so i hope its the right framework for my needs.

 

- Is this the official Pixi.js forum? I saw Mat Groves is a moderator...

- How do i know if PIXI.autoDetectRenderer uses WebGL or Canvas?

- I tried to scale a text but it looks very blurry:

 

 

// create an new instance of a pixi stagevar stage = new PIXI.Stage(0x66FF99);// create a renderer instancevar renderer = PIXI.autoDetectRenderer(620, 380, null, false, true);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);// create a text object with a nice strokevar text = new PIXI.Text("I'm fun!", {font: "36px Arial", fill: "#cc00ff", align: "center", stroke: "#FFFFFF", strokeThickness: 6});text.position.x = 0;text.position.y = 0;text.scale.x = 10;text.scale.y = 10;stage.addChild(text);// render the stage   renderer.render(stage);

thanks

[xerver]

- Is this the official Pixi.js forum? I saw Mat Groves is a moderator...

 -> Yes.

- How do i know if PIXI.autoDetectRenderer uses WebGL or Canvas?

 ->

if(myRendererInstance.gl) {

    //webgl renderer

} else {

    //canvas renderer

} 

- I tried to scale a text but it looks very blurry:

 -> For now PIXI scales linear (webgl) or bicubic (canvas). In an upcoming release you will be able to specify the scaling algorithm. It would be more prudent to use a bitmap font and scale it outside the canvas, scaling up by 10 linearly is going to look like crap.

[CW-wgl2]

Thanks rolnaaba!

 

 -> For now PIXI scales linear (webgl) or bicubic (canvas). In an upcoming release you will be able to specify the scaling algorithm. It would be more prudent to use a bitmap font and scale it outside the canvas, scaling up by 10 linearly is going to look like crap.

 

 

 

I put togeather a quick demonstration in Raphael what im trying to achive: http://jsbin.com/oGoyApo/3

 

I guess bitmap wont work becouse it gets blurry on to much zoom and if i set to high px value in BM Font's fonr settings then at zoom out it look really ugly.

 

Could it be a solution to take the path of my custom fonts and build the text from shapes? Like Raphael takes the cufon font's paths and makes its on shapes from it. (Its damn slow but maybe it could work on WebGL...)Shapes wont get blurry on scaling, do they?

 

About the future release with possibility to set the scaling algorithm: Is someone already working on this? When will it be done? Can i help something?

[xerver]

Looks like that is system font scaling, what I would do is have your font loaded via CSS @font-face and use PIXI.Text to render it. Then don't scale the text but *change text size* which will let the OS scale the text based on the font rules. Maybe that will give you better results.

[mwatt]

Looks great using PIXI.Text - I was just playing with this myself.

 

Word of caution - there is currently a Chrome bug that causes rendering distortion on very large font sizes (> 256px) if you use a stroke instead of just a fill.

[CW-wgl2]

It still doesnt feel right. If i want to zoom in the canvas, i have to loop through all text objects, get the font string, make a little string magic to get the size and the unit and scale.

It would be better

DisplayObjectContainer.scale.x = 2DisplayObjectContainer.scale.y = 2

and all text's font-size property inside the container get updated.

[xerver]

It still doesnt feel right. If i want to zoom in the canvas, i have to loop through all text objects, get the font string, make a little string magic to get the size and the unit and scale.

It would be better

DisplayObjectContainer.scale.x = 2DisplayObjectContainer.scale.y = 2

and all text's font-size property inside the container get updated.

 

Sure, but for the scaling you want the system needs to do the scale. TO do that either you or pixi has to build the font string to pass to the canvas. Either way it will be weird...

[Snicers]

So it has been over a year, is WebGL pixi going to get bicubic scaling?

[xerver]

There is only Linear and Nearest scaling in WebGL, that has nothing to do with Pixi. Anything else would need to be shader based, which we do not plan to do.

[JDW]

You can try to change the resolution of the text at the same time as the scale. You'll still have to loop over every Text object :

 

http://jsfiddle.net/fzuepm1f/3/

[Alex Tappin]

I have been going through hell getting this to work...

What I was attempting to do is the following.

From a zoomed out view, the text will be hidden.
Once a user zooms in 2x the zoom level, the ability to zoom in stops and the text will appear.

I cannot for the life of me get that to look good. I have tried drawing the text with a bigger font then scaling the entire container down... Any suggestions? I looked into bitmap font but it would need some work as I would need to get a corporate approved font for that.

PS... Using PIXI for a project here at Daimler. It has being well received! 

[Alex Tappin]

Upping the resolution just makes it look worse.

I have also made sure that every position x,y is a whole number, no floats (as I read as another issue in another thread).

 

I am thinking I will need to bite the bullet and get the bitmap fonts working with this zoom level.

[istoica]

@Alex Tappin , what did you do in the end ? Went to use bitmap fonts ? I hit this today!

[Alex Tappin]

3 hours ago, istoica said:

@Alex Tappin , what did you do in the end ? Went to use bitmap fonts ? I hit this today!

Hi!
I never officially solved this problem the way I wanted to. Bitmap fonts didnt work the way I wanted either (no difference from the current implementation except more files, etc).

I did a few different things, but the basic solution was to scale the font when creating it and then rescaling the container back down. Here are some of the functions of the basic workflow I worked out...

 

const getTextChild = (vehicleData, cardWidth, cardHeight, cardHeaderHeight, workstationInfo) => {
  const textBlurScaleBigCard = 2.64; // Optimized scale for the zoom level I want to use this
  const textBlurZoomBigCard = Math.pow(textBlurScaleBigCard, -1); // inverse of zoom
  const textContainer = new PIXI.Container();
  // create static content
  const workstation = getWorkstation(workstationInfo, textBlurScaleBigCard);
  // set static positions
  workstation.position = getWorkstationPosition(textBlurScaleBigCard);
  sequence.position = getSequencePosition(sequence, cardHeaderHeight, workstation, 
  // add to container
  textContainer.addChild(workstation);
  textContainer.scale.set(textBlurZoomBigCard, textBlurZoomBigCard); // rescale it
  textContainer.cacheAsBitmap = false;
  return textContainer;
};

const getWorkstation = (workstationInfo, scale) => {
  const workstationInfoContainer = new PIXI.Container();
  const stationNumber = getText(workstationInfo ? workstationInfo.number : 'test', cst.fontSizes.h3Text * scale, 700, 0xFFFFFF);
  workstationInfoContainer.addChild(stationNumber);
  return workstationInfoContainer;
};

const getText = (text, fontSize, fontWeight, fill, background) => {
  const textContainer = new PIXI.Container();
  let fillToUse = fill;
  if (background) fillToUse = whiteBackground;
  let texture = textStore.getText(text + fontSize + fontWeight + fillToUse);
  if (!texture) texture = textStore.addText(new PIXI.Text(text, { fontFamily: 'corposreg', fontSize, fill: fillToUse, fontWeight }), text + fontSize + fontWeight + fillToUse);
  if (background) textContainer.addChild(getHighlightBackground(texture.height, texture.width, background));
  textContainer.addChild(new PIXI.Sprite(texture));
  return textContainer;
};

You can see that getTextChild defines the scale that I am using. For this specific container, I will only see it at a certain zoom level and the 2.64 is the most optimized look at that zoom level.

I have some other things in this code but I hope this is easy enough to follow. I trimmed a lot of the unnecessary stuff out so this is sorta bare bones. The get text function returns the text and also caches it (I found this to improve performance since I have a LOT of text on the screen). If that letter or text has already been created, it will just reference the previous one made.

Let me know if you have any question...