I had not done much testing of my examples on mobile. Working on scaling and resizing a game scene in Phaser 3. While the examples worked fine as they are small the menu text did not.

Text overflowing on Phaser example menu scene
Text overflowing on Phaser example menu scene

Searching for resizing and scaling led me to a lot of examples and articles but nothing that worked well for me. Some of the examples on Phaser.io < https://www.phaser.io/examples/v3/search?search=resize> seemed broken.

Individually using setScale on the header text and each menu item would be tedious. Also, it failed to position everything correctly.

I finally ended up using a container that I used in the last toolbar example. By scaling the container once all that is in the container scales.

New MenuScene

class MenuScene extends Phaser.Scene {
private menuItems: Phaser.GameObjects.Text[];
private headerText: Phaser.GameObjects.Text;
private items: { text: string, scene: string, description: string }[];
private textDescription: HTMLElement;
private menuContainer:Phaser.GameObjects.Container;
constructor() {
super({
key: 'MenuScene'
});
}
create(): void {
console.log('menu scene create');
this.textDescription = document.getElementById("linkOut");
this.textDescription.innerHTML = "Phaser 3 examples";
this.menuItems = new Array<Phaser.GameObjects.Text>();
this.headerText = this.add.text(5, 5, "Phaser Examples", { fontFamily: 'Verdana, "Times New Roman", Tahoma, serif', fontSize: 64, color: '#ffffff' })
.setTintFill(0xff0000, 0x00ff00, 0x0000ff, 0xffffff);
this.menuContainer = this.add.container(0, 0, [this.headerText]);//create container with headerText. Menu items will be pushed on as they are created;
this.items = Array(
{ text: "Sprite movement control", scene: "SpriteSpaceShipScene", description: 'Phaser 3 Sprite Space Ship. <a href="https://mobsor.com/blog/2019/07/phase-3-examples-project-sprite-control-example/">Blog: Phaser 3 Examples Project – Sprite Control Example</a>' },
{ text: 'Back Ground Scene', scene: 'BackGroundScene', description: 'Phaser 3 Adding a Background Image Scene. <a href="https://mobsor.com/blog/2019/07/phaser-3-adding-a-back-ground-image-scene/">Blog: Phaser 3 Adding a Background Image Scene</a>' },
{ text: 'Bullets Scene', scene: 'BulletsScene', description: 'Phaser 3 Sprite with Shooting Bullets Example. <a href="https://mobsor.com/blog/2019/08/phaser-3-sprite-with-shooting-bullets-example/">Blog: Sprite with Shooting Bullets </a>' },
{ text: 'Toolbar Scene', scene: 'ToolbarScene', description: 'Phaser 3 Toolbar Controls. <a href="https://mobsor.com/blog/2019/09/phaser-3-toolbar-scene-example/">Blog: Phaser 3 Toolbar Scene Example</a>' }
);
this.items.forEach(item => {
this.addMenuItem(item);
});
let urlParts = window.location.href.split('#');
if (urlParts[1] && urlParts[1].length > 0) {
this.loadSceneFromUrl(urlParts[1])
}
this.doResize();
this.scale.on('resize', this.doResize ,this);
}
doResize():void{
/*
* making headerText the widest item at 95% of screen width
*/
let resize = this.scale.width *.95 / this.headerText.width;
this.menuContainer.setScale(resize);
}
loadSceneFromUrl(part: string) {
this.items.forEach((item:{ text: string, scene: string, description: string }) => {
if (item.scene.toLowerCase() === part.toLowerCase()) {
this.textDescription.innerHTML = item.description;
this.scene.start(item.scene);
}
});
}
addMenuItem(menuItem: { text: string, scene: string, description:string }): void {
let y: number = 80;
y += (this.menuItems.length * 41);
let item: Phaser.GameObjects.Text = this.add.text(5, y, menuItem.text, { fontFamily: 'Verdana, "Times New Roman", Tahoma, serif', fontSize: 32, color: '#ffffff' });
item.setInteractive({ cursor: 'pointer' }).on('pointerdown', () => {
window.history.replaceState({}, 'Phaser 3 Examples ' + menuItem.text, './' + '#' + menuItem.scene);
this.textDescription.innerHTML = menuItem.description;
this.scene.start(menuItem.scene); 
});
this.menuItems.push(item);
this.menuContainer.add(item);
}
}
export default MenuScene
Menu scene with resizing / scaling code
Menu scene with resizing / Scaling

This looks much better on mobile now and resizes on switching from landscape to portrait.

I now have to look into scrolling as on mobile landscape mode some menu items are pushed off screen.

Leave a comment

Your email address will not be published. Required fields are marked *