Using AppWarp, you can add realtime multiplayer game play and virtual rooms logic to your Flash games. In this post, we will walk you through the integration steps for a simple demo game called Smiley Space Shooter.

The demo itself is quite simple. The user first needs to click on the “Start Game” bar at the top. Once the status bar changes to “Started!”, users can use the arrow keys to move up and down, and click to shoot ball towards their opponent. Since it’s a 2 player game, another user will also do the same steps and they can start fighting against each other and see each other move in real-time. You can watch the video below

Now let’s understand how the game code works by examining the key code snippets. Entire source code is available and can be downloaded or viewed from our git repo.

First we specify the AppWarp constants that will be used in SpriteMoveDemo.as file

public var roomID:String = "Your Room Id";
private var apiKey:String = "Your API Key"
private var secretKey:String = "Your Secret Key";

You get your values by registering and creating an AppWarp type of application from AppHq (Shephertz developer dashboard). This wiki page contains a step-by-step guide on how to register, create the app and a game room. Once you’ve got these values, replace as indicated.

Next we simply add the required UI elements (local player, remote player etc.). For the real-time communication to happen, you need to use the latest AppWarpLib.swc library file. The latest version can be download from our Git Repo here. Add this swc to your project. Next you need to initialize the WarpClient singleton and set up your listeners through which you will get events.

WarpClient.initialize(apiKey, secretKey);    
WarpClient.getInstance().setConnectionRequestListener(listener);
WarpClient.getInstance().setRoomRequestListener(listener);
WarpClient.getInstance().setNotificationListener(listener);

The listener is defined in AppWarpListener.as file and implements the event interfaces required for this sample. ConnectionRequestListener defines the callbacks for connection establishment and tear-down. RoomRequestListener defines the callbacks for the game room’s join and subscribe operations. NotificationListener defines the callbacks for remote notifications such a player sending a chat or updating a rooms properties etc.

public class AppWarpListener implements ConnectionRequestListener, RoomRequestListener, NotificationListener

Now we are ready to connect to AppWarp cloud and start our game. Now each user who is concurrently connected to your game must have a unique username. In this demo, we will simply use a random number for this and connect. You can use other solutions such as a facebook id, email address etc. to guarantee uniqueness depending on your game.

localUsername = Math.random().toString();

private function connect_click(e:MouseEvent):void
{
    if(WarpClient.getInstance().getConnectionState() == ConnectionState.disconnected)
    {
        WarpClient.getInstance().connect(localUsername);
        connectbtn.text = "Connecting..";
    }
}

The game starts once the user has successfully joined the game room. Now the user can move up/down as well as click to shoot in the opponent’s direction. We handle the keyboard event as mentioned below:

private function keyPressedDown(event:KeyboardEvent):void {

    if(WarpClient.getInstance().getConnectionState() != ConnectionState.connected){
        return;
    }
    var key:uint = event.keyCode;
    var step:uint = 15;
    switch (key) {
        case Keyboard.UP :
            localPlayer.y -= step;
            WarpClient.getInstance().sendChat("player,"+localPlayer.x+","+localPlayer.y);
            break;
        case Keyboard.DOWN :
            localPlayer.y += step;
            WarpClient.getInstance().sendChat("player,"+localPlayer.x+","+localPlayer.y);
            break;
        default:
            break;
    }            
}

We send a comma separated message to the room with the local players’ coordinates. This message is received by all players in the room and they can then update their UI in turn. Similarly, we handle mouse click by sending the projectile coordinates as following:

private function onMouseClick(e:MouseEvent):void
{
    if(WarpClient.getInstance().getConnectionState() == ConnectionState.connected){
        if(isProjectileMoving == false)
        {
            WarpClient.getInstance().sendChat("projectile,"+e.localX+","+e.localY);   
            isProjectileMoving = true;
            localProjectile.y = e.localY;
        }
    }
}

When we receive remote messages we need to write some code to update the remote player’s position or projectile depending on the message received. Here is the code snippet which handles it in the AppWarpListener.as file

public function onChatReceived(event:Chat):void
{
    if(event.sender != _owner.localUsername){
        var xyArray:Array = event.chat.split(",");
        var x:int = parseInt( xyArray[1]);
        var y:int = parseInt( xyArray[2]);
        if(xyArray[0] == "player"){
            _owner.moveRemotePlayer(x, y);
        }
        else if(xyArray[0] == "projectile"){
            _owner.moveRemoteProjectile(x, y);
        }
    }
}

That’s it! We saw how you can simply integrate the AppWarp library and add real-time communication to your game.

Visit our ActionScript3 developer wiki to learn more and get started. Please share your feedback with us on support@shephertz.com.