0
146
Views¿Cómo puedo lograr un estilo de cámara/movimiento similar a Slither.io?
Soy consciente de que esto se ha preguntado varias veces, pero todos usan otras bibliotecas y necesito que funcione solo con P5.js y JavaScript.
Tengo una configuración de juego básica en la que los jugadores se unen a una sala usando Express y Socket.io y aparecen como un barco. Quiero que haya un área de mapa jugable, y que el cliente vea que es una sección de ese mapa con el barco del cliente en el medio.
¿Cómo puedo lograr esto con el lienzo HTML a través de p5.js?
Una forma que he intentado es mapear las coordenadas del barco en toda el área jugable al ancho del navegador del cliente. Esto funciona bien, pero no tiene la nave del cliente en el centro, por lo que simplemente se sale de la pantalla si se mueve lo suficiente.
Aquí hay un diagrama para explicar lo que estoy tratando de lograr:
El recuadro negro representa toda el área jugable (el mapa). Cada círculo verde es un barco y cada cuadro rojo representa al cliente que controla ese barco y la sección del mapa que puede ver. 
1 answers
Answer question0
Lo que estás buscando es la función de traducción :
especifica una cantidad para desplazar objetos dentro de la ventana de visualización. El parámetro x especifica la traducción izquierda/derecha, el parámetro y especifica la traducción arriba/abajo.
Desea que el jugador sea el centro de su pantalla, por lo tanto, debe traducir de manera que el jugador esté en el centro.
translate(width/2 - player.x, height/2 - player.y);
He reunido un ejemplo realmente simple que debería indicarle la dirección correcta. Básicamente es solo un círculo que puedes mover alrededor de un mundo de juego, he agregado un par de rectángulos para que sea obvio que estás moviendo al jugador con las teclas de flecha:
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>Además, aquí hay un enlace al boceto p5.js