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相互参照。

 

 

 

 

posted @ 2013-06-12 09:16  半山无极  阅读(875)  评论(0编辑  收藏