Exercise 8 — Show the Results of the Dice

Applet

This exercise also introduces the concept of containment. Because the logic to generate the randomly generated dice roll involves some wiring, creating a container to hold this logic makes the display of the title in Wire view easier to read. Containment is a way to organize modules. As you will see in following exercises, it can also be a technique for making Hyperwire code reusable.

1. Open the title Dice.Ttl that you created in the previous exercise.

2. Drag a Visual Container module from the Module panel to Wire view.

   A message appears asking about the style in which the container will be displayed. Answer No. User Module containers are for functional groups such as the one in this exercise.

   Hyperwire places the container in your title.

3. Change the label of the container to Show Result.

The container labeled Show Result will do exactly what its label says. From the point of view of the Dice title, this is all it needs to know about what the container's logic does. It does not need to know how the container shows a result. This is part of the advantage of using containers.

Assuming that the container will show a result, you can wire the container before you finish defining it.

1. Wire the End of Path output port of Tumbling Die 2 to the container's On input port.

2. Wire the Button Up output port of the button module to the container's Off input port.

The container will display a result once the dice stop rolling, and the display will turn off when the user clicks the button again. Having set this up, you can define the contents of the container.

1. To open the container module, click the Open button between its input and output port buttons.

   
   
   

   Hyperwire opens a new window that shows only the contents of the container. While you work in a container, you don't have to worry about logic outside the container.

2. Put a new Sprite module in the container.

   The sprites in the Show Results container don't move, so accept the default path and don't worry about editing it.

3. In the Sprite module's Properties dialog, load the file Diefaces.gif. This file is in the directory \Exercises\Ex07-8Work\Ex07-8Media\.

   Like the tumbling die animation, Diefaces.gif has multiple subimages, but in this case you want it to display only one face at a time. The reason for using a Sprite module is that a sprite can display a single numbered frame.

4.    As you did for the tumbling die in exercise 6, create the frames of the die by using the Image Preview window to treat Diefaces.gif as an image array. Set the array to have 6 rows and 1 column, and then click Add All Sub-Images.

   Frame 1 shows the die face with one spot, Frame 2 shows the face with two spots, and so on.

5. When the six sprite frames correspond to the six die numbers, go to the Sprite Path panel and turn off the three check boxes Initially Playing, Initially Moving, and Go When Shown.

   This prevents the sprite from animating or moving about the screen.

6. Click OK.

1. In the Wire view of the Show Result container window, change the label of the sprite to Die Face 1.

2. CTRL-drag to copy the Sprite module. Change the label of this new sprite to Die Face 2.

3. In the Layout view, arrange the two dice so both are visible side by side in the center of the window.

   
   
   

The two dice are now ready to display numbers.

1. At the bottom of the container window, click the Input Ports button and choose On from the pop-up list.

   
   
   

   The input and output port buttons below the Wire view of a container's window are how a container reports "outside" events to the modules within it.

   An isolated output port appears in the Wire view. This port will be activated when in the outer, parent module, Tumbling Die 2, sends its On message to the Show Result container.

2. Wire the On output port to the Set Frame Index (More/Frames/Set Frame Index) input port of each Die Face module.

   
   
   

   To wire from the On port, click the wire button on the lower part of the On port's icon.

Each of the wires you just created has an unsatisfied parameter icon that looks like a "not" symbol. As in exercise 6, these icons indicate that each wire has a parameter you need to fill in. In this case, the parameter is the frame index number telling the sprites which frame to display. You will use a Random Number module to simulate randomly rolling dice.

1. Add a Random Number module to the Wire view of the Show Result container.

2. Click the "not" parameter icon on the wire to Die Face 1.

   The name of the missing parameter, Frame Number, pops up. Click the name. A wire appears. Drag the wire to the Random Number module and connect it to the input port, Get Random Number Range.

3. Do the same for the missing parameter to Die Face 2.

As you can see, each of the new wires has two parameters to set. These parameters are the upper and lower limits of the range of random numbers the Random Number module will return. These limits correspond to the dice you are simulating. The values must range from one to six.

1. Double-click the wire that connects the Die Face 1 wire to the Random Number module.

   The Wire Parameter editor appears.

   Note: Click the wire itself, not the circles that indicate parameters. Clicking a parameter circle causes Hyperwire to add a draggable wire. This is not the way to set these particular parameters.

   
   
   

   You will set the Min and Max range limits to be constants.

2. In the Wire Parameter editor, highlight Min in the list of parameters. Choose Constant as the source, and then type 1 in the edit box. Click the button labeled "X=" to set the value.

   
   
   

3. In the same way, set the Max parameter to equal 6.

4. In the Wire view, click to select the wire that connects the Die Face 2 wire to the Random Number module. In the Wire Parameter editor, set Min to 1 and Max to 6 in the same way you set these values for Die Face 1.

5. Dismiss the Wire Parameter editor.

When you run the title, after the dice roll across the window, two dice appear, showing a randomly generated result.

Run the new title to test it, and then save your work.

This is the end of exercise 8. Exercise 9 shows how to make one die a reusable module.

Home | Previous | Next