Tutorial:NetworkedWackadot
From FANG
These instructions are currently available for two different IDEs (Integrated Development Environment):
- JavaWIDE Instructions - requires no software download or installation
- Eclipse Instructions - requires you to download Eclipse
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 JavaWIDE.
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. In the wiki page that has your Wackadot game, you should see a tag like <java>. Alter the tag to include the number of players: <java players="2">
Save the page. You should see a window that comes up with a button for Connect and Start Game. Click on this button. Once you do, you should see a message that says something like Waiting for 1 more player to join.... Open a new browser window or tab with the same address as your game. Again, click on the Connect and Start Game button. At this point, the game should come up in both browser windows/tabs.
When the first player clicks on Start, the game begins. Notice that the mouse in both games controls the dot, but that the games don't show the same thing. When making networked multiplayer games, maintaining consistent game state is very important. In the next step, we'll alter the code to make sure all the players see the same thing when they play.
2. Specify the Player Index
The reason the games do not remain consistent is because they use the getPlayer method with no parameters. When called this way, the player that is returned is the current 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 |
1 2 3 4 5 6 7 8 9 10 |
public void advanceFrame(double timePassed)
{
if(timeLeft>0)
{
Point2D.Double mouse=
getPlayer(0).getMouse().getLocation();
dot.setLocation(mouse);
handleCollisions();
}
}
|
Line 6: Notice that the getPlayer 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 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
public class Wackadot extends GameLoop
{
private Sprite[] dot;
private Sprite redDot;
...
private void makeSprites()
{
dot=new OvalSprite[getNumberOfPlayers()];
for(int i=0; i<dot.length; i++)
{
dot[i]=new Sprite(circle);
dot[i].setScale(0.1);
dot[i].setLocation(0.5, 0.5);
dot[i].setColor(Color.RED);
}
...
}
private void handleCollisions()
{
/*if(dot.intersects(blueDot))
{
repositionRandomly(blueDot);
if(dot.getColor().equals(Color.BLUE))
{
dot.setColor(Color.RED);
score++;
}
else
{
score--;
}
updateScore();*/
}
...
public void advanceFrame(double timePassed)
{
if(timeLeft>0)
{
for(int i=0; i<dot.length; i++)
{
Point2D.Double mouse=
getPlayer(i).getMouse().getLocation();
dot[i].setLocation(mouse);
}
handleCollisions();
}
}
...
}
|
Line 3: 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 6: indicates code left out. Do not copy the ellipses. Line 10: 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 13 that initializes dot. Also, the lines 16-19 existed in the code, but without the [i] part. You'll need to insert the [i] part and the surrounding for loop. Line 11-17: iterates over the positions in the array initializing each element to be a red dot. Line 19: indicates code left out. Do not copy the ellipses. Lines 23-38: 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, the lines are commented out. Do not add lines 23-38, just comment out the existing lines. Line 40: indicates code left out. Do not copy the ellipses. Lines 46-51: 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 56: 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 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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(Color.BLUE))
{
dot[playerIndex].setColor(Color.RED);
score++;
}
else
{
score--;
}
updateScore();
}
}
|
Lines 3-4: handleCollisions now calls the parameterized handleCollisions for each player declared on line 7. This should now be the only code in this method. Lines 9, 12, 14: 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 B. |
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 player.
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.
- This page was last modified on 12 January 2008, at 17:44.
- This page has been accessed 1,643 times.
- Privacy policy
- About FANG
- Disclaimers
- Powered by MediaWiki!











