# Phaser.io Modals creator UI plugin

**URL:** <https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232>\
**Category:** Phaser 2 / CE\
**Created:** [December 10, 2018, 2:35pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232 "2018-12-10T14:35:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![netgfx](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/netgfx/32/17_2.png) [@netgfx](https://phaser.discourse.group/u/netgfx)\
**Post date:** [December 10, 2018, 2:35pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/1 "2018-12-10T14:35:50Z")

</div>

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.

[https://github.com/netgfx/phaser\_modals](https://github.com/netgfx/phaser_modals)

Sample:

> [https://codepen.io/7linternational/pen/eeMNMm/](https://codepen.io/7linternational/pen/eeMNMm/)

> Tutorial: [http://nightlycoding.com/wordpress/phaser-io-modal-creator/](http://nightlycoding.com/wordpress/phaser-io-modal-creator/)

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 17, 2019, 2:14pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/2 "2019-12-17T14:14:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![netgfx](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/netgfx/32/17_2.png) [@netgfx](https://phaser.discourse.group/u/netgfx)\
**Post date:** [December 17, 2019, 2:27pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/3 "2019-12-17T14:27:46Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 17, 2019, 2:42pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/4 "2019-12-17T14:42:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![netgfx](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/netgfx/32/17_2.png) [@netgfx](https://phaser.discourse.group/u/netgfx)\
**Post date:** [December 17, 2019, 2:58pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/5 "2019-12-17T14:58:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 17, 2019, 3:05pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/6 "2019-12-17T15:05:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![netgfx](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/netgfx/32/17_2.png) [@netgfx](https://phaser.discourse.group/u/netgfx)\
**Post date:** [December 17, 2019, 3:08pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/7 "2019-12-17T15:08:18Z")

</div>

Something like this: [https://gist.github.com/netgfx/775bb79146698d480530cd60f4bf538a](https://gist.github.com/netgfx/775bb79146698d480530cd60f4bf538a)

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

use it like:

```javascript
import {
    ModalMissionScene
} from "ModalMissionScene";

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

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 17, 2019, 3:10pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/8 "2019-12-17T15:10:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fselcukcan](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fselcukcan](https://phaser.discourse.group/u/fselcukcan)\
**Post date:** [December 17, 2019, 3:17pm UTC](https://phaser.discourse.group/t/phaser-io-modals-creator-ui-plugin/232/9 "2019-12-17T15:17:15Z")

</div>

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`](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#dom__anchor) 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.