Урок 1.3

Создание сложных форм

Введение

Этот урок продолжает предыдущий, показывая как необходмо создавать сложные формы. Вы можете либо продолжить свой проект, созданный в уроке 1.2, либо открыть готовый файл под названием "Tutorial 1.2" (урок 1.2). Этот файл можно найти в поддиректории "Tutorials/1 - Basics" корневого каталога программы. В любом случае, файл, с которого вы начинаете этот урок, должен выглядеть примерно так:

Точка входа

Создание нового слоя

Для добавление нового слоя, щелкните по кнопке создания нового слоя  на панели Слои. В появившемся диалоговом окне выберите "Vector Layer" (Векторный слой). Щелкните дважды на этом слое и переименуйте его в "Clouds" (облака).



Добавление узла

Теперь выберите инструмент Добавить Узел, затем щелкните и перетащите сегмент линии вниз: 

 

 

Добавить сегмент линии

Затем, щелкните непосредственно возле конца нового сегмента линии и перетащите указатель мыши вниз, чтобы получить такой згиб как на рисунке: 

Добавьте еще один сегмент к концу кривой

Сделайте так несколько раз до тех пор, пока вы не получите такой рисунок: 

И еще несколько сегментов

Самое главное, что нужно запомнить - это то, что для добавления узла к кривой необходимо щелкнуть непосредственно возле конца кривой и перетащить мышку в то место, где вы хотите создать новый узел. Помните, если вы сделал ошибку, просто выберите команду Edit->Undo (Редактировать -> Отмена).

А сейчас мы научимся соединять два узла. Объединение используется для замыкания кривой и создания кольца или же для соединения двух кривых в одну. Сейчас мы нарисуем новую кривую и соединим ее с уже созданной. Чтобы начать рисовать, щелкните на свободном месте и начните рисовать новую кривую. Перетащите указатель мыши так, чтобы конечный узел новой кривой пересекался с последним узлом старой кривой. Не отпуская мыши, нажмите Пробел на клавиатуре. (Данная команда активирует объединение в Moho). Приведенная ниже иллюстрация поможет вам разобраться: 

Место добавления новой кривой сегмента

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

Новый сегмент прикреплен в старому

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

Больше новых узлов

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

Готовое облако

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

Нажмите кнопку "Play", чтобв увидеть как рисовать облако

Заливка облака цветом

Создание формы

Для того, чтобы залить цветом облако, необходимо выполнть ту же процедуру, что  для залвки цветом холмов. Для этого щелкните на слое "Clouds" (облака), чтобы активировать этот слой. Затем выберите команду Edit->Select None (Редактировать->Снять выделение) (или же нажмите  клавишу Ввод.), чтобы убедиться, что ничего не выбрано. Щелкните по инструменту Заливки. В главном окне щелкните и нарисуйте прямоугольник вокруг всех узлов левого облака. Если вы пропустили несколько узлов, вы либо попытайтесь еще раз, либо выберите команду Edit->Select Connected (Редактировать->Выделить соединенное), чтобы выделить остальную часть облака. 

Выделите форму для выделения

Когда вы отпустите мышку, все облако должно быть выделено и должно выглядеть примерно так: 

Выделенная форма

Сейчас выделение выглядит правильно, поэтому можно нажать пробел для активации заливки. По-умолчанию цвет белый, что отлично подходит для облаков и поэтому изменений никаких делать не нужно. Тем не менее, нам необходимо добавить эффект линии, чтобы облако выглядело немного мягче. В окне стилей выберите из выпадающего меню Line effects (Эффекты линии) пункт 'Soft Edge' (Смягчать края). Сейчас самый раз выбрать команду File->Render(Файл->Визуализация), чтобы увидеть как будет выглядеть окончательный результат:

Визуализированное облако

Второе облако



Перемещение узлов

Давайте сделаем еще одно облако. Выберите из меню команду Edit->Select All (Редактировать -> Выделить все). Сейчас команду Edit->Copy (Редактировать -> копировать), Затем Edit->Paste (Редактировать -> Вставить). После чего, выберите инструмент Перемещения из панели инструментов. На рабочей области окна щелкните и переместите скопированное облако вправо от оригинала. (При вставке объекта из буфера обмена, вставляемый объект помещается поверх оригинала)  

Дублированные облака



Масштабирование узлов

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

Изменение масштаба и меремещение второго облака.

Перемещение узлов

Затем, используя командуEdit->Select None (Редактировать -> Снять выделение) (или нажав клавишу Ввод), снимите выделение со всех узлов нового облака. Выберите инструмент перемещения еще раз, но сейчас выделите и переместите отдельные узлы второго облака. В этом случае, поскольку выделен только один узел, инструмент Перемещения используется для изменения формы объекта, а не для перемещения его целиком. Просто переместите несколько узлов так, чтобы облака облака не были одинаковыми.  

Изменение некоторых узлов

Сажаем дерево

Хорошо - мы понемногу продвигаемся вперед, но для этой сцены нам понадобится посадить дерево. Добавьте новый слой, щелкнув по кнопке добавления нового слоя на панели Слои. В диалоговом окне выберите еще раз "Vector Layer" (Векторный слой). Щелкните дважды на новом слое и переименуйте его в "Tree" (дерево).

Добавить узел

Переместить узлы

Используя инструмент Добавить Узел , вместе со свойством объединения нарисуйте форму в виде ствола дерева. При этом необходимо помнить следующее: Во-первых, вы всегда можете использовать команду Edit->Undo (Редактировать->Отмена), чтобы отменить неправильные действия. Во-вторых, вы можете переключиться на использование инструмента Перемещения   , чтобы отредактировать объект, даже не закончив его рисовать. И в-третих, инструмент Перемещения позволяет вам выбрать отдельные узлы и, при желании, удалить их, нажав клавишу Delete или Backspace. 

Не бойтесь проявить креативность при создани ствола дерева, вам абсолютно не обязательно придерживаться нижеприведенного примера.

Рисуем ствол дерева

Залейте ствол цветом, используя ту же самую технологию, что и для облака.

Окрашенный ствол

Панорамирование

Масштабрование рабочего поля

При рисовании ствола дерева могут пригодиться также инструменты, которые мы еще не рассматривали. Это инструменты Pan (Панорамирование) и Zoom (Изменение масштаба). Они могут быть использованы для перемещения по рабочей области экрана. Заметьте, что эти инструменты предназначены не для управления объектами, а для перемещения по области экрана и фокусировании на определенной части изображеня. Для восстановления вида по-умолчаню, выберите команду View->Reset (Вид->Сброс) из главного меню. 

Сглаживание углов

Еще один полезный инструмент - это инструмент Сглаживания углов . Используя этот инструмент, вы можете сгладить или заострить угол объекта.

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

Существует два способа избежания этой проблемы. Первый способ - использовать инструменты Pan and Zoom при замыкнии контура верхушки дерева. Второй способ состоит в том, чтобы нарисовать верхушку дерева в стороне, где есть огромное количество свободного места и, когда она уже будет готова, посто взять и перетащить ее поверх ствола дерева. Во втором подходе, когда вы готовы переместить верхушку дерева, используя инструмент Перемещения, выделите один из ее узлов. Затем, используя команду Edit->Select Connected (Редактировать->Выделить Соедненное), выделите остальную часть верхушки дерева. В заключение, перетащите верхушку дерева на свое место и при необходимости используйте инструмент Масштабирования для изменения размеров объекта.

Верхушка дерева

Создание формы

Далее нам необходимо выделить слой с деревом, для чего мы используем несколько иной способ заливки верхушки дерева, в отличие от способа, который мы использовали для заливки облаков. Залить верхушку дерева немного сложнее, поскольку при ее выделении мы можем затронуть также ствол. Чтобы выполнить такую, на первый взгляд сложную операцию, мы воспользуемся инструментом Заливки - просто щелкнем по краю верхушки дерева при помощи инструмента создания формы, как это показано на рисунке внизу, и весь объект будет выделен.

Щелкните для выделения кривой

Чтобы выделить остальную часть верхушки дерева, следует выбрать команду Edit->Select Connected(Редактировать->Выделить соединенное) (или же нажать клавишу tab). Когда остальная часть верхушки дерева будет выделена, мы можем залить ее цветом:

Выделите остальную часть верхушки дерева

Если верхушка дерева уже полностью выделена, нажмите пробел. На панели стилей выберите в качестве заливки приятный цвет зеленых листьев.Затем создайте контур для верхушки дерева, используя инструмент Outline (Контур) (я напомню, для этого нужно просто щелкнуть по краю верхней части дерева и она будет выделена) выделите ее. Установите "Ширину контура" размером 4 пиксела (почему так толсто - поймете позже).

Ширина линии

Выберите команду меню File->Render (Файл -> Визуализация), чтобы увидеть, что у нас получилось. Вы заметили, окончания сегментов верхней части дерева выглядят квадратными? Это можно легко исправить, используя свойства инструмента переменной линии. Нажмите Ввод и снимите выделение со всех узлов. А сейчас, используя инструмент Редактирования ширины линии, щелкните по каждом узле верхней чести древа еще раз. Потом опять выполните команду File->Render (Файл - визуализация) . Сейчас мы видим, что окончания сегментов имеют красивый заостренный вид. Также поэксперементируйте с другими узлами ваших объектов, передвигайте инструмент Изменения толщины линий вперед и назад, чтобы увеличить, либо уменьшить толщину линии, соответственно. 

Изменение ширины линии

Следующий урок познакомит вас с использованем костей для контроля за своми персонажами, а также их анимированием.

Готовый фон