Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

6 years ago by Jesse

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.

6 years ago by Donzo

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.

6 years ago by Jesse

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!
Page 1 of 1
« first « previous next › last »