Developing a custom camera system for a top-down RPG game using Javascript Canvas

Question

Developing a custom camera system for a top-down RPG game using Javascript Canvas

What specific question do I have to ask now? My goal is to implement a "viewport" camera effect that will track the player without moving the background

I am integrating websocket support and planning to render additional characters on the map - movement needs to be based on the player's actions rather than the map itself so that I can update other players' positions accurately.

Prior post:

I've read through numerous posts related to this topic. It appears that everyone faces unique challenges in their individual implementation of the "Canvas topdown game". This makes it quite difficult to find a solution tailored to your issue without restructuring your entire codebase.

Hopefully, you guys can provide some assistance this time around.

The game so far: developed using Vue3 by the way but the majority of the code is vanilla JavaScript.

This involves a basic topdown map with X and Y axes

In my approach, I'm taking a PNG file created with the Tiled application

Enlarged by 400% - then drawing it using ctx.drawImage

Next, setting up boundaries

and eventually drawing the player character

Currently, I am including a "force" value for the x and y position based on key presses (WASD) This allows the character to move on the map and ensures collision detection functions properly My aim is for the map to draw a certain number of pixels determined by the player's position WITHOUT moving the map as I'm already incorporating SocketIO for multiplayer functionality

I'm quite lost here, unsure about the steps needed to create a viewport within the map....

Hope some of this resonates with you

Here's a snippet of the code

 // Code block goes here...

javascript typescript canvas html5-canvas

Answer 1

Answer №1

As there is no runnable snippet provided for reference, here is a basic example demonstrating the usage of transformation methods in CanvasRenderingContext2D to alter the scene's viewport.

Within the draw function:

Reset the transform to set the center of the <canvas> as (0, 0) using the setTransform method
To draw from the player's perspective:
- Adjust the context by translating it by -x and -y multiplied by the zoom factor
- Scale the canvas based on the zoom factor

// Initialization
const cvs = document.createElement("canvas");
cvs.width = 200;
cvs.height = 200;
const ctx = cvs.getContext("2d");

// State setup
const players = [
  [-20, -30, "green"],
  [50, 70, "blue"]
];

let viewport = {
  x: 0,
  y: 0,
  zoom: 1
};

// Drawing functions
const clear = () => {
  ctx.fillStyle = "white";
  ctx.fillRect(-cvs.width / 2, -cvs.height / 2, cvs.width, cvs.height);
};

const drawMap = () => {
  const w = cvs.width - 25;
  const h = cvs.height - 25;
  
  ctx.fillStyle = "#efefef";
  ctx.fillRect(-w / 2, -h / 2, w, h);
}

const drawPlayers = () => {
  for (const [x, y, color] of players) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, 10, Math.PI * 2, 0);
    ctx.closePath();
    ctx.fill();
  }
}

const drawCenter = () => {
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.fillRect(-1, -15, 2, 30);
  ctx.fillRect(-15, -1, 30, 2);
}

const draw = () => {
  // Zoom out and set (0, 0) at canvas center
  ctx.setTransform(1, 0, 0, 1, cvs.width / 2, cvs.height / 2);
  clear();
  
  const { zoom, x, y } = viewport;
  ctx.translate(-x * zoom, -y * zoom);
  ctx.scale(zoom, zoom);
  
  drawMap();
  drawPlayers();
  
  // For debugging: mark the center of the canvas
  ctx.setTransform(1, 0, 0, 1, cvs.width / 2, cvs.height / 2);
  drawCenter();
}

draw();

document.body.appendChild(cvs);

// UI functionality
const updateViewport = () => {
  const centerValue = document.querySelector("input[name=center]:checked").value;
  
  const [x, y] = players[centerValue] || [0, 0];
  const zoom = document.querySelector("input[type=range]").valueAsNumber;
  
  viewport = { x: x, y: y, zoom };
  draw();
};

document.querySelectorAll("input").forEach(el => {
  el.addEventListener("input", updateViewport);
});

body { display: flex; }
canvas { border: 1px solid red; position: relative; }
fieldset { margin-bottom: 1rem; }

<div> 
  <fieldset>
    <legend>View center:</legend>
    <label>
      <input type="radio" value="-1" name="center" checked> Map
    </label>

    <label>
      <input type="radio" value="0" name="center"> Green player
    </label>

    <label>
      <input type="radio" value="1" name="center"> Blue player
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Zoom</legend> 
    <input type="range" min="0.1" max ="3" step="0.1" value="1">
  </fieldset>
  
</div>

Answer 2

As there is no runnable snippet provided for reference, here is a basic example demonstrating the usage of transformation methods in CanvasRenderingContext2D to alter the scene's viewport.

Within the draw function:

Reset the transform to set the center of the <canvas> as (0, 0) using the setTransform method
To draw from the player's perspective:
- Adjust the context by translating it by -x and -y multiplied by the zoom factor
- Scale the canvas based on the zoom factor

// Initialization
const cvs = document.createElement("canvas");
cvs.width = 200;
cvs.height = 200;
const ctx = cvs.getContext("2d");

// State setup
const players = [
  [-20, -30, "green"],
  [50, 70, "blue"]
];

let viewport = {
  x: 0,
  y: 0,
  zoom: 1
};

// Drawing functions
const clear = () => {
  ctx.fillStyle = "white";
  ctx.fillRect(-cvs.width / 2, -cvs.height / 2, cvs.width, cvs.height);
};

const drawMap = () => {
  const w = cvs.width - 25;
  const h = cvs.height - 25;
  
  ctx.fillStyle = "#efefef";
  ctx.fillRect(-w / 2, -h / 2, w, h);
}

const drawPlayers = () => {
  for (const [x, y, color] of players) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, 10, Math.PI * 2, 0);
    ctx.closePath();
    ctx.fill();
  }
}

const drawCenter = () => {
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.fillRect(-1, -15, 2, 30);
  ctx.fillRect(-15, -1, 30, 2);
}

const draw = () => {
  // Zoom out and set (0, 0) at canvas center
  ctx.setTransform(1, 0, 0, 1, cvs.width / 2, cvs.height / 2);
  clear();
  
  const { zoom, x, y } = viewport;
  ctx.translate(-x * zoom, -y * zoom);
  ctx.scale(zoom, zoom);
  
  drawMap();
  drawPlayers();
  
  // For debugging: mark the center of the canvas
  ctx.setTransform(1, 0, 0, 1, cvs.width / 2, cvs.height / 2);
  drawCenter();
}

draw();

document.body.appendChild(cvs);

// UI functionality
const updateViewport = () => {
  const centerValue = document.querySelector("input[name=center]:checked").value;
  
  const [x, y] = players[centerValue] || [0, 0];
  const zoom = document.querySelector("input[type=range]").valueAsNumber;
  
  viewport = { x: x, y: y, zoom };
  draw();
};

document.querySelectorAll("input").forEach(el => {
  el.addEventListener("input", updateViewport);
});

body { display: flex; }
canvas { border: 1px solid red; position: relative; }
fieldset { margin-bottom: 1rem; }

<div> 
  <fieldset>
    <legend>View center:</legend>
    <label>
      <input type="radio" value="-1" name="center" checked> Map
    </label>

    <label>
      <input type="radio" value="0" name="center"> Green player
    </label>

    <label>
      <input type="radio" value="1" name="center"> Blue player
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Zoom</legend> 
    <input type="range" min="0.1" max ="3" step="0.1" value="1">
  </fieldset>
  
</div>

Developing a custom camera system for a top-down RPG game using Javascript Canvas

Answer №1

Similar questions

Unable to locate module in node_modules directory when attempting to import an image into TS

No issues raised by Typescript/tslint regarding this in arrow function

A function that retrieves an array containing each individual element from a multi-dimensional array

PHP function with JSON response encountered an error during the AJAX call

Determine the worth of various object attributes and delete them from the list

Error message "ag-grid: Unable to perform the key.forEach function in the console when resizing columns"

How to set the element in the render method in Backbone?

performing a request to Axios API with the inclusion of ${item} within the URL

Create an array of routes specifically for private access using Private Route

What is the process for incorporating an external script into my Vue methods?

How do I access and read a map within an array from Firebase using ReactJS?

There is a lack of 'Access-Control-Allow-Origin' header, resulting in no access to the API

What is the best way to revert a screen's state back to its original state while utilizing react navigation?

Puppeteer App Error: An error has been detected on the client side

Getting a URL path in Next.js without relying on the Link component when the basePath is configured

JavaScript promises do not guarantee the execution of the loop

Tips for obtaining a specific sorting order based on a wildcard property name

Passing arguments with $emit - Vue

Exploring the Integration of Node Modules with React

Share a status on Facebook with an earlier date