love2d教程4--续45度地图解析

例程4介绍了Tiled地图的使用，它还有一种45度角的地图，如下图（左边为新建地图时的设置，右边为我拼接的一副图）

（上面说错了，感谢朱大仙的指正，其实还有一种45度交叉的图）

一、45度地图解析

下面来分析一下如何确定坐标，如下图，红色的菱形是组成地图的图块，黑色的矩形为一块菱形实际

的形状，设A点的坐标为(xa,ya)，矩形的宽、高位w和h，则B点的坐标为(xa+w/2,ya-h/2)，

C点的坐标为(xa+w/2,ya+h/2)。

再看一下用Tiled导出的lua文件，与第一幅右边的图比较，我们发现数据是按列分布的，点从下到上

与图的斜向右方向的图块对应。

data = {
2, 2, 2, 2, 2, 2, 2, 1, 1, 1,
2, 2, 1, 1, 1, 1, 1, 1, 1, 1,
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1,
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1,
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1,
 2, 1, 1, 1, 1, 1, 1, 1, 1, 1,
 2, 1, 1, 1, 1, 1, 1, 1, 1, 1,
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1,
 1, 2, 1, 1, 1, 1, 1, 1, 1, 1,
 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 }

设地图为m*n个图块，图块的高和宽为w、h，那么在屏幕上的坐标为(x,y)(按左上角为起始点)，则第一行

第一个点的坐标为(x,y)，在屏幕上显示的图块为data[m*(n-1)+1]； 第一行第二个点坐标为(x+w/2,y-h/2)，

在屏幕上显示的图块为data[m*(n-2)+1];第二行第一个点坐标为(x+w/2,y+h/2)，显示的图块为data[m*(n-1)+2]；

第二行第二个点的坐标为(x+w/2*2,y+h/2-h/2)，显示的图块为data[m*(n-2)+2]。

于是可以推出，第i行第j列的坐标为(x+w/2*(i-1)+w/2*(j-1),y+h/2*(i-1)-h/2*(j-1))，注以1为起点，

显示的图块为data[m*(n-i)+j]。

完整的代码如下:main.lua  过程点击下载。

data = { 
2, 2, 2, 2, 2, 2, 2, 1, 1, 1,
2, 2, 1, 1, 1, 1, 1, 1, 1, 1,
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 
 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 
 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 
 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 }
 
quadtable={}
function makeQuad(data)
    local quad
    for i=1,10 do  --列
        for j=10,1,-1 do  --行
            if data[10*(j-1)+i]==1 then
                quad=love.graphics.newQuad( 0, 0, 42, 21, 42, 42 )
            else
                quad=love.graphics.newQuad( 0, 21, 42, 21, 42, 42 )
            end
            table.insert(quadtable,quad)
        end
    end
    
end

function drawMap(quads,x,y)
    local w,h=42,21 --图块的宽和高
    local m=10 --行数
    
    for i=1,10 do --行
        for j=1,10 do  --列
            love.graphics.drawq(image,quads[m*(i-1)+j],x+w/2*(i-1)+w/2*(j-1),y+h/2*(i-1)-h/2*(j-1))
        end
    end
end
function love.load()
    makeQuad(data)
    image=love.graphics.newImage("assets/45.png")
end
function love.draw()

    drawMap(quadtable,200,200)
    
end

二、45度交叉图解析

同上，设A点的坐标为(x,y),图块的宽和高为w、h，那么B点的坐标为(x+w,y)

C点的坐标为(x+w/2,y+h/2)。再和下图对照看，发现偶数行比奇数行的x多w/2,y多h/2

则任意点的坐标为(x+w/2*((i-1)%2)+w*(j-1),y+h/2*(i-1))， 

同一行x坐标以w递增，故为x+w*(j-1),但还要判断是否是偶数行，判断是否被2整除即可。

完整的代码如下，工程点击下载。

 data = {
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
        2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
        2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
        2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
        2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
        2, 2, 2, 2, 2, 2, 2, 2, 2, 2
        }
 
quadtable={}
function makeQuad(data)
    local quad
    for i=1,#data do
        
            if data[i]==1 then
                quad=love.graphics.newQuad( 0, 0, 42, 21, 42, 42 )
            else
                quad=love.graphics.newQuad( 0, 21, 42, 21, 42, 42 )
            end
            table.insert(quadtable,quad)
        
    end
    
end

function drawMap(quads,x,y)
    local w,h=42,21 --图块的宽和高
    local m=10 --行数
    
    for i=1,10 do --行
        for j=1,10 do  --列
            love.graphics.drawq(image,quads[m*(i-1)+j],x+w/2*((i-1)%2)+w*(j-1),y+h/2*(i-1))
        end
    end
end
function love.load()
    makeQuad(data)
    image=love.graphics.newImage("assets/45.png")
end
function love.draw()

    drawMap(quadtable,200,200)
    
end

 

这个只是示例，地图无法进行缩放操作，大家可以结合之前的例程4相互参照。