Phaser.io Modal creator

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.

See the Pen Phaser Modals by Michael Dobekidis (@netgfx) on CodePen.

Nice huh?

So let’s see what this script can support.

General Options:

  • type: This is the name of the modal, which we use to identify it
  • includeBackground: This toggles the modal background on or off (default off)
  • backgroundColor: This is the modal background color (default 0x000000)
  • backgroundOpacity: This sets the modal background opacity (default: 0.7)
  • modalCloseOnInput: If we want the modal to close when we click on the background (default off)

Modal elements properties

  • type | The type of the element (text, bitmapText, image)
  • color | The color of the element (text only)
  • fontFamily | The font family to use (bitmapText or text)
  • fontSize | The font size of the text or bitmaptext (bitmapText or text)
  • align | The alignment of the text (center, left, right and text only)
  • offsetX | The offset on x-axis of the element from the center of the game (0 is dead center)
  • offsetY | The offset on y-axis of the element from the center of the game (0 is dead center)
  • contentScale | The scaling to apply to the element (1 is no scale, default = 1)
  • content | The actual content of the element can be string, number, cache key (for images), url of image
  • callback | The callback function to call when the element is clicked/touched (basically when input down event is fired)

Available functions

  • createModal | The function to create a modal, takes an object with the modal properties as an argument
  • showModal | The function to show a previously created modal, takes the modal name/type as an argument
  • hideModal | The function to hide a previously created and shown modal, takes the modal name/type as an argument
  • getModalItem | The function to get an element from a previously created modal, takes the modal name/type and the position of the element (index) as an argument
  • destroyModal | Remove a previously created modal from the registry
  • updateModalValue | Dynamically change the value of an element inside a modal, takes the modal name/type, the changed value, and the index of the element as arguments (experimental function)


Usage

So let us create a simple modal with background and text.
We initiate the library pass the game object as an argument and store it to a variable.

reg.modal = new gameModal(game);

Now we simply define the modal properties inside the createModal function of the script.

modal.createModal({
type:"modal1",
includeBackground: true,
modalCloseOnInput: true,
itemsArr: [
{
type: "text",
content: "Simple Text with Modal background, \n nothing fancy here...",
fontFamily: "Luckiest Guy",
fontSize: 42,
color: "0xFEFF49",
offsetY: -50
}
]
});

Note: In order to show a modal you need to call the `showModal` function like this:

reg.modal.showModal("modal-name");

You can also view the script on GitHub


I hope you like it, if you do or have anything to say drop me a comment below.

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

31 thoughts on “Phaser.io Modal creator

  1. Dude, you can click through every single one. This isn’t even slightly “modal.” Maybe once the bugs are fixed…

  2. Have you tried with the latest fix, maybe you are running a cached version of the codepen example. I can’t seem to reproduce this issue with the modals that have a semi-opaque background.

  3. Promising idea, but I’m seeing the same issue with being able to click through. This is my first time visiting this page so it definitely isn’t any caching on my browser that would be causing this.

    To reproduce, click Modal 6, then click Modal 5, then click Modal 4. You’ll be able to click through and select all of them.

  4. The problem isn’t happening anymore for me. Looks great. I’ll definitely keep this bookmarked. Thanks for sharing!

  5. I like it, but the callbacks aren’t firing. It looks like if I click on modal3, and click on yes, it should pop up an alert, but nothing happens.

  6. Cool modals! In learning Phaser, it seems there are loads of “how to physics!” and such tutorials, but really nothing at all on UI or… you know… the rest of your “game” other than the actual action part. I was really happy to see someone writing tutorials about something like this. Nice work man!

  7. I am not able to close the modal. The console output an error message from line 56 of the source code:

    window.console.log(e, pointer);

    I do not know how to diagnose the issue however.

  8. You can safely remove that line from the source. What version of Phaser.io are you using. Feel free to send me part of your code for me to try and find the error (info[at]netgfx[dot]com)

    Is the codepen example working for you?

    Thanks.

  9. This is great, and works well, however when I changed Phaser state the modals stop working.

    Can you advise on the best way around this?

  10. Where you passing elements that existed on the previous state? If that is the case then the modals will be missing those elements because on state-change they get destroyed. I would suggest creating the modals with elements instantiated with new e.g new Sprite(game, 0, 0); etc. let me know if it works.

  11. Thanks for the effort. I will be attempting to integrate it into my development.

    Quick question on Modal 6 I noticed that the counter does not reset when I click it and then click another — it counts down 5 seconds — but then just keeps going — the next time from where it left off — is there a way to reset it —

  12. Hi,

    I really like your work! but it doesn’t yield the expected behaviour!

    I saw you’ve made many fixes – but still it’s easy to break the modality!

    Reproduce by clicking “Modal 5” and then on “Modal 3”.

  13. Well don’t get me wrong but this is getting old, you do understand that If the background image was larger all of these comments wouldn’t be happening because that little “3” wouldn’t be visible. This is not a bulletproof example, its just an example. And basically I din’t want to only limit one modal per time, there are cases where you need more than one “modal” windows inside the view.
    For example little small modals that appear all over the screen (actually used it like that in a game).
    So yeah this is not a bug, its a feature, if that is something that is not preferable, anyone can include a “modal background” with opacity 0.0 and thus invisible and no clicks will be possible to the background items. There problem solved!

  14. I’d like to clarify Oren’s post as I believe there to be a misunderstanding. When clicking Modal 5, the background covers up most of Modal 3 except for the number 3. We are not opening another modal by clicking the number 3 (which would be, as you say, by design), but rather the area where the word “Modal” is supposed to be that is completely covered by Modal 5’s background.

    For my main menu I have implemented these modals that consists of a semi-transparent image equal to the games width and height to try and prevent click throughs, similar to your suggestion. However I am still able to open my 3 modals simultaneously.

    From a user experience point of view there’s always the potential for the mouse to over or under-reach a particular element in the current modal and mistakenly open another (especially true with the inaccuracies of a finger).

    I hope this helps. 🙂

  15. Hi, I have a problem with the positioning no matter how I change the offsetX and offsetY value I wont move. It would be very helpful if you can help me with this problem thank you!

  16. Hi all,
    I am developing a game for a educational social cause using phaser.js. In this game i wanted to use a pop up after the player click on the submit button. The pop up will contain the correct answer if the student(i.e. player plays the game wrong) and if the player plays it right the a congratulations message to to be displayed in the pop up.

    While searching for how to make popups in phaser i found this modals library i am trying to embedde this in myy game to show popup but i am unable to create and embed this.

    This are things i tried till now :-

    I had added the modal.js script in index.html

    I used the function given at the usage section on this page but it dosen’t work.

    You can find my code at:- https://github.com/Tdnshah/Phaser-Pattern-Games/blob/a0f86ade77bdda8da2f69cca767e694a6befe974/src/game1.js

  17. Hi, first of all, congratulations. This tool is very useful and practice.
    I try to make a modal with buttons, but I cannot see them. Do you have any example where you use button?

Leave a Reply

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