我正在用JavaScript开发一种基于视角的2d / 3d游戏.
我有一个X轴和Y轴,如下图所示.
我的问题:我的地图上有一堆具有以下属性的对象(分别标记为“ 1”和“ 2”):
> positionX / positionY
> sizeX / sizeY
在图像中,对象“ 1”确实获得了坐标x:3,y:2,而对象“ 2”确实获得了坐标x:5,y:4.两个对象的SizeX和sizeY均为w:1,h:1.
我想用此信息来对所有对象进行升序排序(基于对象的位置和大小),以在3d中知道哪些对象来自另一个对象,以便稍后将所有分类的对象绘制到画布中(前景/背景中的对象=“图层”).
注意:摄像机必须固定在某个位置上-假设摄像机的X和Y值相同,因此在计算CameraX = CameraY时不得使用摄像机位置.
到目前为止,我已经尝试过:
let objects = [
{
name: "objectA",x: 8,y: 12,w: 2,h: 2
},{
name: "objectB",x: 3,y: 5,{
name: "objectC",x: 6,y: 2,w: 1,h: 3
}
]
let sortObjects = (objects) => {
return objects.sort((a,b)=> {
let distanceA = Math.sqrt(a.x**2 + a.y**2);
let distanceB = Math.sqrt(b.x**2 + b.y**2);
return distanceA - distanceB;
});
}
let sortedObjects = sortObjects(objects);
console.log(sortedObjects);
// NOTE in 3d: first Object drawn first,second Object drawn second and so on...
编辑以上代码段:
我已经尝试根据对象的x / y坐标对它们进行排序,但是似乎在计算时也必须使用width和height参数以避免错误.
如何使用宽度/高度?
Tbh我一无所知,所以我们将不胜感激.
最佳答案
我不确定您的意思是:
原文链接:https://www.f2er.com/js/531109.htmlNote: The Camera has to fixed position – lets say the camera has the identical X and Y value so that the camera position must not be used while calculation CameraX = CameraY.
所以这是一个通用的解决方案.
您必须按照物体离相机最近的距离对其进行分类.这取决于对象的尺寸及其相对位置.
该算法可以在JS中实现,如下所示:
// If e.g. horizontal distance > width / 2,subtract width / 2; same for vertical
let distClamp = (dim,diff) => {
let dist = Math.abs(diff);
return (dist > 0.5 * dim) ? (dist - 0.5 * dim) : dist;
}
// Closest distance to the camera
let closestDistance = (obj,cam) => {
let dx = distClamp(obj.width,obj.x - cam.x);
let dy = distClamp(obj.height,obj.y - cam.y);
return Math.sqrt(dx * dx + dy * dy);
}
// Sort using this as the metric
let sortObject = (objects,camera) => {
return objects.sort((a,b) => {
return closestDistance(a,camera) - closestDistance(b,camera);
});
}