Forums » Help » Font appearing behind entity.

I have the following entity, however when I set this.showText to true the font appears behind the entity.

Is there a way to set the zIndex for fonts that are drawn?

ig.module('game.entities.large-computer').requires('impact.entity').defines(function() {
	EntityLargeComputer = ig.Entity.extend({
		size: {
			x: 80,
			y: 68
		},
		zIndex: -1,
		msg: '',
		duration: 0.1,
		playedSound: false,
		gravityFactor: 0,
		animSheet: new ig.AnimationSheet('media/sprites/large-computer.png', 80, 68),
		sfxComputer: new ig.Sound('media/sounds/computer.*'),
		font: new ig.Font('media/fonts/font.computer.png'),
		showText: false,
		init: function(x, y, settings) {
			this.parent(x, y, settings);

			// Specify which icon to use.
			this.addAnim('idle', 0.2, [0]);
			this.addAnim('active', 0.2, [0]);

			this.idleTimer = new ig.Timer();
		},
		ready: function() {
			// Make sign entity invisible in-game.
			// delete this.currentAnim;
		},
		update: function() {
			var distanceTo = this.distanceTo(ig.game.player);
			if (distanceTo <= this.size.x * 2) {
				this.currentAnim = this.anims.active;
				this.showText = true;

				// Play computer sound.
				if (!this.playedSound) {
					this.sfxComputer.play();
					this.playedSound = true;
				}
			} else {
				this.currentAnim = this.anims.idle;
				this.playedSound = false;
				this.showText = false;
			}

			// Call parent.
			this.parent();
		},
		draw: function() {
			if (this.showText) {
				this.font.draw(this.msg, this.pos.x, this.pos.y, ig.Font.ALIGN.CENTER);
			}
			this.parent();
		}
	});
})

this.parent() of the draw method will draw the entity, so if you think this through.
You just need to switch some lines around

        draw: function() {
            
            this.parent(); // First draw the entity

            // Now draw the font
            if (this.showText) {
                this.font.draw(this.msg, this.pos.x, this.pos.y, ig.Font.ALIGN.CENTER);
            }
        }

@jerev: Already tried doing that. Font still appears behind the entity.

If this helps, I'm adding the entity via Weltmeister and not spawning in-game.

My bad, I forgot to change something, fonts are drawn on actual x/y coords, not those relative to the viewport, so:

        draw: function() {
            
            this.parent(); // First draw the entity

            // Now draw the font, on local coords
            if (this.showText) {
                this.font.draw(this.msg, this.pos.x-ig.game.screen.x, this.pos.y-ig.game.screen.y, ig.Font.ALIGN.CENTER);
            }
        }

Your font wasn't drawn behind your entity, it was drawn on wrong coords.

@jerev: I swear I knew this already. I should stop coding when it gets really late. My brain just stops functioning. Thank you. :)