Introducción al 2D

Las herramientas de desarrollo de juegos 2D de Godot incluyen un motor de renderizado 2D dedicado, un sistema de físicas y características diseñadas específicamente para crear experiencias en 2D. Puedes diseñar niveles de forma eficiente con el sistema de TileMap, animar personajes usando sprites 2D o animación tipo Cutout, y aprovechar la iluminación 2D para iluminar dinámicamente tus escenas. El sistema de partículas 2D integrado permite crear efectos visuales complejos, y Godot también admite shaders personalizados para mejorar tus gráficos. Estas funciones, combinadas con la accesibilidad y flexibilidad de Godot, ofrecen una base sólida para crear juegos 2D atractivos.

Demostración de plataforma 2D disponible en la Librería de Assets.

Esta página le mostrará el espacio de trabajo 2D y cómo puede conocerlo.

Truco

Si deseas obtener una introducción al 3D, véase Introducción al 3D.

Espacio de trabajo 2D

Utilizará el espacio de trabajo 2D para trabajar con escenas 2D, diseñar niveles o crear interfaces de usuario. Para acceder al espacio de trabajo 2D, puede seleccionar un nodo 2D del árbol de escenas o usar el selector de espacio de trabajo ubicado en la parte superior del editor:

Al igual que en 3D, puedes usar las pestañas debajo del selector de espacio de trabajo para cambiar entre las escenas abiertas o crear una nueva con el botón más (+). Los botones izquierdo y derecho le resultarán familiares de editor introduction.

Debajo del selector de escena se encuentra la barra de herramientas principal, y debajo de la barra de herramientas principal se encuentra la ventana gráfica 2D.

Puedes arrastrar y soltar nodos compatibles desde el panel Sistema de archivos para añadirlos al viewport como nodos. Al arrastrar y soltar, el nodo arrastrado se añade como hermano del nodo seleccionado (si el nodo raíz está seleccionado, se añade como hijo). Mantener pulsada la tecla Mayús al soltar el nodo lo añade como hijo del nodo seleccionado. Mantener pulsada la tecla Alt al soltar el nodo lo añade como hijo del nodo raíz. Si se mantiene pulsada la tecla Alt + Mayús al soltar el nodo, se puede seleccionar el tipo de nodo, si es posible.

Main toolbar

Algunos botones de la barra de herramientas principal son los mismos que los del espacio de trabajo 3D. Se ofrece una breve explicación con el acceso directo si se mantiene el cursor sobre un botón durante un segundo. Algunos botones pueden tener funciones adicionales si se pulsa otra tecla. A continuación, se ofrece un resumen de la funcionalidad principal de cada botón con su acceso directo predeterminado, de izquierda a derecha:

• Modo de Selección (Q): Permite seleccionar nodos en el viewport. Al hacer clic izquierdo sobre un nodo en el viewport, se lo selecciona. Si hace clic izquierdo y arrastra, se dibuja un rectángulo de selección que al soltar selecciona todos los nodos dentro de sus límites. Si mantiene presionada la tecla Mayús mientras selecciona, se agregan los nodos a la selección previa. Si hace clic en un nodo ya seleccionado mientras presiona Mayús, el nodo se deselecciona. En este modo, puede arrastrar el o los nodos seleccionados para moverlos, puede presionar Ctrl para activar temporalmente el modo de rotación. Se pueden usar los círculos rojos para escalar sólo un nodo a la vez. En este modo, tanto la rotación como el escalado no usarán las opciones de ajuste ("snapping"), incluso si están activadas.

• Modo de Movimiento (W): Activa el modo de movimiento (o traslación) para los nodos seleccionados. Véase Viewport 2D para más detalles.

• Modo de Rotación (E): Habilita el modo de rotación para los nodos seleccionados. Véase Viewport 2D para más detalles.

• Modo de Escala (S): Habilita el escalado y muestra los dispositivos de escalado en ambos ejes para los nodos seleccionados. Véase Viewport 2D para más detalles.

• Mostrar lista de nodos seleccionables en la posición en la que se hizo clic: Como se sugiere la descripción, esto proporciona una lista de nodos seleccionables en la posición en la que se hizo clic como un menú contextual, si hay más de un nodo en el área en la que se hizo clic.

• Rotation pivot: Sets the rotation pivot to rotate node(s) around. An added node has its rotation pivot at x: 0, y: 0, by default, with exceptions. For example, the default pivot for a Sprite2D is its center if the centered property is set to true. If you would like to change the rotation pivot of a node, click this button and choose a new location by left clicking. The node rotates considering this point. If you have multiple nodes selected, this icon will add a temporary pivot to be used commonly by all selected nodes. Pressing Shift and clicking this button will create the pivot at the center of selected nodes. If any of the snap options are enabled, the pivot will also snap to them when dragged.

• Pan Mode (G): Allows you to navigate in the viewport without accidentally selecting any nodes. In other modes, you can also hold Space and drag with the left mouse button to do the same.

• Modo de Regla: Una vez habilitado, haz clic en el área de trabajo (viewport) para visualizar las coordenadas globales actuales en los ejes x e y. Al arrastrar desde una posición hacia otra, se mide la distancia en píxeles. Si arrastra en diagonal, se dibujará un triángulo que mostrará las distancias por separado en los ejes x, y, y la distancia total hasta el punto de destino, incluyendo los ángulos con respecto a los ejes en grados. La tecla R activa el modo regla. Si el ajuste de cuadrícula (snapping) está habilitado, también se mostrarán las medidas en cantidad de unidades de la cuadrícula:

Usar la regla con el ajuste habilitado.

• Usar Ajuste Inteligente: Activa o desactiva el ajuste inteligente para los modos de movimiento, rotación y escala, así como el pivote de rotación. Personalícelo con el menú de tres puntos junto a las herramientas de ajuste.

• Usar Ajuste de Cuadrícula: Activa o desactiva el ajuste a la cuadrícula para los modos de movimiento y escala, rotación y la regla. Personalícelo con el menú de tres puntos junto a las herramientas de ajuste.

Puedes personalizar la configuración de la cuadrícula para que los modos de movimiento, rotación, escala, regla y pivote de rotación utilicen el ajuste. Usa el menú de tres puntos para ello:

• Usar Ajuste de Rotación: Activa o desactiva el ajuste de rotación según la configuración establecida.

• Usar Ajuste de Escala: Activa o desactiva el ajuste según el valor de incremento configurado para la escala.

• Ajuste Relativo: Activa o desactiva el uso del ajuste en función de los valores actuales de transformación del nodo seleccionado. Por ejemplo, si las cuadrículas están configuradas a 32x32 píxeles y el nodo seleccionado se encuentra en x: 1, y: 1, entonces, al habilitar esta opción, las cuadrículas se desplazarán temporalmente a x: 1, y: 1.

• Usar Ajuste de Píxeles: Activa o desactiva el uso de subpíxeles para el ajuste. Si está habilitado, los valores de posición serán números enteros; si está deshabilitado, se permitirá el movimiento por subpíxeles con valores decimales. Para la propiedad en tiempo de ejecución, considera revisar la opción Configuración del Proyecto... > Renderizado > 2D > Ajuste para los nodos Node2D, y Configuración del Proyecto... > GUI > Común > Ajustar Controles a Píxeles para los nodos Control.

• Ajuste Inteligente: Proporciona un conjunto de opciones para ajustar a posiciones específicas si están habilitadas:

  • Ajustar al Padre: Se ajusta a los bordes del elemento principal. Por ejemplo, al escalar un nodo de control secundario con esta opción habilitada, se ajustará a los límites del elemento principal.

  • Ajustar al Ancla de Nodo: Ajusta al ancla del nodo. Por ejemplo, si los anclajes de un nodo de control están ubicados en diferentes posiciones, al activar esta opción, se ajustarán a los lados y esquinas del ancla.

  • Ajustar a los Lados del Nodo: Se ajusta a los lados del nodo, como para el pivote de rotación o la posición del anclaje.

  • Ajustar al Centro del Nodo: Se ajusta al centro del nodo, como para el pivote de rotación o la posición del anclaje.

  • Ajustar a Otros Nodos: Se ajusta a otros nodos al mover o escalar. Útil para alinear nodos en el editor.

  • Ajustar a las Guías: Ajusta a guías personalizadas dibujadas con la regla horizontal o vertical. Más información sobre la regla y las guías a continuación.

• Configurar Ajuste: Abre la ventana que se muestra arriba, ofreciendo un conjunto de parámetros de ajuste.

  • Offset de Cuadrícula: Permite desplazar las cuadrículas con respecto al origen. x e y se pueden ajustar por separado.

  • Paso de Cuadrícula: La distancia entre cada cuadrícula en píxeles. x e y se pueden ajustar por separado.

  • Línea Principal Cada: La cantidad de cuadrículas intermedias para dibujar líneas infinitas como indicación de líneas principales.

  • Offset de Rotación: Establece el desplazamiento para cambiar el ajuste rotacional.

  • Paso de Rotación: Define el ajuste en grados. Por ejemplo, 15 significa que el nodo rotará y se ajustará en múltiplos de 15 grados si el ajuste de rotación está habilitado y se utiliza el modo de rotación.

  • Pasos de Escalado: Determina el factor de incremento de escala. Por ejemplo, si se deja en 0.1, cambiará la escala en pasos de 0.1 si el ajuste de escala está habilitado y se utiliza el modo de escala.

• Bloquear Nodo(s) Seleccionado(s) (Ctrl + L). Bloquea los nodos seleccionados, impidiendo su selección y movimiento en el viewport. Al volver a hacer clic en el botón (o usar Ctrl + Mayús + L), se desbloquean los nodos seleccionados. Los nodos bloqueados solo se pueden seleccionar en el árbol de escenas. Se identifican fácilmente por un candado junto a sus nombres en el árbol de escenas. Al hacer clic en este candado, también se desbloquean los nodos.

• Agrupar Nodos Seleccionados (Ctrl + G). Esto permite seleccionar el nodo raíz si alguno de los secundarios está seleccionado. Usar Ctrl + G los desagrupa. Además, al hacer clic en el botón de desagrupar en el árbol de escenas se realiza la misma acción.

• Opciones de Esqueleto: Proporciona opciones para trabajar con Skeleton2D y Bone2D.

  • Mostrar Huesos: Alterna la visibilidad de los huesos para el nodo seleccionado.

  • Crear Nodo(s) Bone2D a partir de Nodo(s): Convierte los nodos seleccionados en Bone2D.

Ver también

Para obtener más información sobre los esqueletos, véase Animación de cortes.

• Menú Ver: Ofrece opciones para controlar la vista del viewport. Dado que sus opciones dependen en gran medida del viewport, se explica en la sección Viewport 2D.

Junto al menú Ver, pueden verse botones adicionales. En la imagen de la barra de herramientas al principio de este capítulo, aparece un botón adicional Sprite2D porque se ha seleccionado un Sprite2D. Este menú ofrece acciones rápidas y herramientas para trabajar en un nodo o selección específicos. Por ejemplo, al dibujar un polígono, ofrece botones para agregar, modificar o eliminar puntos.

Sistema de Coordenadas

En el editor 2D, a diferencia del 3D, solo hay dos ejes: x y y. Además, el ángulo de visión es fijo.

En la ventana gráfica, verá dos líneas de dos colores que recorren la pantalla infinitamente: rojo para el eje x y verde para el eje y. En Godot, ir hacia la derecha y hacia abajo son direcciones positivas. La intersección de estas dos líneas es el origen: x: 0, y: 0.

Un nodo raíz tendrá su origen en esta posición una vez añadido. Al cambiar a los modos de Movimiento o de Escala después de seleccionar un nodo, se mostrarán los gizmos en la posición de desplazamiento del nodo. Los gizmos apuntarán a las direcciones positivas de los ejes x e y. En el modo de movimiento, puede arrastrar la línea verde para moverse solo en el eje y. De igual forma, puede mantener presionada la línea roja para moverse solo en el eje x.

En el modo de escala, los gizmos tendrán forma cuadrada. Puedes mantener presionados y arrastrar los cuadrados verde y rojo para escalar los nodos en los ejes y o x. Arrastrar en sentido negativo voltea el nodo horizontal o verticalmente.

Viewport 2D

El viewport será el área donde pasará la mayor parte del tiempo si planea diseñar niveles o interfaces de usuario visualmente:

Al hacer clic con el botón central del ratón y arrastrar, se desplazará la vista. Las barras de desplazamiento a la derecha o a la parte inferior del viewport también permiten mover la vista. Como alternativa, se pueden usar las teclas G o Espacio. Si habilita Configuración del Editor > Editores > Desplazamiento > Paneo Simple, puede activar el desplazamiento directamente con Espacio, sin necesidad de arrastrar.

El viewport tiene botones en la esquina superior izquierda. Centrar Vista centra el/los nodo(s) seleccionado(s) en la pantalla. Resulta útil si tiene una escena grande con muchos nodos y desea ver el nodo seleccionado en el árbol de escenas. Junto a él se encuentran los controles de zoom. - reduce el zoom, + amplía el zoom y, al hacer clic en el número con el porcentaje, se restablece al valor predeterminado de 100 %. Alternativamente, puedes usar la rueda central del ratón para ampliar (girar hacia arriba) o reducir (girar hacia abajo).

Las barras negras en los bordes izquierdo y superior del viewport son las reglas, puedes usarlas para orientarse. Por defecto, las reglas muestran las coordenadas en píxeles, numeradas en incrementos de 100 píxeles. Al cambiar el factor de zoom, se modificarán los valores mostrados. Al activar Ajuste de Cuadrícula o cambiar las opciones de ajuste, se actualizará la escala de la regla y los valores mostrados.

También puedes crear varias guías personalizadas para ayudarle a realizar mediciones o alinear nodos con ellas:

Si tienes al menos un nodo en la escena, puedes crear guías arrastrando desde la regla horizontal o vertical hacia el viewport. Aparecerá una guía morada indicando su posición y permanecerá allí al soltar el ratón. Puedes crear guías horizontales y verticales simultáneamente arrastrando desde el cuadrado gris en la intersección de las reglas. Las guías se pueden reposicionar arrastrándolas desde sus respectivas reglas, y se pueden eliminar arrastrándolas completamente sobre la regla paralela a ella.

También puedes habilitar el ajuste a las guías creadas mediante el menú Ajuste Inteligente.

Nota

Si no puedes crear una línea o no ves las guías creadas previamente, asegúrate de que estén visibles consultando el menú Ver del viewport. La tecla Y activa o desactiva su visibilidad por defecto. Además, asegúrate de tener al menos un nodo en la escena.

Según la herramienta seleccionada en la barra de herramientas, hacer clic con el botón izquierdo tendrá una acción principal en el viewport. Por ejemplo, el Mode de Selección seleccionará el nodo sobre el que se hizo clic con el botón izquierdo. A veces, hacer clic con el botón izquierdo puede combinarse con un modificador (p. ej., Ctrl o Mayús) para realizar acciones secundarias. Por ejemplo, mantener pulsada la tecla Mayús mientras se arrastra un nodo en los modos de selección o movimiento intentará ajustar el nodo en un solo eje mientras se mueve.

Al hacer clic derecho en el viewport, se ofrecen dos opciones: crear un nodo o instanciar una escena en la posición elegida. Si hay al menos un nodo seleccionado, al hacer clic derecho también se puede mover el nodo o los nodos seleccionados a esa posición.

El viewport tiene un menú Ver que proporciona varias opciones para cambiar el aspecto del viewport:

• Cuadrícula: Permite mostrar las cuadrículas siempre, solo al usar el ajuste o no mostrarlas. También puedes alternarlas con la opción proporcionada.

• Mostrar Ayudantes: Activa o desactiva la visualización temporal del contorno del nodo, con las propiedades de transformación anteriores (posición, escala o rotación) si se ha iniciado una operación de transformación. Para los nodos de Control, también muestra los parámetros de tamaño. Resulta útil para ver las diferencias.

• Mostrar reglas: Alterna la visibilidad de las reglas horizontales y verticales. Véase Viewport 2D para obtener más información sobre las reglas.

• Mostrar guías: Activa o desactiva la visibilidad de las guías creadas. Véase Viewport 2D para saber cómo crearlas.

• Mostrar origen: Alterna la visualización de las líneas de origen verde y roja dibujadas en x: 0, y: 0.

• Mostrar Viewport: Activa o desactiva la visibilidad del viewport predeterminado del juego, indicado por un rectángulo color índigo. También es el tamaño de ventana predeterminado en las plataformas de escritorio, que se puede modificar en Configuración del Proyecto... > Visualización > Pantalla > Ventana > Tamaño y configurando Ancho del Viewport y Alto del Viewport.

• Gizmos: Alterna la visibilidad de los indicadores Posición (mostrado con un icono de cruz), Bloquear (mostrado con un candado), Grupo (mostrado con dos cuadrados) y Transformación (mostrado con líneas verdes y rojas).

• Centrar Selección: Igual que el botón Centrar Vista dentro del viewport. Centra el o los nodos seleccionados en la vista. La tecla F es el acceso rápido predeterminado.

• Marco a Selección: similar a Centrar Selección, pero también cambia el factor de zoom para ajustar el contenido a la pantalla. El acceso rápido predeterminado es Mayús + F.

• Clear Guides: Deletes all guides from the screen. You will need to recreate them if you plan to use them later.

• Previsualizar Escala de Canvas: Activa o desactiva la vista previa del lienzo en el editor al cambiar el zoom o la vista del viewport. Útil para ver cómo se verán los controles después de escalarlos y moverlos, sin necesidad de ejecutar el juego.

• Vista Previa del Tema: Permite elegir entre los temas disponibles para cambiar la apariencia de los elementos de control en el editor, sin necesidad de ejecutar el juego.

Node2D and Control node

CanvasItem is the base node for 2D. Node2D is the base node for 2D game objects, and Control is the base node for everything GUI. For 3D, Godot uses the Node3D node.

3D en 2D

Es posible visualizar escenas 3D en una pantalla 2D. Puedes verlo en la demostración 3D en viewport 2D.