0
150
ViewsHow can I achieve a camera/movement style similar to Slither.io?
I'm aware that this has been asked a few times, but they are all using other libraries and I need it to work using just P5.js and JavaScript.
I have a basic game setup where players join a room using Express and Socket.io and spawn in as a ship. I want there to be a playable map area, and for what the client sees to be a section of that map with the client's ship in the middle
How can I achieve this with the HTML canvas through p5.js?
One way I've tried is to map the ship's coordinates on the whole playable area to just the width of the client's browser. This works well, but doesn't have the client's ship in the centre so they just drift off the screen if the move around enough.
Here's a diagram to explain what I'm trying to achieve:
The black box represents the whole playable area (the map).
Each green circle is a ship and each red box represents the client who is controlling that ship and the section of the map that they can see
1 answers
Answer question0
What you're looking for is the translate function:
specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.
You want the player to be the centre of their screen, thus you should translate such that the player is at the centre.
translate(width/2 - player.x, height/2 - player.y);
I've put together a really simple example that should point you in the right direction. It's basically just a circle that you can move around a game world, I've added a couple rectangles in so it's obvious you're moving the player with the arrow keys:
let player;
function setup() {
createCanvas(400, 400);
player = {
x: width/2,
y: height/2
}
}
function draw() {
background(220);
translate(width/2 - player.x, height/2 - player.y);
rect(-100, 100, 50, 50);
rect(100, 50, 50, 50);
if (keyIsDown(LEFT_ARROW)) {
player.x--;
} else if (keyIsDown(RIGHT_ARROW)) {
player.x++;
} else if (keyIsDown(UP_ARROW)) {
player.y--;
} else if (keyIsDown(DOWN_ARROW)) {
player.y++;
}
ellipse(player.x, player.y, 10, 10);
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>Also, here's a link to the p5.js sketch