En este tutorial vamos a echar un vistazo a lo que parece ser el tema favorito de todos, los gráficos. Vamos a empezar creando un Sprite. Un Sprite es básicamente una imagen 2D con información espacial como escala, rotación y posición. Luego vamos a echar un vistazo más de cerca a las coordenadas y las ventanas gráficas, conceptos críticos para entender.
La versión en video de este el tutorial está disponible aquí.
Crear un objeto
Comience creando un nuevo nodo en su panel de escena.
Localice y cree un nodo «Sprite» en el cuadro de diálogo resultante:
Ahora necesita un archivo de imagen para usar como Sprite. Simplemente puede copiar uno en la estructura de carpetas de su proyecto en el nivel del sistema de archivos, pero en este caso voy a usar el menú Importar. Seleccione Importar->Textura 2D:
Ubique el archivo (no tiene que estar en el directorio de su proyecto) y elija dónde desea que esté ubicado localmente, así:
Una vez más, no tiene que importar de esta manera, ¡simplemente podría haber copiado los archivos en el directorio de su proyecto!
Ok, ahora que tenemos una imagen, usémosla con nuestro Sprite. Con el Sprite seleccionado, en el panel Inspector localice Textura, suéltela y seleccione Cargar.
Seleccione su textura 2D recién importada.
Ahora, en su vista 2D, verá su sprite posicionado centrado sobre el origen de la pantalla:
Navegación por la vista 2D
Ahora podría ser un buen momento para hacer una descripción general rápida de cómo funciona la vista 2D. Comencemos mirando la vista 2D en sí
(Click en la imagen para ampliar)
Aquí es donde colocas y manipulas los nodos que conforman tu mundo. Como puede ver, el eje X está marcado en rojo y el eje Y está marcado en verde. Donde los dos se unen, ese es el origen del mundo. En este ejemplo particular, la ventana gráfica (rectángulo azul) está en el cuadrante Y negativo y X positivo. Sin embargo, el posicionamiento de los nodos secundarios es relativo a su padre, por lo que nuestro sprite 0,0 parece ser la esquina superior izquierda de la pantalla.
El objeto seleccionado está rodeado por una jaula de manipulador. Esto se puede usar para escalar fácilmente la imagen, mientras que hacer clic izquierdo y arrastrar dentro de la jaula moverá el nodo seleccionado. Recuerde que también puede configurar numéricamente la información de posicionamiento en el Inspector. Puede cambiar al modo Rotar para rotar un objeto, los objetos rotan en relación con su punto central. La panorámica, por otro lado, le permite mover la cámara, lo que le permite «panear» a través de su mundo.
Controles del ratón:
| Botón | Acción |
|---|---|
| Clic con el botón izquierdo del ratón | Seleccione el nodo en el que se hizo clic |
| Botón izquierdo del ratón Hacer clic + Arrastrar | Traducir o Rotar seleccionado |
| Botón central del ratón | Panorámica de la escena |
| Rueda de desplazamiento | Acercar / alejar |
Controles de teclado
| Llave | Acción |
|---|---|
| q | Seleccionar modo |
| W | Modo Traducir/Mover |
| mi | Modo de rotación |
| Teclas de flecha | Mover seleccionado, muy fino |
| Mayús + Teclas de flecha | Mover seleccionado |
| ESC | Deseleccionar |
| F1 | Panel de ayuda |
| F | Centrar cámara en seleccionado |
| Control + F | Encuadre la cámara (Zoom para ajustar) en Seleccionado |
| Ctrl + P | Expandir al padre del nodo seleccionado |
| V (mantener) | Mover punto de pivote |
chasquido
Algunas veces, el chasquido puede ser increíblemente útil al diseñar una escena. Ajustar esencialmente impone una cuadrícula sobre su escena y «ajusta» lo seleccionado a esa cuadrícula. Para habilitar el ajuste, simplemente seleccione Usar ajuste en el menú Editar.
Usando Configure Snap puede establecer el tamaño de cada cuadrícula en la superposición de ajuste. Ahora tu escena se verá así:
¡Tenga en cuenta que esta cuadrícula solo está ahí para ayudarlo con la ubicación precisa! No aparecerá cuando renderices tu juego. Apáguelo nuevamente haciendo clic en Usar Snap nuevamente. Si está trabajando en un juego basado en mosaicos, el ajuste puede ser invaluable.
Rotar, traducir y escalar un sprite usando código
Eso cubre cómo agregar un Sprite a su mundo y cómo navegar por la vista 2D, echemos un vistazo rápido a las tres acciones más comunes… traducir (mover), escalar y rotar. El siguiente código hace los tres:
extends Sprite
func _ready():
#translate to center of the parent, in this case, the viewport
var newPos = Vector2(self.get_parent().get_rect().size.width/2,self.get_parent().get_rect().size.height/2)
self.set_pos(newPos)
#rotate by 90 degrees. set_rot takes radians so we need to convert using in-built function
self.set_rot(deg2rad(90))
#scale by 2x
self.set_scale(Vector2(2,2))
func _draw():
# each frame draw a bounding rect to show boundaries clearer
self.draw_rect(self.get_item_rect(),Color(0,0,1,0.2))
Y cuando ejecutes eso, deberías ver:
Tenga en cuenta que a menudo uso auto porque creo que agrega un poco de claridad y, francamente, facilita la finalización del código. En el código anterior, «self» es la clase heredada «Sprite». Si prefiere un código más corto, puede omitir el uso de self y es funcionalmente idéntico.
Una cosa importante para entender es que todas estas transformaciones ocurrieron en relación con el punto de pivote del Sprite, que por defecto está en su centro. Si hace zoom en su objeto Sprite, debería poder ver el punto de pivote:
Es la T como una cruz. Este punto determina dónde se producen las transformaciones locales en relación con. Por ejemplo, cuando dice «girar 90 grados», está girando 90 grados alrededor de este punto. En el editor 2D, puede mover este punto (o más exactamente, mover el Sprite relativo a este punto), manteniendo presionada la tecla V mientras se mueve.
Aquí, por ejemplo, presioné W y luego arrastré el botón izquierdo para mover el sprite ligeramente. Luego mantuve presionada V y moví solo el sprite y no el punto de pivote, así:
Ahora, si ejecuto el mismo código, verá que las transformaciones se realizan en relación con este punto en lugar del medio:
Este valor también se puede controlar en el Inspector. Se llama el desplazamiento y es un valor relativo al punto central del Nodo:
O puede cambiar el desplazamiento en el código. Por ejemplo, para convertir el pivote en la esquina inferior izquierda del Sprite, podría hacer lo siguiente:
func _ready(): var newOffset = Vector2(self.get_item_rect().size.width/2, -self.get_item_rect().size.height/2) self.set_offset(newOffset)
Con el siguiente resultado:
Entonces, un resumen rápido… Los nodos secundarios se colocan en relación con sus padres y el nodo de nivel superior es la ventana gráfica. Todas las transformaciones ocurren en relación con el desplazamiento de un objeto, ese desplazamiento es relativo al centro del objeto, que por defecto es el punto medio del Nodo.
Un poco sobre las ventanas gráficas
Deberíamos detenernos un poco para discutir la ventana gráfica, es un concepto crítico en los gráficos. Como puede notar en las capturas de pantalla anteriores, la ventana gráfica se dibuja como un rectángulo azul, con su esquina superior izquierda en 0,0 en el espacio 3D. De forma predeterminada en Godot 2D, el nodo raíz es una ventana gráfica, por lo que podemos acceder a él usando get_parent() desde nuestro nodo de sprite. Entonces, ¿dónde se establecen exactamente las dimensiones de esta ventana gráfica? ¡Buena pregunta!
En el menú Escena, seleccione Configuración del proyecto. Aparece el siguiente cuadro de diálogo (aquí es donde configuramos la escena predeterminada anteriormente):
Estos son los ajustes relacionados con la ventana gráfica clave. Obviamente, el ancho y la altura son los que determinan las dimensiones de su ventana gráfica. Aquí también hay algunas otras configuraciones clave, como el tamaño variable y la pantalla completa, que determinan cómo funciona la ventana en una computadora de escritorio (estas configuraciones no tienen sentido en los dispositivos móviles). La orientación, por otro lado, es importante para los dispositivos móviles (horizontal frente a vertical o longitudinal frente a ancho) pero no tiene sentido en las PC. stretch_mode y stretch_aspect son útiles para manejar dispositivos de diferentes resoluciones, probablemente cubriremos esto con más detalle en una publicación separada.
Las ventanas gráficas son críticas, ya que le permiten trabajar en varios dispositivos diferentes en diferentes resoluciones utilizando el mismo código básico.
