Estoy buscando crear un efecto de túnel similar en COCOS2D (iOS). ¿Alguien podría sugerir algún puntero?
Hasta ahora he intentado con varios sprites en forma de anillo con escala decreciente y colocado en el centro en un mismo punto y manteniendo Z disminuyendo también para cada sprite más pequeño.
Con eso, animándolo con CCScaleTo y cambiando el tamaño a 2.0 con la duración de la animación, pero no se acerca al efecto de túnel que se muestra en la referencia.
Gracias sam
Respuestas:
Encontré la descripción de implementación del autor de este efecto:
Seguramente fue mucho trabajo crear la ilusión de profundidad en un plano 2D.
Sin embargo, el principio es muy fácil: los círculos comienzan en el centro de la pantalla con la escala 0. Luego, el primer círculo del túnel comienza a escalar proporcionalmente al tiempo transcurrido (la escala lineal no funciona) y después de un tiempo el segundo círculo comienza a escalar , luego el 3 ° y 4 ° y así sucesivamente.
Luego baja proporcionalmente el valor alfa de los círculos (los que están en la parte posterior tienen un valor alfa más bajo que los del frente para dar la ilusión de desenfoque), define una ruta que cada círculo debe seguir, moviendo las X e Y coordenadas de la misma, luego pones una nave espacial en el centro de la pantalla. La inclinación del dispositivo hace que el túnel se desplace hacia la izquierda y hacia la derecha, hacia arriba y hacia abajo (¡pero eso da la impresión de que la nave espacial se está moviendo en su lugar!).
Una vez que los círculos salen de la pantalla, se desvanecen rápidamente y se vuelven a colocar en la posición inicial (para ahorrar memoria, por lo que no necesito crear nuevos círculos pero reutilizo los mismos).
Perdón por mi inglés, pero espero que eso haya explicado la idea general :)
Ya casi está allí con tener múltiples sprites de anillo de valor Z y escala decrecientes. Simplemente no los centres a todos.
Debe realizar un seguimiento del punto donde desea que el túnel llegue al horizonte de eventos lejano. Puedes mover ese punto con el tiempo como quieras.
Luego, a medida que coloca cada nuevo sprite, colóquelo en ese punto, escale pequeño, configure su opacidad como desee, luego comience CCSpawncon CCScaleToy CCFadeTo, por ejemplo:
sprite->runAction(CCSpawn::create(
CCScaleTo::create(2.0f, 1.5f),
CCFadeTo::create(5.0f, 255),
nullptr));
Cree previamente todos los sprites y gire cuál está en la parte posterior para mantenerlo eficiente.
Probablemente trataría de ordenarlo con una capa de fondo y efectos de partículas. Puede probar los efectos en el diseñador de partículas y luego reproducirlos en la capa de fondo.
Para ser sincero, no creo que esa imagen se represente con una cámara 2D. Parece que el juego se renderiza utilizando un sistema de renderizado 3D. Pero dado que desea utilizar cocos2d, debe simular esa matriz de transformación 3D usted mismo. Aquí hay una idea para empezar: usted sabe que en una escena 3D, cada objeto está definido por 3 valores escalares, x, y y z. El método más simple que puede usar es escalar como lo sugirió, ¡pero no como lo implementó! ccScaleTodará como resultado una escala lineal con el tiempo, que no producirá sensación 3D. Puede comenzar con la escala del objeto por valor de 1/z. ¡Esto es de alguna manera idéntico a la matriz de proyección más simple que se te ocurra! Si cree que incluso eso no lo satisface, eche un vistazo a las matrices de proyección más modernas y complejas .
Nota al margen: la implementación de una matriz de proyección personalizada en cocos2D será un poco sucia. Si realmente no le gusta el efecto, le sugiero que cambie su motor a uno con soporte 3D.
Así es como lo hice, en pseudocódigo
Activar efecto de túnel:
createCircle ()
Control (con paralaje)
La posición es el Punto de fuga, por lo tanto, no puede mover capas sin mover el punto de fuga. Sin embargo, si mueve el punto de anclaje, la capa parece moverse, pero el Punto de fuga permanece igual; esto crea un efecto de paralaje, porque mover ccp (0.2,0.2) en una capa cerrada (gran escala) tiene más efecto que moviéndose igual en una capa lejana.
Envuelve todo en capas del mismo tamaño, para asegurarse de que reposicionar el ancla crea el mismo movimiento en todas las capas.