Javascript-如何在2D游戏中对对象进行排序?

前端之家收集整理的这篇文章主要介绍了Javascript-如何在2D游戏中对对象进行排序? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在用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中知道哪些对象来自另一个对象,以便稍后将所有分类的对象绘制到画布中(前景/背景中的对象=“图层”).

img

注意:摄像机必须固定在某个位置上-假设摄像机的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我一无所知,所以我们将不胜感激.

最佳答案
我不确定您的意思是:

Note: 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);
    });
}

编辑此解决方案也不起作用,因为它天真地假设,将很快更新或删除.

原文链接:https://www.f2er.com/js/531109.html

猜你在找的JavaScript相关文章