swift - Cómo crear el efecto de un objeto circular que ingresa y se separa de una sustancia gruesa

sprite-kit cadisplaylink

Question

Basado en la imagen de abajo (utilicé colores diferentes para círculo y superficie plana para que se vean, pero al final los colores serán los mismos), usando Swift y Spritekit, intento crear el efecto de un objeto circular que ingresa una sustancia gruesa (no necesariamente pegajosa) y que se separa de la sustancia espesa. Básicamente, cuando el objeto circular se está separando, se alejará de la superficie plana a medida que se forma en un círculo. Quería utilizar marcos de animación de imágenes, pero dado que los objetos son SKSpriteNodes con cuerpos de física, esto dificultará el cronometraje de la colisión de objetos con animación. Otro enfoque sería utilizar CAAnimation, pero no sé cómo se puede combinar con SKSpriteNodes con cuerpos de física. ¿Cómo puedo crear este efecto de separación usando cualquiera de los enfoques mencionados anteriormente o uno diferente?

ACTUALIZAR

La siguiente imagen muestra el cambio en la superficie de la sustancia gruesa a medida que el objeto circular ingresa en la sustancia espesa hasta que se sumerge.

Answer 1

Desde un alto nivel de comprensión, hay dos formas de hacerlo.

1. THE BAD WAY (pero funciona mejor cuando el fluido tiene texturas): crea la hoja de sprites por adelantado y luego superpone un elemento adicional del objeto SKSpriteNode. El marco en el sprite de animación será una función de la distancia de la pelota a la superficie cuando la distancia entre ellos sea menor que cierta cantidad. El rango de distancia deseado (rango) deberá asignarse al número de cuadro de los sprites (frameIndex). f (rango) = marcoIndex. La interpolación lineal ayudará aquí. Más sobre la interpolación más tarde.

2. LA MANERA CORRECTA: Haga que el fluido sea un objeto curva, luego anime los puntos en la curva con interpolación lineal entre los estados inicial, intermedio y final. Esto requerirá tres curvas cada una con el mismo número de puntos. Deje que el estado inicial del fluido sea F1. El modelo F1 apunta como el fluido estático. Deje que el estado del fluido sea F2 cuando la bola está sumergida hasta la mitad. El modelo F2 apunta para parecerse a la bola sumergida en su ancho máximo. Deje que el estado fluido sea F3 cuando la bola está sumergida en un 75%. Tenga en cuenta que cuando la bola está completamente sumergida, el fluido parece inalterado. Esta es la razón por la cual cuando la pelota está sumergida al 75% tiene la tensión superficial máxima que agarra la pelota. En lo que respecta a SpriteKit, puedes usar estos objetos:

   CGMutablePathRef path = CGPathCreateMutable();
   CGPathMoveToPoint(path, NULL, 0, 0);
   CGPathAddQuadCurveToPoint(path, NULL, 50, 100, 100, 0);
   CGPathAddLineToPoint(path, NULL, 50, -100);
   CGPathCloseSubpath(path);
   
   SKShapeNode *shape = [[SKShapeNode alloc]init];
   shape.path = path;

Luego, detecte cuándo la bola está en el exterior del fluido utilizando el producto vectorial cruzado con vectores 3D, incluso si su proyecto está en 2D.

 Ball Vector (Vb)
    ^
    |
(V) O--->  Closest Fluid Surface Vector (Vs)

V = Vb x Vs

Luego mira el componente Z de V llamado Vz. Si (Vz <0), la bola está fuera del fluido: crea una variable t:

t = distOfBall/radiusOfBall

Luego, por cada punto ordenado en sus formas fluidas haga lo siguiente:

newFluidPointX = F1pointX*(t-1) + F2pointX*t
newFluidPointY = F1pointY*(t-1) + F2pointY*t

Si Vz> 0), la bola está dentro del fluido:

t = -(((distOfBall/radiusOfBall) + 0.5)^2)  *4 + 1
newFluidPointX = F2pointX*(t-1) + F3pointX*t
newFluidPointY = F2pointY*(t-1) + F3pointY*t

Esto funciona porque cualquier dos formas se pueden combinar utilizando la interpolación. El parámetro "t" actúa como un porcentaje para combinar entre dos formas.

De hecho, puede crear combinaciones perfectas entre dos formas cualquiera, siempre que el número de puntos sea el mismo. Así es como un hombre se transforma en lobo en las películas de Hollywood, o cómo un hombre puede transformarse en un charco líquido. El único principio en juego para esos efectos es la interpolación. La interpolación es una herramienta muy poderosa. Se define como:

    L = A*(t-1) + B*t
    where t is in between 0.0 and 1.0
    and A and B is what you are morphing from and to.

Para obtener más información sobre la interpolación, consulte: Artículo de Wiki

Para estudio adicional. Si está considerando animar formas dinámicas, consideraría comprender las curvas de Bezier. Pomax tiene un maravilloso artículo sobre el tema. Aunque muchos frameworks tienen curvas, tener una comprensión general de cómo funcionan le permitirá manipularlos extensivamente o desplegar sus propias funciones donde falta el framework. Ella es el artículo de Pomax:

Una cartilla en curvas

Buena suerte en tu progreso :)