Modals creator UI plugin

Recently as I was building a new game, I realized that one of the most re-used elements across a variety of games is the “modal”, whether it is a countdown, a message modal or a game-over modal.
So I thought to create a little snippet that would make creating a modal an easier task, with the following script we can create a large combination of either text, bitmaptext or images.
So enough with the presentation, lets see how it looks, in this codepen I created six examples for all tastes.



1 Like

That is nice.
I am using Phaser 3. I need modals and menus as well. I am new to game dev but experienced in JavaScript. I will see if I have time to port it to Phaser 3.

1 Like

That’s great, let me know if you do so I can also add a link to your repo from mine, this way Phaser 3 and Phaser 2 users can benefit!

1 Like

Ok I will. Thanks!
I will be posting about these ui componets in Phaser 3 category. There is a bit of gap in this fields since there are many creative ways to do them as opposed to standard web ui development. However, it also a non benefit for my kind of game dev newbies and obsessive thinkers!
Maybe I write a whole library/plugin of ui library for Phaser, a React for Phaser.

I have a limited solution for a modal by using an extra Scene. Things are more straightforward with Phaser 3 as the Plugin system is much better. I might post a gist of my solution so others can maybe take some ideas and get started.

That would be great actually. Is that one is different than the previous one?

Something like this:

it is just a simple Scene with a dark background, but it can be extended in a number of ways.

use it like:

import {
} from "ModalMissionScene";

// call it from another scene //
this.modalScene = this.scene.launch('ModalMissionScene', {
   parentScene: this,

Thanks. Checking.

What keeps me from doing my tasks is ı find many different approaches but not sure which one to select. Especially it is a bad anti pattern like a performance problem or overkill for small things.

I guess with the advent of Phaser and the browsers, even mobile ones, it will not be a problem to have a separate scene and start it for presenting just a single modal. That way one can block the main or main like scene’s update and render processes which is most of the time required, even that is not required one can run scenes simultaneously by launching the modal scene.

I feel like creating scenes can be a good approach for creating different user interface components. I am not sure if there is a downside of this approach. Or just one scene for all ui components can be an idea.

They can be full game size with backdrop or smaller and centered, or they can be sized with setViewPort.

Another idea is do use the scene.add.dom for the modals and some other ui components, again if in same scene (main scene) then scene cannot be stopped or paused. That approach then can be used in a new ui scene.

Three approaches in total.