Решил поэкспериментировать с анимацией в пиксельарте. Взял чужого персонажа и оживил его по своему. Пока анимировал думал, можно ли как-то ускорить рисование пиксельарта, интересно существуют ли: рисование вектором, чтоб получался perfect pixelart, или 3д, по логике, между вершинами в 3д пространстве можно протянуть пиксельную линию по всем правилам пиксельарта.
- 15 декабря 2017, 17:30
- 07
>>по логике, между вершинами в 3д пространстве можно протянуть пиксельную линию по всем правилам пиксельарта
Только если самому отрисовывать 3д пространство, хотелось бы чтоб кто-то помог с теорией отрисовки 3д пространства, ибо если дать отрисовывать 3д, direct X (или что там сейчас отрисовывает 3д пространство, но это не подходит для пиксельарта), то линия будет дерганная и не по правилам пиксельарта, и когда камера бы двигалась, то весь рисунок бы искажался, а этого совершенно не нужно.
Тоже самое и вектор, там есть вершины, и по логике можно проложить между вершинами путь пикселя, который не нарушит ни одного правила рисования пиксельарта, и даже можно менять наклон рисунка, и как бы мы не меняли наклон, то пиксели бы не искажались, как делают в 2д редакторах, даже тех, которые специализируются на пиксельарте, другими словами, похоже никто не пытался этого делать, а если есть, то я хотел бы посмотреть на такие редакторы.
>>и даже можно менять наклон рисунка, и как бы мы не меняли наклон, то пиксели бы не искажались, как делают в 2д редакторах, даже тех, которые специализируются на пиксельарте
Для наглядности Aseprite, редактор предназначенный для рисования пиксельарта, не может адекватно повернуть и искажает сильно линию пикселей. Это бы сильно ускорило при анимации, если б не было столько искажений.
Самого это бесит. Карандаш хороший, а вот поворот - плохой. Много времени уходит на исправление и дорисовку пикселей после поворота.
Выход - сначала повернуть, а потом - обвести. Или не обводить вообще.
Не... Когда нужно целый спрайт повернуть, обводки недостаточно. Нужно править каждый пиксель.
Значит для начала тебе надо будет реализовать отрисовку линий в 2D между точками по правилам, учитывая поворот и тд. А потом уже переходить на 3D, где история практически та же. Так ведь?
Пока что решил остановиться на 2D.
И вот пока-что я ищу самый легкий инструмент, чтобы можно легко написать программу, где я мог изменять пиксели картинки и сохранять в PNG. Чтобы там попробовать написать алгоритмы для теста.
Не очень простое это дело, найти инструмент, которым будет легко работать не программисту. D:
Я раньше на BlitzMax работал, но теперь сайт исчез, и все скомпилированные версии, на нем вроде можно было создавать картинку/манипулировать и сохранять. Остались только сырые исходники BlitzMax на itch_io, но я не умею этим пользоваться и не хочется что-то еще лишнее устанавливать, чтобы просто откомпилировать.
PS Если не получится найти, то сделаю массив в Unity3d, и буду массивом из спрайтов в 1 пиксель рисовать. Только пока не имею представление, как массив сохранить в PNG Картинку. То еще извращение)
Явно лучше будет рисовать на текстуре (класс Texture2D) - функции тебе нужные: SetPixel, EncodeToPNG, DrawTexture.
Единственное не забыть - выводить 1:1 на экран.
Спасибо! :3
И я нашел более подробный материал, как сделать свою программу рисования на юнити, буду изучать)
https://www.youtube.com/watch?v=jx5U1ZaZ080
Нет, это ужасно, там не попиксельное рисование. Все-таки придется самому основу пилить.
Я пока не понимаю, как сделать так чтобы при любом зуме и положении камеры, мышкой можно было попасть в "правильный" пиксель, тот который находится прямо под курсором, а не где-то в случайном месте.
Похоже это оно.
https://docs.unity3d.com/ScriptReference/RaycastHit-textureCoord.html
УРА! Первая победа :3 До алгоритма еще рано, но зато теперь точно под курсором могу
рисовать в юнити, и в документации там была ошибка, строку "cam = GetComponent<Camera>();"
стоит закомментировать или удалить, ибо мы и так инициализируем камеру прямо в переменной.
Начну реализовывать алгоритм.
Главный минус, то что я пока не представляю, как сделать отмену. Возможно, сохранять все пиксели до изменений.
И придумал, как пока буду определять вектор и линию:
Если линия имеет один пиксель в ширину, то это будет считаться, как Outline при просчете алгоритма.
Каждый Outline имеет три вида направления:
1) Xn - это когда несколько пикселей стоят в ряд по X координате (и n обозначает количество)
2) Yn - это когда несколько пикселей стоят в ряд по Y (и n обозначает количество)
3) P1 - означает 1 пиксель
В правилах пиксельарта нужны всегда плавные линии, то есть если линия состоит из
X2 X3 X2 X3 это неправильно, и должна превратиться например в X2 X3 X3 X2 то есть плавный переход.
P1 это тож самое что X1 или Y1
Я его отделил, потому-что X - это 90 градусов, Y - допустим 0 градусов, а P1 это 45 градусов, то есть я разделил так их, чтобы потом корректировать, и если вдруг линия резко изменила угол, то нужно корректировать будет.
Пока P1 рисуются, то вообще не нужна никакая коррекция, ибо это идеально 45 градусов
И коррекции нужны, если в хаотичном порядке будут резко чередоваться P1 Xn Yn, хотя мне наверное нужно уточнить маркировку, ибо Xn может двигаться понемногу вверх или вниз, а это уже разные направления, потом придумаю, как это отделять, чтобы правильно корректировать.
PS или может стоит вообще маркировать по градусу угла...
Вот как я примерно представляю в GIF, как должно работать, но еще не брался за код (наверное будут проблемы с некоторыми нюансами)
Хоть у этих линий одна и та же маркировка, но линии немного разные, поэтому нужно придумать зависимость, не сменилось ли направление движение по другой координате, потому-что верхняя линия правильна с точки зрения пиксельарта, может быть это бицепс :D, а вторая линия неправильна, потому-что неровная просто, хотя бывают такие неровности, но чаще это выглядит, как баг, чем фича.
PS Возможно стоит сделать так, если разница в колебании пикселей небольшая, то не делать коррекцию, иначе иногда можно кое-чего лишнего скорректировать.
Но только при условии, что мы придерживаемся правил пиксельарта, то есть я сделаю две кисти: одна, которой можно мазать где угодно, и вторая будет корректировать автоматически по правилам.
Еба***ся! Ты что, 2D-редактор делаешь на Юнити? Это как поездом разгибать скрепки в тетрадке.
Возьми лучше что-то более подходящее, двухмерное и более низкоуровневое, например, Love2D. Я сам на нем делал графический редактор, пока не нашел Aseprite.
Да и зачем? В мире столько готовых графических редакторов, выбирай - не хочу. Да еще и новые появляются.
Если тебе не нравится что пиксельная картинка при повороте портится - рисуй в векторе и поворачивай сколько хочешь. С растром это неизбежно. Все автоматические починки и фиксы, что может сделать редактор со спрайтом после его поворота - это его домысливания.
Либо, как вариант, рисуй спрайт в большом разрешении, поворачивай его. А потом, когда все спрайты будут готовы - уменьшай размер спрайта в n^2 раз. Например, для пиксельных квестов для AGS так делают - рисуют сначала нормальную графику и анимацию персонажей (иногда полученную ротоскопией), а потом понижают разрешение картинки и вручную правят отдельные пиксели. Потому что вручную, попиксельно, ты такую плавную анимацию с таким кол-вом цветов фиг нарисуешь.
Как сделать отмену. 2 варианта:
- Простой. Сохранять полную копию картинки перед каждой новой операцией (после отпускания кнопки мыши), помещать их в очередь. При отмене / повторе - перемещаемся по этой очереди, при создании нового действия все копии позади удаляются.
Я у себя в редакторе делал такой вариант. Благо мне не нужна длинная очередь из изменений, если тебе достаточно исправить только что сделанное неправильное действие, то хватит ограничения очереди в 4-5 действий.
Но такой вариант лучше всего исп-ть только для заливки. Куча копий картинки будет жрать много памяти.
- Сложный. Создавай для каждого инструмента анти-инструмент, выполняющий противоположное действие. При выполнении действия записывай в очередь работу анти-инструмента (что нужно нарисовать чтобы вернуть картинку в пред. вид). Н-р, при рисовании карандашом нужно запоминать координаты и пред. цвета всех закрашенных пикселей.
Это сложнее реализовать, но будет кушать меньше памяти.
Немного не ясно что ты имеешь в виду. Скрипт же крепится на камеру (которая выводит изображение на экран), поэтому при старте cam инициализируется ссылкой на компонент камеры. Далее уже используется ScreenPointToRay, стреляющий луч из камеры, с помощью которого и вычисляются координаты на текстуре объекта (на котором рисуешь).
Во-вторых, если ты хочешь pixel perfect, как ты выводишь объект, на котором рисуешь? Он же может быть ближе / дальше от камеры, соответственно pixel perfect будет не всегда. UPD: если это неважно, ты только на текстуре работаешь, тогда вопрос отпадает.
А я его закрепил на сам объект) понятно, почему ошибка выдавалась.
Но во всех редакторах есть Увеличение, особенно это необходимо при рисовании пиксельарта, где все будет очень мелким, если оно будет 1:1 на экране, поэтому наверное хватит того, что мы просто смогли попасть в правильный пиксель. Пиксель перфект будет считаться внутри текстуры, хоть может быть на экране это будет немного искажено, но не настолько, насколько обычно искажено в Фотошопе, особенно в старых типа CS2.
Попробуй Processing. Там довольно легкий синтаксис и дружелюбная IDE. Функции, которые видимо понадобятся: Пиксели - 1 2. Сохранить картинку - 1. Есть хорошие источники для обучения (не только по языку, но и разным темам) - книга, youtube.
Спасибо! Пошел качать, вроде синтаксис легко запоминаем.
Книга любопытная, только подбор тем непонятно по какому принципу осуществлен)
Там лейтмотив - симуляция экосистемы. И в каждой главе это происходит - будь то движение "существ" и его последующее усложнение, или симуляция каких-то внешних факторов, на "существ" действующих.
Хочу попробовать сам сделать векторное рисование пиксельарта, и подумал, а какой инструмент лучше всего брать человеку, который плохо программирует? Где нужно выводить пиксели, обрабатывать их, да и еще сохранять, хотя бы в PNG, а в PSD фотошоп это уже роскошь недоступная, как мне кажется)
Пока решил взять Love2d хоть и не знаю его, но тут вроде есть какое-то решение, пример графического редактора, и вообще возможности работы с рисунком.
https://love2d.org/forums/viewtopic.php?t=79667
Нарисовать в 3д/векторе/чем угодно, а потом использовать получившееся как реф, срисовывая или рисуя поверх.
То, что рисуется автоматически, не пиксель-арт по определению.
>>То, что рисуется автоматически, не пиксель-арт по определению.
Но если оно будет выглядеть 100% также, то это не имеет значения.
Просто я на эту девушку потратил где-то часа 2-3, это всего-лишь одна анимация,
если бы можно было бы ускорить хотя бы до получаса за анимацию, то было б круче)
Можно было бы больше на всякие конкурсы успевать и вообще продуктивнее.
Хочу в будущем много пиксельарта рисовать, и были мысли по поводу полноценного пиксельарт мульта, поэтому такой инструмент бы пригодился.
Согласен, но оно не будет выглядеть так же, автоматическое преобразование не учитывает психологию восприятия человека, а обводка контуров так и вовсе не обязательна: http://pixeljoint.com/pixelart/47940.htm
Понизить разрешение же: https://www.youtube.com/watch?v=rtvjnNtSi8g
Причем, в этой игре стрелки часов в повороте, похоже, рисуются автоматически - и смотрятся хуже всего.
Или уменьшить детализацию и количество кадров: https://youtu.be/tsX8xhF1duQ?t=1949
Это слишком круто, чтобы так научиться нужно потратить годы, наверное D:
Если учиться у середнячков, то будешь плохой специалист. Учись у лучших - будешь середнячком :-P
:'D обнадежил
Берешь растр... OpenCV разобьет на одноцветные пятна-регионы. Пятна превратишь в невыпуклые многоугольники. Разобьешь их на выпуклые многоугольники. Триангулируешь в сетку треугольных полигонов. Обводка становится банальной - на лету шейдерами. Верти-крути, искажай как хочешь.
А вообще-то ты замахнулся на свой алгоритм растеризации, с красотами и плавностью.
Не совсем, что спрашиваешь, но попалась какая-то платная прога на эту тему с демо-версией