[教程] 45度斜角编辑器制作教程（一）

[url]http://bbs.9ria.com/viewthread.php?tid=74011&extra=page%3D1%26amp;orderby%3Ddateline%26amp;filter%3D2592000[/url]


这是一个写给新人的教程，我的预想是把涉及到得知识，经验一步步的写出来，呃，不说废话了，下面就开始该教程的第一步---45度坐标转换
请看下图

[img]http://dl.iteye.com/upload/attachment/420203/b069e293-eaab-34ae-b5e8-615cbb082e9c.jpg[/img]


上图是一个以红色（0,0）位置为原点的UV坐标系示意图

从上图可以看出，U轴向每向上延伸出一个单位，原点坐标就会向下偏移 “1/2菱形格子高度” 的像素值
根据如上原理，我们可以得到下面的公式
假设我们定义
菱形格子宽度为 tileW:Number;
菱形格子高度为 tileH:Number;
U轴向格子数量为 uCount:int;
V轴向格子数量为 vCount:int;
原点坐标（屏幕坐标系） origin : Point;

那么
origin.x = 0；
origin.y = uCount * tileH/2；

原点我们求出来了，那么其它点（UV坐标系点）的坐标呢？
我的想法是 先求出在UV坐标系下每移动一个单位（U向或者V向）的X轴（屏幕坐标系）和Y轴（屏幕坐标系）的像素偏移量
例如
单位U向X轴偏移像素 = tileW / 2;（向右偏移）
单位U向Y轴偏移像素 = -tileH / 2;（向上偏移，所以为负值）
单位V向X轴偏移像素 = tileW / 2;（向右偏移）
单位V向Y轴偏移像素 = tileH / 2; （向下偏移，所以为正值）

假设有个UV点（u，v）它对应的XY坐标系点pos : Point
那么根据上述可以推导出如下公式
pos.x =原点坐标X+ 单位U向X轴偏移像素 * u + 单位V向X轴偏移像素 * v =origin.x + tileW / 2 * u + tileW / 2 * v = origin.x+ ( u + v) *tileW /2;

pos.y =原点坐标Y+ 单位U向Y轴偏移像素 * u + 单位V向Y轴偏移像素 * v = origin.y -tileH / 2* u + tileH / 2 * v = origin.y + (v - u) * tileH / 2;

好了，公式推导完了，下面要做的就是把公式封装起来，就像下面这样
MathTool.as

package com.mudMan.tools

{

        /**

         * @author 恋水泥人

         */

        public class MathTool

        {

                public function MathTool()

                {

                }

                /**

                 * 获取像素点坐标

                 * @param _u U向坐标

                 * @param _v v向坐标

                 * @param _tw 网格宽

                 * @param _th 网格高

                 * @param _count 网格数量

                 * @return 像素点x,y坐标

                 * 

                 */

                public static function getPixelPoint(_u:int,_v:int,_tw:int,_th:int,_count:int):Point

                {

                        var org_x:Number = 0;

                        var org_y:Number = _count * _th/2;

                        var _x:Number = org_x + _tw/2 * (_u + _v);

                        var _y:Number = org_y + _th/2 * (_u - _v);

                        return new Point(_x,_y);

                }

        }

}

工具创建完了，下面就利用这个工具创建一个绘制地图网格的类，如下
MapGrids.as

 package com.mudMan.views

{

        import com.mudMan.tools.MathTool;



        import flash.display.Sprite;

        import flash.geom.Point;



        /**

         * @author 恋水泥人

         */

        public class MapGrids extends Sprite

        {

                public function MapGrids()

                {

                        super();

                }

                /**

                 * 画菱形边框网格(整体也为菱形)

                 * @param uCount  U轴向网格个数

                 * @param vCount  V轴向网格个数

                 * @param _tileW  网格宽

                 * @param _tileH  网格高

                 * @param _lineColor 网格颜色

                 * 

                 */

                public function drawDiamond(_uCount:int, _vCount:int,_tileW:Number,_tileH:Number,_lineColor:uint = 0xff1212):void

                {

                        graphics.lineStyle(1, _lineColor, 1);

                        //U向坐标

                        var u:int;

                        //V向坐标

                        var v:int;

                        //线起始点像素坐标

                        var originPos:Point;

                        //线途经点像素坐标

                        var lineToPos:Point;



                        //沿V向画线

                        while(u <= _uCount)

                        {

                                v = 0;

                                originPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount);

                                graphics.moveTo(originPos.x,originPos.y);



                                while(v < _vCount)

                                {

                                        ++v;

                                        lineToPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount);

                                        graphics.lineTo(lineToPos.x,lineToPos.y);

                                }

                                ++u;

                        }



                        u = 0;

                        v = 0;



                        //沿U向画线

                        while(v <= _vCount)

                        {

                                u = 0;

                                originPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount);

                                graphics.moveTo(originPos.x,originPos.y);



                                while(u < _uCount)

                                {

                                        ++u;

                                        lineToPos = MathTool.getPixelPoint(u,v,_tileW,_tileH,_uCount);

                                        graphics.lineTo(lineToPos.x,lineToPos.y);

                                }

                                ++v;

                        }

                }

        }//end class

}

创建完了让我们试下绘制的效果，把下面代码复制到文档类中

var mapGrid:MapGrids = new MapGrids();

                        mapGrid.drawDiamond(10,10,32,16);

                        addChild(mapGrid);

会绘制出类似于下图所示

[img]http://dl.iteye.com/upload/attachment/420205/5f2a6216-f87a-3163-b41d-8d1522173cd1.jpg[/img]