Forums » Impact Engine » Adding scaling to fonts

Needed to add scaling to fonts independently of the current system font.

So I made changes to the font class to accomodate.
It should really be something added to the main code set.

...
  letterSpacing: 1,
  lineSpacing: 0,
  // >>> added
  scaleFont: 1,       
  startChar: {x:0,y:0},   
  // <<< end
...
...
    for( var i = 0; i < text.length; i++ )
    {
      // >>> added 
      if (i == 0)
      {
        this.startChar.x = ig.system.getDrawPos(x);
        this.startChar.y = ig.system.getDrawPos(y);
      }
      // <<< end
...
...
  // >>> replaced context drawImage
  ig.system.context.drawImage( 
    this.data,
    charX, charY, 
    charWidth, charHeight,
    this.startChar.x+((ig.system.getDrawPos(targetX)-this.startChar.x)*this.scaleFont), 
    ig.system.getDrawPos(targetY), 
    charWidth*this.scaleFont, charHeight*this.scaleFont
  );
  // <<< end

Usage is simple.
Just call the created font file to set the scale

font.scalefont = 4;
font.draw('some text',x,y,Font.ALIGN.CENTER);
font.scalefont = 2;
otherfont.draw('some text',x,y+20,Font.ALIGN.CENTER); // also gets changed

It just sets the state of the font scale. Maybe I need to cap it so its more obvious.

This is awesome, however I have just one concern with your method. You're letting the canvas context handle the scaling.

In the past Dominic has explored methods of scaling:
http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

My understanding was that scaling and then drawing sharp, hard pixels -- and avoiding smooth, blurry pixels -- could not be done this way.

Has this changed, did I misunderstand from the start, or do you just not mind that pixel-perfect fonts will become blurry?

I tried it and there is no blurriness.
Tested on Chrome, firefox, safari and Opera.

See for yourself.
http://js13kgames.com/entries/the-minion-escapes

Fonts are at different scales.

Thanks for adding this feature I think it or something like it should be part of the engine by default so you don't have to load a bunch of different fonts as images to modify the size.

On a related note, I'm having difficulty with fonts not rendering correctly when the scale factor of the canvas is not 1 in the call to ig.main. I thought it was because I added the scaleFactor from this font scaling change, but that doesn't appear to be the issue. I'll keep plugging away at it, but would appreciate any guidance or explanation of the problem in the meantime. Thanks.

Looks like the problem may be related to scaling the font image down instead of up. When I double the canvas size, no problem, my aspect ratio is standard so pixels get filled in and the image looks the same. When I scale down, I'm guessing there is nowhere for those extra pixels to go, so the artifacts make the text unreadable.