Часть 4: The Frame Editor (Редактор кадра)
Есть десятки способов получить доступ к редактору кадров. На практике вы сами решите, какой из них будет для вас удобнее. Один из самых простых способов, щелчок правой кнопки мыши на кадре, который мы хотим отредактировать в рабочей области Workspace Toolbar, а затем выбрать "Frame Editor" из контекстного меню. Не удобно скажите? Другой вариант, выберите нужный кадр (или в рабочей области, или в окне раскадровки) и зажмите сочетание клавиш Ctrl + M. Опять не слишком удобно? Есть ещё один вариант, выполните в меню команду View > Frame Editor. Вы также можете щелкнуть левой кнопкой мыши на номере кадра в окне раскадровки (или двойным щелчком на иконке кадра). И наконец, старый добрый способ, открыть редактор кадров с помощью панели навигации. Чтобы сделать это, просто нажми на нужную кнопку, как указано на картинке:
Как видите совсем не трудно. Быстрый доступ к нужным редакторам, и большое количество возможностей выполнить одно действие разными способами, бесспорно, является преимуществом Clickteam Fusion 2.5. К тому же вышеописанная панель навигации позволяет быстро переключаться между редакторами (The Storyboard Editor, Frame Editor, Event Editor, the Event List Editor, the Data Elements screen), и также позволяет вам легко переключаться между кадрами вашего приложения.
Во всяком случае, давайте уже откроем редактор фрейма и продолжим урок далее. Внешний вид окна указан ниже. Не бойтесь, если окно в вашей программе выглядит немного по другому, все элементы интерфейса легко настраиваются.
Прежде всего, давайте развернём окно редактора кадров (Если на данный момент оно ещё не развёрнуто). Нажмите кнопку в правом верхнем углу окна 
. На самом деле это не столь важно, но работать так гораздо удобнее.
Далее немного теории. Что же такое этот редактор кадров / The Frame Editor, и с чем его едят? Редактор кадров является одним из самых важных редакторов Clickteam Fusion 2.5 Он позволяет графически отобразить все объекты в кадре вашего приложения. Сам редактор состоит из 2 панелей. В левой панели, как правило располагаются уже интегрированные на кадр объекты, и называется это окно "Список объектов" или в оригинале "Object List". На правой панели собственно отображается содержимое вашего кадра. На экране также отображается рамка в середине области редактирования, за пределами которой находится серая зона. Серая зона не отображается во время запуска приложения, вы можете использовать её, чтобы скрыть объекты. Вы также можете изменить размер серой области в настройках редактора кадров.
Тут думаю хватит теории, давайте перейдём к практике. Воспользуемся «Frame Editor», что бы с его помощью создать новый объект – Active Object.
Чтобы сделать это, либо выберите команду "New Object" из меню "Insert", или щелкните правой кнопкой где-нибудь в области кадра и выберите пункт "Insert Object". Ну и на крайний случай, для любителей клавиатур CTRL+J.
Выполнив эту команду, мы увидим следующее окно:
В этом окне из списка выберем объект «Active» (в виде иконки бегущего человека), и нажмём на кнопку ОК.
Давайте немного рассмотрим это окно. Диалоговое окно «Create new object» отображается каждый раз, когда мы выполняем установку в кадр какого-нибудь объекта. Как в принципе мы сделали и сейчас. Интерфейс данного окна состоит из частей. Список слева содержит категории, каждая из которых содержит объекты, которые можно установить в кадр. Вы также можете импортировать объекты из других проектов clickteam fusion, для этого нужно нажать кнопку "From File(s)", после нам станет доступно окно проводника, позволяя выбрать файлы, из которых новые объекты будут импортированы. Немного ниже можно найти - кнопку "Refresh" (Обновить). Clickteam fusion даже позволяет добавлять новые расширения, прямо во время работы - единственное, что вы должны сделать, так это нажать кнопку "Refresh". Стоит ещё заметить, внизу есть небольшой флажок с именем "List" (Список), при его нажатии, все объекты станут более компактными (в виде списка).
Когда вы закончите знакомство с этим окном, давайте уже выберем объект «Active», и нажмём кнопку «ОК», или дважды нажмите на объект. После окно «Create new object» закроется, и указатель мыши примет форму прицела. На данном этапе следует выбрать позицию, где будет находиться наш объект «Active» в кадре. На скриншоте показан внешний вид.
Обратите внимание, наш объект после создания будет отображаться не только в кадре, но и в окне «Object List» (Список объектов). При выборе объекта из списка, вы фактически выбираете объект на кадре, вот почему Список объектов может быть действительно полезным, особенно в ситуациях, когда на кадре находится много объектов. Это действительно пригодится в будущем, т.к. всегда легче найти объект в списке, чем в кадре, где он может находиться под слоями других объектов. Поэтому не забывайте про это окно, и то, что вы можете для удобства отсортировать объекты данного списка. Нажмите правую кнопку в поле списка, чтобы открыть выпадающее меню, перейдите в «Arrange Icons» (Упорядочить значки) и выберите нужный способ.
Вернемся к нашему созданному объекту Active. Снимите выделение со всех объектов, нажав на пустом месте кадра, можно также выбрать команду в верхнем меню: Edit> Unselect. Затем выделим наш объект Active, путём нажатия левой кнопки мыши - обратите внимание, выделение сопровождается наличием синего прямоугольника, номером в верхнем левом углу. Если вы нажмёте на него еще раз (без снятия выделение), то вам станет доступен инструмент трансформации. Вы сможете отредактировать размеры вашего объекта. Попробуйте поэкспериментировать с размерами.
Всё просто, не правда ли? Зажмите сочетание клавиш «CTRL + Z» или выполните через верхнее меню операцию: Edit> Undo Resize, чтобы вернуть первоначальные размеры.
При выделении объекта, попробуйте нажать на него ещё раз. Инструменты трансформации сменятся инструментами вращения объекта. Попробуйте задействовать их. Когда закончите, верните объекту первоначальные значения.
Итак, подведём итог, мы научились, как вращать и трансформировать объект. Есть ещё много других вещей, которые мы можем сделать. Во-первых, давайте дадим нашему объекту Active уникальное имя. Щелкните правой кнопкой мыши на нем, чтобы вызвать контекстное меню. Выберите команду "Rename" (Переименовать), и введите "RumbleBuble" и нажмите кнопку ОК.
Осмотрим ещё раз кадр, с одним объектом он выглядит как-то пустоватым. Не беда, добавим больше объектов. И тут самое время познакомиться с такими операциями как клонирование «Clone Object» и создание дубликата «Duplicate». В чём разница между этими операциями спросите вы? Сейчас объясню…Клонирование создаёт полностью новый объект, с свойствами объекта оригинала – но всё же это разные объекты, с разными именами. Также вы сможете создать разные события для клонированных объектов в редакторе событий. Операция дублирование немного отличается, тут также создаётся новый объект, но они не разные, как в случае с клонированием. Дублированный объект всегда имеет общее свойства с объектом оригиналом, и наоборот. Что значит изменив объекту такие параметры как цвет, размер, они также изменятся у продублированных объектов.
Обе эти опции доступны из контекстного меню объекта (вызывается правой кнопкой мыши на объект или через меню «Edit»). Можно также быстро продублировать объекты с помощью всем известных клавиш CTRL + C и CTRL + V.
Теперь попробуем на практике закрепить навыки работы с этими операциями. Не так уж они и сложные. Допустим нам надо создать 3 дубликата, 2 клона и оставить один оригинальный объект. Для этого нажмём правой кнопкой мыши на наш объект RumbleBuble, и выберем команду Duplicate. Откроется окно Duplicate Object.
В этом окне мы можем создать довольно внушительное количество дубликатов, расставив их в строки и столбцы (или массив). Установим значение столбцов (Columns), равное 4 (будет создано 3 дубликата, и останется один оригинал), а значение строк (Rows) установим на 1. И ещё увеличим расстоянием между созданными столбцами (Columns Spacing), изменим значение на 10, расстоянием между строками (Row Spacing) установим на 0. Теперь нажмём ОК.
Как видите, получилась следующая картина:
При этом в списке объектов (Object list) мы видим только наш объект RumbleBuble, а не 4 отдельных объекта. И раз всё это дубликаты, то изменение одного повлечёт за собой изменение каждого из них.
Время экспериментов! Выберите один из четырёх объектов, попробуйте изменить его размер или повернуть.
Не забывайте, в чём разница между клонированием и дублированием, когда будете копировать объекты.
Теперь же снова вернём наши четыре объекта в первоначальное состояние. В помощь нам CTRL+Z или Edit > Undo.
Пришло время рассмотреть операцию клонирование. Щелкните правой кнопкой мыши на объекте (не имеет значения, какой объект мы выберем, результат всё равно будет один) и выберем «Clone Object». Откроется уже известное нам окно, аналогичное операции дублирования. Помните, что мы говорили раньее? Мы хотели создать два клона нашего объекта. Установить текущее положение строк (Rows) - 3 , оставим столбцы (Columns) - 1 , установим (row spacing) - 5, а (column spacing) - 0. Нажмите кнопку ОК.
Если вы всё сделали правильно, у вас должна получиться такая последовательность объектов. И снова обратите внимание, что при клонировании создаются отдельные объекты. Все они отображаются в окне Objects List, при этом новые объекты созданные из оригинала нумеруются числами.
Поэкспериментируем ещё…выберем объект RumbleBuble 3, и измените его размер, и угол поворота. Если вы не знаете где находится этот объект, то посмотрите на object list. Или другой вариант, наведите мышь на объект и подождите пару секунд, увидите подсказку.
Как видите, изменение клонированной копии не изменяет объект оригинал. Это потому, что клонирование создает совершенно новый объект. При разработке игр, вам часто придётся использовать такие подходы, для создания множества одинаковых объектов ведут себя единым образом. Но об этом мы поговорим в следующих уроках.
Дополнительная информация:
- Использование переменных величин (Alterable Values) поможет вам преодолеть любые проблемы с дубликатами - но это уже тема для другого урока.
- Дублирование объектов, как правило, занимают меньше оперативной памяти, чем клонированные.
На данный момент мы знаем как вращать, изменять, клонировать и дублировать объекты. Но всё же мы не говорили про самую простую и очевидную вещь – как двигать объекты. Собственно, это очень просто, есть несколько способов перемещения. Самый простой, это перемещение с помощью мыши, зажимает левую кнопку, и переносим объект в нужную позицию. Немного более сложный способ, редактирование свойств объекта, где можно описать координаты позиций x и y. Третий способ, самый точный и по мне очень удобный, это использование указательных клавиш клавиатуры для перемещения объекта на рабочей области. При этом перемещение осуществляется по 1 пикселю.
Перемещение объекта с помощью клавиатуры и с помощью мыши также работают для нескольких выделенных объектов. Чтобы выбрать несколько объектов, либо выделите их с помощью мыши или нажмите на каждого отдельно удерживая клавишу Shift. Чтобы выбрать все объекты в кадре, просто нажмите Ctrl + A на клавиатуре, или зайдите в меню «Edit» и выберите команду "Select All". В этом же меню вы также можете найти другую полезную команду (Обратить выделение): "Invert Selection".
Дополнительная информация:
- Есть ещё полезное меню "Arrange" - вы можете найти там достаточно полезные инструменты, например, блокировка и разблокировка объектов, выравнивание объектов.
- Чтобы изменить порядок объектов на кадре, щелкните правой кнопкой мыши на одном из них и перейдите в подменю «Order». Там вы найдёте такие команды, как To Front (на передний план), To Back (на задний план), Forward One (вперед на один слой), Backward One (назад на один слой).
- Есть ещё один способ быстро дублировать объекты: При перетаскивании объекта в редакторе кадров, просто зажмите и удерживайте клавишу Ctrl.
- При нажатии Ctrl + B , чтобы можете быстро переключиться между редактором кадров в окном раскадровки.
Ещё одна вещь, о которой нам стоит поговорить. И эта вещь является очень полезным инструментом, который может сохранить вам кучу времени и нервов при разработке проектов – это сетка (Grid). В Clickteam Fusion 2.5 «Сетка» является очень простым инструментов – все, что вам надо, это просто установить её, а затем открыть окно настройки.
В этом окне, вы можете отрегулировать размер сетки, а также цвет контура.
Чтобы отобразить сетку, перейти в меню «View», нажмите на кнопку привязать к сетке «Snap to grid» и показать сетку «Show grid». А затем настроим свойства отображения сетки, в нажав на кнопку «Grid setup». Установите размер сетки 32x32 пикселей (размер по умолчанию). Нажмите OK. Теперь попробуйте переместить один из созданных объектов.
Когда вы закончите экспериментировать с сеткой, переходите к следующей части урока. Далее мы рассмотрим редактор событий.
), либо выполните в меню операцию File > New или зажмите сочетание клавиш "Ctrl + N". Как вы видите создать новое приложение мы можем 3-мя разными способами.
