Jump to content

Text is blurry after scale


CW-wgl2
 Share

Recommended Posts

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:

 

c93s.jpg

 

// 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

Link to comment
Share on other sites

- 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.


Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

  • 1 year later...
  • 2 years later...

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! 

blurry.PNG

Link to comment
Share on other sites

  • 5 months later...
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...

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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