Tutorial2:NetworkedWackadot

From FANG

Jump to: navigation, search

These instructions are currently available for two different IDEs (Integrated Development Environment):

The instructions below correspond to the JavaWIDE instructions. If you would like the instructions for any of the above IDEs, click on the link above.

These instructions assume you have completed the basic version of Wackadot and are familiar with Eclipse. First, Wackadot will be modified so that you can test the multiplayer on a single computer, then you will be guided through posting the game on a webpage.

Be sure read the Explanations of the Source Code in each of the tables below. Also if you are having trouble, try visiting the FAQ.


Contents

1. Wackadot is Already Multiplayer!

Every game you write with the FANG Engine is already networked and can be run as multiplayer. The first step in enabling this ability is to change the number of players. Add the code below which is not already there. You already have some of the code below from the previous instructions: new code is shown in bold blue.

A
Source code
Explanation of Source code
21
22
23
24
25
26
 
public Wackadot()
{
   setNumberOfPlayers(2);
}
 

Line 4: the default number of players is always one. Making the default number of players more than one will allow them to change how many players should connect. The player who establishes the game name is the one who determines how many should connect before the game begins. For all players who connect to an established game name, the number of players field is not used so long as it is more than 1 (when it is one-player, the game does not connect to the server).

Run the game. You will see a window come up that asks for the game name, number of players, and server name. You don't need to change any of these, just click on 'Connect & Start Game'. It should say 'Waiting for 1 player to join'. Leave this window open and run Wackadot again. You should see a window that comes up like the original one, except that it says 'default' for the name of the game. When you do not specify the name of a game, it gives the game the name 'default'. Click on 'Connect & Start Game'. You should see that both games now show three dots. When the first player clicks on 'Start', the game begins. Notice that the mouse in only one game controls the dot. In the next step, we'll alter the code to make sure all the players get to control their own dot.

2. Specify the Player Index

The reason the games do not remain consistent is because they use the getMouse2D method with no parameters. When called this way, the player that is returned is the first player. It is also possible to call the method with an integer for the parameter which indicates the player number. We're going to change it so that only the first player can control the dot. All other players will simply be able to observe.

B
Source code
Explanation of Source code
142
143
144
145
146
147
148
149
150
151
152
153
 
public void advance()
{
   if(timeLeft>0)
   {
      Location2D mouse=
         getMouse2D(0);
      dot.setLocation(mouse);
      handleCollisions();
   }
}
 

Line 148: Notice that the getMouse2D method now has the argument zero. This means that the player returned should be the first player. Absent any arguments, the current player is returned from the getPlayer method.

Run the game again as instructed in Step 1. Notice how only one player can control the dot and how the two games show the exact same screen. Depending on the speed of your computer, one game may move more smoothly than the other.

3. Control Your Dots

The next step is to give each of the players his or her own dot to control. We're going to make Wackadot work with as many players as you'd like, so we need a structure which is capable of holding as many dot Sprites as there are players. Since the number of players does not change once the game has started, an array is a good structure for holding the dots. Make the following changes shown in bold in the table below.

C
Source code
Explanation of Source code
12
13
14
15
16
...
48
49
50
51
52
53
54
55
56
57
58
59
...
83
84
...
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
public class Wackadot extends Game
{
  private Sprite[] dot;>
  private Sprite redDot;

   ...

  private void makeSprites()
  {
     dot=new Sprite[getNumberOfPlayers()];
     for(int i=0; i<dot.length; i++)
     {
        dot[i]=new OvalSprite(1, 1);
        dot[i].setScale(0.1);
        dot[i].setLocation(0.5, 0.5);
        dot[i].setColor(getColor("red"));    		
     }

     ...    	
  }

  ...

  private void handleCollisions()
  {
     /* need to fill in this later */
  }

  public void advance()
  {
     if(timeLeft>0)
     {
        for(int i=0; i<dot.length; i++)
        {
           Location2D mouse=
                    getMouse2D(i);
           dot[i].setLocation(mouse);
        }
        handleCollisions();
     }
  }

  ...
 
}

Line 14: makes the variable dot an array of Sprites. Originally it was a single Sprite. Only insert the [] between the Sprite and the dot. After adding this line, you will see many errors. These errors will be fixed when you complete this table.

Line ...: indicates code left out. Do not copy the ellipses.

Line 51: makes the array of dots capable of holding as many Sprites as there are players. You'll need to change the existing code that initialized dot to be like the new line 51 that initializes dot. Also, the lines 54-57 existed in the code, but without the [i] part. You'll need to insert the [i] part and the surrounding for loop.

Line 51-58: iterates over the positions in the array initializing each element to be a red dot.

Line ...: indicates code left out. Do not copy the ellipses.

Line 113: the handleCollisions method needs many modifications. It's better to make many simple modifications and test them individually than to make one complex modification. We'll make the handleCollisions modifications in later steps once we have made sure everything else still works. Therefore, remove most of the lines of handleCollisions and just leave in a single comment.

Line ...: indicates code left out. Do not copy the ellipses.

Lines 120-125: lets player i control dot i. The variable i will iterate over the player indices. You need to only insert the for loop and change the 0 in getPlayer to i and insert the [i] beside dot.

Line ...: indicates code left out. Do not copy the ellipses.

Now run the game again as two player (as described in Step 1). You should be able to control a red dot in each of the games. Notice as well how collisions are no longer detected. We'll fix this in the next step.

4. Updating the handleCollisions Method

We're going to alter the handleCollisions method in this step. Originally the handleCollisions method only handled collisions for a single player. We're going to instead parameterize the method by the player index. Make the following changes shown in bold below.

D
Source code
Explanation of Source code
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
 
private void handleCollisions()
{
   for(int i=0; i<dot.length; i++)
      handleCollisions(i);
}
      
private void handleCollisions(int playerIndex)
{
   if(dot[playerIndex].intersects(blueDot))
   {
      repositionRandomly(blueDot);
      if(dot[playerIndex].getColor().equals(getColor("blue")))
      {
         dot[playerIndex].setColor(getColor("red"));
         score++;
      }
      else
      {
         score--;
      }
      updateScore();
   }
   if(dot[playerIndex].intersects(redDot))
   {
      repositionRandomly(redDot);
      if(dot[playerIndex].getColor().equals(getColor("red")))
      {
         dot[playerIndex].setColor(getColor("blue"));
         score++;
      }
      else
      {
         score--;
      }
      updateScore();
   }
}
 

Lines 113-114: handleCollisions now calls the parameterized handleCollisions for each player declared on line 7. This should now be the only code in this method.

Lines 117-147: instead of checking for collision with the single dot in the one player version, this checks for collision with the player indicated by the parameter playerIndex. This should be the only code in this method. Notice that this is the changed code from the code which is commented out in table C.

Now play the game again two player. Each player should be able to control his or her own dot and the score should be kept. If your computer is fast enough, try running it three or more players.

5. Posting your game

It's easy on JavaWIDE. Saving your game posts it automatically!

If you have any questions about making this game multiplayer, be sure to take a look at the FAQ. Chances are someone else has had the same difficulty and the solution has been posted.

Good luck making your multiplayer games with the FANG Engine. I'm always interested in posting well commented well designed games that are fun to play. Visit the sample student games for some example networked games.





Views
Personal tools
Add to 
del.icio.usAdd to 
diggAdd to 
FacebookAdd to 
favoritesAdd to 
GoogleAdd to 
MySpaceAdd to 
PrintAdd to 
SlashdotAdd to 
StumbleUponAdd to 
Twitter

Games
Games