Редактор рпг иконок
Редактор иконок — это не просто приложения для создания изображений, которые вы можете использовать в редакторе РПГ карт или даже при создании миров в редакторе гексагональных карт. Наш редактор РПГ иконок — это инструмент, который позволяет создавать SVG иконки любого формата. Мы даже помогали своим друзьям создавая логотипы и иллюстрации для сторонних проектов, при помощи нашего приложения.
Данное приложение пожалуй самое сложное для понимания и освоения во всей экосистеме RPGInferno, даже сложнее редакторов карт, просто потому что там все достаточно линейно для понимания, а в редакторе иконок столько различных мелочей и нюансов, что иногда даже мы, как разработчики, забываем, что он может.
Стоит отметить, что при помощи данного приложения у вас не получится создавать трехмерные объекты, вы можете имитировать объем разными способами, но, основной задачей редактора является создание плоских 2D иконок, которые обладают хорошей масштабируемостью без потери качества.
Обзор интерфейса
Редактор РПГ иконок является оврелейным приложением, которое всегда вам доступно, таким образом вы можете добавлять и редактировать иконки прямо во время создания РПГ карт или гексагональных карт. Все изменения сразу будут применены к текущей и всем вашим картам!
Мы стремились сделать редактор максимально простым и интуитивным, как и в случае с редактором объектов, данный редактор имеет уже знакомую компоновку: левая панель, центральный холст, правая панель и панель инструментов.
Левая панель — левая панель разделена на два компонента, как и редактор переходов для текстур, дело в том, что мы не можем создавать иконки одинаково для редактора РПГ карты и для редактора гексагональных карт. Если у локальных карт для каждой клетки существует всего 8 соседей, то для каждого гекса соседей всего 6 и из-за этого мы создали 2 вида иконок: квадратные иконки и гексагональные иконки соответственно. Для переключения между режимами используйте закладки в левой панели.
Каждый из режимов обладает своим списком иконок, в нем представлены все доступные цветовые иконки, как и в других приложениях список разделен на 3 категории: сообщество, подписки и ваши личные схемы.
- Редактирование
- вы можете выбирать любую иконку, но редактировать вы можете только свои личные, но это не мешает создавать копии иконок, которые доступны как общественные или по подписке.
- Удаление
- у ваших иконок доступна кнопка удаления, двойное нажатие по которой удалит иконку, помните, что при удалении иконки, все её вхождения будут удалены со всех существующих карт.
- Сортировка
- доступна только для личных иконок, достаточно зажать и перетаскивать иконки, для того чтобы сменить последовательно. Все изменения сразу же применяются и в интерфейсе редактора РПГ карт и редактора гексагональных карт.
Центральный холст — в отличии от других приложений типа редактора дорог или редактора текстур, в редакторе иконок, центральный холст является интерактивной частью и, пожалуй, самым главным инструментом, при помощи которого вы создаете иконки.
Холст состоит из трех областей, в которых расположены органы управления: панель настроек, интерактивный холст и нижняя панель.
Панель настроек — здесь находятся шесть кнопок: настройка сетки, включение/выключение сетки, включение/выключение прицела, настройка шага сетки, настройка шага смены размера и настройка шага угла поворота.
- Настройка секторов
- в зависимости от выбранного режима квадрат или гекс, у вас будет от шести до восьми соседей, сделано это для того, чтобы была возможность создавать большие иконки в виде коллажей. Нажав на кнопку настройки секторов, вы переключитесь в особый режим, где сможете включать и выключать отображение тех или иных соседей, помните, что отключение соседа не означает удаление примитивов, которые вы расположили в этом месте, они просто будут вырезаны при финальной отрисовке иконке.
- Включение/выключение сетки
- иногда необходимо выключить сетку, чтобы посмотреть на результат работы без раздражителей типа сетки, она конечно помогает при разработке иконки, но нужна не всегда. Помните, что происходит только визуальное отключение сетки.
- Включение/выключение прицела
- прицел это просто способ указать на геометрический центр холста для того, чтобы вы видели относительного чего, будет происходить отражение.
- Шаг сетки
- для упрощения работы с редактором мы создали систему, которая позволяет указать шаг, на который будут перемещаться примитивы при их расположении, таким образом намного легче управлять и компоновать ваши иконки. К примеру, выравнивание иконок может быть достаточно мучительным процессом, но с системой опорной сетки, у вас все получится в лучшем виде. Для того чтобы выбрать шаг, просто наведите на кнопку настройки шага сетки и выберите нужный шаг из выпадающего меню, в нем представлены следующие размеры сетки (размеры в пикселях): 1, 4, 8, 16, 24, 32, 40 и 48.
- Шаг размера
- как и для размера сетки, определенные удобства представляет возможность смены размера примитивов при помощи фиксированных шагов. Как и с шагом сетки, вам достаточно навести на кнопку и выбрать нужный шаг смены размера (размеры в пикселях): 1, 4, 8, 16, 24, 32, 40 и 48.
- Шаг поворота
- иногда приходится вращать примитивы, к примеру деревья не всегда стоят ровно, возможно вам нужно завалить одно или сделать пизанскую башню, а она же покосившаяся, так что поворот примитивов нужен в любом случае. Но, как и в предыдущих случаях, вращать на один градус, это не самый удобный вариант, поэтому мы создали возможность регулировки угла поворота, наведите на кнопку и выберите угол, на который вы хотите поворачивать ваши примитивы (размеры в градусах): 1°, 5°, 10°, 15°, 20°, 30°, 40° и 45°.
Интерактивный холст — в этой области вы будете взаимодействовать с примитивами, а именно: перемещать, менять размер, поворачивать. Также если вы зажмете кнопку “ctrl”, то сможете выбирать при помощи рамки большое количество примитивов для группового перемещения, после того как вы выберете все необходимые примитивы, будет создана общая рамка, при помощи которой вы сможете перемещать группу примитивов.
При наведении на примитивы, которые находятся на холсте, вы можете нажать на них и таким образом вы перейдете в режим редактирования конкретного примитива, на правой панели будут активированы все необходимые органы управления. В рамках холста нас интересует только рамка, в которую вписан примитив, при наведении мышки на данный объект, вы увидите 3 квадрата, два из которых черных, а один розовый, при помощи квадратов вы можете менять размер в соответствующих плоскостях, а рядом с розовым квадратом находится область ухватившись за которую, вы можете осуществлять вращение примитива на холсте.
Правая панель — данная панель содержит основной функционал по редактированию конкретных примитивов, которые находятся на холсте. В отличии от других редакторов в этой области редактора сокрыто три режима работы: примитивы, слои и схемы.
- Режим примитивов
- в данном режиме представлены все примитивы, которые вы можете использовать при создании иконок, в се примитивы поделены на категории, которые могут быть свернуты и раскрыты, для добавления примитива на холст нажмите на него в правой панели вы перенесите мышку на холст, после нажатия левой кнопкой мышки по холсту, вы установите примитив в указанную позицию.
- Режим слоев
- здесь представлено три набора элементов управления: позиционирование примитива, декорация примитива, список палитр, список слоев.
Панель позиционирования примитива - доступна только тогда, когда вы находитесь в режиме редактирования конкретного примитива (для этого надо выбрать примитив в списке добавленных примитивов). В данной панели присутствуют следующие возможности по управлению:
- X
- позиция по координатной оси X, вы можете менять вручную положение при помощи клавиатуры, помните что на данное поле влияет выбранный шаг сетки. При установке курсора в данном текстовом поле вы можете менять значение на величину шага сетки при помощи стрелок.
- Y
- позиция по координатной оси Y, вы можете менять вручную положение при помощи клавиатуры, помните что на данное поле влияет выбранный шаг сетки. При установке курсора в данном текстовом поле вы можете менять значение на величину шага сетки при помощи стрелок.
- В (высота)
- определяет высоту объекта, как и с координатами, вы можете либо вводить цифры на клавиатуре, либо использовать стрелки. Помните, что на данное поле влияет шаг изменения размера.
- Ш (ширина)
- определяет высоту объекта, как и с координатами, вы можете либо вводить цифры на клавиатуре, либо использовать стрелки. Помните, что на данное поле влияет шаг изменения размера.
- Включение/выключение пропорций
- при активации данной кнопки, будет включена система сохранения пропорциональности примитива, при изменении размеров примитива вы не сможет сделать так, чтобы примитив утратил свои оригинальные пропорции.
- Пов (поворот)
- здесь представлено значение поворота примитива в градусах, относительно оригинального положения. Вы можете вводить цифры при помощи клавиатуры, значение будет приводиться к правильному значению на основе шага поворота, который вы можете редактировать на центральном холсте. Стрелки клавиатуры, будут менять значение на величину шага поворота.
- Отражение
- возможность отражения в горизонтальной и вертикальной плоскостях представлены в виде двух кнопок, по нажатию на которые вы будете отражать примитив в соответствующей плоскости.
- Декорации примитива
- представлены в виде слайдеров прозрачности размытия.
- Прозрачность
- примитива применяется к примитиву в целом, где 0 — абсолютно прозрачный примитив и 1.0 абсолютно не прозрачный.
- Размытие
- очень удобный инструмент для создания теней, достаточно скопировать элемент и применить к нему данную декорацию.
Система палитры — при создании иконки, может выйти так, что вы примените достаточно большое количество различных примитивов. В первой итерации данного приложения мы создали большое количество иконок для нашего редактора локальных РПГ карт и выяснилось, что к каждой из них надо применить цветовые схемы, которые представлены в редакторе РПГ объектов… Надо ли говорить, что, когда у вас 20 примитивов на холсте и вам надо сделать 5 цветовых схем, процесс обещает быть утомительным, ибо надо проставить десяток цветов на определенных примитивов. В этой связи мы решили разработать систему палитр, где бы мы могли создать ограниченное количество цветов, а потом именно эти цвета применять к примитивам.
Таким образом мы решаем большую проблему, с помощью палитр мы можем легко создавать цветовые схемы для иконок. Минимальное количество цветов в палитре 1. Если у вас только один цвет, то вы не можете его удалить.
Для добавления нового цвета в палитру просто нажмите на иконку плюса и новый цвет будет добавлен.
Для редактирования цвета, просто нажмите на квадрат цвета в палитре и у вас откроется интерфейс редактирования цвета, в отличии от редактора текста, в оверлейном режиме мы представляем усеченную версию редактора цветов.
Для удаления цвета достаточно дважды нажать крестик в углу цвета палитры. Как и в редакторе текстур, требуется двойное нажатие для подтверждения.
Список используемых примитивов - в данном списке представлены все те примитивы которые используются для создания иконки. Каждый примитив может содержать в себе набор частей, из которых он состоит, к примеру, у куста с ягодами может быть три составные части: листва, ветви и сами ягоды. В нашем редакторе РПГ иконок вы можете редактировать каждую часть примитива отдельно от других, благодаря такому подходу мы достигаем потрясающей гибкости. Каждый примитив представлен в виде одной записи в списке, у которой есть следующий набор манипуляторов:
- Кнопка раскрытия списка частей примитива
- с её помощью вы можете увидеть все части, которые есть у примитива ну и отредактировать их если требуется.
- Превью примитива
- здесь вы видите текущее состояние примитива.
- Название примитива
- при наведении на название, примитив будет подсвечен на холсте, для того чтобы вы могли понять, где он располагается. При нажатии вы включите режим редактирования указанного примитива, если примитив уже был выбран, то вы отключите режим редактирования.
- Копирование слоя
- при нажатии, вы создадите дубликат примитива, который будет помещен сразу после примитива, с которого копия делалась.
- Удаление примитива
- здесь все, как и в других редакторах, к примеру в редакторе переходов для текстур, достаточно дважды нажать на крестик и примитив будет удален.
- Сортировка примитивов
- по умолчанию все примитивы добавляются в конец с писка, но никто не мешает пересортировать список, просто ухватитесь за превью примитива и пересортируйте список так, как вам того хочется.
- Обводка примитива
- здесь все достаточно просто, вам доступна панель цветовой палитры, для того чтобы вы могли выбрать цвет обводки. Список цветов обновляется динамически, так что цвета всегда синхронизированы с текущим состоянием палитры.
Особо стоит отметить цвет, который представлен прозрачным цветом с крестиком, при выборе этой опции вы выключите работоспособность маски вырезания.- Толщина обводки
- работает аналогично маске вырезания, как и кнопка, которая управляет шагом толщины. Также как и панель со стилями изгибов линий и скруглением концов линий. Это типовые решения в нашем редакторе РПГ иконок.
- Выбор цвета
- здесь просто представлен список актуальных палитр, этот цвет указывает общий цвет примитива, части примитива могут его наследовать.
Цвет с крестиком в данном случае работает особенным образом, нажав на этот цвет, весь примитив выпадет из маски вырезания, но обводка маски вырезания останется, таким образом можно вырезать силуэты примитива в других объектах.
Маска вырезания — это достаточно сложная подсистема для понимания и для того, чтобы овладеть всеми её возможностями понадобится время, так что не беспокойтесь, если сразу не все поймете, просто практикуйтесь и экспериментируйте.
Предположим, вам нужно нарисовать окружность, как это сделать? В обычным случае, вам нужно взять круг и вырезать в нем отверстие, но в нашем редакторе нет такого элемента, у нас есть только круги. Как поступить? Нам нужно взять два круга, один большего диаметра, другой меньшего и сделать так, чтобы меньший круг вырезал часть круга с большим диаметром, для этого нам понадобится два свойства: кого вырезает текущая фигура и кто вырезает текущую фигуру.
Для вырезания мы сделали некоторый список слоев, вы можете присваивать примитивам эти слои, к примеру, если вы присвоите большому кругу слой ALPHA как слой, который вырезает текущую фигуру («меня вырезает»), то это будет означать, что все примитивы, у которых прописан слой ALPHA в поле «я вырезаю», будут вырезать части большого круга. Так что для создания окружности на большом круге мы ставим «Меня вырезает: ALPHA», а на малом круге ставим «Я вырезаю: ALPHA», таким образом малый круг будет вырезать часть большого, но с виду ничего не поменялось. Дело в том, что вырезание произошло, просто тот сегмент, который мы вырезали закрывается маленьким кругом.
Вы можете воспользоваться слайдером «Область вырезания», этот параметр создает специальную обводку вокруг фигуры, которая вырезает другие объекты, если вы будете её регулировать, вы заметите как вокруг круга начнет появляться вырезанная окружность, но это все равно не то что нам нужно.
Отдельно стоит отметить кнопку «Шаг обводки в 1 условную единицу», если вы включите этот переключатель, то обводка будет изменяться с таким шагом, который будет представлен в виде одного пикселя в редакторе локальных РПГ карт или же в редакторе гексагональных карт.
Так вот, мы все еще не можем сделать нашу окружность, в центре остается маленький круг, как от него избавиться? Ну тут все просто, просто укажите для маленького круга «Меня вырезает: ALPHA», таким образом этот круг будет вырезать всех, кого вырезает альфа, включая самого себя! И вуаля — эффект достигнут.
У маски вырезания есть дополнительные 6 кнопок, которые регулируют каким образом соединяются линии у примитивов и каким образом представлены концы линий, мы не будем здесь подробно рассматривать их возможности, поскольку они ярко продемонстрированы на их превью.
Нажав на кнопку раскрытия частей примитива, вы увидите список всех частей, которые доступны в рамка указанного примитива и все органы управлениями частями, такие как:
- Сокрытие части
- нажав на иконку «глаза» вы сможете полностью сокрыть указанную часть. К примеру, можно убрать ветви у дерева оставив одни листья.
- Превью части примитива
- с помощью этого изображения вы сможете понять, за какую часть изображения отвечает данная часть.
- Прозрачность
- данный слайдер управляет прозрачностью самого объекта, который отрисовывает часть примитива, прозрачность, которую вы можете указывать при помощи цвета это не тоже самое.
- Цвет части
- работает ровно так-же как и цвет всего примитива, только цвет применяется к конкретной части примитива.
- Сброс цвета
- при нажатии на эту кнопку, вы включаете режим наследования цвета, в этом случае цвет части будет унаследован от цвета всего примитива.
Схемы примитива — данный режим активируется при помощи соответствующей закладки в правой панели. Данный раздел доступен только для иконок, которые сохранены в нашей базе данных. Эта система аналогична той, что применяется в редакторе РПГ объектов, если представить иконки в качестве объектов.
Перейдя в этот режим, вы увидите, что от интерфейса правой панели остались только список палитр и появится список цветовых схем. При помощи этого режима вы можете очень быстро создавать новые цветовые схемы для иконки, достаточно просто редактировать цвета в палитре и сохранять или добавлять новые цветовые схемы. Соответствующие кнопки доступны в подвале правой панели.
Цветовые схемы могут удаляться при помощи двойного клика по крестику. Цветовые схемы, которые принадлежат не вам, будут иметь соответствующую пиктограмму в углу.
Панель инструментов — в режиме редактирования примитива, над холстом на панели пользователя появляются дополнительные органы управления примитивом, которые можно разделить на три категории: горизонтальное выравнивание, вертикальное выравнивание и отражение вдоль оси.
- Горизонтальное выравнивание — при помощи кнопок этой секции, вы можете поставить примитив к левому краю холста, в горизонтальный центр холста и по правому краю холста.
- Вертикальное выравнивание — при помощи кнопок этой секции, вы можете поставить примитив к верхнему краю холста, в вертикальный центр холста и к нижнему краю холста.
- Отражение вдоль оси - «прицел», который вы можете включать и выключать, как раз и показывает оси, относительно которых вы можете отражать объект. Если нажать на горизонтальное отражение, то примитив займет положение с другой стороны вертикальной красной линии и будет удален от неё на тоже расстояние что и раньше. Тоже применимо и к вертикальному отражению позиции примитива.
Заключение
Редактор РПГ иконок самое продвинутое приложение нашей экосистемы, с его помощью вы можете сделать абсолютно любую двухмерную иконку, которую только можете пожелать, все ограничивается только вашей фантазией. Если в процессе использования нашего редактора РПГ карт вы столкнулись с тем, что вам не хватает какого-то предмета утвари или быть может причудливой лавочки, с большой вероятностью вы сможете придумать минималистичный дизайн и создать этот предмет в нашем редакторе РПГ иконок.
Конечно, возможности по созданию иконок не ограничиваются только использованием их в наших редакторах, вы можете создавать совершенно разные изображения вплоть до графики для игр или необходимой при разработке веб-сайтов. Мы не накладываем никаких ограничений по использованию нашего приложения — творите без каких-либо ограничений, мы будем только рады. И не забывайте делиться своим мнением с нашей командой в дискорд канале.