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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.