Smiley Space Shooter Multiplayer Flash Game Demo
This wiki guides you through the code for Smiley Shooter demo game.
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 its a 2 player game, another user will also do the same steps and voila! they can fight against each other and see each other move in real-time.
Now lets 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, creating 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 AppWarp 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 that 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.."; } }
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 follows
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.