2012-04-26 12 views
8

Estoy trabajando en un fondo de pantalla en vivo que incorpora algunos efectos de ondulación del agua al tocar la pantalla, pero estoy un poco atascado.Fondo de pantalla en vivo Efecto de ondulación del agua

¿Sería mejor crear varias imágenes y recorrerlas para crear una animación de onda o sería mejor distorsionar un poco el mapa de bits antes de colocarlo en el lienzo?

This es un video de un muy buen efecto dominó hecho a través de OpenGL.

No tengo ninguna experiencia con OpenGL y me preguntaba si todavía es posible crear un efecto de agua 2D en el fondo de pantalla en vivo?

+0

Uno de los incorporada en los fondos de pantalla en vivo en Android está rizando el agua, por lo que es ciertamente posible. – Wyzard

Respuesta

16

yo quería implementado un efecto de onda realista en Android también, así que va a compartir mi experiencia:

Como una implementación de referencia i tomó puerto Chikuyonok JavaScript de Sergey de Neil Wallis Java algo. Aquí hay un campo de juego donde puedes experimentar con el código JS original: http://jsfiddle.net/esteewhy/5Ht3b/6/

Al principio, he portado el código JS a Java solo para darme cuenta de que no hay forma de exprimir más de 1 fps en mi hardware Huawei U8100. (Hay varios intentos similares en la red con la única conclusión: son ridículamente lentos).

Por cierto, esta respuesta SO fue bastante útil para obtener una comprensión básica de cómo codificar gráficos interactivos en Android: https://stackoverflow.com/a/4946893/35438. He tomado prestado el contador de fps desde allí.

Luego decidí probar Android NDK para reimplementar algo original en C puro (¡mi primer encuentro con él en más de 10 años!). A pesar de que los documentos de NDK son un poco confusos (especialmente en cuanto a requisitos y requisitos previos), todo funcionó como un hechizo, así que pude lograr hasta 30 fps; puede que no sea demasiado impresionante, pero aún así, una mejora radical respecto al código Java .

Finalmente, he puesto todo mi trabajo en línea: https://github.com/esteewhy/whater, así que siéntete libre de jugar con eso.Contiene:

  1. código de bola que rebota interactivo mencionado arriba (apenas para la referencia).
  2. Ondulaciones del agua Puerto de Java (lento como el infierno!)
  3. Aplicación de las ondulaciones de agua C (necesita NDK para compilar y JDK para crear el archivo .h).

(El proyecto no es "limpia", es decir: todos los binarios están ahí, por lo que se pueden tratar de ejecutarlo "tal cual" incluso sin NDK.)

enter image description here

+0

¿Puede decirme cómo puedo cambiar el fondo de mi imagen en su código? Cuando lo intenté, tengo NullPointerException Gracias – metalink

4

No soy un experto en esto, pero creo que la forma típica de hacer efectos de agua en OpenGL es con un sombreador de fragmentos. Con una imagen estática como textura, el sombreador puede variar las coordenadas de textura utilizadas para muestrear esa imagen, para distorsionarla de manera arbitraria.

Calcule la dirección del píxel y la distancia desde el centro del círculo, y ajuste la coordenada de textura hacia o desde el centro del círculo basándose en una función sinusoidal de la distancia, y obtendrá un efecto de onda agradable.

A juzgar por la descripción de ese video de YouTube que vinculó, parece que se hace usando una cuadrícula de triángulos y ajustando las coordenadas de la textura solo en los vértices. Eso debería funcionar también, pero no se verá tan bien a menos que use una cuadrícula bastante fina. Hacerlo por píxel con un sombreador de fragmentos es lo ideal, pero no sé si eso causaría problemas de rendimiento en la GPU de un teléfono.

+0

¿Conoces algún posible ejemplo de cómo hacer algo como esto en OpenGL? – Gatekeeper

+0

No fuera de servicio, lo siento. Si eres nuevo en OpenGL, te recomendaría aprender sobre los sombreadores de fragmentos y el muestreo de texturas en general, y una vez que los comprendas, * entonces * preocúpate por usarlos para crear ondas. – Wyzard

6

puede encontrar un ejemplo de un efecto dominó toque aquí:

https://github.com/MasDennis/RajawaliExamples

Utiliza el marco Rajawali OpenGL ES/biblioteca. Puede descargar la aplicación de ejemplos rajawali del mercado para ver cómo se ve. Examine la carpeta "src" y verá la actividad y el renderizador TouchRippleEffect. Espero que ayude.

+0

He descargado el ejemplo Rajawali de playstore. En ese 27 es el efecto de onda táctil, pero cuando ejecuto el código fuente, la pieza se comenta ... Tengo una línea inferior en mi código fuente ... org.rajawali3d: rajawali: [email protected] ¿Alguien puede ayudar para resolver este problema –

Cuestiones relacionadas