Dev Log #4 - Fixing Game Pausing

Hello hello everyone. First of all, check out this hot Scarlett comic. This week, I was updating a piece of code that I know will cause issues in the future.

Pausing.

"Haha DPMaker, all you have to do is tell the code to stop!!" Real mature guys. Let me explain how the Phaser engine works real quick. Each major part of the game is contained inside of a Phaser Scene. For example, the main menu scene, dialogue scene, gameplay scene. I branch off into multiple directions as well, the main menu scene has a "mods" scene that pops up when you click the mods button. What Phaser doesn't have built in is the ability to pause one scene if I start another.

I want to pause the main menu scene when we open the mod menu because I don't want the player to be able to click anything on the main menu screen when another scene is open. So, let's pause it!

Phaser gives me this great function that does everything for me, this.scene.pause(), wow that sure was easy! Time for the hard part. I've recently started using actual HTML code in the game (gallery, mod menu, save select menu) and those elements actually appear ON TOP of the game. Whaaaaaaaaaaaaaaaaaaaat? On top of the game? What the heck does that mean?

In HTML, a div is just a container for other elements. So the first div is where I want to put the game. The div inside that one is used by Phaser to put any HTML elements we want to put in the game. AND THEN, inside of that, there is a canvas that Phaser uses to display anything else related to the game. If we use this new fancy HTML stuff, it actually connects to the 2nd div you see in the middle. Meaning, everything else in the game will be shown one layer below in the canvas.

Now that's not the end of the world. If you have a button pop up on the screen, who cares if it's above the game? It shouldn't affect anything. 

Unless... you start two scenes that both have HTML elements in them. Uh oh! If we have two scenes open, both of their HTML elements will be shown at the top, even though we want one scene to be behind another. And... *gasps*, you can't just "pause" HTML elements. Oh the humanity! ! !

Good thing I already figured out how to fix it, otherwise this dev log would have sucked!!!

First of all, we're extending our own Phaser.Scene. That means we can take the existing scene code and modify it into our own version. I named mine "QBScene". The Phaser engine also hooks us up with the ability to launch code whenever a scene is started, paused, resumed and shutdown. Let's throw some logic into there.

I don't want to always pause other scenes when I start a new one, so I'll take that into account. Let's also create a variable named "pausedScenes" to store all of the scenes we will be pausing when we launch a scene. When we start this scene, we will go ahead and look at all the active scenes (not ourselves or the HUD scene), and put them into the pausedScenes variable, and then pause it. And I have also created an event for when the scene shuts down. When this scene shuts down, we loop over the pausedScenes variable and turn all of those scenes back on.

Alright, now let's add another event for when our scene pauses. When the scene pauses, we will look at all of the elements for the scene. We will check to see if the child element is HTML (labeled as "DOMElement") and we will go ahead and set it as invisible. That way, no one will be able to click it, but technically it is still there. I won't show you the code for resuming scenes, but it's literally the same thing and we set the child as visible instead.

There we go! This should hold up for everything we need to do for Queen's Brothel. If you'd like to see a demo of this, check out this link: https://queensbrothel.com/beta/ And please ignore the "Import Save" button, I was still working on that.

What you'll also notice from that link is that I am going to be storing all of the assets in a .zip file, and the first thing the game does is download that .zip and extract all the assets. But, that part is a little too nerdy so I didn't want to bring up the code during this dev log.

tl;dr: It's kind of weird displaying stuff on the screen, I had to modify stuff to make sure objects don't overlap. Globally, not just once or twice.