Picture Editor (Редактор изображений)

Данная статья посвящена встроенному в Construct редактору изображений Picture Editor, с помощью которого вы можете рисовать спрайты, иконки и текстуры для своих игр. Вы ознакомитесь с основными принципами работы с редактором, научитесь добавлять кадры анимации и узнаете значения всех инструментов, с помощью которых рисуется и редактируется изображение.

Введение

Picture Editor (Редактор изображений) является встроенным редактором изображений в Construct. Он используется для загрузки или создания иконок, таких как значок приложения, а также текстур, анимации и изображений спрайтов.

Редактор изображений автоматически запускается, как только вы добавляете в игру новый Sprite (Спрайт) или Tiled Background (Копированный фон).

Чтобы открыть редактор вручную, вы можете сделать одно из следующих действий:

• Нажать Edit (Редактировать) напротив опции Icon (Значок) или Small Icon (Маленький значок) в общих свойствах объекта.
• Дважды кликнуть (или нажать правую кнопку мыши и выбрать Edit icon (Редактировать иконку)) на стандартной иконке приложения во вкладке Project (Проект) в папке Icons (Значки).
• Отредактировать конкретный объект: например, выбрать спрайт и дважды кликнуть на нем или на кадре анимации на панели Animator (Анимация).

При открытии Picture Editor (Редактор изображений) появляется окно как на рисунке выше. Оно разделено на 7 секций:

• The Menu Bar (Панель меню) — располагается вверху.
• The Tool Bar (Панель инструментов) — располагается слева.
• The Image Window (Окно изображения) — располагается в центре.
• The Color Selector (Переключатель цвета) — располагается справа.
• The Filmstrip (Лента анимации) — располагается под окном изображения. Показывается только в режиме редактирования анимации.
• The Swatch Palette (Палитра с образцами) — располагается под лентой анимации.
• The Coordinates Dialog (Панель координат) — располагается в нижнем правом углу.

Теперь рассмотрим каждую секцию по отдельности.

The Menu Bar (Панель меню)

The Menu Bar (Панель меню) располагается вверху и содержит следующие команды (слева направо):

Clear (Очистить) — удаляет изображение.

Open (Открыть) — открывает существующее изображение. Поддерживаются файлы форматов .png, .jpg, и .bmp. Редактор изображений автоматически применяет альфа канал для .png изображений, поэтому изображения с прозрачностью будут импортированы корректно.

Save (Сохранить) — сохраняет текущее изображение во внешний файл.

Cut (Вырезать) — вырезает выделенные пиксели.

Copy (Скопировать) — копирует выделенные пиксели в буфер обмена.

Paste (Вставить) — вставляет выделенные пиксели из буфера обмена.

Undo (Отменить) — отменяет предыдущее действие. Construct поддерживает несколько уровней отмены.

Redo (Сделать вновь) — повторяет отмененное действие. Construct поддерживает несколько уровней повторения.

Flip Horizontal (Отразить по горизонтали) — отражает текущее изображение или выделенную область по горизонтали.

Flip Vertical (Отразить по вертикали) — отражает текущее изображение или выделенную область по вертикали.

Rotate (Повернуть) — поворачивает текущее изображение или выделенную область.

Crop (Обрезать) — обрезает лишние прозрачные пиксели по краям изображения.

Совет: используйте Shift+Crop, чтобы оставить однопиксельную прозрачную границу по краям изображения. Это может улучшить качество вращения и масштабирования объектов таких как спрайт.

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

Resize Canvas (Изменить размер полотна) — изменяет размер границ изображения. Изменение размера не растягивает ваше изображение, а просто обрезает пространство или добавляет пространство для правого и нижнего краев изображения.

Wrap Mode (Режим обертывания) — создает бесшовную текстуру, т.е. когда вы рисуете и кисточка выезжает за край, то выезжает с другой стороны изображения.

Background Toggle (Переключение заднего фона) — включает/отключает фон.

Collision Mask (Маска столкновения) — в данный момент эта опция еще не реализована.

The Tool Bar (Панель инструментов)

The Tool Bar (Панель инструментов) располагается слева и содержит следующие инструменты (сверху вниз):

Freestyle Select (Свободное выделение) — рисует область выделения вручную (кликните левой кнопкой мыши и не отпуская нарисуйте область выделения).

Polygonal Select (Полигональное выделение) — нарисуйте область выделения с помощью прямых полигональных линий (кликните левой кнопкой мыши и тащите, чтобы начать выделение. Кликните еще раз, чтобы добавить новую точку, и нажмите дважды, чтобы завершить выделение).

Rectangle Select (Прямоугольное выделение) — рисует прямоугольную область выделения (кликните левой кнопкой мыши и не отпуская нарисуйте область выделения).

Ellipse Select (Овальное выделение) — рисует овальную область выделения (кликните левой кнопкой мыши и не отпуская нарисуйте область выделения).

Wand (Волшебная палочка) — выделяет область одного цвета.

Color Select (Выделить Цвет) — выделяет все области одного цвета.

Magnify (Увеличить) — если вы выбрали данный инструмент, то кликая левой кнопкой мыши окно будет увеличиваться, а правой — уменьшатся.

Color Picker (Выбор цвета) — кликните, чтобы выбрать цвет на картинке (вы так же можете выбрать цвет зажав клавишу Control и кликнув левой кнопкой мыши по цвету).

Pencil (Карандаш) — с помощью данного инструмента вы можете рисовать однопиксельной кистью (левая кнопка мыши рисует основным цветом, а правая — фоновым). При выборе данного инструмента вверху на панели появятся дополнительные настройки. Смотрите рис. 1.

Рис. 01 — Дополнительные настройки для карандаша.

• Opacity (Прозрачность) — здесь вы можете задать степень прозрачности карандаша
  (0 — полностью прозрачный; 255 — нормальный).
• Flow (Поток) — задает поток.

Brush (Кисть) — с помощью данного инструмента вы можете рисовать кистью с настраиваемым размером. Как только вы выберите кисть вверху на панели появятся дополнительные настройки. Смотрите рис. 2.

Рис. 2 — Дополнительные настройки для кисти.

• Size (Размер) — задает размер кисти.
• Thickness (Толщина) — задает толщину кисти.
• Hardness (Жесткость) — задает жесткость кисти (100 — плотная кисть, 0 — разблюренная).
• Angle (Угол) — задает угол кисти.
• Opacity (Прозрачность) — задает прозрачность кисти.
• Flow (Поток) — задает поток.
• Smooth (Сглаживание) — при включении этой опции по контуру кисти будет добавляется небольшое сглаживание. Смотрите рис. 3.

Рис. 3 — Сравнение.

Eraser (Ластик) — стирает пиксели с помощью кисти. Имеет те же настройки, что и инструмент Brush (Кисть).
Text (Текст) — в данный момент этот инструмент еще не реализован.
Flood Fill (Заливка) — инструмент позволяет залить выделенную область выбранным вами цветом (левая кнопка мыши заливает главным цветом, правая — фоновым). Инструмент имеет всего одну дополнительную настройку. Смотрите рис. 4.

Рис. 4 — Дополнительная настройка инструмента Flood Fill (Заливка).

• Alpha 1 (Прозрачность) — задает прозрачность заливки.

Change Color (Сменить цвет) — заменяет цвет во всех областях на выбранный вами.

Line (Линия) — с помощью этого инструмента вы можете рисовать прямые линии, для этого нажмите левую кнопку мыши и не отпуская переместите курсор в другую точку. Имеет те же настройки, что и инструмент Brush (Кисть).

Rectangle (Прямоугольник) — с помощью этого инструмента вы можете рисовать прямоугольники и квадраты, для этого нажмите и удерживайте левую кнопку мыши и перемещая курсор рисуйте прямоугольник. Зажмите shift, чтобы рисовать только квадрат. При выборе данного инструмента вверху на панели появятся дополнительные настройки. Смотрите рис. 5.

Рис. 05 — Дополнительные настройки для Rectangle (Прямоугольник).

• Edge (Край) — задет толщину границы.
• Style (Стиль) — имеет 5 различных режимов рисования прямоугольника
  (1 — рисует только контур прямоугольника; 2 — рисует прямоугольник фоновым цветом; 3 — рисует прямоугольник основным цветом; 4 — рисует прямоугольник с градиентом по горизонтали (используя основной и фоновый цвет); 5 — рисует прямоугольник с градиентом по вертикали (используя основной и фоновый цвет)).
• Alpha 1 (Прозрачность) — задает прозрачность основного цвета.
• Alpha 2 (Прозрачность) — задает прозрачность фонового цвета.

Polygon (Многоугольник) — с помощью этого инструмента вы можете рисовать многоугольники кликая левой кнопкой мыши и добавляя точки. Двойной клик закроет многоугольник.

Ellipse (Овал) — с помощью этого инструмента вы можете рисовать овал. Зажмите Shift, чтобы рисовать только круг. Имеет те же настройки, что и инструмент Rectangle (Прямоугольник).

Hotspot (Точка) — это точка на изображении, которая определяет, где изображение оказывается во время запуска приложения. Например, если точка располагается в левом верхнем углу, то когда вы задаете ей позицию, вы задаете позицию верхнего левого угла. При анимации очень важно помнить, что перемещение точек с изображения на изображение вызовет дерганное отображение, поэтому точки всегда должны иметь одинаковую позицию на всех кадрах анимации. С помощью данного инструмента вы можете установить центр для вашего изображения. Обратите внимание, что Hotspot (Точка) применяется только к объектам Sprite (Спрайт) и текстурам 3D Box. При выборе данного инструмента вверху на панели появятся дополнительные настройки. Смотрите рис. 6.

Рис. 06 — Дополнительные настройки для Hotspot (Точка).

• X — задает точную X-координату точки.
• Y — задает точную Y-координату точки.

При открытии изображений из файла, по умолчанию точка находится по центру. Вы можете разместить точку с помощью мыши, или задать ей точные координаты с помощью дополнительных настроек (рис. 06). Так же вы можете использовать цифры нумпада на клавиатуре (от 1 до 9), чтобы выровнять точку. Например, нажимая цифру 5 вы установите точку по центру, 7 — переместите в верхний левый угол и т.д.

Image Point (Точка изображения) — точки изображения могут быть очень полезны, когда объекты взаимодействуют друг с другом. Они задают точное местоположение относительно спрайта, когда происходит какое-то действие. С помощью данного инструмента вы можете задать одну или несколько точек для вашего изображения. Обратите внимание, что это относится только к спрайтам. При выборе данного инструмента вверху на панели появятся дополнительные настройки. Смотрите рис. 7.

Рис. 07 — Дополнительные настройки для Image Point (Точка изображения).

• X — задает точную X-координату точки.
• Y — задает точную Y-координату точки.
• Список — активный список созданных точек (по умолчанию только одна с именем point).
• + — при нажатии на эту опцию откроется окно Manage image points (Управление точками изображения), в котором вы можете добавить новые точки. Смотрите рис. 08.

Рис. 08 — Manage image points (Управление точками изображения).

Добавленные точки можно будет выбирать в активном списке рядом со знаком +.

Одно из популярных применений точек изображения является создание точки для выстрела из ружья персонажа. Просто ставите точку на кончике ружья, затем в редакторе событий в действии выбираете имя точки и ставите команду создать пулю. Таким образом пуля будет появляться из ружья в заданном месте, что обеспечивает более реалистичную имитацию стрельбы из оружия. Image Point (Точка изображения) также нужно проставлять для каждого кадра анимации, но в отличии от Hotspot (Точка) их может быть сколько угодно. Для выравнивание точек вы можете использовать цифры нумпада на клавиатуре.

The Image Window (Окно изображения)

Это область редактора в котором рисуется изображение. Границы изображения обозначаются черным прямоугольником. Вы можете увеличить окно изображения с помощью инструмента Magnify (Увеличить), или прокруткой колесика мыши вверх/вниз. Если изображение выходит за пределы окна изображения, вы можете перемещаться с помощью полосы прокрутки или двигать окно с помощью зажатой средней кнопки мыши.

The Colour Selector (Переключатель цвета)

Кликая левой кнопкой мыши на цветном поле вы можете выбрать основной цвет. А кликая правой кнопкой мыши — фоновый цвет. Ползунок рядом с выбора цвета регулирует яркость цвета (диапазон от черного к белому). Вы можете ввести значение вручную, для красного, зеленого и синего (RGB), или для оттенка, насыщенности и яркости (HSL). Под выбором цвета есть два квадратика и кнопка. Цвет в верхнем квадратике показывает главный выбранный цвет, а цвет в нижнем квадратике — фоновый цвет. Кнопка рядом с этими квадратиками переключает основной и фоновый цвета.

The Filmstrip (Лента анимации)

Лента анимации появляется сразу при открытии редактора изображений. По умолчанию в ней всего один кадр, но когда вы загружаете новые кадры через панель Animator (Анимация) они становятся доступными здесь в ленте анимации. Она позволяет перемещаться по кадрам анимации выбранного спрайта, что позволяет редактировать сразу несколько кадров без необходимости открывать каждый из них по отдельности. Кликните на кадр, чтобы посмотреть его в окне изображения.

The Swatch Palette (Палитра с образцами)

Это настраиваемая палитра, которая позволяет сохранять вам наиболее используемые цвета. Главный цвет помечается тонкой белой границей, а фоновый — толстой белой границей. При изменении главного или фонового цвета, это отражается на палитре, которую вы выбрали.

The Coordinates Dialog (Панель координат)

Это диалоговое окно показывает информацию о текущем масштабе окна и X,Y координаты выбранного инструмента. Здесь также есть автоматическое вычисление, которое показывает общее число пикселей от начала рисования. Это помогает, если например, вы хотите отмерить линию длиной ровно 10 пикселей.

Автор статьи: Edison

Опубликовано: 9 июля, 2010

Категория: Интерфейс

Понравилась статья? Подписывайтесь на нашу RSS-ленту , чтобы быть в курсе последних новостей!