Chapter 6. Menus and Overlays

For all intents and purposes, this is the final chapter as far as game design is concerned! All that's left is to handle touch input and deploy the game, which we will do in the next chapter. We will add the last few components to our game and then spend the next chapter getting it deployed to a device. This chapter covers what ShiVa3D calls the HUD. We will use the HUD module to create basic menus and a health bar, but it can be used to create a variety of 2D assets and timers. We also need to create some states so that our menus will allow us to transition between the game screens.

In this chapter, we will do the following:

  • Learn about states and how they can be used
  • Take a quick look at the HUD module capabilities
  • Set up the game menus
  • Create game overlays such as a health bar and trigger that the game is over when the player runs out of health

Game states

States are ways to keep track of "modes" that can exist within your game—sounds a bit vague? Think of how a game works—first, the game is on the main menu, or a loading screen (this can also be thought of as a mode or a state), but then when you choose to start the game you enter the game mode or state. You can imagine that there would need to be some kind of transition code as well so that one state could be closed or suspended and the other could start. This is exactly how ShiVa's states work. Within a state, there are event handlers for initializing (onEnter), looping (onLoop) and exiting (onLeave). You define a state that will represent some mode of the game and then enter the code for handling the behavior of the mode in the three stages of the state's lifecycle.

Tip

Versatility of states

States are cool because they can be used to simulate complex behaviors and artificial intelligence. For instance, you could define the onAlert, onSleep, and onPatrol states on an object that represents an enemy soldier and code triggers that will cause a transition between the states when a player does specific things. The enemy soldier will then be able to "decide" what to do in response to player actions. The simpler you keep your state code the better, but with only a handful of states and carefully crafted transitions you can design objects that seem to think for themselves!

We will use states to control the three stages of our game—the main menu, the game itself, and the in-game pause menu. To set the stage for future changes, let's create all three states now by doing the following steps:

  1. Go to the Code tab of the ShiVa editor and load the MainAI by clicking AI Model | Open and selecting MainAI.
  2. On the left-hand side pane, between Functions and Handlers, you'll see States. Click on Add State.
  3. Enter InitialState for the name of the state.
  4. Repeat steps 2 and 3 twice more, but the state names will be GameState and MenuState respectively.
  5. You'll notice that one of the icons next to the state names is in orange. The orange means that the state will start automatically when the game starts. If GameState isn't the initial state, right-click on it and select Set as Initial State.

That's all there is to creating states, but we will need to enter some code to make them actually work. For now, let's just have the game use the game state and we will add the rest later in the chapter.

To make things a bit easier, let's move the game startup code to a separate function so that we can just call that function as needed. To create the function and set up the game state, do the following:

  1. Because we will be changing the startup order of our game, there is one more thing to change—when the asteroids load. They were loading in the AsteroidManagerAI AI's onInit handler, but they now will fire during the intro screen once we add it, so we should change that now. Open the AsteroidManagerAI AI and create a custom event handler named LoadAsteroids. Move the code from the onInit handler over to the new handler and delete the onInit handler.
  2. Return to the MainAI AI and click on Add Function and name the function StartGame.
  3. Double-click on the onInit event handler, select the code body (note the function header or the last end statement), and paste it all into the StartGame function body.
  4. Add a call to the new onLoadAsteroids event handler that we created in the AsteroidManagerAI AI by adding the following highlighted code to the StartGame function:
    -- Set the current scene to Level1 and 
    -- compare to nil to make sure the scene loaded
    if( application.setCurrentUserScene ( "Level1" ) ~= nil ) then
        -- Load the asteroids
        user.sendEvent ( application.getCurrentUser ( ), "AsteroidManagerAI", "onLoadAsteroids" )
        -- Get a handle to the ship by using the ships 'name'
        this.hShip ( application.getCurrentUserSceneTaggedObject ( "Ship" ) )
        -- Play the rocket sound
        sound.play ( this.hShip ( ), 0, 0.5, true, 0.5 )
        -- Get a handle to the scene for playing music
        local hScene = application.getCurrentUserScene ( )
        music.play ( hScene, 0, 2 )
    else
        -- Send an error message to the log 
        -- if the scene can not be set
        log.error ( "Unable to load initial scene" )
    end
  5. Double-click on GameState so that it expands and then double-click the onEnter event handler so that it opens in the editor.
  6. Since the GameState state is the initial state, the onEnter event handler will be doing our game initialization, so enter the following code:
    this.StartGame()

That's all we need, since the startup code was moved to that function. Hit F7 to compile all of the code and run the game. You'll notice that the game runs the same as it did before, so nothing exciting, but we have made some fundamental changes so that we can now add screen transitions.

Now that we have the ability to change a state, let's put together some menus and other assets so that we can use these states.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.45.5