Итак, мы находимся внутри редактора Piskel.
Начнем изучать интерфейс данной программы сверху вниз. И первым элементом у нас идет Панель управления.
Здесь слева мы можем дать название нашей картинки и изменить ее местоположение, с справа у нас есть команды по порядку: сохранить, отменить (т.е. выйти из этого графического редактора), показать папку где находится или будет находится файл, указать папку где будет находится файл и свернуть панель управления.
Как и во всех графических программах у здесь также есть панель инструментов, где можете найти необходимый вам инструмент (карандаш, стёрку, заливку и т.д.).
Далее слева направо у нас идет Панель анимации.
Здесь мы можем создать новый кадр анимации, а также выбрать тот кадр, который мы хотим редактировать.
Затем у нас идет Холст.
Холст – это то место где и происходит редактирование изображение.
А справа у нас идут вспомогательные окна.
Рассмотрим их пока поверхностно сверху вниз:
окно предпросмотра (там можно посмотреть анимацию);
слои. Я думаю вы уже работали в графических редактор и объяснять что такое слои не нужно;
окно трансформации (там содержатся команды по развороту объекта, выравниванию и т.д.);
панель палитр. Туда будут попадать цвета, которые вы будете выбирать и использовать на панели инструментов, а также вы можете загружать и сохранять свои палитры.
И последний элемент справа – это панель опций, где мы можем изменить размер картинки, сохранить файл или экспортировать в другой формат.
И давайте рассмотрим эту панель подробнее. Нажимаем на первую кнопку с общими настройками.
Как видите данная опция состоит из трех вкладок: Mics (разное), Grid (секта), Tile Mode (режим плитки).
Начнем со вкладки Misc.
Что мы можем здесь настроить? Во первых цвет фона, думаю, здесь ничего сложного. Далее идет уровень прозрачности слоев. Когда вы будете создавать новый слой, уровень прозрачности слоев будет контролировать – будет ли виден предыдущий слой в новом слое. Например, нарисую что-нибудь на первом слое.
Теперь создаем новый слой.
Я просто уже создавал слой и поэтому мой новый слой называется Layer 3. Как вы видите, на новом слое чуть видно предыдущий, так как работает настройка уровень прозрачности слоев в 0.2. Если мы укажем 0, то предыдущий слой полностью будет не виден, а если 1, то полностью виден, будто нет никакой прозрачности.
Maximum FPS. Здесь мы можем указать максимальное количество кадров в секунду, которое мы можем увидеть в окне предпросмотра.
И последняя настройка на этой вкладке – это Color Format. Здесь вы можете выбрать одну из двух цветовых схем: HEX или RGB. Вкратце, эти цветовые схемы означают то, в каком формате программа будет описывать цвет: или с помощью 16-ного кода (например, #FF0000 – это красный), или с помощью трех каналов RGB (255.0.0. – это также означает красный). На самом деле здесь ничего сложного, и во время практике вы в этом убедитесь.
Переходим на следующую вкладку Grid.
Чтобы хорошо ее увидеть, давайте зададим цвет сетки как зеленый и активируем ее с помощью Enable grid.
И как мы видим, поверх нашего изображения стала отображаться сетка. С помощью Grid size мы можем увеличивать ширину линий сетки. Например, здесь я увеличил ширину линий сетки с 1px до 2px.
Если посмотреть на сетку, то она как будто состоит из пикселей (или просто маленьких квадратиков), и с помощью Grid spacing мы можем увеличивать размер этих квадратиков.
А зачем нужна Grid color вы уже знаете. Но если вы укажете прозрачный цвет, то сетка будет отображаться только на самом рисунке в виде белых линий.
Третья вкладка – это режим тайлов.
Мы можем его включить, и таким образом, если мы делаем какую-то текстуру, либо тайл в виде платформы для аркадных игр, по котором персонаж будет перемещаться, мы видим как эти тайлы будут стыковаться друг с другом.
А с помощью настройки Mask opacity мы можем настроить прозрачность стыковочных тайлов.
Теперь переходим к следующей опции – это Resize.
Здесь мы можем увидеть и изменить размер нашего холста для рисования в пикселях.
Если мы оставим галочку возле Maintain aspect ratio, то размер будем изменяться пропорционально, т.е. если увеличите высоту, то увеличится и ширина автоматически, чтобы сохранить пропорцию высоты и ширины.
Если установить галочку для Resize canvas content, то, например, при увеличении холста увеличится также и картинка, но перестанет быть доступный настройка Anchor.
С помощью Anchor мы можем задать в какие стороны будет увеличиваться холст относительно нашей картинки.
Ну и кнопка Resize нужна чтобы применить все наши изменения в настройках выше (также можно просто нажать кнопку Enter).
Раздел Default Size нужен, чтобы вы могли указать стандартный размер, т.е. тот размер, которой будет при создании нового холста.
В опции Save у нас есть настройки для сохранения файла.
Как вы видите, мы можем задать имя файлу, описания, а также сохранить или локально на компьютере, или онлайн. Но в GDevelop уже автоматически сохраняется в папку с игрой, так что эта опция нам не сильно нужна.
Далее у нас идет опция экспорта.
Здесь мы можем увеличить размер картинки:
Далее ниже у нас есть несколько форматов сохранения. Рассмотрим первый GIF.
GIF это стандартный файл, который поддерживает анимацию. Если поставить галочку для Loop repeatedly, то анимация будет постоянно повторяться. Затем у нас есть следующие настройки: сохранить как файл gif на компьютер, или загрузить этот файл на сервер Piskel, и делиться им с другими по общедоступной ссылке.
Идем дальше – формат PNG.
Здесь с анимацией ситуация такая – GDevelop сохраняет анимацию в формате PNG в виде таблицы. Например, вот так:
Как видите здесь представлена анимация в виде таблицы состоящая из 6 столбцов и 4 строк.
Количество колонок и строк можно настраивать:
Ниже расположены кнопки экспорта файла как картинки в формате png в виде таблицы, публикация на сервере Piskel, экспорт для фреймворка PixiJS (используется для создания видео и игр), а также можно сохранить отдельно выбранный вами кадр анимации.
Следующий раздел – это Zip.
Здесь вы можете разбить кадры анимации на отдельные картинки в формате PNG и архивировать их в формате Zip. Здесь также можно задать префикс, т.е. это текст с которого будет начинаться название архива. Также если поставить галочку Split by Layers, то сохранятся все слои анимации отдельно.
И последний раздел – это Others
Здесь мы можем сохранить нашу анимацию в виде массива на языке программирования C. Думаю, эта настройка нам не пригодится.
Осталась последняя опция – это опция импорта.
Здесь все просто: мы можем импортировать в формате piskel из браузера, из компьютера, также импортировать другие форматы (jpeg, png, bmp и gif) и есть функция восстановления предыдущей сессии. Данная функция нужна в тех случаях, если у вас программа аварийно закрылась, но вы не успели сохранить свою работу. Редактор Piskel в определенные промежутки времени сохраняет резервные копии вашей работы.
На этом предварительный обзор интерфейса Piskel закончен, а с деталями мы познакомимся уже во время практики.