Sign in to follow this  
Michał Lipa

How to make container/box in Phaser

Recommended Posts

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

var graphics =;

graphics.beginFill(0x000000, 1);
this.gamePanel = graphics.drawRect(0, 768, 768, -352);
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(, 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.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] =, (this.gameLog[i].y + (16*(height/15.5))), 'font', prevText, 16);
				this.gameLog[i-1].fixedToCamera = true;


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.