Introduction
This tutorial will show how to make a transition from the end of the game screen to a game over screen by freezing the game when the player dies, taking a snapshot of the screen, then transitioning from that snapshot to a fixed Game Over screen on the back-side of the mosaic object.
Prerequisites
Construct 2 r163+
BHT Mosaic (thread)
Let's Start
We'll start with just the basic Ghost Shooter template included in Construct 2. Just in case it changes from the current version, I've included it in the attached files.
Do a File->New and select the "Demo game: Ghost Shooter (tutorial version) template and press Open.
We need a couple of GUI elements, so insert the "BHT Mosaic" plugin from the Graphics section. Insert a new sprite. Set its size to 640x480, and fill it with any colour. Add a new frame and fill the area with pure black. Add another frame and load the "gameover.png" file. Close the editor. Name the sprite "SpriteSnapShot". Move the sprite out of the view-area.
The first frame just makes the sprite obvious, and will be our initial image that we use as the front of the mosaic. The second frame will be our background colour for when the transition is running. The third frame is our final transition screen.
Select the "GameOverText" and change the Position to 0,400, and the Size to 640,148. Change the text to just "Press space to restart".
Select the "Status" text object and Clone it. Name the clone: "StatusFinal", and set its position to 0,80, and Size to 640,30, and set its Horizontal alignment to Center. Set its text to "Final Score:". Set Initial visibility to Invisible.
Events
Group
We're going to use Groups to break up our events, so we can turn events on and off for the different sequences. Make a new group and call it "MainGame". drag everything after On start of layout and before the Keyboard event into this group. Drag the group after "On start of layout".
Create another group named "StartOver". Turn off it's "Active on start" flag. Drag the keyboard event into this group.
In the keyboard event, "Toggle disable" the Player.Count, the Set MonsterSpeed, and Go to Layout events and add the new action, "Restart layout". We'll be changing the start-over sequence to accommodate our changes.
Create another Group called "EndGameTransition". Disable the "Active on start" flag. We will eventually be altering the group enabling so that we start normally, with the MainGame code running, then when the game is over, we toggle MainGame off and EndGameTransition on until the transition is done, then toggle it off and toggle StartOver on so that the keyboard can be checked.
Create a global variable (number) at this point called "StartTransition", set to 0.
With MainGame collapsed, you should see this:
Editing MainGame
We need to make some changes to the actions that occur when the player dies. Instead of destroying the player and showing the old "Game Over" message, we disable those two actions and add some new ones. Add the following actions:
Here we flag to start our transition, disable the MainGame group and enable the EndGameTransition group, stop scrolling the screen, and turn off player-input.
EndGameTransition
At this point I'll cheat a bit and suggest you either copy the EndGameTransition group (delete the one you made) or just open the sample file. I'll walk through what's going on, rather than itemize every single step of adding the code.
Our first event sets up the transition and then turns itself off so it only runs once. We set up the Mosaic's initial parameters.
*Lock the monsters in place
*Lock the explosions
*Destroy any bullets
*Toggle out transition start
*Turn the grid off
*Set the grid dimensions to be square - squares actually work best for the mosaic due to the way WebGL breaks everything into triangles internally. Rectangles show an odd mutation as the rotation occurs.
*Set the camera size to match the object size.
*Position the Mosaic in the center of the screen
*Synchronize all of the settings so that everything will scale correctly.
*Hide our current score, as we don't want it as part of our transition - we'll reshow this later.
*Take a snapshot of the screen as it is now.
Our next event is a trigger on the snapshot action. Since it takes time to take a snapshot and store it, we wait for the operation to finish. We need to transfer the snapshot to our own sprite so that we can then move it to the Mosaic object.
*Set the SpriteSnapShot to frame 0
*Load the CanvasSnapshot
*Destroy all of the main objects in the game to get rid of them. We don't want to see them as the transition occurs.
Next because loading the image into a sprite also takes time, we need to wait for that operation to finish. We wait for the image URL loaded trigger.
*Move the SpriteSnapShot to the same location as the Mosaic. We will be using this sprite again as a black background so that everything behind the Mosaic object is covered.
*Set the size to the view-port.
*Copy the image in our helper sprite (frame 0) into the front of the Mosaic.
*Change the helper frame to 2 - this is our Game-Over image.
*Copy this image to the back of the Mosaic.
*Set the helper to frame 1 - our black background
*Make it visible
*Now we set all of the cells to the same values for the transition. We index at -1,-1 to indicate we are affecting all cells. The front index is 0, the back 1. We want a rate of 270 degrees per second, rotating on the X axis, the target is three 180 degree rotations - this means we see the back-front-back. We start 1 second after the transition starts running.
*Move the Mosaic to the top layer, so it is on top of everything else.
* Make it visible.
*Run the transition.
Our final event is triggered when the Mosaic has finished its job.
*We turn off the EndGameTransition group.
*Set the helper sprite to frame 2. This will show game-over image when we get rid of the Mosaic object.
*Destroy the Mosaic
*Wait one second before continuing
*Turn on the StartOver group
*Show our new GameOverText, which just gives the press-space message.
*Append the score to our StatusFinal text
*Make it visible
Conclusion
That's it! The full manual for the BHT Mosaic plugin can be found here: http://www.blackhornettechnologies.com/construct2/plugins/BHTMosaic.aspx
You can experiment with alternate transitions by reading up on the details in the manual.