Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Introdução ao 2D

As ferramentas de desenvolvimento de jogos 2D do Godot incluem uma engine de renderização 2D dedicado, sistema de física e recursos especialmente voltados para a criação de experiências 2D. Você pode projetar níveis de forma eficiente com o sistema TileMap, animar personagens com sprites 2D ou animação Cutout, e aproveitar a iluminação 2D para uma iluminação dinâmica das cenas. O sistema de partículas 2D embutido permite criar efeitos visuais complexos, e o Godot também suporta shaders personalizados para melhorar seus gráficos. Esses recursos, combinados com a acessibilidade e flexibilidade do Godot, fornecem uma base sólida para criar jogos 2D envolventes.

../../_images/2d_platformer_demo.webp

Demonstração (Demo) do jogo de plataforma 2D disponível na Biblioteca de recursos.

Esta página mostrará o espaço de trabalho 2D e como você pode conhecê-lo.

Dica

Se você gostaria de uma introdução ao 3D, veja Introdução ao 3D.

espaço de trabalho 2D

Você usará o espaço de trabalho 2D para trabalhar com cenas 2D, projetar níveis ou criar interfaces de usuário. Para alternar para o espaço de trabalho 2D, você pode selecionar um nó 2D na árvore de cenas ou usar o seletor de espaço de trabalho localizado na borda superior do editor:

../../_images/2d_editor_viewport.webp

Semelhante ao 3D, você pode usar as abas abaixo do seletor de áreas de trabalho para alternar entre as cenas atualmente abertas ou criar uma nova usando o botão de mais (+). Os painéis esquerdo e direito devem ser familiares a partir da introdução ao editor.

Abaixo do seletor de cena está a barra de ferramentas principal, e abaixo da barra de ferramentas principal está a janela de exibição 2D.

Você pode arrastar e soltar nós compatíveis do painel Sistema de Arquivos para adicioná-los à janela de exibição como nós. Arrastar e soltar adiciona o nó arrastado como um irmão do nó selecionado (se o nó raiz estiver selecionado, adiciona como filho). Manter Shift pressionado ao soltar adiciona o nó como filho do nó selecionado. Segurar Alt ao soltar adiciona o nó como filho do nó raiz. Se Alt + Shift estiverem pressionados ao soltar, o tipo do nó poderá ser selecionado, se aplicável.

Barra de ferramentas principal

Alguns botões da barra de ferramentas principal são os mesmos da área de trabalho 3D. Uma breve explicação é fornecida com o atalho caso o cursor do mouse seja passado sobre um botão por um segundo. Alguns botões podem ter funcionalidades adicionais se outra tecla for pressionada. Uma recapitulação da funcionalidade principal de cada botão com seu atalho padrão é fornecida abaixo, da esquerda para a direita:

../../_images/2d_toolbar.webp
  • Modo Seleção (Q): Permite a seleção de nós na janela ne exibição. Clicar com o botão esquerdo em um nó na janela de exibição o seleciona. Clicar e arrastar com o botão esquerdo desenhando um retângulo seleciona todos os nós dentro dos limites do retângulo ao soltar o botão. Segurar Shift durante a seleção adiciona mais nós à seleção. Clicar em um nó selecionado enquanto segura Shift desseleciona o nó. Nesse modo, você pode arrastar o(s) nó(s) selecionado(s) para mover, pressionar Ctrl para alternar temporariamente para o modo de rotação ou usar os círculos vermelhos para redimensionar. Se múltiplos nós estiverem selecionados, somente movimento e rotação são possíveis. Neste modo, rotação e redimensionamento não usarão as opções de encaixe caso o encaixe esteja ativado.

  • Modo de Movimentação (W): Habilita o modo de movimentação (ou translação) para os nós selecionados. Consulte Viewport 2D para mais detalhes.

  • Modo de Rotação (E): Habilita o modo de rotação para os nós selecionados. Consulte Viewport 2D para mais detalhes.

  • Modo de Escalonamento (S): Habilita o dimensionamento e exibe dispositivos de dimensionamento em ambos os eixos para o(s) nó(s) selecionado(s). Consulte Viewport 2D para mais detalhes.

  • Mostrar lista de nós selecionáveis na posição clicada: Como a descrição sugere, isso fornece uma lista de nós selecionáveis na posição clicada como um menu de contexto, se houver mais de um nó na área clicada.

  • Pivô de rotação: Define o pivô de rotação em torno do qual os nós serão rotacionados. Um nó recém-adicionado possui seu pivô de rotação em x: 0 e y: 0 por padrão, com algumas exceções. Por exemplo, o pivô padrão de um Sprite2D é o seu centro se a propriedade centered estiver definida como true. Se desejar alterar o pivô de rotação de um nó, clique neste botão e escolha uma nova posição com o botão esquerdo do mouse. O nó será rotacionado considerando esse ponto. Se houver vários nós selecionados, este ícone adicionará um pivô temporário para ser usado em comum por todos os nós selecionados. Pressionar Shift e clicar neste botão criará o pivô no centro dos nós selecionados. Se qualquer opção de encaixe estiver habilitada, o pivô também será ajustado a elas ao ser arrastado.

  • Modo de Movimentação de Câmera (G): Permite navegar na janela de exibição sem selecionar nenhum nó acidentalmente. Em outros modos, você também pode segurar Espaço e arrastar com o botão esquerdo do mouse para fazer o mesmo.

  • Modo de Régua: Após habilitar, clique na janela de exibição para exibir as coordenadas x e y globais atuais. Arrastar de uma posição para outra mede a distância em pixels. Se você arrastar na diagonal, desenhará um triângulo e mostrará as distâncias separadas em termos de x, y e a distância total até o alvo, incluindo os ângulos em relação aos eixos em graus. A tecla R ativa a régua. Se o ajuste estiver habilitado, ele também exibe as medidas em termos de contagem da grade:

../../_images/2d_ruler_with_snap.webp

Usando régua com encaixe habilitado.

  • Usar Atração Inteligente: Alterna o encaixe inteligente para os modos mover, girar e escalar; e para o pivô de rotação. Personalize-o usando o menu de três pontos ao lado das ferramentas de encaixe.

  • Usar Atração à Grade: Alterna o encaixe à grade para os modos mover e escalar, pivô de rotação e régua. Personalize-o usando o menu de três pontos ao lado das ferramentas de encaixe.

Você pode personalizar as configurações da grade para que os modos de movimento, rotação, escala, régua e rotação utilizem o ajuste. Use o menu de três pontos para isso:

../../_images/2d_snapping_options_menu.webp
  • Usar Atração de Rotação: Alterna o encaixe usando a configuração de rotação configurada.

  • Usar Atração de Escalonamento: alterna o ajuste usando a configuração de etapa de escala.

  • Atração Relativa: Alterna o uso do ajuste com base nos valores de transformação atuais do nó selecionado. Por exemplo, se as grades estiverem definidas para 32x32 pixels e se o nó selecionado estiver localizado em x: 1, y: 1, habilitar esta opção deslocará temporariamente as grades em x: 1, y: 1.

  • Use Pixel Snap: Toggles the use of subpixels for snapping. If enabled, the position values will be integers, disabling will enable subpixel movement as decimal values. For the project at runtime, consider going to the Project Settings and enabling Rendering > 2D > Snapping for Node2D nodes, or GUI > General > Snap Controls to Pixels for Control nodes.

  • Atração Inteligente: Fornece um conjunto de opções para ajustar em posições específicas, se estiverem habilitadas:

    • Atrair ao Pai: Encaixa nas bordas do pai. Por exemplo, redimensionar um nó filho do tipo Control enquanto essa opção está ativada fará com que ele se encaixe nas bordas do pai.

    • Atrair à Âncora do Nó: Encaixa na âncora do nó. Por exemplo, se as âncoras de um nó do tipo Control estiverem posicionadas em diferentes locais, ativar essa opção fará com que o encaixe ocorra nas laterais e cantos da âncora.

    • Atrair aos Lados do Nó: Encaixa nas laterais do nó, como para o pivô de rotação ou posicionamento da âncora.

    • Atrair ao Centro do Nó: Encaixa no centro do nó, como para o pivô de rotação ou posicionamento da âncora.

    • Atrair a Outros Nós: Encaixa a outros nós ao mover ou dimensionar. Útil para alinhar nós no editor.

    • Atrair às Guias: Encaixa em guias personalizadas desenhadas usando a régua horizontal ou vertical. Mais sobre a régua e guias abaixo.

../../_images/2d_snapping_options.webp
  • Configurar Atração...: Abre a janela mostrada acima, oferecendo um conjunto de parâmetros de alinhamento.

    • Deslocamento da Grade: Permite deslocar as grades em relação à origem. Os valores x e y podem ser ajustados separadamente.

    • Incremento de Grade: A distância entre cada grade em pixels. x e y podem ser ajustados separadamente.

    • Linha Primária a Cada: O número de grades intermediárias para desenhar linhas infinitas como indicação das linhas principais.

    • Deslocamento de Rotação: define o deslocamento para deslocar o encaixe rotacional.

    • Incremento de Rotação: define o grau de ajuste. Por exemplo, 15 significa que o nó girará e ajustará em múltiplos de 15 graus se o ajuste de rotação estiver habilitado e o modo de rotação for usado.

    • Incremento de Escala: Determina o fator de incremento de escala. Por exemplo, se for "0,1" , a escala será alterada em passos de "0,1" se o ajuste de escala estiver habilitado e o modo de escala for usado.

  • Trancar Nó(s) Selecionado(s) (Ctrl + L). Bloqueia os nós selecionados, impedindo a seleção e movimentação na viewport. Clicar no botão novamente (ou usar Ctrl + Shift + L) desbloqueia os nós selecionados. Nós bloqueados só podem ser selecionados na árvore de cena. Eles podem ser facilmente identificados por um cadeado ao lado de seus nomes na árvore de cena. Clicar nesse cadeado também desbloqueia os nós.

  • Group selected nodes (Ctrl + G). This allows selection of the root node if any of the children are selected. Using Ctrl + Shift + G ungroups them. Additionally, clicking the ungroup button in the scene tree performs the same action.

  • Opções de Esqueleto: Oferece opções para trabalhar com Skeleton2D e Bone2D.

    • Mostrar Ossos: Alterna a visibilidade dos ossos do nó selecionado.

    • Criar nó(s) Bone2D a partir de nó(s): Converte nó(s) selecionado(s) em Bone2D.

Ver também

To saber mais sobre Skeletons (Esqueletos), veja Animação de recorte(Cut-out).

  • Menu Visualizar: Oferece opções para controlar a visualização da janela de exibição. Como suas opções dependem muito da janela de exibição, elas são abordadas na seção Viewport 2D.

Ao lado do menu "Visualizar", botões adicionais podem estar visíveis. Na imagem da barra de ferramentas no início deste capítulo, um botão adicional Sprite2D aparece porque um Sprite2D está selecionado. Este menu fornece algumas ações e ferramentas rápidas para trabalhar em um nó ou seleção específica. Por exemplo, ao desenhar um polígono, ele oferece botões para adicionar, modificar ou remover pontos.

Sistema de coordenadas

No editor 2D, diferente do 3D, existem somente dois eixos: x e y. Além disso, o ângulo de visão é fixo.

Na janela de exibição, você verá duas linhas em duas cores cruzando a tela infinitamente: vermelho para o eixo x e verde para o eixo y. No Godot, ir para a direita e para baixo são direções positivas. O ponto de intersecção dessas duas linhas é a origem: x: 0, y: 0.

A root node will have its origin at this position once added. Switching to the move or scale modes after selecting a node will display the gizmos at the node's offset position. The gizmos will point to the positive directions of the x and y axes. In the move mode, you can drag the green line to move only in the y axis. Similarly, you can hold the red line to move only in the x axis.

No modo de escala, os gizmos terão um formato quadrado. Você pode segurar e arrastar os quadrados verde e vermelho para dimensionar os nós nos eixos y ou x. Arrastar na direção negativa inverte o nó horizontal ou verticalmente.

Viewport 2D

A janela de exibição será a área onde você passará mais tempo se planeja criar níveis ou interfaces de usuário visualmente:

../../_images/2d_editor_viewport_with_viewmenu.webp

Middle-clicking and dragging the mouse will pan the view. The scrollbars on the right or bottom of the viewport also move the view. Alternatively, the G or Space keys can be used. If you enable Editor Settings > Editors > Panning > Simple Panning, you can activate panning directly with Space only, without requiring dragging.

A janela de exibição possui botões no canto superior esquerdo. Centralizar Câmera centraliza o(s) nó(s) selecionado(s) na tela. Útil se você tiver uma cena grande com muitos nós e quiser visualizar o nó selecionado na árvore de cena. Ao lado estão os controles de zoom. - afasta o zoom, + aproxima o zoom, e clicar no número com a porcentagem redefine para 100%. Alternativamente, você pode usar a roda do meio do mouse para aproximar (rolar para cima) e afastar (rolar para baixo) o zoom.

The black bars at the viewport's left and top edges are the rulers. You can use them to orient yourself in the viewport. By default, the rulers will display the pixel coordinates of the viewport, numbered at 100 pixel steps. Changing the zoom factor will change the shown values. Enabling Grid Snap or changing the snapping options will update the ruler's scaling and the shown values.

Você também pode criar vários guias personalizados para ajudar você a fazer medições ou alinhar nós com eles:

../../_images/2d_editor_guidelines.webp

Se você tiver pelo menos um nó na cena, poderá criar guias arrastando-as da régua horizontal ou vertical em direção à janela de exibição. Uma guia roxa aparecerá, mostrando sua posição, e permanecerá lá quando você soltar o botão do mouse. Você pode criar guias horizontais e verticais simultaneamente arrastando-as do quadrado cinza na interseção das réguas. As guias podem ser reposicionadas arrastando-as de volta para suas respectivas réguas, e podem ser removidas arrastando-as de volta para a régua.

You can also enable snapping to the created guides using the Smart Snap menu.

Nota

If you cannot create a line, or do not see previously created guides, make sure that they are visible by checking the View menu of the viewport. Y toggles their visibility, by default. Also, make sure you have at least one node in the scene.

Depending on the tool chosen in the toolbar, left-clicking will have a primary action in the viewport. For example, the Select Mode will select the left-clicked node in the viewport. Sometimes, left-clicking can be combined with a modifier (e.g., Ctrl, or Shift) to perform secondary actions. For example, keeping Shift pressed while dragging a node in the Select or Move modes will try to snap the node in a single axis while moving.

Clicar com o botão direito na janela de exibição oferece duas opções: criar um nó ou instanciar uma cena na posição escolhida. Se pelo menos um nó estiver selecionado, clicar com o botão direito também oferece a opção de mover o(s) nó(s) selecionado(s) para essa posição.

A janela de exibição tem um menu Visualizar que fornece diversas opções para alterar a aparência da janela de exibição:

  • Grade: Permite mostrar a grade o tempo todo, mesmo quando não estiver ativado o modo de atração (snapping). Você também pode alternar a exibição usando a opção fornecida.

  • Show Helpers: Toggles the temporary display of an outline of the node, with the previous transform properties (position, scaling, or rotation) if a transform operation has been initiated. For Control nodes, it also shows the sizing parameters. Useful to see the deltas.

  • Mostrar Réguas: Alterna a visibilidade das réguas horizontal e vertical. Veja Viewport 2D para mais informações sobre réguas.

  • Mostrar Guias: Alterna a visibilidade das guias criadas. Consulte Viewport 2D para saber como criá-las.

  • Mostrar Origem: alterna a exibição das linhas de origem verde e vermelha desenhadas em x: 0, y: 0.

  • Show Viewport: Toggles the visibility of the game's default viewport, indicated by an indigo-colored rectangle. It is also the default window size on desktop platforms, which can be changed by going to Project Settings > Display > Window > Size and setting Viewport Width and Viewport Height.

  • Gizmos: Toggles the visibility of Position (shown with cross icon), Lock (shown with padlock), Groups (shown with two squares), and Transformation (shown with green and red lines) indicators.

  • Centralizar Seleção: O mesmo que o botão Centralizar Câmera na janela de exibição. Centraliza o(s) nó(s) selecionado(s) na visualização. F é o atalho padrão.

  • Frame to Selection: Similar to Center Selection, but also changes the zoom factor to fit the contents in the screen. Shift + F is the default shortcut.

  • Limpar Guias: Exclui todas as guias da tela. Você precisará recriá-las se planeja usá-las mais tarde.

  • Visualizar Escala da Tela: Alterna a visualização da escala da tela no editor quando o fator de zoom ou a visualização da janela de exibição muda. Útil para ver como os node do tipo Control ficarão após a escala e a movimentação, sem executar o jogo.

  • Pré-visualizar Tema: Permite escolher entre os temas disponíveis para alterar a aparência dos nodes do tipo Control no editor, sem precisar executar o jogo.

Nós Node2D e Control

CanvasItem é o nó base para 2D. Node2D é o nó base para objetos de jogo 2D, e Control é o nó base para tudo relacionado a GUI. Para 3D, a Godot usa o nó Node3D.

Exibindo nós 3D em 2D

É possível exibir nós 3D em uma cena 2D usando uma SubViewport. Você pode ver isso na demonstração 3D in 2D Viewport.

../../_images/3d_in_2d_demo_editor.webp