FLASH网游通过XMLSocket与VB后台通信

前段时间用Flash做了个网游的Demo，通讯用的是Socket。曾承诺写个教程，现在有空就把它写写吧。
先从FLASH说起。我要达到的效果是点击地面，人物就走到点击的地点。思路：一个鼠标监听器监听鼠标的点击事件，把X座标和Y座标传到角色，做为角色的目的地。角色每一帧都向这个目的地移动一点点。
role_mc为场景里的一个MovieClip
role_mc.x = role_mc._x;
role_mc.y = role_mc._y;
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function() {
moveRole(role_mc, _xmouse, _ymouse);
};
Mouse.addListener(mouseListener);
function moveRole(role:MovieClip, x:Number, y:Number) {
role.x = x;
role.y = y;
role.onEnterFrame = function() {
  if (this.x != this._x) {
   this._x += this.x-this._x>0 ? 1 : -1;
  }
  if (this.y != this._y) {
   this._y += this.y-this._y>0 ? 1 : -1;
  }
  if (this.x == this._x && this.y == this._y) {
   delete this.onEnterFrame;
  }
};
}试一下效果，发现角色会斜45度角移动到与目的地垂直或者水平后再垂直或水平运动。这是move函数里的算法没写好。我们现在来想想我想需要的是怎么样的移动。[1.gif]

如图，角色在A点，要移动到B点去，方向就是AB。C点是下一帧角色将会出现的点，那向量AC就相当于角色的速度。将向量AC分解到两轴就得到x方向上的向量AE和y方向上的向量AD，这就是角色在这帧里需要移动的xy值了。角色的速度是已知的，要得到两个分解的向量，就只需要知道角度就行了。角度也可以根据A点和B点得到。我把角色面向右边时定为0度，则向上时为-90度，向下为90度，向左为180度。之所以这么定是为了计算方便。如Math.atan2(role_mc.y-role_mc._y, role_mc.x-role_mc._x)就可以直接到得角色面向的方向了（注意，Math.atan2得到的是以弧度为单位的数，不是角度）。所以把AS改写成： role_mc.x = role_mc._x;
role_mc.y = role_mc._y;
role_mc.speed = 5;
role_mc.angle = 0;
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function() {
moveRole(role_mc, _xmouse, _ymouse);
};
Mouse.addListener(mouseListener);
function moveRole(role:MovieClip, x:Number, y:Number) {
role.x = x;
role.y = y;
role.angle = Math.atan2(role.y-role._y, role.x-role._x);
role.onEnterFrame = function() {
  if (this.x != this._x) {
   this._x += Math.abs(this.x-this._x)>Math.abs(this.speed*Math.cos(this.angle)) ? this.speed*Math.cos(this.angle) : this.x-this._x; //当角色和目的地的距离小于角色的速度时，就不能再以速度计算出的位移，而直接移动到目的地，Y方向同理
  }
  if (this.y != this._y) {
   this._y += Math.abs(this.y-this._y)>Math.abs(this.speed*Math.sin(this.angle)) ? this.speed*Math.sin(this.angle) : this.y-this._y;
  }
  if (this.x == this._x && this.y == this._y) {
   delete this.onEnterFrame;
  }
};
}移动看起来应该没什么大问题了。现在来做人物。把自己画的人物，或者是从游戏里抓图弄出来的人物处理好，我有两张从RO里弄出来的图。
[role.png]

[head.png]：

将两张图导入到FLASH的role_mc里。因为我是把身体和头部所有方向都做成一张图，所以要用遮照来只显示需要的那个。将第一帧做成第一个方向的站立，给帧起名stand_1，加AS：stop()；后边若干帧做成行走的动画，给帧起名run_1，加AS：play()；在行走动画的后边加上一帧空白关健帧，加AS：gotoAndPlay("run_1")。这就完成了一个方向。在这一段后边加上其他几个方向。我做的是方向1为向下，2为左下，3为左，4为左上，5为上。其他三个方向可以之后用AS将234方向做水平翻转达到。也许我说得不是很明白，看我的这个文件（teach1.fla）就知道了。做好这一步之后，就可以在moveRole函数里加些东西，让角色做出相应的动作。我们先画个图来看一看角色的angle值分别代表角色面向哪个方向。见下图
[2.gif]：

图中的红线就是每个方向的分隔线，把角度也列出来了，用弧度为单位是为了方便以后的计算。把AS也修改了一下就达到行走效果了。
role_mc.x = role_mc._x;
role_mc.y = role_mc._y;
role_mc.speed = 5;
role_mc.angle = 0;
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function() {
moveRole(role_mc, _xmouse, _ymouse);
};
Mouse.addListener(mouseListener);
function moveRole(role:MovieClip, x:Number, y:Number) {
role.x = x;
role.y = y;
role.angle = Math.atan2(role.y-role._y, role.x-role._x);
role.dire = 1+Math.round((role.angle+Math.PI)/(Math.PI/4)); //把角色面向的角度的值从-Math.PI到Math.PI的范围变为1到8的自然数，分别代码八个方向
role.dire = role.dire>6 ? role.dire-6 : role.dire+2; //把八个方向处理一下，和图上代表的方向符合
if (role.dire>5) {
  //如果方向为789中的一个，就水平翻转MC
  role.dire = role.dire == 6 ? 4 : role.dire == 7 ? 3 : 2; //方向6对应方向4，7对应3，8对应2
  role._xscale = -100;
} else {
  role._xscale = 100;
}
role.gotoAndPlay("run_"+role.dire);
role.onEnterFrame = function() {
  if (this.x != this._x) {
   this._x += Math.abs(this.x-this._x)>Math.abs(this.speed*Math.cos(this.angle)) ? this.speed*Math.cos(this.angle) : this.x-this._x;
  }
  if (this.y != this._y) {
   this._y += Math.abs(this.y-this._y)>Math.abs(this.speed*Math.sin(this.angle)) ? this.speed*Math.sin(this.angle) : this.y-this._y;
  }
  if (this.x == this._x && this.y == this._y) {
   delete this.onEnterFrame;
   this.gotoAndStop("stand_"+this.dire);
  }
};
}大体样子已经出来了。现在我们来想想，其他的玩家要怎么办？当收到服务器有新玩家登陆这里的时候，FLASH要添加一个新的角色在画面上。我们可以做一个创造角色的函数，收到有新人登陆时就添加一个。而自己登陆的时候也可以用这个函数来创建自己。其他玩家移动，也是从服务器收到是谁要移动到哪的信息，FLASH只要调用moveRole函数就可以了。现在先做一个创建角色的函数。role_mc不需要再放在场景里，在库里给他一个链接名role，就可以方便用attachMovie命令调用了。
//创建鼠标监听器
var mouseListener:Object = new Object();
mouseListener.onMouseDown = function() {
for (var i = 0; i<allRoles.length; i++) {
  if (allRoles[i].ctrl) {
   moveRole(allRoles[i], _xmouse, _ymouse);
   break;
  }
}
};
Mouse.addListener(mouseListener);
//创建角色
var allRoles:Array = new Array();
allRoles[allRoles.length] = createRole(Math.random(), true, 5, Stage.width/2, Stage.height/2);
function createRole() {
var roleObj:MovieClip = this.attachMovie("role", "role_mc", this.getNextHighestDepth());
roleObj.id = arguments[0]; //区别每一个角色的ID，可以从数据库中得到值。在这个教程里就直接用一个随机数代替
roleObj.ctrl = arguments[1]; //标识该角色是否为由玩家控制的角色
roleObj.speed = arguments[2];
roleObj._x = arguments[3];
roleObj._y = arguments[4];
roleObj.x = roleObj._x;
roleObj.y = roleObj._y;
return roleObj;
}
//角色移动
function moveRole(role:MovieClip, x:Number, y:Number) {
role.x = x;
role.y = y;
role.angle = Math.atan2(role.y-role._y, role.x-role._x);
role.dire = 1+Math.round((role.angle+Math.PI)/(Math.PI/4));
role.dire = role.dire>6 ? role.dire-6 : role.dire+2;
if (role.dire>5) {
  role.dire = role.dire == 6 ? 4 : role.dire == 7 ? 3 : 2;
  role._xscale = -100;
} else {
  role._xscale = 100;
}
role.gotoAndPlay("run_"+role.dire);
role.onEnterFrame = function() {
  if (this.x != this._x) {
   this._x += Math.abs(this.x-this._x)>Math.abs(this.speed*Math.cos(this.angle)) ? this.speed*Math.cos(this.angle) : this.x-this._x;
  }
  if (this.y != this._y) {
   this._y += Math.abs(this.y-this._y)>Math.abs(this.speed*Math.sin(this.angle)) ? this.speed*Math.sin(this.angle) : this.y-this._y;
  }
  if (this.x == this._x && this.y == this._y) {
   delete this.onEnterFrame;
   this.gotoAndStop("stand_"+this.dire);
  }
};
}

teach1.fla：点击这里下载源文件

　　接下来是后台服务器的制作。我用的是Microsoft Visual Studio .NET 2003。语言为VB。（图和相关文字不能放在一起-_- 大家麻烦点，上下对着看吧。）
首先建一个空项目，命名为server（图3）。在这个项目的“解决方案资源管理器”上右击项目，选择“添加(D)”-“添加新项(W)”，添加一个类，命名为server.vb（图4）。在server.vb里写上socket的代码。我是从微软件的网站上的例子上修改来的，也没什么可说的。
Imports System.Net
Imports System.Net.Sockets
Namespace ibaiy
    Public Class Server
        Private lisenSocket As Socket
        Private allRoles As New Hashtable
Private rolesPosition As New Hashtable
’在这个例子中我不打算用数据库了，所以建一个hashtable来存在线用户的资料。如果要存入数据库，只需要加上登陆后验证用户名密码，读数据库资料，再存到这个hashtable里。用户做了操作时再把hashtable里的数据处理后再写入数据库就可以了。这里的操作不难，但比较麻烦，所以我偷下懒
        ’启动服务的主函数
        Public Sub startServer(ByVal port As Integer)
            lisenSocket = New Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp)
            Dim ipen As IPHostEntry = Dns.Resolve(Dns.GetHostName)
            Dim endpoint = New IPEndPoint(ipen.AddressList(0).Any, port)
            lisenSocket.Bind(endpoint)
            lisenSocket.Listen(1000)
            lisenSocket.BeginAccept(AddressOf Me.Listen_Callback, lisenSocket)
        End Sub
        Public Sub Listen_Callback(ByVal result As IAsyncResult)
            Dim s As Socket = CType(result.AsyncState, Socket)
            Dim so2 As New StateObject
            so2.workSocket = s.EndAccept(result)
            so2.workSocket.BeginReceive(so2.buffer, 0, so2.buffer.Length, 0, AddressOf Me.Read_Callback, so2)
            s.BeginAccept(AddressOf Me.Listen_Callback, s)
        End Sub
        Public Sub Read_Callback(ByVal result As IAsyncResult)
            Dim so As StateObject = CType(result.AsyncState, StateObject)
            so.len = so.workSocket.EndReceive(result)
            opMsg(so)
            so.buffer.Clear(so.buffer, 0, so.buffer.Length)
            Try
                so.workSocket.BeginReceive(so.buffer, 0, so.buffer.Length, SocketFlags.None, AddressOf Me.Read_Callback, so)
            Catch
            End Try
        End Sub
’这个函数就是处理服务器收到客户端消息的处理函数，一会详细说明
        Public Sub opMsg(ByVal so As StateObject)
        End Sub
    End Class
End Namespace在server项目里像添加server.vb一样再添加一个StateObject.vb。这是为每个联接的SOCKET一定的buffer，索性做了一个新的类。写以下代码：
Imports System.Net.Sockets
Namespace ibaiy
    Public Class StateObject
        Public buffer(1024) As Byte
        Public workSocket As Socket
        Public len As Integer
    End Class
End Namespace