Building a multiuser snake and ladder game using the Adobe Connect Collaboration Builder SDK

You can create multiuser games using a Flex component included in the Adobe Connect Collaboration Builder SDK to synchronize SWF files that are loaded into Share pods in Adobe Connect Meeting rooms.  When a SWF is uploaded to a Meeting room, each user in the room receives an instance of the SWF. Using the synchronization capabilities of the Collaboration Builder SDK these applications can communicate with one another, which enables a number of interesting use cases including multiuser games.

This article describes Snakes and Ladders, a simple multiuser game built using the Collaboration Builder SDK.

Meeting attendees use SnakeLadder.swf to play the Snakes and Ladders game.  Currently, the game is limited to two players, so any meeting participants not selected to play will not be involved in the game.

After the SWF is loaded into a Share pod in an Adobe Connect Meeting room, the host selects player 1 and player 2 from the available meeting participants (see Figure 1). 

The players take turns by clicking the Roll The Dice button.  The player’s colored marker advances based on the result of the dice roll (see Figure 2).  Landing at the base of a ladder will move the player to the top of the ladder, while landing on the head of the snake will move the player to the tail of the snake. When the marker completes its move, an attendee must click the Play button to enable the next roll. The first player to reaches 100 wins the game. To initiate another game, the host again selects two players.

Snakes and Ladders was written completely in ActionScript 3, using the Collaboration Builder SDK to synchronize events.

To create an application with the Collaboration Builder SDK, you need to load the SWC files as libraries in Flash Builder and add them to the application. The Snakes and Ladders game uses SyncConnector.swc—a Flex component that enables synchronization of multiple SWF files.

To access the API from your application, you need a SyncConnector instance; for example:

On creationComplete, you’ll want to add event listeners for the CAUGHT_UP and SYNC_MSG_RCVD events; for example:

Any application that use the SyncConnector component goes through a catch-up phase as it is loaded into a Share pod. The catch-up phase allows new participants to receive the accumulated state of the application. After all messages are received, SyncConnector dispatches a CAUGHT_UP event.

In the CAUGHT_UP event handler you can perform any operations that are required immediately after the SWF loads (as long as they do not need to dispatch any sync messages).

For example, the Snakes and Ladders game populates the list controls with all the meeting participants in the CAUGHT_UP event handler. The application has the following ComboBox control:

To populate the control it retrieves the list of users into an array using syncConnector.userList, and sets the array as the control’s data provider:

In the syncMsgRcvdHandler method you need to check for any events received.  In Snakes and Ladders, this method checks for messages that indicate a new roll of the dice.  When the client is notified of a new roll, it updates the display with the roll value and initiates to move the markers:

By default, only the host (not meeting participants) can call the dispatchSyncMessage() method to dispatch messages through Adobe Connect.

In Snakes and Ladders the diceValue message is dispatched using the following code:

The host can call the SyncConnector.allowParticipantPublish() method to allow participants to publish a specified message; for example:

To restrict access to the Roll The Dice button, Snakes and Ladders uses the click event to check if the username of the particular client is same as the username of the player whose turn it is to roll the dice.  In the application, the names of the two players are stored in variables that are synchronized across all clients.  The Roll The Dice click handler checks the usernames using the following code:

The application uses an easing effect to smooth the movement of the marker. The head and tail coordinates of the snakes and ladders are stored in an array. After each roll of the dice, the code checks the marker’s position against the values in these arrays. If the marker has landed on a snake head it descends to the tail, and if it has landed at the base of a ladder it climbs to the top.

Currently Snakes and Ladders is a two-player game, but it is possible to create breakout rooms to enable more attendees to play. I’m planning a multiplayer version of the game in which any number of attendees can play.

For more information, including details on how to test an application in Flash Builder without Adobe Connect, see Using the Adobe Connect Collaboration Builder SDK 2.0 .

You can download the Adobe Connect Collaboration Builder SDK from the Adobe Connect Developer Center.