Setting height and width of container

Phaser 3
1

I have a button class that creates text inside of a rectangle inside of a container:

class MenuButton extends Phaser.GameObjects.Container {
		constructor(scene, text, style, callback) {
			super(scene, 0, 0);
			
			if(style.hasOwnProperty("text")){
				if(!style.text.hasOwnProperty('boundsAlignH')){
					style.text.boundsAlignH = 'center';
				}
				if(!style.text.hasOwnProperty('boundsAlignV')){
					style.text.boundsAlignV = 'middle';
				}
			}
			
			this.style = style;
			
			var textElement = scene.add.text(scene, 0, 0, text, style.text);
			this.rectangle = scene.add.rectangle(0, 0, textElement.displayWidth, textElement.displayHeight, style.button);
			
			this.add([this.rectangle, textElement]);
			this.setPosition(0, 0).setSize(textElement.displayWidth+5, textElement.displayHeight+5).setInteractive({ useHandCursor: true })
				.on('pointerover', () => this.hoverState())
				.on('pointerout', () => this.readyState())
				.on('pointerdown', () => this.activeState())
				.on('pointerup', () => {
					this.hoverState();
					callback();
				});
			console.log('this', this);
		}
		
		hoverState() {
			this.rectangle.setStyle({ fill: this.style.button.hover});
		}
		
		readyState() {
			this.rectangle.setStyle({ fill: this.style.button.ready });
		}
		
		activeState() {
			this.rectangle.setStyle({ fill: this.style.button.active });
		}
	}

In my scene’s create method, I call it thusly:

						text: {
							color: '#9AC4F8',
							fontFamily: 'Ranchers',
							fontSize: 40,
						},
						button: {
							active: '#DE9E36',
							ready: '#9AC4F8',
							hover: '#99EDCC',
						}
					}, () => t.scene.start('wagerScene'));
  				t.add.existing(t.buttonHome);
  				t.menuSceneGrid.placeAtIndex(12, t.buttonHome);

The conainer is created and placed at the correct position, however, it is tiny, and does not display the text or rectangle at all. What am I missing?

2

What’s the rest of this code?

3
  • add.text() has no scene argument
  • In add.rectangle(), style.button is undefined
  • All of the rectangle colors must be numbers, e.g. 0xDE9E36
  • There’s no rectangle.setStyle() method. It should be rectangle.setFillStyle(number)
  • The text and rectangle objects have different origins so they won’t be aligned at the center. You can change the text origin to (0.5, 0.5) or reposition it.
4

Thanks for the reply. I’m doing a lot better with the following code:
menu_button.js

import {Button} from './button.js';
import {Game} from '../game.js';

class MenuButton extends Button {
	constructor(scene, text, callback, style={}){
		var defaultStyle = {
			text: {
				color: '0x000000',
				fontFamily: 'Ranchers',
				fontSize: 40,
			},
			button: {
				radius: 10,
				paddingX: 20,
				paddingY: 20,
				background: {
					color: '0xFFFFFF',
					active: '0xDE9E36',
					ready: '0x9AC4F8',
					hover: '0x99EDCC',
				},
					border: {
					width: 2,
					active: '0x99EDCC',
					ready: '0x99EDCC',
					hover: '0xDE9E36'
				}
			}
		};
		
		var btnStyle = Game.extend(defaultStyle, style);
		
		var config = {
			scene: scene,
			text: text,
			callback: callback,
			style: btnStyle
		};
		
		super(config);
		scene.add.existing(this);
	}
}

export {MenuButton};

button.js

class Button extends Phaser.GameObjects.Container {
	constructor(config){
		super(config.scene, 0, 0);
		
		if(config.style.hasOwnProperty("button")){
			if(!config.style.button.hasOwnProperty('paddingX')){
				config.style.button.paddingX = 5;
			}
			if(!config.style.button.hasOwnProperty('paddingY')){
				config.style.button.paddingY = 5;
			}
		}
		this.style = config.style;
		
		this.textElement = config.scene.make.text({
			x: 0,
			y: 0,
			text: config.text,
			style: {
				fontFamily: this.style.text.fontFamily,
				fill: this.style.text.color,
				fontSize: this.style.text.fontSize
			}
		});
		this.textElement.setOrigin(0, 0);
		
		var textElementBounds = this.textElement.getBounds();
		this.boxGeom = {
			width: textElementBounds.width+this.style.button.paddingY,
			height: textElementBounds.height+this.style.button.paddingX
		};
		
		this.box = config.scene.add.graphics();
		this.makeState(this.style.button.background.color);
		this.setSize(this.boxGeom.width, this.boxGeom.height);
		this.textElement.setPosition(this.box.x+(this.style.button.paddingX/2), this.box.y+(this.style.button.paddingY/2));
		
		this.add([this.box, this.textElement])
			.setInteractive({ useHandCursor: true })
			.on('pointerover', () => this.hoverState())
			.on('pointerout', () => this.readyState())
			.on('pointerdown', () => this.activeState())
			.on('pointerup', () => {
				this.hoverState();
				config.callback();
			});
	}
	
	makeState(color){
		this.box.clear();
		this.box.fillStyle(color, 1);
		this.box.fillRoundedRect(0, 0, this.boxGeom.width, this.boxGeom.height, this.style.button.radius);
		this.box.lineStyle(this.style.button.border.width, this.style.button.border.ready, 1);
		this.box.strokeRoundedRect(0, 0, this.boxGeom.width, this.boxGeom.height, this.style.button.radius);
	}
	
	hoverState() {
		this.makeState(this.style.button.background.hover, this.boxGeom);
	}
	
	readyState() {
		this.makeState(this.style.button.background.ready, this.boxGeom);
	}
	
	activeState() {
		this.makeState(this.style.button.background.active, this.boxGeom);
	}
}

export {Button};

menu_scene.js

import {AlignGrid} from './components/grid.js';
import {MenuButton} from './components/menu_button.js';

class MenuScene extends Phaser.Scene {
	constructor(){
		super({key: 'menuScene'});
	}
	
	init(data){
		this.asses = data.asses;
		this.scores = data.scores;
	}
	
	create(){
		var t = this;
		
		this.add.image(400, 300, 'flags');
		
		var menuSceneGridConfig = {
			'scene': this,
			'cols': 5,
			'rows': 5
		};
		this.menuSceneGrid = new AlignGrid(menuSceneGridConfig);
		//this.menuSceneGrid.showNumbers();
		
		WebFont.load({
			google: {
				families: this.game.config.Game.fonts
			},
			active: function () {
				t.titleText = t.add.text(0, 0, 'ASS RACES!', {
					fontFamily: 'Barrio',
					fontSize: 80,
					color: '#DE9E36',
				});
				
				t.playButton = new MenuButton(t, 'Play Now', () => t.scene.start('wagerScene', {asses: t.asses}));
				t.scoresButton = new MenuButton(t, 'HiScores', () => t.scene.start('scoresScene', {scores: t.scores}));
				
				t.menuSceneGrid.placeAtIndex(7, t.titleText);
				t.menuSceneGrid.placeAtIndex(16, t.playButton);
				t.menuSceneGrid.placeAtIndex(18, t.scoresButton);
			}
		});
	}
}

export {MenuScene};

The text and its background align how I was wanting, but it seems the container hit area is still set to the text’s display origin. How can I set the display origin to match the box and textElement?