Camara que siga al personaje en pilas 2

Feliz año a todos.

No se como hacer para que la camara siga al personaje.

Hola @hokuto !!!

Para mover la cámara de forma que siga el movimiento del actor podrías cambiar
el atributo x e y del objeto pilas.camara.

Por ejemplo, imagina que tengo al actor Conejo, que se puede mover con el teclado, y quiero
que la cámara lo siga todo el tiempo así:

screencast%202020-01-09%2022-50-44

Lo que podría hacer es cambiar el método actualizar del actor para que en todo momento
la cámara se desplace a la posición del actor:

acá está la versión completa: https://app.pilas-engine.com.ar/#/proyecto/ecb4021f-64fe-4237-9ddc-695631f81194

Eso sí, algo que vas a notar es que la cámara se va a mover muy abruptamente, y
el actor va a quedar en el centro de la pantalla todo el tiempo, como si estuviera fijo
al escenario. A mí personalmente me gusta que la cámara se mueva un poco más lenta para
que parezca como si alguien estuviera moviéndola para no perderse al actor de vista.

Una mejora que podrías hacer es cambiar el código de seguimiento de la cámara así:

let distancia_x = (this.x - this.pilas.camara.x) / 20;
let distancia_y = (this.y - this.pilas.camara.y) / 20;

this.pilas.camara.x += distancia_x;
this.pilas.camara.y += distancia_y;

No sé si se nota mucho en el gif, pero el resultado debería ser un movimiento más
suave de la cámara, y que el actor parece “desconectarse” de la posición de la cámara.

screencast%202020-01-09%2023-02-02

Te paso esta versión modificada: https://app.pilas-engine.com.ar/#/proyecto/421bd483-f79c-4ec5-8fde-3749d5202539

Ah, y por las dudas te comento, te conviene limitar la posición de la cámara para que no se vean los bordes del escenario. Por ejemplo si tenes una pared en la parte izquierda de la pantalla, podrías
agregar un código como este al final de la función actualizar:


if (this.pilas.camara.x < -60) {
       this.pilas.camara.x = -60;
}

screencast%202020-01-09%2023-11-29

¡Abrazo!

1 me gusta

Gracias @hugoruscitti.:+1:

Como siempre explicas muy bien todo y de forma muy clara,añade este ejemplo para la proxima version.

Saludos.

Gracias @hokuto, es una buena idea, lo voy a agregar a los ejemplos. También tendría que añadir a la documentación esto que te mencioné del uso de la cámara. Así que para la próxima versión van a estar las dos cosas.

¡Abrazo!

Estuve haciendo algunas pruebas y todo muy bien,pero me encontre con un problema con facil solucion.

Cree un personaje que se movia hacia el raton y la camara seguia al personaje,el problema es que si salia de las coordenadas iniciales ya no detectaba al raton,la solucion fue sumarle la camara al raton,pero aqui surge un problema.

Las habilidades “seguir al mouse” y “seguir al mouse lentamente” no sirven si se usa la camara,entonces he pensado que una solucion seria el poder tener acceso al codigo de esas habilidades para poder modificarlas cuando haga falta como los actores.

Tambien he pensado que el mouse podria tener incorporado lo de la camara automaticamante o crear dos nuevas variables para esto.

-pilas.cursor_x_camara
-pìlas.cursor_y_camara.

Hola @hokuto!!!, es cierto, me hiciste notar un bug… mirando un poco más de cerca
las funciones que capturan la posición del mouse me di cuenta que las coordenadas
pueden ser del escenario (teniendo en cuenta la cámara) o absolutas. Y hasta ahora no
había tenido en cuenta esto y por eso pilas solo está soportando coordenadas
absolutas.

Así que corregí esto en el código y me puse a hacer varias pruebas. Pienso que lo
más común es que los usuarios quieran que las coordenadas sean del escenario, así
que cambié el código que obtiene valores para las variables pilas.cursor_x y pilas.cursor_y
para siempre sean relativas al escenario. También agregué dos variables nuevas para
quienes necesiten las coordenadas de pantalla o absolutas (pilas.cursor_x_absoluta y
pilas.cursor_y_absoluta):

También hice un ejemplo para mostrar cómo se puede mover un personaje
por el escenario y seguirlo con la cámara:

image

Voy a agregar este ejemplo a la nueva versión y hacer el lanzamiento en estos días!

1 me gusta

Fantastico!!!.:wink: