Данная статья посвящена встроенному в 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 пикселей.

"Collision Mask (Маска столкновения) — в данный момент эта опция еще не реализована."
Не знаю, для какой версии написана эта статья, но сейчас все работает.
Статья была написана на основе Construct 0.99.62
Суперский редактор. Вам надо его как отдельную прогу выпускать
Согласен с Gangstar777.)
Спасибо за статью =)
У меня проблема, когда я пытаюсь загрузить картинку в редактор мне высвечивается ошибка:
Unable to load this image. The format may be unsupported, or the image may be too large for your hardware.
Т___Т Помогите плиз
Сохрани изображение в .bmp или в .png, вроде должно сработать. 😉