Введение в 2D

Инструменты разработки 2D-игр Godot включают в себя специализированный движок 2D-рендеринга, физическую систему и функции, специально разработанные для создания 2D-впечатлений. Вы можете эффективно проектировать уровни с помощью системы TileMap, анимировать персонажей с помощью 2D-спрайта или анимации Cutout и использовать 2D-освещение для динамического освещения сцены. Встроенная система 2D-частиц позволяет создавать сложные визуальные эффекты, а Godot также поддерживает пользовательские шейдеры для улучшения графики. Эти функции в сочетании с доступностью и гибкостью Godot обеспечивают прочную основу для создания увлекательных 2D-игр.

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

Демоверсия 2D-платформера доступна в библиотеке ресурсов.

На этой странице вы увидите 2D-рабочее пространство и узнаете, как с ним познакомиться.

Совет

Если вы хотите получить введение в 3D, см. Введение в 3D.

2D рабочее пространство

Вы будете использовать 2D-рабочее пространство для работы с 2D-сценами, проектирования уровней или создания пользовательских интерфейсов. Чтобы переключиться в 2D-рабочее пространство, вы можете либо выбрать 2D-узел из дерева сцены, либо использовать селектор рабочего пространства, расположенный в верхней части редактора:

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

Подобно 3D, вы можете использовать вкладки под селектором рабочего пространства для переключения между текущими открытыми сценами или создания новой с помощью кнопки плюс (+). Левый и правый доки должны быть знакомы из editor introduction.

Под селектором сцен находится главная панель инструментов, а под главной панелью инструментов — 2D-окно просмотра.

Вы можете перетаскивать совместимые узлы из дока FileSystem, чтобы добавить их в область просмотра в качестве узлов. Перетаскивание добавляет перетаскиваемый узел как родственный выбранному узлу (если выбран корневой узел, добавляется как дочерний). Удерживание клавиши Shift при перетаскивании добавляет узел как дочерний выбранного узла. Удерживание клавиши Alt при перетаскивании добавляет узел как дочерний корневого узла. Если удерживать клавиши Alt + Shift при перетаскивании, можно выбрать тип узла, если применимо.

Основная панель инструментов

Некоторые кнопки на главной панели инструментов такие же, как и в 3D-рабочем пространстве. Краткое объяснение дается вместе с сочетанием клавиш, если курсор мыши наведен на кнопку на одну секунду. Некоторые кнопки могут иметь дополнительную функциональность, если выполняется еще одно нажатие клавиши. Ниже слева направо приведен обзор основных функций каждой кнопки с ее сочетанием клавиш по умолчанию:

../../_images/2d_toolbar.webp
  • Режим выбора (Q): Позволяет выбирать узлы в области просмотра. Щелчок левой кнопкой мыши по узлу в области просмотра выбирает его. Щелчок левой кнопкой мыши и перетаскивание прямоугольника выбирает все узлы в пределах границ прямоугольника после отпускания. Удерживание Shift при выборе добавляет больше узлов к выбору. Щелчок по выбранному узлу при удерживании Shift отменяет выбор узла. В этом режиме вы можете перетаскивать выбранные узлы для перемещения, нажимать Ctrl для временного переключения в режим вращения или использовать красные круги для его масштабирования. Если выбрано несколько узлов, возможны только перемещение и вращение. В этом режиме вращение и масштабирование не будут использовать параметры привязки, если привязка включена.

  • Режим перемещения (W): Включает режим перемещения (или трансляции) для выбранных узлов. Подробнее см. 2D-просмотр.

  • Режим вращения (E): Включает режим вращения для выбранных узлов. Подробнее см. 2D-просмотр.

  • Режим масштабирования (S): Включает масштабирование и отображает гизмо масштабирования по обеим осям для выбранного узла(ов). Подробнее см. 2D-просмотр.

  • Показать список выбираемых узлов в позиции щелчка: как следует из описания, это предоставляет список выбираемых узлов в позиции щелчка в виде контекстного меню, если в области щелчка находится более одного узла.

  • Опора вращения: Устанавливает опору вращения для вращения узла(ов). Добавленный узел имеет опору вращения в точке x: 0, y: 0 по умолчанию, с исключениями. Например, опора по умолчанию для Sprite2D является его центром, если свойство centered установлено в true. Если вы хотите изменить опору вращения узла, нажмите эту кнопку и выберите новое местоположение, щелкнув левой кнопкой мыши. Узел вращается с учетом этой точки. Если выбрано несколько узлов, этот значок добавит временную опору, которая будет использоваться всеми выбранными узлами. Нажатие Shift и нажатие этой кнопки создаст опору в центре выбранных узлов. Если включена какая-либо из опций привязки, опора также будет привязываться к ней при перетаскивании.

  • Режим панорамирования (G): Позволяет перемещаться в области просмотра, не выбирая случайно какие-либо узлы. В других режимах вы также можете удерживать Пробел и перетаскивать левой кнопкой мыши, чтобы сделать то же самое.

  • Режим линейки: После включения щелкните по окну просмотра, чтобы отобразить текущие глобальные координаты x и y. Перетаскивание из одной позиции в другую измеряет расстояние в пикселях. Если перетаскивать по диагонали, будет нарисован треугольник и показаны отдельные расстояния в терминах x, y и общее расстояние до цели, включая углы к осям в градусах. Клавиша R активирует линейку. Если включена привязка, она также отображает измерения в терминах количества сеток:

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

Использование линейки с включенной привязкой.

  • Использовать интеллектуальную привязку: включает интеллектуальную привязку для режимов перемещения, поворота и масштабирования; и поворотную точку. Настройте ее с помощью трехточечного меню рядом с инструментами привязки.

  • Использовать привязку к сетке: переключает привязку к сетке для режима перемещения и масштабирования, поворота и линейки. Настройте ее с помощью трехточечного меню рядом с инструментами привязки.

Вы можете настроить параметры сетки так, чтобы режим перемещения, режим вращения, режим масштабирования, линейка и поворотный стержень использовали привязку. Используйте для этого меню с тремя точками:

../../_images/2d_snapping_options_menu.webp
  • Использовать привязку к повороту: включает/выключает привязку с использованием настроенного параметра поворота.

  • Использовать привязку к масштабу: включает/выключает привязку с использованием настроенного шага масштабирования.

  • Snap Relative: переключает использование привязки на основе текущих значений преобразования выбранного узла. Например, если сетки установлены на 32x32 пикселя и если выбранный узел расположен в x: 1, y: 1, то включение этой опции временно сдвинет сетки на x: 1, y: 1.

  • Использовать пиксельную привязку: переключает использование субпикселей для привязки. Если включено, значения положения будут целыми числами, отключение включит субпиксельное перемещение как десятичные значения. Для свойства времени выполнения рассмотрите возможность проверки свойства Параметры проекта > Рендеринг > 2D > Привязка для узлов Node2D и Параметры проекта > GUI > Общие > Привязка элементов управления к пикселям для узлов управления.

  • Умная привязка: предоставляет набор параметров для привязки к определенным позициям, если они включены:

    • Snap to Parent: Привязка к краям родителя. Например, масштабирование дочернего узла управления при включенном параметре приведет к привязке к границам родителя.

    • Snap to Node Anchor: Привязывается к якорю узла. Например, если якоря узла управления расположены в разных позициях, включение этого параметра привяжет к сторонам и углам якоря.

    • Snap to Node Sides: привязка к сторонам узла, например, для поворотного шарнира или позиционирования якоря.

    • Snap to Node Center: привязка к центру узла, например, для поворотного стержня или позиционирования якоря.

    • Snap to Other Nodes: Привязка к другим узлам при перемещении или масштабировании. Полезно для выравнивания узлов в редакторе.

    • Snap to Guides: Привязка к пользовательским направляющим, нарисованным с помощью горизонтальной или вертикальной линейки. Подробнее о линейке и направляющих ниже.

../../_images/2d_snapping_options.webp
  • Configure Snap: открывает окно, показанное выше, предлагающее набор параметров привязки.

    • Grid Offset: позволяет смещать сетки относительно начала координат. x и y можно настраивать отдельно.

    • Grid Step: расстояние между каждой сеткой в пикселях. x и y можно настраивать отдельно.

    • Primary Line Every: количество ячеек между ними для рисования бесконечных линий в качестве обозначения основных линий.

    • Rotation Offset: устанавливает смещение для смещения вращательной привязки.

    • Rotation Step: определяет степень привязки. Например, 15 означает, что узел будет вращаться и привязываться на кратные 15 градусам, если включена привязка вращения и используется режим вращения.

    • Scale Step: определяет коэффициент приращения масштабирования. Например, если он равен 0,1, масштабирование будет изменяться с шагом 0,1, если включена привязка масштабирования и используется режим масштабирования.

  • Lock selected nodes (Ctrl + L). Блокирует выбранные узлы, предотвращая выбор и перемещение в области просмотра. Повторное нажатие кнопки (или использование Ctrl + Shift + L) разблокирует выбранные узлы. Заблокированные узлы можно выбрать только в дереве сцены. Их можно легко определить по замку рядом с именами их узлов в дереве сцены. Нажатие на этот замок также разблокирует узлы.

  • Group selected nodes (Ctrl + G). Это позволяет выбрать корневой узел, если выбран любой из дочерних узлов. Использование Ctrl + G разгруппирует их. Кроме того, нажатие кнопки разгруппировать в дереве сцены выполняет то же действие.

  • Skeleton Options: предоставляет возможности для работы со Skeleton2D и Bone2D.

    • Show Bones: включает и выключает видимость костей для выбранного узла.

    • Создать узел(ы) Bone2D из узла(ов): преобразует выбранные узлы в Bone2D.

См. также

Чтобы узнать больше о Скелетах, см. Вырезная анимация.

  • Меню View: Предоставляет опции для управления видом области просмотра. Поскольку его опции сильно зависят от области просмотра, оно рассматривается в разделе 2D-просмотр.

Рядом с меню View могут быть видны дополнительные кнопки. На изображении панели инструментов в начале этой главы появляется дополнительная кнопка Sprite2D, поскольку выбран Sprite2D. Это меню предоставляет некоторые быстрые действия и инструменты для работы с определенным узлом или выделением. Например, при рисовании многоугольника оно предоставляет кнопки для добавления, изменения или удаления точек.

Система координат

В 2D-редакторе, в отличие от 3D, есть только две оси: x и y. Также угол обзора фиксирован.

В окне просмотра вы увидите две линии двух цветов, бесконечно пересекающие экран: красную для оси x и зеленую для оси y. В Godot движение вправо и вниз является положительным направлением. Место пересечения этих двух линий является началом координат: x: 0, y: 0.

Корневой узел будет иметь свое начало в этой позиции после добавления. Переключение в режимы move или scale после выбора узла отобразит гизмо в позиции смещения узла. Гизмо будут указывать на положительные направления осей x и y. В режиме перемещения вы можете перетаскивать зеленую линию, чтобы перемещаться только по оси y. Аналогично вы можете удерживать красную линию, чтобы перемещаться только по оси x.

В режиме масштабирования гизмо будут иметь квадратную форму. Вы можете удерживать и перетаскивать зеленые и красные квадраты, чтобы масштабировать узлы по осям y или x. Перетаскивание в отрицательном направлении переворачивает узел по горизонтали или вертикали.

2D-просмотр

Область просмотра — это область, которой вы уделите больше всего времени, если планируете визуально проектировать уровни или пользовательские интерфейсы:

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

Щелчок средней кнопкой мыши и перетаскивание мыши будут перемещать вид. Полосы прокрутки справа или снизу области просмотра также перемещают вид. В качестве альтернативы можно использовать клавиши G или Пробел. Если вы включите Настройки редактора > Редакторы > Панорамирование > Простое панорамирование, вы можете активировать панорамирование напрямую с помощью только Пробел, без необходимости перетаскивания.

В окне просмотра есть кнопки в левом верхнем углу. Center View центрирует выбранные узлы на экране. Полезно, если у вас большая сцена с большим количеством узлов, и вы хотите увидеть выбранный узел в дереве сцены. Рядом с ним находятся элементы управления масштабированием. - уменьшает масштаб, + увеличивает масштаб, а нажатие на число с процентом по умолчанию устанавливает значение 100%. Кроме того, вы можете использовать прокрутку средней кнопкой мыши для увеличения (прокрутки вверх) и уменьшения (прокрутки вниз).

Черные полосы на левом и верхнем краях области просмотра — это линейки. Вы можете использовать их для ориентации в области просмотра. По умолчанию линейки отображают пиксельные координаты области просмотра, пронумерованные с шагом 100 пикселей. Изменение коэффициента масштабирования изменит отображаемые значения. Включение Grid Snap или изменение параметров привязки обновит масштаб линейки и отображаемые значения.

Вы также можете создать несколько пользовательских направляющих, которые помогут вам выполнять измерения или выравнивать узлы по ним:

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

Если у вас есть хотя бы один узел в сцене, вы можете создать направляющие, перетаскивая их из горизонтальной или вертикальной линейки в область просмотра. Появится фиолетовая направляющая, показывающая ее положение, и останется там, когда вы отпустите кнопку мыши. Вы можете создать как горизонтальные, так и вертикальные направляющие одновременно, перетаскивая из серого квадрата на пересечении линеек. Направляющие можно переместить, перетащив их обратно на соответствующие линейки, и их можно удалить, перетащив их полностью обратно на линейку.

Вы также можете включить привязку к созданным направляющим с помощью меню «Smart Snap».

Примечание

Если вы не можете создать линию или не видите ранее созданные направляющие, убедитесь, что они видны, проверив меню View в окне просмотра. Y переключает их видимость по умолчанию. Также убедитесь, что в сцене есть хотя бы один узел.

В зависимости от выбранного на панели инструментов инструмента щелчок левой кнопкой мыши будет иметь основное действие в области просмотра. Например, Select Mode выберет узел, на котором щелкнул левой кнопкой мыши, в области просмотра. Иногда щелчок левой кнопкой мыши можно сочетать с модификатором (например, Ctrl или Shift) для выполнения вторичных действий. Например, удерживание нажатой клавиши Shift при перетаскивании узла в режимах выбора или перемещения попытается привязать узел к одной оси во время перемещения.

Щелчок правой кнопкой мыши в области просмотра предоставляет две возможности для создания узла или создания сцены в выбранной позиции. Если выбран хотя бы один узел, щелчок правой кнопкой мыши также предоставляет возможность переместить выбранные узлы в эту позицию.

В окне просмотра есть меню View, которое предоставляет несколько опций для изменения внешнего вида окна просмотра:

  • Grid: Позволяет отображать сетки все время, только при использовании привязки или не отображать их вообще. Вы также можете переключать их с помощью предоставленной опции.

  • Show Helpers: Переключает временное отображение контура узла с предыдущими свойствами преобразования (положение, масштабирование или поворот), если была инициирована операция преобразования. Для узлов Control также показывает параметры размера. Полезно для просмотра дельт.

  • Show Rulers: Переключает видимость горизонтальных и вертикальных линеек. Подробнее о линейках см. 2D-просмотр.

  • Show Guides: Переключает видимость созданных направляющих. Смотрите 2D-просмотр для того, чтобы узнать, как их создать.

  • Show Origin: Переключает отображение зеленой и красной линий начала координат, проведенных в точке x: 0, y: 0.

  • Показать область просмотра: Переключает видимость области просмотра игры по умолчанию, обозначенной прямоугольником цвета индиго. Это также размер окна по умолчанию на настольных платформах, который можно изменить, перейдя в Настройки проекта > Дисплей > Окно > Размер и установив Ширину области просмотра и Высоту области просмотра.

  • Gizmos: переключает видимость индикаторов Position (отображается значком крестика), Lock (отображается значком замка), Groups (отображается двумя квадратами) и Transformation (отображается зелеными и красными линиями).

  • Center Selection: то же самое, что и кнопка Center View внутри области просмотра. Центрирует выбранные узлы в представлении. F — сочетание клавиш по умолчанию.

  • Frame to Selection: аналогично Center Selection, но также изменяет коэффициент масштабирования, чтобы вписать содержимое в экран. Shift + F — сочетание клавиш по умолчанию.

  • Clear Guides: Удаляет все направляющие с экрана. Вам нужно будет создать их заново, если вы планируете использовать их позже.

  • Preview Canvas Scale: Переключает предварительный просмотр масштабирования холста в редакторе при изменении коэффициента масштабирования или вида области просмотра. Полезно для просмотра того, как будут выглядеть элементы управления после масштабирования и перемещения, без запуска игры.

  • Preview Theme: позволяет выбрать одну из доступных тем для изменения внешнего вида элементов управления в редакторе, не запуская игру.

Node2D или узел Control

CanvasItem — базовый узел для 2D. Node2D — базовый узел для 2D-игровых объектов, а Control — базовый узел для всего GUI. Для 3D Godot использует узел Node3D.

3D в 2D

Возможно отображение 3D-сцен на 2D-экране. Вы можете увидеть это в демо 3D в 2D-виде.

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