Multiplayer Online Gaming - Actionscript and Red Dwarf Server: Part 3

In the first two parts of this tutorial series I walked you through the standard RDS server tutorials.  Thus far we have not actually done anything with Actionscript, but the groundwork is down and we can finally get started.


If you havent already, now is the time to download FlashDevelop as well as Darkstar-as3.  The latest release of FlashDevelop will download the Flex SDK for you as well, make sure you dont skip this step in the FlashDevelop install.


First, you need to make sure to change the server protocol version to 4 by adding the following to the app.properties:
com.sun.sgs.impl.protocol.simple.protocol.version=4


Here is the Actionscript code we are going to implement.  If your already familiar with FlashDevelop and Actionscript you can just jump in and create an application that should be compatible with lesson 6 using this code:

 package   
 {  
   import com.alienos.sgs.as3.client.*;  
   import flash.display.*;  
   import flash.events.*;  
   import flash.text.*;  
   import flash.ui.*;  
   import flash.utils.ByteArray;  
   /**  
   * ...  
   * @author   
   */  
   public class Main extends Sprite   
   {  
    private var fieldFormat:TextFormat = new TextFormat('Arial', 12, 0x444444, true);  
    private var nameField:TextField = new TextField();  
    private var chatField:TextField = new TextField();  
    private var messageField:TextField = new TextField();  
    private var sgsClient:SimpleClient = null;  
    private var chatChannel:ClientChannel = null;  
    public function Main():void   
    {  
      if (stage) init();  
      else addEventListener(Event.ADDED_TO_STAGE, init);  
    }  
    private function init(e:Event = null):void   
    {  
      removeEventListener(Event.ADDED_TO_STAGE, init);  
      stage.align   = StageAlign.TOP_LEFT;  
      stage.scaleMode  = StageScaleMode.NO_SCALE;  
      createGUI();  
    }  
    private function createGUI():void  
    {  
      var title:TextField = new TextField();  
      title.defaultTextFormat = new TextFormat('Arial', 20, 0x444444, true);  
      title.text = 'Simple PDS Chat Client';  
      title.autoSize = TextFieldAutoSize.LEFT;  
      title.x = title.y = 5;  
      addChild(title);  
      nameField.x = chatField.x = messageField.x = 5;  
      nameField.y = 35;  
      chatField.y = 60;  
      nameField.defaultTextFormat =   
       chatField.defaultTextFormat =  
       messageField.defaultTextFormat = fieldFormat;  
      nameField.type =
       messageField.type = TextFieldType.INPUT;  
      nameField.border =  
       chatField.border =  
       messageField.border = true;  
      nameField.borderColor =  
       chatField.borderColor =  
       messageField.borderColor = 0x444444;  
      nameField.width =  
       chatField.width =  
       messageField.width = 300;  
      nameField.height =  
       messageField.height = 20;  
      chatField.height = 300;  
      nameField.background =  
       chatField.background =  
       messageField.background = true;  
      chatField.selectable = false;  
      nameField.text = 'Name';  
      messageField.text = 'Message';  
      addChild(nameField);  
      addChild(chatField);  
      addChild(messageField);  
      messageField.addEventListener(KeyboardEvent.KEY_UP, messageKey);  
    }  
    private function messageKey(evt:KeyboardEvent):void  
    {  
      if (evt.keyCode == Keyboard.ENTER) {  
       if (sgsClient != null) {  
         sendMessage();  
       } else {  
         sgsClient = new SimpleClient('localhost', 1139);  
         sgsClient.login(nameField.text, "password");  
         sgsClient.addEventListener(SgsEvent.CHANNEL_JOIN, channelJoin);  
       }  
      }  
    }  
    private function sendMessage():void  
    {  
      var buf:ByteArray = new ByteArray();  
      buf.writeUTFBytes(nameField.text + ': ' + messageField.text);  
      sgsClient.channelSend(chatChannel, buf);  
    }  
    private function channelJoin(evt:SgsEvent):void  
    {  
      chatChannel = new ClientChannel(evt.channel.name, evt.channel.rawId);  
      sgsClient.addEventListener(SgsEvent.CHANNEL_MESSAGE, channelMessage);  
      sendMessage();  
    }  
    private function channelMessage(evt:SgsEvent):void  
    {  
      addMessage(evt.channelMessage.readUTFBytes(evt.channelMessage.bytesAvailable));  
    }  
    private function addMessage(msg:String):void  
    {  
      chatField.appendText(msg + "\n");  
      chatField.scrollV = chatField.maxScrollV;  
    }  
   }  
 }  

If you havent used these tools before, here is a quick explanation of how to create the project:


Start FlashDevelop and create a new AS3 project (Project->New Project):

Copy and past the code above into Main.as.

Download the swc for darkstar-as3-0.9.8.swc and place it into the lib folder.   Right click the swc and select the "Add to Library" option.

Start the server and then compile and launch the client (F5 is the shortcut in FlashDevelop).  You should now have a client that can communicate with the server via channels.


Lets take a quick look at how the Actionscript code is accomplishing this.


The Main, init, and createGUI classes are establishing the visual layout.


The messageKey class is an event listener that is listening for keystrokes.  It checks to see if ENTER is being pressed, and if it is it connects to the server and sends the message via the sendMessage class.  Note that if a session is already established it skips the connection creation.


channelJoin is an event listener for SgsEvent that creates a new channel .  It adds another event listener that will be responsible for receiving message and decoding them


the channelMessage class actually receives the messages and reads the ByteArray into a string which it then displays using the addMessage class.


Well thats the basics of getting Actionscript to talk to RDS.  As you can see, this is a very bare bones system.  In my next tutorial I will introduce a more robust server framework and a complimentary Actionscript framework.