¿Qué Es El Nine Slicing?

El Nine slicing (también conocido como 9-patch) es una técnica de diseño que se utiliza para crear imágenes escalables y adaptables a diferentes tamaños de pantalla.

Con esta técnica puedes adaptar los elementos de interfaz gráfica a diferentes tamaños de pantalla sin perder calidad.

¿Cómo Funciona El Nine Slicing ?

Para usar esta técnica, debemos tener una imagen que podamos dividir en 9 secciones iguales.

Aquí las 4 esquinas amarillas siempre permanecerán fijas.

Mientras que los bordes rojos y morados, además del centro, se podrán estirar o encoger, sin distorsionar las esquinas.

MÚLTIPLOS DE 3

Como pudimos ver en el ejemplo anterior, es recomendable que tus imágenes sean de un tamaño que se pueda dividir entre 3, para evitar errores al usar la técnica 9-patch

Por eso aquí tienes algunos tamaños, que se pueden dividir entre 3

3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54, 57, 60, 63, 66, 69, 72, 75, 78, 81, 84, 87, 90, 93, 96, 99, 102, 105, 108, 111, 114, 117, 120, 123, 126, 129, 132, 135, 138, 141, 144, 147, 150

En negrita están los más utilizados, pero tú puedes usar los que mejor se adapten a tus necesidades

Nine Slicing en Godot Engine usando el nodo NinePatchRect

Ahora que sabes como funciona el 9-patch puedes intentar usarlo en el Curso de nodos en Godot aquí te dejamos el link donde usamos el nodo NinePatchRect con Godot

https://godot.land/courses/nodos-en-godot-4/clase/nodo-ninepatchrect/

Video sobre el Nine Slicing y 9-patch

Si no lo entendiste bien, aquí tienes una prueba del curso de nodos, donde usamos esta técnica.

En resumen

Esta técnica es muy utilizada en la creación de interfaces de usuario para dispositivos móviles y videojuegos y con esta técnica puedes evitar tener imágenes que se vean mal al ser escaladas a diferentes tamaños.

Si quieres aprender más técnicas utilizadas en los videojuegos, no olvides visitar nuestras redes sociales y dejarnos un comentario con las dudas que tengas.