瓦块地图 45度 如何实现地块坐标 像素坐标的转换

Creator 2.x
#1

image
image1187×656 98.3 KB

求教大神指导一下，这种45度菱形的地图坐标是如何转换的？ 像素坐标转成地块坐标，地块坐标转成像素坐标 感激不尽。

1赞
#2

有偿求帮助

#3

旋转变换和形变变换矩阵的复合， 高中知识

#4

45度菱形的话

屏幕的x坐标=地图格子逻辑数组中的位置X * 格子宽度
屏幕的y坐标=地图格子逻辑数组中的位置Y * 格子高度/2

#5

楼主问题解决了没？

#6

把矩阵转换搞出来就行了，你这里不是正方形，所以还要拉伸矫正一下。

地块坐标 = 像素坐标 * [拉伸比例矩阵] * [旋转45度矩阵] / [单位向量]

#7

可以用cocos 节点的 最下点对应格子的最下点。

`/**
 * 45度瓦片地图坐标 转 cocos creator 坐标
 * @param pos (瓦片地图坐标)
 * @param mapSize 
 * @param tileSize
 * @return 
 */
 static tileToCocos(pos: cc.Vec2, mapSize: cc.Size, tileSize: cc.Size){
    let totalHeight = mapSize.height * tileSize.height;
    /**
     * (0, 0) => (0,                totalHeight - tileSize.height/2);
     * (1, 1) => (0,                totalHeight - tileSize.height - tileSize.height/2)
     * (0, 1) => (0 - tileWidth/2,  totalHeight - tileSize.height)
     * (1, 0) => (0 + tileWidth/2,  totalHeight - tileSize.height)
     * 
     */

    let x = (pos.x - pos.y) * (tileSize.width/2);
    let y = totalHeight / 2 - ( (pos.x + pos.y + 1) / 2 * tileSize.height);

    return cc.v2(x, y);

}

static cocosToTile(pos: cc.Vec2, mapSize: cc.Size, tileSize: cc.Size){
    let x = pos.x / tileSize.width + mapSize.height / 2 - pos.y/tileSize.height - 1/2;
    let y = mapSize.height / 2 - pos.y / tileSize.height - 1/2 - pos.x / tileSize.width;

    return cc.v2(x, y);
}`
#8

谢谢大神们的指点，我这里有个demo，我自己先研究研究先

#9

image
image934×739 34.8 KB

initPos是地块(0,0)时的屏幕坐标