viernes, 25 de julio de 2014

Embellece tu juego 2D - Self-Shadowing

Existen varias técnicas para que una textura de 2 dimensiones proyecte sombras en tiempo real sobre sí misma. Las técnicas más rápidas hacen uso de mapas de horizonte pero es menos precisa y genera más artefactos que la implementación que voy a presentar aquí. Esta implementación es computacionalmente muy pesada pero, asumiendo que en un juego 2D tenemos una carga de GPU relativamente baja y que somos un poco putilla gráfica y tenemos hardware puntero, puede llegar a ser viable en una aplicación interactiva; sobretodo si nuestro motor gráfico trabaja con deferred rendering.

martes, 15 de julio de 2014

Embellece tu juego 2D - Bloom

El efecto bloom queda genial en escenas de alto contraste de colores; y nuestro juego seguro que tiene una preciosa paleta de colores a la que le quedaría de maravilla.

Ejemplo de bloom:


La técnica implica varios pasos a seguir:

1) Obtener en una textura únicamente los pixeles más luminosos de la imagen.
2) Aplicarle un desenfoque gausiano (vertical y horizontal)
3) Combinar el resultado de la imagen desenfocada con la imagen original usando additive blending.

Todo esto lo realizamos con una resolución pequeña para mejorar el rendimiento puesto que no nos hace falta tanta precisión.

Profundizando en CSS. Selectores

Llevo una temporada intentado retomar el diseño web para cubrir, por una parte, ciertas inquietudes profesionales, y por otra, una serie de trabajos, de esos sin remuneración, a los que "obligan" los consabidos lazos afectivos. En la parte más temprana de mi recorrido profesional hice algunas modestas webs, pero me quedé en la maquetación con frames y tablas. Lo de maquetar una página con etiquetas div es una chulada, pero me parece una temeridad sin una buenísima planificación de estilos, por eso las posibilidades que se me están revelando con CSS me llevan a pensar que un día podría llegar a ser el Harry Potter del diseño web (sic)... En fin, coñas a parte, hay por ahí auténticas virguerías hechas -sólo- con HTML y CSS, y merece la pena profundizar un poco más en sus posibilidades.

Hace ya algún tiempo publicamos en este blog una pequeña guía con algunos conceptos básicos de CSS. En ella se decía que la sintaxis general de CSS se componía de selectores y sus correspondientes declaraciones de estilos o bloques de estilo. Hoy vamos a profundizar en los selectores.

martes, 8 de julio de 2014

Embellece tu juego 2D - Specular Highlight

Specular Highlight es el brillo que aparecen en los objetos cuando la luz incidente es reflejada directamente hacia nuestros ojos.

La propuesta, a bote pronto, es sencilla: Calcular el vector de "rebote" de la luz y hacer el dot product con el vector de la vista; mientras menor sea el ángulo entre estos 2 vectores, más brillo vamos a apreciar.


L es el vector de dirección de la luz (invertido), N es el vector normal del pixel (sacado del normal map), V es la vista (o cámara), H es el Half Vectror que yo no voy a usar porque es más preciso utilizar el vector de la luz reflejado (R).

martes, 1 de julio de 2014

Embellece tu juego 2D - Point Light

La técnica de normal mapping del post anterior queda muy bien, pero nos falta mejorar un poco el punto de luz creado para iluminar la textura. De momento el punto de luz ilumina toda la textura al completo pero es probable que en nuestro motor gráfico necesitemos definir un punto de luz con un rango finito. Para ello, vamos a añadirle la atenuación.