How to make container/box in Phaser

[Michał Lipa]

How to make container/box for text like this on screen. (example: brutal.io)

I mean what I supposted to use? graphics, pixi or what?

Can someone post some example?

 

 

[jonteferm]

I just use the phaser graphics to draw a rect somewhere on the screen:

var graphics = this.game.add.graphics();

graphics.beginFill(0x000000, 1);
this.gamePanel = graphics.drawRect(0, 768, 768, -352);
graphics.endFill();
this.gamePanel.fixedToCamera = true;

In my case it appears as a console at the bottom of the canvas.

Then I have a gameLog-array to where I push new text lines that are supposed to show in the console. It also handles the flow of the console; pushing text up when it has filled the console. The function looks like this now. I know there are some numbers in it that appears to be taken from nowhere. For instance - I do not remember where the hell I got 93 from. But anyway. It's just in some kind of playground-state by now and It will be something to look over when I start lifting out code for an actual game:

addText: function(text){
	this.gameLog.push(this.game.add.bitmapText(10, 430, 'font',text, 16));
	this.gameLog[this.gameLog.length-1].fixedToCamera = true;
	this.gameLogTextHeight += this.gameLog[this.gameLog.length-1].height;

	if(this.gameLogTextHeight >= 93){
			var firstItem = this.gameLog.shift();
			firstItem.visible = false;
			this.gameLogHistory.push(firstItem);
			this.gameLogTextHeight -= firstItem.height;
	}

	if(this.gameLog.length > 0){
		for(var i = this.gameLog.length-1; i > 0; i--){
			if(i > 0){
				var prevText = "";
				var height = 0;
				prevText = this.gameLog[i-1].text;
				height = this.gameLog[i].height;
				this.gameLog[i-1].destroy();
				this.gameLog[i-1] = this.game.add.bitmapText(10, (this.gameLog[i].y + (16*(height/15.5))), 'font', prevText, 16);
					
				this.gameLog[i-1].fixedToCamera = true;
			}
		}
	}
		
},