Jump to content

How to make container/box in Phaser


Michał Lipa
 Share

Recommended Posts

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;
			}
		}
	}
		
},

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...