多人画板的实现 “哥发的不是画面，哥发的是字符串”

栏目：游戏心得 2009-10-01 发布者：yong

祖国60岁的今天，正好是Madud第一个多人游戏告一段落的时候，写点总结，希望与大家一起交流进步！

1.要达到的目的是：所有客户端实时共享画板

2.前后端结构：客户端FLASH ，服务器端SFS，mySQL

3.单机与多人：单机就是自己和电脑玩，多人游戏就是人和人玩

4.多人共享数据：要实现人和人玩，就意味着你的行为要让大家知道，这就需要你告诉大家你做了什么，所以与单机不同的是你需要用服务器去实时共享你的行为给大家！

5. 画板制作：画板分两层，上层是Sprite,下层是bitmap, 他们的关系是将sprite绘制出来的画面存到bitmap的bitmapdata中，在Sprite中，用MOUSE_MOVE事件函数里面用Sprite的graphics.moveTo, lineTo实现任意画线，然后鼠标抬起的时候，将你在Sprite上所画的保存到bitmapdata中，然后清空Sprite

6.奇淫巧计：橡皮差与清除画板的实现，同事的点子，既然画板背景色是白色，橡皮差就用白色的线条绘制就可以了，同样道理，清除画板只需要用一次遍历，将bitmapdata所有像素点的颜色变成白色就可以了

7.共享画板：为了实现共享，我需要把“画面”发送给服务器，然后服务器在把这个“画面”发送给其他客户端，这样就实现了共享. 但主意的一点是“哥发的不是画面，哥发的是字符串！”，就是说服务器要接收能接收的东西，意思是你不能发送Sprite给他，所以我们就需要借助bitmapdata，并进一步将bitmapdata进行Base64编码转换成字符串发送给服务器端，然后服务器端将字符串发送给客户端，客户端将字符串反编回bitmapdata并绘制！

8.何时发送：当你正在画线，鼠标并没有抬起的时候，大家看不到你所画的，当鼠标抬起的时候大家才能看见，就是说我鼠标抬起的时候我才告诉服务器去广播我所做的事情！不想频繁的发送，MOUSE_UP的时候再通知SFS JAVA扩展，应该算一种得当的方式吧！

9.遇到的问题：服务器对字符串接收有长度限制，处理的方法是将字符串分段发送

10.用到的两个类BitmapByte和Base64

package{

    import flash.display.BitmapData;
    import flash.geom.Rectangle;
    import flash.utils.ByteArray;

    public class BitmapBytes {

        public static function encodeByteArray(data:BitmapData):ByteArray{
            if(data == null){
                throw new Error(“data参数不能为空!”);
            }
            var bytes:ByteArray = data.getPixels(data.rect);
            bytes.writeShort(data.width);
            bytes.writeShort(data.height);
            bytes.writeBoolean(data.transparent);
            bytes.compress();
            return bytes;
        }
        public static function encodeBase64(data:BitmapData):String{
            return Base64.encodeByteArray(encodeByteArray(data));
        }

        public static function decodeByteArray(bytes:ByteArray):BitmapData{
            if(bytes == null){
                throw new Error(“bytes参数不能为空!”);
            }
            bytes.uncompress();
            if(bytes.length < 6){
                throw new Error(“bytes参数为无效值!”);
            }
            bytes.position = bytes.length – 1;
            var transparent:Boolean = bytes.readBoolean();
            bytes.position = bytes.length – 3;
            var height:int = bytes.readShort();
            bytes.position = bytes.length – 5;
            var width:int = bytes.readShort();
            bytes.position = 0;
            var datas:ByteArray = new ByteArray();
            bytes.readBytes(datas,0,bytes.length – 5);
            var bmp:BitmapData = new BitmapData(width,height,transparent,0);
            bmp.setPixels(new Rectangle(0,0,width,height),datas);
            return bmp;
        }

        public static function decodeBase64(data:String):BitmapData{
            return decodeByteArray(Base64.decodeToByteArray(data));
        }

        public function BitmapBytes() {
            throw new Error(“BitmapBytes类只是一个静态类!”);
        }

    }

}

/*
Base64 – 1.1.0

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the “Software”), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

package {

        import flash.utils.ByteArray;

        public class Base64 {

                private static const BASE64_CHARS:String = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=”;

public static const version:String = “1.0.0″;

                public static function encode(data:String):String {
                        // Convert string to ByteArray
                        var bytes:ByteArray = new ByteArray();
                        bytes.writeUTFBytes(data);

                        // Return encoded ByteArray
                        return encodeByteArray(bytes);
                }

                public static function encodeByteArray(data:ByteArray):String {
                        // Initialise output
                        var output:String = “”;

                        // Create data and output buffers
                        var dataBuffer:Array;
                        var outputBuffer:Array = new Array(4);

                        // Rewind ByteArray
                        data.position = 0;

                        // while there are still bytes to be processed
                        while (data.bytesAvailable > 0) {
                                // Create new data buffer and populate next 3 bytes from data
                                dataBuffer = new Array();
                                for (var i:uint = 0; i < 3 && data.bytesAvailable > 0; i++) {
                                        dataBuffer[i] = data.readUnsignedByte();
                                }

                                // Convert to data buffer Base64 character positions and
                                // store in output buffer
                                outputBuffer[0] = (dataBuffer[0] & 0xfc) >> 2;
                                outputBuffer[1] = ((dataBuffer[0] & 0×03) << 4) | ((dataBuffer[1]) >> 4);
                                outputBuffer[2] = ((dataBuffer[1] & 0×0f) << 2) | ((dataBuffer[2]) >> 6);
                                outputBuffer[3] = dataBuffer[2] & 0×3f;

                                // If data buffer was short (i.e not 3 characters) then set
                                // end character indexes in data buffer to index of ‘=’ symbol.
                                // This is necessary because Base64 data is always a multiple of
                                // 4 bytes and is basses with ‘=’ symbols.
                                for (var j:uint = dataBuffer.length; j < 3; j++) {
                                        outputBuffer[j + 1] = 64;
                                }

                                // Loop through output buffer and add Base64 characters to
                                // encoded data string for each character.
                                for (var k:uint = 0; k < outputBuffer.length; k++) {
                                        output += BASE64_CHARS.charAt(outputBuffer[k]);
                                }
                        }

                        // Return encoded data
                        return output;
                }

                public static function decode(data:String):String {
                        // Decode data to ByteArray
                        var bytes:ByteArray = decodeToByteArray(data);

                        // Convert to string and return
                        return bytes.readUTFBytes(bytes.length);
                }

                public static function decodeToByteArray(data:String):ByteArray {
                        // Initialise output ByteArray for decoded data
                        var output:ByteArray = new ByteArray();

                        // Create data and output buffers
                        var dataBuffer:Array = new Array(4);
                        var outputBuffer:Array = new Array(3);

                        // While there are data bytes left to be processed
                        for (var i:uint = 0; i < data.length; i += 4) {
                                // Populate data buffer with position of Base64 characters for
                                // next 4 bytes from encoded data
                                for (var j:uint = 0; j < 4 && i + j < data.length; j++) {
                                        dataBuffer[j] = BASE64_CHARS.indexOf(data.charAt(i + j));
                                }

                              // Decode data buffer back into bytes
                                outputBuffer[0] = (dataBuffer[0] << 2) + ((dataBuffer[1] & 0×30) >> 4);
                                outputBuffer[1] = ((dataBuffer[1] & 0×0f) << 4) + ((dataBuffer[2] & 0×3c) >> 2);
                                outputBuffer[2] = ((dataBuffer[2] & 0×03) << 6) + dataBuffer[3];

                                // Add all non-padded bytes in output buffer to decoded data
                                for (var k:uint = 0; k < outputBuffer.length; k++) {
                                        if (dataBuffer[k+1] == 64) break;
                                        output.writeByte(outputBuffer[k]);
                                }
                        }

                        // Rewind decoded data ByteArray
                        output.position = 0;

                        // Return decoded data
                        return output;
                }

                public function Base64() {
                        throw new Error(“Base64 class is static container only”);
                }
        }
}