[Phaser 3 - Plugin] UIMode: Adaptive UI System for Responsive Games

Showcase
1

GitHub: Qugurun/Phaser-Plugin-UiMode

UIMode is a lightweight Phaser 3 plugin that automates responsive UI scaling and layout adjustments, eliminating manual repositioning for different screen sizes. Define rules once—let UIMode handle dynamic resizing, anchoring, and component adaptation seamlessly.

preview

Development is actively underway , but we’ve hit a few snags! The plugin currently has workarounds**.We’re re-evaluating the core architecture to remove these constraints—and we’d love your input!

4 Likes
2

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phaser Game with Cropped Area</title>
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
    <div id="app">
        <div id="game-container"></div>
    </div>
    
    <script src="phaser.min.js"></script>

    <script src="game.js"></script>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000000;
}

#app {
    width: 100%;
    height: 100dvh;  /* IOS */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

game.js

class MyScene extends Phaser.Scene {
    constructor() {
        super("Game");
    }

    preload() {
        this.load.image("back", "assets/back.png");
        this.load.image("background", "assets/background.png"); // --> 1280x720
    }

    create() {
        this.add.image(this.game.config.width, this.game.config.height, 'back').setScale(10);
        this.add.image(0, 0, 'background').setOrigin(0, 0);

        window.addEventListener('resize', () => this.resize());
        this.resize();
    }

    resize() {
        this.cameras.main.scrollX = -this.scale.gameSize.width / 2 + this.game.config.width / 2;
        this.cameras.main.scrollY = -this.scale.gameSize.height / 2 + this.game.config.height / 2;
    }
}

const config = {
    type: Phaser.AUTO,
    width: 1280,
    height: 720,
    scale: {
        mode: Phaser.Scale.EXPAND
    },
    parent: 'game-container',
    scene: [
        MyScene
    ]
};

const game = new Phaser.Game(config);

Alright, it’s time to accept the fact that the deeper I dug into Phaser’s source code, the more I discovered. And one of those discoveries was that so-called adaptive canvas behavior actually comes built-in. And that changes everything fundamentally. Above is an example of how it all works.

So now my plugin becomes kind of unnecessary—unless I rework it to fit the solution I found.

2 Likes
3

Based on my hands-on experience in real-world project development, I lean towards decoupling UI logic from Phaser by handling UI-related aspects using HTML/CSS/JS (or any familiar frontend framework), while reserving Phaser specifically for core game logic implementation. This architectural separation proves more maintainable than managing both game systems and UI elements concurrently within the Phaser environment itself.