(For more resources on Flash and Games, see here.)

The lobby screen implementation

In this section, we will learn how to implement the room display within the lobby.

Lobby screen in Hello World

Upon login, the first thing the player needs to do is enter the lobby. Once the player has logged into the server successfully, the default behavior of the PulseGame in PulseUI is to call enterLobby API.

The following is the implementation within PulseGame:

protected function postInit():void {
        m_netClient.enterLobby();
}

Once the player has successfully entered the lobby, the client will start listening to all the room updates that happen in the lobby.

These updates include any newly created room, any updates to the room objects, for example, any changes to the player count of a game room, host change, etc.

Customizing lobby screen

In the PulseUI, the lobby screen is the immediate screen that gets displayed after a successful login. The lobby screen is drawn over whatever the outline object has drawn onto the screen. The following is added to the screen when the lobby screen is shown to the player:

• Search lobby UI
• Available game rooms
• Game room scroll buttons
• Buttons for creating a new game room
• Navigation buttons to top ten and register screens

When the lobby is called to hide, the lobby UI elements are taken off the screen to make way for the incoming screen. For our initial game prototype, we don’t need to make any changes. The PulseUI framework already offers all of the essential set of functionalities of a lobby for any kind of multiplayer game.

However, the one place you may want to add more details is in what gets display for each room within the lobby.

Customizing game room display

The room display is controlled by the class RoomsDisplay, an instance of which is contained in GameLobbyScreen. The RoomsDisplay contains a number of RoomDisplay object instances, one for each room being displayed. In order to modify what gets displayed in each room display, we do it inside of the class that is subclassed from RoomDisplay.

The following figure shows the containment of the Pulse layer classes and shows what we need to subclass in order to modify the room display:

In all cases, we would subclass (MyGame) the PulseGame. In order to have our own subclass of lobby screen, we first need to create class (MyGameLobbyScreen) inherited from GameLobbyScreen. In addition, we also need to override the method initLobbyScreen as shown below:

protected override function initLobbyScreen():void {
    m_gameLobbyScreen = new MyGameLobbyScreen();
}

In order to provide our own RoomsDisplay, we need to create a subclass (MyRoomsDisplay) inherited from RoomsDisplay class and we need to override the method where it creates the RoomsDisplay in GameLobbyScreen as shown below:

protected function createRoomsDisplay():void {
     m_roomsDisplay = new MyRoomsDisplay();
}

Finally, we do similar subclassing for MyRoomDisplay and override the method that creates the RoomDisplay in MyRoomsDisplay as follows:

protected override function
  createRoomDisplay (room:GameRoomClient):RoomDisplay {
  return new MyRoomDisplay(room);
}

Now that we have hooked up to create our own implementation of RoomDisplay, we are free to add any additional information we like. In order to add additional sprites, we now simply need to override the init method of GameRoom and provide our additional sprites.

Filtering rooms to display

The choice is up to the game developer to either display all the rooms currently created or just the ones that are available to join. We may override the method shouldShowRoom method in the subclass of RoomsDisplay (MyRoomsDisplay) to change the default behavior. The default behavior is to show rooms that are only available to join as well as rooms that allow players to join even after the game has started.

Following is the default method implementation:

protected function
 shouldShowRoom(room:GameRoomClient):Boolean {
  var show:Boolean;
  show = (room.getRoomType() ==
         GameConstants.ROOM_ALLOW_POST_START);
  if(show == true)
    return true;
  else {
    return (room.getRoomStatus() ==
           GameConstants.ROOM_STATE_WAITING);
  }
}

Lobby and room-related API

Upon successful logging, all game implementation must call the enterLobby method.

public function enterLobby(gameLobbyId:String = "DefaultLobby"):void

You may pass a null string in case you only wish to have one default lobby. The following notification will be received again by the client whether the request to enter a lobby was successful or not. At this point, the game screen should switch to the lobby screen.

function onEnteredLobby(error:int):void

If entering a lobby was successful, then the client will start to receive a bunch of onNewGameRoom notifications, one for each room that was found active in the entered lobby. The implementation should draw the corresponding game room with the details on the lobby screen.

function onNewGameRoom(room:GameRoomClient):void

The client may also receive other lobby-related notifications such as onUpdateGameRoom for any room updates and onRemoveGameRoom for any room objects that no longer exist in lobby.

function onUpdateGameRoom(room:GameRoomClient):void
function onRemoveGameRoom(room:GameRoomClient):void

If the player wishes to join an existing game room in the lobby, you simply call joinGameRoom and pass the corresponding room object.

public function joinGameRoom(gameRoom:GameRoomClient):void

In response to a join request, the server notifies the requesting client of whether the action was successful or failed via the game client callback method.

function onJoinedGameRoom(gameRoomId:int, error:int):void

A player already in a game room may leave the room and go back to the lobby, by calling the following API:

public function leaveGameRoom():void

Note that if the player successfully left the room, the calling game client will receive the notification via the following callback API:

function onLeaveGameRoom(error:int):void