Forums » Help » Font not rendering on iPad

My fonts don't want to render on the iPad because of MAX_TEXTURE_SIZE (2048) and I'm wondering if there's something I'm not doing correctly or a plugin that addresses this.

My current game doesn't need lowercase letters so I cut off the font after Z to get the image under 1024 pixel width - this is hacky. I could write a plugin to fix this, but I'd still have to manually edit my font images to get them wrapped instead of one straight line. I've looked on the forum and I can't find anything that addresses this issue.

And also, a second issue on iPad with tiles. It seems that some tiles get this funky 1px gray border on 2 sides.

I have no issues when running on iPhones or the web so please let me know your experience with iPad fonts and images in general. Thanks in advance.

Don't bother using the impact font system in Ejecta.

Use canvas fonts.
Here's a cool word wrapping function you can drop in your main.js:

wrapTheText: function(context, text, x, y, maxWidth, lineHeight, style) {
		
		if (style == 1){
			context.font= this.titleHeaderFontSize + 'px FFFTusj-Bold';
			this.fontSizeY = this.titleHeaderFontSize;
			ig.system.context.fillStyle = '#000000';
		}
		//Title Screen Subtitle
		else if (style == 2){
			context.font= this.titleSubtitleFontSize + 'px Rockwell';
			this.fontSizeY = this.titleSubtitleFontSize;
			ig.system.context.fillStyle = '#000000';
		}
		var words = text.split(" ");
        	var line = "";
        	for(var n = 0; n < words.length; n++) {
          	var testLine = line + words[n] + " ";
          	var metrics = context.measureText(testLine);
          	var testWidth = metrics.width;
          	if(testWidth > maxWidth) {
            		context.fillText(line, x, y);
            		line = words[n] + " ";
            		y += lineHeight;
          	}
          	else {
          	  	line = testLine;
          	}
        	}
        	context.fillText(line, x, y);
		this.cursorPosX = x;
		this.cursorPosY =y;
		this.cursorPosYNewLine = y + lineHeight;
	},

Call like this in the draw function:

var ctx = ig.system.context;

this.wrapTheText(ctx, 'Your text here', x, y, maxwidth, lineheight, style number);

There are plenty of fonts built into the system and adding new styles via TFF is easy. I tried many hacks to work around the maximage size for fonts, and it was a big stupid waste of time. Canvas fonts are so obviously the way to go when you see them in action.

Nice function there, thanks for sharing it. But that's not what I meant by wrapped font images. I meant a bitmap font that arranges the characters on multiple rows. Example: http://www.angelcode.com/products/bmfont

You are right about the advantages of TTF and canvas fonts in general, but I still prefer to use pre-rendered image for my fonts.

Here's why I need pre-rendered font images:

* ig.Loader won't make the ig.Game wait to load TTF's
* You don't get pixel-level control with TTF. Each environment could look different.
* Typically smaller file sizes
* TrueType is Apple technology, I prefer open standards. It's a web game too.


But I've since found what I need on the font problem with a bitmap font renderer class.

I'm going to post a separate thread about the small tiles' edge glitch on Retina iPad.

Thanks for your help!