Camera In A 2d Game

FOR CLARIFICATION I've found a video that is exactly what I'm trying to do. I marked the exact time where the youtuber talks about it, so don't skip ahead or restart the video unle

Solution 1:

This is how I would do it.

// This is the input. Notice how I have escaped the backslash characters in the 2nd and 6th rows.const input = [
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','/','-','\\','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','|',':','|','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','|',':','|','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','|',':','|','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','\\','_','/','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
    ['&','&','&','&','&','&','&','&','&','&','&','&','&','&','&'],
];

/**
This function takes 4 arguments, the starting x,y for the 'zoomed' camera viewport, and w, h which define how 'tall' and 'wide' the viewport will be.

The output is a new array like the input, but constrained within the viewport options.
*/functionview(x = 11, y = 1, w = 3, h = 5) {
    const rows = [];
    for (let dy = 0; dy < h; dy += 1) {
        const row = [];
        for (let dx = 0; dx < w; dx += 1) {
            row.push(input[y + dy][x + dx]);
        }
        rows.push(row);
    }

    return rows;
}

document.querySelector('#output').innerHTML = view().map((row) => row.join(' ')).join('\n');

#output {
  font-family: "Courier New", Courier;
  white-space: pre;
}

<divid="output"></div>

The output should be a 3x5 table containing the desired characters:

[
  [ '/', '-', '\\' ],
  [ '|', ':', '|' ],
  [ '|', ':', '|' ],
  [ '|', ':', '|' ],
  [ '\\', '_', '/' ]
]

Solution 2:

This is my approach.

• Set a position where you want to put the top-left vertex of the camera

  let xVertex = 5;
    let yVertex = 1;
  

• Now, you should transfrom your array based in those coordenates:

  array[yVertex].splice(xVertex - 1, 5, "|", "-", "-", "-", "|");    //top edgearray[yVertex + 1][xVertex] = "|";                                 //left edgearray[yVertex + 1][xVertex + 4] = "|";                             //right edgearray[yVertex + 2].splice(xVertex - 1, 5, "|", "-", "-", "-", "|");//bottom edge

• splice() function is very useful here. You can replace many items with just one instruction. Here more information about that https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

EDIT: you need to put an if statement to verify if the edges of the camera are inside the array and not outside to avoid errors.

---

• In order to get the values inside the camera, just iterate from the top-left vertex:

  let camera = [];
    for (let y = yVertex + 1; y < yVertex + 4; y++) {
        camera[y - (yVertex + 1)] = [];     //create nested array
        for (let x = xVertex + 1; x < xVertex + 4; x++) {
            camera[y - (yVertex + 1)].push(array[y][x]);   //push camera data
        }
    }