Windows 10: Use Acrylic in Win32 Apps

So… time has come, with the Insider Build 17063 win32 apps can use acrylic blur. It’s very simple, it uses the already known SetWindowCompositionAttribute but with a little change.

There is an extra value, to use it just change from enable_blurbehind to enable_acrylic and it will work.

eclipse_2017-12-20_01-57-51

Anuncios

El sistema de ventanas de Light Engine

Cuando empece a trabajar en Voxel, allá por marzo de 2015 no tenia ni idea sobre GUIs ni apis, ni nada. Empece utilizando imágenes para representar la interfaz, todo con un aspecto que ahora me parece feo, no tenia en cuenta muchas cosas. En resumen, que no tenia una base ni siquiera una sistema.

Originalmente utilizaba LWJGL 2.9.3 y no tenia motivo para cambiarme hasta que encontré una librería llamada NanoVG, que se utiliza para renderizar usando vectores y me llamo la atención, el problema, solo estaba en LWJGL 3 así que empece el trabajo de portear todo y gracias a una pequeña capa de abstracción que agiliza el migrar pude hacerlo muy rápido.

Entonces revisando los demos que tenia me di cuenta que se podían hacer ventanas, como si fuera un OS. Entonces tomando esas ventanas como base diseñe mi primer interfaz basada en objetos y con eso cambie prácticamente todo; menús, botones, texto… todo era nuevo, tenia un estilo mas moderno. Este sistema utiliza componentes, puedes colocar elementos dentro de otros, no tenia todas las características de un sistema completo pero hacia su trabajo.

Voxel Menu

Voxel menu mundos

Voxel menu opciones

En la primer imagen esta el menú principal de la versión 0.0.9, en la segunda el menú de selección de mundo y en la tercera el de opciones. Aun era bastante simple y difícil de usar porque muchas partes aun estaban hardcodeadas y había que crear cada menú desde cero. Desde entonces se ve ese formato de ventanas.

Luego de eso volví a reescribir bastantes cosas, agregue soporte para alineación de componentes, hice el diseño mas plano, sin transparencias, nueva tipográfica, bastante similar al actual. Todo se volvió mas fácil de usar y podía hacer menús mas rápido.

Voxel menu principal 2

Este es el menú principal después del segundo cambio, aun conservo los mismos botones de la versión anterior.

Utilice ese sistema y estilo durante mucha parte del desarrollo, prácticamente hasta finales de 2016 (literalmente, el 30 de diciembre de 2016 abrí el issue sobre el nuevo sistema). Para ese entonces aun no tenia mucha idea de como funcionaba, que hace y demás.

En ese entonces empece a trabajar en un sistema de ventanas, no me llevo mucho tiempo para tener algo funcional.

El funcionamiento del Nano Window Manager esta pensado en que, el WM como tal solo se encarga de organizar las ventanas, llamar a las respectivas funciones para actualizar y renderizar, y proveer de funciones para obtenerlas. Las ventanas como tal se encargan de renderizar sus decoraciones y controlar todo lo relacionado a ellas.

Esa primera versión implementaba decoraciones simples, texto en la barra de titulo, botones para cerrar y maximizar, y redimensionado básico. Con esto también llego un nuevo sistema de componentes mucho mas avanzado.

Estas son todas las ventanas que pueden ser creadas.

Voxel Ventanas

En esta parte ya había movido varios menús al nuevo sistema de ventanas, se puede ver que aun conservan la misma layout que los anteriores. La funcionalidad aun es bastante limitada y hay fallos en el orden de ventanas.

Menu mundos

Aparte del Window Manager tambien tenia la intención de crear un sistema para hacer borroso lo que esta detrás de una ventana, a lo Win7 u OSX. Empece a buscar información si era posible, con NanoVG, modificar lo que esta detrás de un elemento y el resultado fue que no era posible, aun así es posible hacer algo similar separando los elementos en capas que se renderizan a un FBO para poder ser modificado. Con eso empece a trabajar en el compositor, un sistema que genera una imagen final utilizando las ventanas.

Estas son mis primeras pruebas con el sistema.

Las ventanas son las que poseen el FBO, el compositor no tiene control sobre eso, similar al resto de funcionalidades. Mi implementación presenta algunos problemas, debido a que quería ahorrar VRAM decidí usar un formato de doble FBO que en cada pasada cambia de lugar, entonces no tengo control sobre cada pasada de la imagen. El otro es que NanoVG no te da un control sobre que se renderiza a un FBO y no puedes usar Multi Render Target puesto que no puedes modificar los shaders. Entonces para el efecto de blur, lo que hago es cargar la posicion de la ventana y respecto a eso aplicar un gaussian blur a lo que se encuentra dentro, luego se mezcla el fondo borroso y la ventana usando el alpha. El problema es que no puedes definir exactamente el área donde va a estar borroso.

Voxel UI 3

El resultado fue el de arriba, ventanas con fondo borroso. En esta versión me di cuenta de algunos fallos con las decoraciones. El problema es que, el tamaño de la ventana define el contenido incluyendo las decoraciones, entonces el tamaño real es menor al que se coloca cuando la ventana se crea. En el video se puede ver el fallo, el borde no se extiende hacia afuera, si no hacia adentro.

La solución me causo varios problemas ya que tenia que cambiar como funcionaba el tamaño, el sistema de renderizado y composición. El resultado final fue el siguiente.

Voxel inicio gif

En este he rediseñado completamente la venta de opciones, ademas al final se puede ver que el borde ahora si se extiende hacia afuera. Este estilo esta inspirado en el de Win8.

Después de esto agregue la opción para cambiar el tamaño de la barra de titulo, así como la posibilidad de minimizar las ventanas.

También implemente context menus, los utilizo en la barra de titulo para dar opciones sobre maximizar, minimizar o cerrar.

Context menu

Después de eso, decidí rehacer las barras de titulo para que usaran el sistema de componentes y fueran mas fáciles de modificar. También implemente animaciones para cuando se abren, cierran o minimizan las ventanas, son bastante simples pero funcionan.

Animaciones

Termine de implementar el sistema de redimensionado y agregue opciones como: hacer doble clic en la barra de titulo para maximizar y restaurar, arrastrar la barra de titulo para restaurar. Ademas modifique el blur para que fuera mas fuerte y agregue ruido para que no pareciera algo plano. El resultado final es el actual.

Light Engine UI

Una interfaz moderna, simple y consistente.

Animes de temporada – Verano 2017

Voy a empezar este blog con un poco de anime, en este caso van a ser los animes de la temporada de verano de 2017. En el momento que escribo esto todos ya están han emitido su 5to o 6to episodio.

Clione no Akari

Este es uno de eso que no te esperas por el centro de la historia, toca el tema del bulling. Hay algo del arte que no me convence, creo que son los colores que utilizan pero no estoy seguro.

Gamers!

Este va de juegos o por lo menos gira al rededor de eso, la historia como tal es una comedia romántica (vaya, no me lo esperaba). En el resto de aspectos es lo de siempre.

Isekai Shokudou

Otro de esos que no me esperaba, este es sobre un restaurante que tiene unos clientes un poco peculiares. Cuenta las historias de varios personajes y como llegaron a encontrar el restaurante.

Isekai wa Smartphone to Tomo ni.

El clásico anime donde el protagonista muere y va a otro mundo, parece un MMORPG donde te ponen al nivel máximo con todas las habilidades y con mucho dinero. Ese es el resumen mas directo que puedo dar. Agrega a esto un harem y es un 10/10. Lo estoy viendo por los loles a ver que hacen.

Knight’s & Magic

Vaya, otro donde el protagonista muere y va a otro mundo. Este parece que tiene una historia bastante interesante pero el anime tiene un problema, van demasiado rápido, cubren mucho tiempo en pocos episodios. Por ejemplo: en la mitad del primero nos cuentan como muere y prácticamente toda la infancia en el otro mundo. Parece que bajan el ritmo en el resto pero aun así, too fast.

Koi to Uso

La historia se centra en un mundo donde te obligan a estar una persona, pero hay algunos que no están bien con eso e intentar estar con la persona que quieren aunque no sea lo correcto.

Konbini Kareshi

Un slice of life mensual, va de una tienda de conveniencia y 3 parejas, creo, parece haber mas pero no estoy seguro. Es un poco “lo de siempre” pero bueno, no tengo mas que decir.

Nana Maru San Batsu

La historia gira al rededor de un club de preguntas, nos muestra como cualquiera (cuestionable, pero bueno, lo compro) puede encontrar algo que le gusta en lo que creía que no era bueno.

Netsuzou TRap

Un NTR, no se el motivo de porque elegí este, pero bueno, los capítulos son de 10 minutos así que no pasa nada. En este hay tema así que cuidado.

New Game!!

Esta es la segunda temporada, es obligatorio ver la primera para que todo tenga sentido. En resumen, va de “game dev” así que para mi es un must watch.

Nora to Oujo to Noraneko Heart

clickbait literalmente, lo que dice la sinopsis no tiene nada que ver con el anime. Es otro corto, 3 minutos, así que tampoco hay mucho problema.

Princess Principal

Este me tiene muy interesando, va de espías. Esta ambientado en Londres del siglo 19 con toques steampunk. Muy bien animado y el estilo de dibujo cuadra con la ambientación. Los personajes son todos diferentes y desarrollan la historia de cada uno en un formato de casos. Este lo recomiendo.

Tenshi no 3P!

Si no te va lo de las lolis pasa directamente. Lo que me hizo elegir este fue el tema de la música y ya, unicamente eso. Se les va un poco de las manos el tema pero no es tan extremo.

Tsurezure Children

Estas son varias historias repartidas en episodios de 12 minutos. Me gusta un montón el diseño que utilizaron, los colores son muy vividos y tiene un toque diferente a lo de siempre.

Vatican Kiseki Chousakan

Este es de esos raros. Tiene un tema religioso pero va de resolver misterios, a lo Scooby-Doo. De momento solo se ha visto uno así que asumo que van a ser tres misterios para los 12 episodios, 4 por cada uno.

Youkoso Jitsuryoku Shijou Shugi no Kyoushitsu e

Este es otro que me interesa. La historia va de una escuela de muy alta categoría donde pocos logran entrar. Lo que me gusta es que los personajes no son los que te esperas, cada uno con sus personalidades y sin utilizar las figuras de toda la vida. En el arte le da ese ambiente de un lugar jodido (aunque no lo sea).

Aquí dejo mi opinión en un Tweet.

Y con ese termino los animes de temporada que voy a ver. Seguramente escriba un post para cada uno, comentando todos los aspectos.