Flash Multiplayer Tutorial

From J2Play

This tutorial outlines a full multiplayer implementation of the game Chinese Checkers. This game has two important parts: (1) a Flash game client, which is the playable game part, and (2) a Java game server, which is the pure logic and state part.

Contents 1 Prerequisites 2 Flash Game Client 2.1 Flash Movie 2.1.1 Timeline 2.1.2 Layers 2.1.3 Game Flow Logic 3 Java Game Server 4 Links

Prerequisites

• Follow the J2Play Flash documentation checklist to get setup with the J2Play Flash Toolkit.
• If you have an existing game which you would like to make into multiplayer using the J2Play Platform, familiarize yourself with the Flash Library Integration section of the documentation.
• Download the J2Play Flash Toolkit if you haven't already.
• Download the J2Play Chinese Checkers code examples.

Flash Game Client

The Flash game client consists of a .fla Flash Movie file and several .as ActionScript files. Unzip the code example package in your workspace (same location you unzipped the toolkit).

Code example contents:

• etc - contains the game's Flash Movie file and assets
• src - contains the game's actionscript source code and packages
• swf - contains the published (built) version of the game

Flash Movie

In the etc directory of the code example, open the cc.fla file. Here are the important things to look at:

Timeline

The movie consists of several layers over 4 frames. Each frame is a significant step in the flow of the multiplayer user experience.

Frame 1 - Initializes the communication portion of the toolkit and connects the the J2Play platform. Once this is successful, the movie goes to frame 2.

Frame 2 - Introduction point, or waiting area between matches. This point gives the user an option to join a game or a return point after multiplayer matches are finished. Once the user clicks 'continue', the game issues a search for a match (or table) to join, and then goes to frame 3.

Frame 3 - Progress indicator while the search issued in the previous frame is executed. The search (or automatch) finds a game table or gets matched up with other users. Once this is found and created, the movie goes to frame 4.

Frame 4 - Game play! Now that there is a table match, a game can be created on top of it. The movie will stay at this frame until the game is over, in which case it will go back to frame 2.

Layers

There are several layers which are important to take note of.

j2play - Contains initialization code which configures the toolkit, connects and joins a lobby.

actions - Contains functions to control user flow, join / create and leave games.

game - Contains a Flash Movie Clip which wraps the entire game UI, and actionscript to construct the game.

Game Flow Logic

The first instructions to be executed are on frame one, on the 'j2play' layer:

import ca.j2x.flash.Callback;
import ca.j2x.flash.J2PlayLoader; 

stop();

var loader = new J2PlayLoader;
loader.load(this, onJ2PlayLoad);

function onJ2PlayLoad(loadSuccess : Boolean) {
	// resume loading now that the j2play library is finished initializing
	if (loadSuccess) {
		trace("J2Play Library initialized successfully!");
		play();
	}
}  

The toolkit will initialize, connect to the J2Play platform and once successful, play to the next frame. On frame two, there is a waiting area which allows the user to start an 'automatch' or this could be a lobby waiting area. When the user clicks 'continue', the movie plays to the next frame and starts the 'automatch' search for a game or table to join. This is done by calling the joinGameChannel() function on the actions layer.

function joinGameChannel() {
	trace("Start automatch");

	var filter : String = null;
	var messageFilter : String = "*";

	// automatch the game channel
	filter = "channel_name.starts_with=" + _global.controller.getGameID() 
		+ ".lobby;channel.visibility=visible;status.max=1;order.players=DESC;selection.method=first;";

	_global.controller.joinMatchingChannel (
			0, 
			true, 
			0, 
			filter, 
			messageFilter,
			onChannelJoined);	
}

function onChannelJoined(gameChannel : IGameChannel) {
	if (gameChannel != null) {
		trace("joined game channel: " + gameChannel.toString());
		var game : Game = new Game(gameChannel);
		// store game globally
		_global.game = game;
		_global.controller.setGame(game);
		
		play();
	} else {
		trace ("** AUTOMATCH FAILED **");
	}
}

joinGameChannel() creates a search filter and issues the search to the platform. Once the platform finds a game channel for the user, it is returned in onChannelJoined(). Two important variables are set before playing to the next frame. _global.game and _global.controller.setGame() are set which the game movieclip will use to build the game on top of.

Once reaching the fourth frame, the following is executed which initializes the game state and joins the user to the table in any available open spot.

stop();

cc_game.board.init();
_global.game.joinGame(-1);

The game board is a movie clip which extends the ChineseCheckersState.as class file. This class contains the complete source to the game, as well as some important functions for interacting with the platform and gameserver.

Pay close attention to the following functions in ChineseCheckersState.as as they are the core instructions to the multiplayer game model:

function init() : Void

Initializes the game state.

function handleEvent(evt) : Void

Main event loop. This is called when receiving messages from the server or other players, like the game state, moves, game start and game over events.

function leaveGame(Void) : Void

Called when a player leaves the current game.

function sendGameMessage(msg : Array, target : String) : Void

Sends a message to all players in the current game as well as the game server.

Java Game Server

Scalable Multiplayer Game Servers

Writing Multiplayer Game Servers

Links

• Flash