Forums » Help » Centering text within an image.

I am trying to center font text within an image that's centered in the middle of the screen.

So far I have this:

var x = ig.system.width / 2,
    y = ig.system.height / 2;

this.computerImg.draw(x / 2, y / 2);
this.font.draw('foo', this.computerImg.width / 2, this.computerImg.height / 2, ig.Font.ALIGN.CENTER);

Instead of the font being centered it is snapped to the top-left hand corner of the image. Not quite sure what's happening here?

Any help would be fantastic.

I don't think your image is drawn at the center. ig.Image's draw method's first 2 arguments specify top left corner coords. Unless I'm dreaming.

I'd try it this way:

var w = ig.system.width,
	h = ig.system.height,
	iw = this.computerImg.width,
	ih = this.computerImg.height,
	ix = (w-iw)/2,
	iy = (h-ih)/2,
	fx = (ix + iw)/2,
	fy = (iy + ih)/2;

this.computerImg.draw (ix, iy);
this.font.draw('foo', fx, fy, ig.Font.ALIGN.CENTER);

or something close to.

@alexandre: The computerImg is centering perfectly it was just the font.

The text was still snapped to the top-left of the image.

I changed the fx and fy to:

fx = w / 2,
fy = h / 2;

Both the font and image are now centered. Thanks for your help.