4.5 Player Panel

At this point in the development of NIM, we are ready to create the panel. This is important as it is the way that the user interacts with the game. As discussed earlier in this chapter, there are other user interfaces that could have been used but this approach was chosen as it is the easiest to implement. The player panel could have been designed as an all in one object, but that would have added a bit of complexity to the design and I wanted to try and keep this movie as simple as possible for those new to Animate CC. Instead, the panel is simply a rectangle with rounded corners. It is animated into its final position by using a simple motion tween.

Once in its final position we add the components on the panel. The first component on the panel is the message bar at the top of the panel. This is a simple dynamic text object labelled “messages” and set to use a center aligned 24-point grey “serif” font. Below that we create a static text message that reads “Take how many?” I broke this into vector text and created a graphical symbol out of the text. Finally there are three buttons labelled “1,” “2,” and “3.” These three buttons are created the same way we created the "Start the Game" button. Simply type in the number. Break apart the number so you get a Flash object. Select the "Make Symbol" option to convert the object into a button symbol. Fill in the over and down keyframes with different colored versions of the number object. Finally, in the hit keyframe, create a solid box that covers the number.

Once all the components of the panel are visible, we need to make the three buttons do something. The code for the buttons is like the code that we used with the start game button. The one significant difference is that we are using a function that handles setting up all three buttons and we also need to be able to turn off the buttons. This code is simple enough as we simply call/remove the handler for each button by using the addEventListener or removeEventListener methods.

function startPanel(gm) {
    gameMovie = gm;
    gm.messages.text = "You go first!";
    gm.one_btn.addEventListener("click", handleOneButton);
    gm.two_btn.addEventListener("click", handleTwoButton);
    gm.three_btn.addEventListener("click", handleThreeButton);
}
function stopPanel(gm) {
    gm.one_btn.removeEventListener("click", handleOneButton);
    gm.two_btn.removeEventListener("click", handleTwoButton);
    gm.three_btn.removeEventListener("click", handleThreeButton);
}

The actual handlers for when the buttons are clicked are game-play related so will be covered in a later section once we start implementing the gameplay logic. Another function that we will need for the panel is a function to write the message bar text. While this is a very simple thing to do and could be done directly wherever the message needs to be set, I find calling a function that sets the message bar is a bit easier to understand, and adds some flexibility in the case that how messages are displayed changes in the future.  Quite simply, this function takes the text passed to it and assigns that text to the dynamic text object we defined in the panel.

function setMessage(s) {
            gameMovie.messages.text = s;
}

As the buttons that make up the user interface cover removal of gems, we need a way to remove gems. That will be covered next section.

4.4 Limiting Layers

In theory Animate lets you have as many layers as you desire. However, you should try to limit the number of layers that you use to make managing the movie easier. Designer overload is caused by the designer having to deal with a huge number of layers. When you have too many layers to deal with, it becomes harder to find the layer you need and if there is interaction between layers that are of substantially different levels, then work can be frustrating.

To layout the game, we need to get the 40 gems to appear. If you look at screenshots for the game you will see what the final layout looks like. The problem here is that 40 gems would result in 40 layers. That is a lot of layers to keep track of. So instead of forty layers, let us group each row into a layer. Extra conservative designers would probably have all forty gems in a single layer, but I originally designed this around four layers.

Those of you familiar with Animate CC probably already know that Animate CC tends to act funny when you try having animation on a layer that contains more than one object. It wants to only deal with one object for a tween so when it has many to deal with it automatically generates its own movie clips to hold intermediate tweens. This is almost never what you want so it is best to avoid that situation. As that is the case how are we going to animate the gems? After a bit of thought, I realized that at any given time, I would only need five gems animated at a time. This can be handled by creating five animation layers.

The animation is simply handled by assigning gems to animation layers. When the gem reaches its final position, the layer it belongs to then adds that gem to it's objects. The animation layer is again free to hold another gem.

To demonstrate, lets deal with the first few gems. We create the gems outside the screen in a pattern that wraps clockwise around the screen. The first gem gets assigned to GemAnim1, which is our first animation layer. It uses simple position keyframe animation to move (the first keyframe is where the animation starts, the last keyframe has the gem where the animation ends and a motion tween is placed between the two keyframes). The second gem uses GemAnim2, the third uses GemAnim3 and so fourth. Gem number 6 has no layer, but as it will not start to be animated until gem 1 is in it's final position, it can use GemAnim1. It can do this because there is no longer an object in this animation layer as a gem has been added to the appropriate gem layer. Gem 7 is not needed until gem 2 has been placed in it's layer, so it will use the GemAnim2 layer. And so on, until all forty gems have been animated.