Camera with zoom that follows the player in javascript

Question

I'm passing the time programming a little game in javascript, I've done what I'm trying this in several in game engine. And what I'm trying to do is generate the world while the player walks around the map. Using engines like unity and godot, I have always had the facilities to deal with the camera and the scene. Now with pure javascript I'm kind of not knowing where to go.

Come on, what I have so far:

A world generated by 2D noise and my character in it can move with the keys of the keyboard. What I want to do now is that when walking he generate the world and also the camera accompany him. And that with the scroll of the mouse I can take the camera to a bigger zoom so that I can better visualize the generated world.

So there are 3 questions I have:

1 - How to create a camera that will follow the player, already thinking about the best way to make the world be generated when walking the player.

2 - How to generate the world while he walks (This I believe I can do.)

3 - How to zoom in with the mouse scroll?

Answer 1

Making the camera follow the player is relatively simple. If you're using canvas, then simply use the rendering context's translate function to translate the current origin to the player's position, then use the scale function to create the zoom effect and lastly translate the camera in the other direction by half of the canvas size to center the player. It's important to not mix these up, because that would make the scaling origin messed up.

In code this would look something like this

ctx.resetTransform(); // You need to make sure to include this
// Keep in mind though, resetTransform doesn't exist in some browsers, you may want to use setTransform instead
ctx.translate(playerPositionX, playerPositionY);
ctx.scale(currentZoom);
ctx.translate(-canvas.width / 2, -canvas.height / 2);

To learn how to modify the zoom using the scroll wheel, read this, but basically, listen to the wheel event and use the deltaY value it gives you.

If you aren't using canvas (e. g. divs, svg-s), then this is much harder. Make sure everything has a position. when the player moves, move everything the same amount in the other direction. When the user zooms in, get the distance vector pointing from the player to the div, multiply it by the amount the scene zooms in (e.g. a value of 2 makes everything twice as big) and add it to the player's position to get the new position of the object. Also make sure the change the size of the divs too.