4.3 The Play Game Button

The play game button is made by just typing the words "Play the Game" in a large font, converting the font into vector objects by using the break apart command twice and then coverings the whole group of objects into a button symbol. The color of the text is changed for the over and down frames of the button. A solid box that covers the text is used for the hit button.

The appearance of the play game button is easily handled by having a keyframe with the button outside the screen and a second keyframe with the button in the final position. A motion tween is added between the two frames. Likewise, the same thing is done with the other two buttons.

For a button to do something, some JavaScript is needed. Typically, a button needs three pieces of JavaScript which are letting the system know you want to listen to the event, an event handler for handling the event, and letting the system know you no longer care about the event.

The first piece is simply some code to let the system know what function is going to handle the button. It is possible for the same handler function to handle multiple buttons, but that will be covered in the future. The code can be placed in several places with no strict rules on where you want to place it. For this game, I have created a layer on the main timeline called “Code” where I can add code to frames.

To associate code with the button, the button must be given a name. This is done by typing the name into the instance name section of the properties panel (in the left corner of the properties panel). In our case, we are calling the button “play_btn”. The code to let the system know you want to do something when the button is clicked is simply:

this.playGameBtn.addEventListener("click", playTheGame);

The method addEventListener tells the button that when the indicated event, in this case the Click event though other events can be listened for, it is to call the function playTheGame. This is where our approach to handling multiple scenes becomes an issue. Multiple scenes need a way of communicating with each other. The easiest way of dealing with this issue is to have some global code that all the scenes can access. Animate provides such a script, so the code for handling clicking the play game button will be placed there.

This global script needs access to the main scene movie. To do this we simply have the main movie call a registerStage function which stores the stage movie into a variable movie which gives us the ability to change scenes and access functions within any of the movie clips that we are using as scenes.

function registerStage(stg) {
    gameStage = stg;
    gamestate = GAMESTATE_PLAYER_PLAYING;
    gemsRemaining = 40;
}

The playTheGame is the function we will be writing to handle the start of the game. The function simply is a function that contains the code that is to be run when the event happens. In our case this is very simple:

function playTheGame() {
            gameStage.gotoAndPlay("Game");
}

The gotoAndPlay() method simply tells the main movie that it is time to start playing from a different frame. If we had multiple buttons that went to distinct parts of the movie, we could easily set up each button to go to a different frame of the main movie.

4.2 Title Screen

Normally when I create a game, the title and menu screens are the last screens that are created. For this chapter, however, I am going to create the games title sequence first. This demonstrates one of the big differences between Flash games and Animate HTML5 Canvas games. As of Animate 2017, there is only a single scene so switching between scenes is not allowed. The normal approach to creating a game is to break up the different screens of the game into separate scenes. For Animate, this can’t be done but there are several different alternatives. The approach that I will be taking in this book is to break the game up into separate movie clips that act like scenes and have a single master movie that contains the movie clips as separate frames of the main movie.

 The screen starts off blank. Seven gems then grow onto the screen in what at first seems to be a random pattern. Once the gems are fully grown the letter N fades in behind the gems. This is followed by three gems appearing to create the letter I and another 7 gems to form the M. If you look at the screen shot of the final logo  you will see what the final screen looks like.

To create this sequence, many layers are used. While the number of layers could be reduced (you will see a technique for that later in this chapter), I figured that for a title sequence, the extra layers wouldn't hurt.

Each gem is on its own layer. When I created this title, I first laid out all the gems into a rough NIM pattern. To make sure that people could read the title, I then used the line tool to create an outline of the letters. I filled the outlines with a solid color and turned each of the letters into a symbol.

The appearance of the gems is stepped so that they don't all appear at once, with additional delays for the appearance of the letters added. Each gem is animated using two keyframes. The first keyframe is scaled to 10% of the original size. A motion tween between the two keyframe's is then added.

The fading letters is a simple alpha blending tween. You start by creating a second keyframe of the letter. The first keyframe is then set to an alpha level of 0. A motion tween is then placed between the two keyframe's.