What is the best way to organize objects in a 2D game?

Question

What is the best way to organize objects in a 2D game?

I am currently working on a unique perspective-based 2D/3D game using javascript.

In the image below, you can see the X and Y-axis that I have implemented for this project.

My question: On the map, I have several objects labeled as "1" and "2" with properties such as:

positionX / positionY
sizeX / sizeY

Object "1" is located at coordinates x:3, y:2, while Object "2" is at x:5, y:4. Both objects have a size of w:1, h:1.

My goal is to sort these objects in ascending order based on their positions and sizes, so that in the 3D view, I know which objects come in front of others. This will help me draw all objects in the correct order on the canvas, creating layers in the foreground and background.

https://i.sstatic.net/c6Zw6.png

Note: The camera has a fixed position, meaning the X and Y values of the camera are identical. Therefore, the camera position must not be factored in while calculating CameraX = CameraY.

This is what I have tried so far:

let objects = [
  {
    name: "objectA",
    x: 8,
    y: 12,
    w: 2,
    h: 2
  }, 
  {
    name: "objectB",
    x: 3,
    y: 5,
    w: 2,
    h: 2
  },
  {
    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: objects are drawn in the order they appear in the sorted array...

Edit to the snippet above:

I attempted to sort the objects based on their x/y coordinates, but it seems that the width and height parameters also need to be considered to avoid errors.

How should I incorporate width/height into the calculations? I am unsure about this aspect, so any guidance would be greatly appreciated.

javascript sorting math 3d 2d

Answer 1

Answer №1

I'm uncertain about your intention behind:

Keep in mind: The Camera is in a fixed position - let's assume the camera has the same X and Y values so that the camera position must not be factored in while calculating CameraX = CameraY.

Therefore, here is a solution for a general case.

The key is to arrange the objects based on their closest distance to the camera. This factor depends on the object's dimensions and its relative position.

The JavaScript algorithm for this can be written as below:

// If, for instance, the horizontal distance is greater than the width / 2, deduct width / 2; same applies for vertical
let distClamp = (dim, diff) => {
    let dist = Math.abs(diff);
    return (dist > 0.5 * dim) ? (dist - 0.5 * dim) : dist;
}

// Determining the 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);
}

// Sorting based on this metric
let sortObject = (objects, camera) => {
    return objects.sort((a, b) => {
        return closestDistance(a, camera) - closestDistance(b, camera);
    });
}

UPDATE this solution may not be entirely accurate due to oversimplified assumptions, will revise or remove shortly.

Answer 2

I'm uncertain about your intention behind:

Keep in mind: The Camera is in a fixed position - let's assume the camera has the same X and Y values so that the camera position must not be factored in while calculating CameraX = CameraY.

Therefore, here is a solution for a general case.

The key is to arrange the objects based on their closest distance to the camera. This factor depends on the object's dimensions and its relative position.

The JavaScript algorithm for this can be written as below:

// If, for instance, the horizontal distance is greater than the width / 2, deduct width / 2; same applies for vertical
let distClamp = (dim, diff) => {
    let dist = Math.abs(diff);
    return (dist > 0.5 * dim) ? (dist - 0.5 * dim) : dist;
}

// Determining the 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);
}

// Sorting based on this metric
let sortObject = (objects, camera) => {
    return objects.sort((a, b) => {
        return closestDistance(a, camera) - closestDistance(b, camera);
    });
}

UPDATE this solution may not be entirely accurate due to oversimplified assumptions, will revise or remove shortly.

Answer 3

Answer №2

Alright, let's tackle this challenge! Instead of ordering objects by distance, we'll arrange them based on obstruction. This means that for objects A and B, A can obstruct B, B can obstruct A, or neither object obstructs the other. To determine the order for drawing, we must establish whether A obstructs B or vice-versa.

Here's the approach I've developed. Although I've had limited testing ability, the logic behind the process seems solid.

Step 1. Associate each object with its boundaries and store the original object for later reference:

let step1 = objects.map(o => ({
  original: o,
  xmin: o.x,
  xmax: o.x + o.w,
  ymin: o.y,
  ymax: o.y + o.h
}));

Step 2. Determine the two corners of each object that create the largest obstruction to the camera's field of view when connected by a line:

let step2 = step1.map(o => {
  const [closestX, farthestX] = [o.xmin, o.xmax].sort((a, b) => Math.abs(camera.x - a) - Math.abs(camera.x - b));
  const [closestY, farthestY] = [o.ymin, o.ymax].sort((a, b) => Math.abs(camera.y - a) - Math.abs(camera.y - b));

  return {
    original: o.original,
    x1: closestX,
    y1: o.xmin <= camera.x && camera.x <= o.xmax ? closestY : farthestY,
    x2: o.ymin <= camera.y && camera.y <= o.ymax ? closestX : farthestX,
    y2: closestY
  };
});

Step 3. Arrange the objects by checking for intersection between line segments drawn from the camera to each endpoint of one object and the other object. The object with intersecting line segments is closer and should be drawn after.

let step3 = step2.sort((a, b) => {
  const camSegmentA1 = {
    x1: camera.x,
    y1: camera.y,
    x2: a.x1,
    y2: a.y1
  };
  const camSegmentA2 = {
    x1: camera.x,
    y1: camera.y,
    x2: a.x2,
    y2: a.y2
  };
  const camSegmentB1 = {
    x1: camera.x,
    y1: camera.y,
    x2: b.x1,
    y2: b.y1
  };
  const camSegmentB2 = {
    x1: camera.x,
    y1: camera.y,
    x2: b.x2,
    y2: b.y2
  };

  function intersects(seg1, seg2) {
    // Intersection logic here
  }

  function squaredDistance(pointA, pointB) {
    // Distance calculation logic here
  }

  // Intersection checks and comparison logic here
});

Step 4. Retrieve the original objects sorted from farthest to closest:

let results = step3.map(o => o.original);

Combining all the steps:

results = objects.map(o => {
  // Mapping and sorting logic here
}).sort((a, b) => {
  // More sorting logic here
}).map(o => o.original);

Feel free to test it out and let me know if it meets your requirements!

Answer 4

Alright, let's tackle this challenge! Instead of ordering objects by distance, we'll arrange them based on obstruction. This means that for objects A and B, A can obstruct B, B can obstruct A, or neither object obstructs the other. To determine the order for drawing, we must establish whether A obstructs B or vice-versa.

Here's the approach I've developed. Although I've had limited testing ability, the logic behind the process seems solid.

Step 1. Associate each object with its boundaries and store the original object for later reference:

let step1 = objects.map(o => ({
  original: o,
  xmin: o.x,
  xmax: o.x + o.w,
  ymin: o.y,
  ymax: o.y + o.h
}));

Step 2. Determine the two corners of each object that create the largest obstruction to the camera's field of view when connected by a line:

let step2 = step1.map(o => {
  const [closestX, farthestX] = [o.xmin, o.xmax].sort((a, b) => Math.abs(camera.x - a) - Math.abs(camera.x - b));
  const [closestY, farthestY] = [o.ymin, o.ymax].sort((a, b) => Math.abs(camera.y - a) - Math.abs(camera.y - b));

  return {
    original: o.original,
    x1: closestX,
    y1: o.xmin <= camera.x && camera.x <= o.xmax ? closestY : farthestY,
    x2: o.ymin <= camera.y && camera.y <= o.ymax ? closestX : farthestX,
    y2: closestY
  };
});

Step 3. Arrange the objects by checking for intersection between line segments drawn from the camera to each endpoint of one object and the other object. The object with intersecting line segments is closer and should be drawn after.

let step3 = step2.sort((a, b) => {
  const camSegmentA1 = {
    x1: camera.x,
    y1: camera.y,
    x2: a.x1,
    y2: a.y1
  };
  const camSegmentA2 = {
    x1: camera.x,
    y1: camera.y,
    x2: a.x2,
    y2: a.y2
  };
  const camSegmentB1 = {
    x1: camera.x,
    y1: camera.y,
    x2: b.x1,
    y2: b.y1
  };
  const camSegmentB2 = {
    x1: camera.x,
    y1: camera.y,
    x2: b.x2,
    y2: b.y2
  };

  function intersects(seg1, seg2) {
    // Intersection logic here
  }

  function squaredDistance(pointA, pointB) {
    // Distance calculation logic here
  }

  // Intersection checks and comparison logic here
});

Step 4. Retrieve the original objects sorted from farthest to closest:

let results = step3.map(o => o.original);

Combining all the steps:

results = objects.map(o => {
  // Mapping and sorting logic here
}).sort((a, b) => {
  // More sorting logic here
}).map(o => o.original);

Feel free to test it out and let me know if it meets your requirements!

Answer 5

Answer №3

The problem lies in the use of the euclidean distance to calculate the distance of an object from the point (0, 0) instead of measuring the distance from the line y = -x. To achieve this, utilizing Manhattan distance is the appropriate approach.

const orderObjects = (objects) => {
  return objects.sort((a, b) => {
    let distanceA = a.x + a.y;
    let distanceB = b.x + b.y;
    return distanceA - distanceB;
  });
}

Implementing this function will organize the objects vertically within your rotated coordinate system.

Answer 6

The problem lies in the use of the euclidean distance to calculate the distance of an object from the point (0, 0) instead of measuring the distance from the line y = -x. To achieve this, utilizing Manhattan distance is the appropriate approach.

const orderObjects = (objects) => {
  return objects.sort((a, b) => {
    let distanceA = a.x + a.y;
    let distanceB = b.x + b.y;
    return distanceA - distanceB;
  });
}

Implementing this function will organize the objects vertically within your rotated coordinate system.

Answer 7

Answer №4

Take into account the sum of x and y in every cell of the illustration.

https://i.sstatic.net/1jnsk.png

If you want to arrange the cells from top to bottom, just sort them based on the value of x+y.

Answer 8

Take into account the sum of x and y in every cell of the illustration.

https://i.sstatic.net/1jnsk.png

If you want to arrange the cells from top to bottom, just sort them based on the value of x+y.

Answer 9

Answer №5

Perhaps you'll uncover some valuable information here (best with Firefox & explore the DEMO)

For me, the concept of depth boils down to pos.x + pos.y [in assetHelper.js -> get depth() {...] just like the initial response details. The sorting process is then a straightforward comparison [in canvasRenderer -> depthSortAssets() {...]

Answer 10

Perhaps you'll uncover some valuable information here (best with Firefox & explore the DEMO)

For me, the concept of depth boils down to pos.x + pos.y [in assetHelper.js -> get depth() {...] just like the initial response details. The sorting process is then a straightforward comparison [in canvasRenderer -> depthSortAssets() {...]

What is the best way to organize objects in a 2D game?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Guide to emphasizing text with hover effects and excluding whitespace (javascript)

What is the best way to create a seamless Asynchronous loop?

Tips for reading user input in a terminal using node.js

Guide to: Implementing Radio Buttons to Adjust Image Opacity

Issue: AngularJS Injector Module Error

Finding the most recent instance of a deeply buried value based on a specific property

Utilizing ng-switch for handling null values or empty strings

Regular Expressions in JavaScript can be used to find and extract text that comes after a specific word until the end of the line

Run a function once two or more ajax requests have been successfully completed

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Error: Unable to access the 'center' property of an undefined value in the three.module.js file

The Bootstrap slide function encounters issues within the AJAX success callback

Error displaying component with react-router v5 not found

Creating a Node.js application using Express requires careful consideration of file structure and communication methods

Struggling with the compilation of this Typescript code

Is there a way to dynamically insert my own <divs> into a container?

Obtain the count of unique key-value pairs represented in an object

When iPhone images are uploaded, they may appear sideways due to the embedded exif data

What is the best way to save the content of an RFC822 message body as a String?

The issue with React Testing using Jest: The domain option is necessary