« Phaser.io how to use atlasHash to your advantage.
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.
Now we simply define the modal properties inside the createModal function of the script.
I hope you like it, if you do or have anything to say drop me a comment below.
These modals can be used as a pause menu?
Does it uses phaser sprites, etc.. or just plain DOM?
No DOM is used for these, its Phaser.Graphics, Phaser.Text, Phaser.Image, Phaser.BitmapText.
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.
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.
I have updated the source code with a fix, it should behave better now.
The problem isn't happening anymore for me. Looks great. I'll definitely keep this bookmarked. Thanks for sharing!
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.
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!
I do not know how to diagnose the issue however.
Is the codepen example working for you?
It should be fixed now, try it again, I have updated the code on github as well. Thanks for noticing this.
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?
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.
Thanks for the effort. I will be attempting to integrate it into my development.
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".
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!
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).
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!
Please post your issue on github: https://github.com/netgfx/phaser_modals with some code so I can get an idea of what is going on. Thanks.
http://www.html5gamedevs.com/topic/23145-phaser-modal/ I posted some photo here. Thank you so much!
This is soo cool, really. I am goingo to use it in my next projects, thank you for share!
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.
I used the function given at the usage section on this page but it dosen't work.
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?
Post your code on github https://github.com/netgfx/phaser_modals/issues so that I can help you more effectively.