Дневник Разработчика Ппааааа №2
Ппааааа - это онлайн-редактор мультиков, где каждый может создать раскадровку или простенький мульт даже не обладая большим навыком. В прошлом дневнике я говорил почему проект так называется, какие у меня на него планы и какие проблемы были в самом начале. В этом я расскажу что я сделал за прошедшую неделю.
Разработка
Редактор
Изучение конкурентов
В последнее время я много изучаю своих конкурентов (о которых сказано в прошлом дневнике), а также цифровое наследие Мультатора и Тунио. Изучаю какими возможностями обладают их редакторы, а также как сообщество к ним относилось, чтобы понимать их плюсы и минусы. Ведь моя цель - создать идеальный в техническом плане онлайн-редактор мультиков. Чтобы пользователь любого конкурента, попав ко мне на сайт, обнаружил бы, что у меня ему рисовать всё так же привычно, что тут есть всё те же инструменты, но при этом исправлены минусы конкурентов и добавлены новые фичи. А для этого мне, собственно, нужно понимать, какие фичи и недостатки есть в редакторах конкурентов.
Так вот изучая редактор Мультатора я нашёл его главный плюс. Да, его часто критикуют за то, насколько он был примитивен, за то, что там годами не добавляли базовых возможностей вроде заливки и слоёв, которые были запросто реализованы на проектах конкурентов. Достаточно было сделать даже не идеальный, а хотя бы средненький редактор, чтобы он уже был лучше редактора Мультатора. Но почему тогда именно редактор Мультатора собрал вокруг себя такое огромное комьюнити в своё время? Лишь потому, что он был первым? Почему тогда всё это комьюнити не перешло на гораздо более продвинутый редактор Drawrun, как только такая возможность появилась?
Редактор Мультатора
Редактор Drawrun для сравнения
Я думаю, что я нашёл ответ на этот вопрос. Изучая цифровое наследие Мультатора я наткнулся на множество историй людей, которые наткнулись на Мультатор ещё в детстве и остались там на долгие года. Дети от 7 лет, только недавно получившие доступ в интернет в 2010-2020 годах, попадали на Мультатор и видели, в отличие от других программ для рисования, супер-простой интерфейс из 6 кнопок. Ничего лишнего - только самое необходимое. Всё остальные немногочисленные функции выведены в горячие клавиши. Тем временем на Drawrun тебя встречает огромная панель из 20 кнопок и в дополнение к ним огромный мануал по горячим клавишам, который вообще не предназначен для новичком. Сразу же на тебя вываливается тонна информации, в которой 7-летний ребёнок точно не разберётся. Редактор Drawrun хороший. В техническом плане у него, наверное, наибольшее количество возможностей из всех онлайн-редакторов. Но это не сайт для детей. Это сайт для аниматоров, которые устали от примитивности Мультатора и хотели бы иметь больше возможностей для творчества. Но о детях этот сайт не думает.
Это видно по отношению к цензуре на обоих проектах. В правилах Мультатора было написано:
"Мультики всегда привлекают детей. Поэтому, даже если вы уже взрослый мальчик или здоровенная тётя, помните: рядом дети. Повсюду дети. МНОГО-МНОГО ДЕТЕЙ! Не стоит рисовать пошлости и чрезмерно жестокие мульты".
В то время как на Drawrun даже порнушка не удаляется, её всего лишь можно скрыть в настройках ленты.
Я в этом плане хочу придерживаться стратегии Мультатора и тоже ориентироваться в большинстве своём на детскую аудиторию. Этому есть две причины.
Во-первых, Мультатор стал легендарным сайтом, о котором многие вспоминают до сих пор спустя много лет после его закрытия. На нём люди проводили своё детство, многие пользователи именно на нём научились рисовать. Drawrun же - просто хороший сайт, но не легендарный, хотя существует тоже уже давно. Более того, Мультатор собирал свою аудиторию сам с нуля, потому что его задумка сама по себе достаточно хороша, чтобы привлекать множество новых пользователей. Drawrun же доброй частью своей аудитории обязан Мультатору, что не плохо, но я бы не хотел исключительно переманивать аудиторию у конкурентов, а хотел бы, чтобы мой проект сам по себе был настолько хорош, чтобы привлекать новых пользователей, даже среди тех, кто раньше не рисовал в онлайн-редакторах конкурентов.
Во-вторых, никакой онлайн-редактор по функционалу не сравнится с оффлайн-решениями, на мой взгляд. У Drawrun есть свои преимущества перед оффлайн-редакторами и в целом в своей нише это очень даже неплохой проект, но просто я не вижу смысла перегружать редактор кнопками, теряя детскую аудиторию, лишь чтобы сразу показать много возможностей, когда в большинстве оффлайн-редакторов этих возможностей всё равно будет больше.
Но это не значит, что редактору нужны лишь минимальные функции. Расширять возможности редактора важно и именно за узкие возможности и недостаток даже базовых функций ругают редактор Мультатора и я понимаю, что с такими возможностями сейчас успеха уже не добиться в условиях конкуренции с другими редакторами, которых во времена Мультатора просто не было. Мой сайт должен объединять в себе плюсы всех конкурентов, в том числе и Тунио и Drawrun, поэтому я собираюсь сделать так: базовые возможности реализовать в виде минимального количества кнопок как на Мультаторе, чтобы привлечь и удержать детскую аудиторию, а функции для продвинутых и профи реализовать на горячих клавишах и дополнительных панелях.
Подход к улучшению редактора
Итак, я сел за улучшение редактора. Изначально я думал, что это будет очередная фича. Так же как я делал с регистрацией - я просто сел, начал делать функцию регистрации и через какое-то время доделал. Я думал, что с редактором будет так же. И вот я сел и стал думать, какие вообще функции должны быть в редакторе. Я начал ходить на сайты конкурентов и выписывать себе все функции, что есть у них, чтобы добавить их к себе. Список становился всё больше и больше и всё никак не заканчивался. Я уже говорил о шести онлайн-редакторах, на которые я ориентируюсь. Помимо них есть ещё 2 ныне закрытых. И у каждого из них есть свои уникальные функции. Прошла уже пара часов изучения, список становился всё больше и больше, но не заканчивался. И тут я случайно наткнулся на подборку редакторов мультов, среди которых множество оффлайновых. И их там очень много и у каждого тоже уникальные возможности. И тут я понял, что улучшать редактор можно вечно. Он никогда не станет идеальным. А моя цель - именно создать идеальное решение. Поэтому я пришёл к выводу, что работу над редактором нужно вести параллельно улучшению остального сайта. Я сделал в Гите отдельную ветку editor чисто для улучшений редактора и выделил себе один день в неделю только для работы над редактором.
Растровый и векторный редакторы
Когда я только начинал делать альфа-версию редактора, я не задумывался о том, каким он должен быть: растровым или векторным. Я исходил из того, что в конечном итоге мульт надо будет превращать в гифку, так как мульты отображаются на главной странице в виде гифок.
Скрин главной страницы
Да и на странице мульта первоначально, перед тем как я написал плеер, мульт отображался в виде гифки.
Скрин страницы мульта
Да и с растровыми изображениями легко работать в поле Канвас. В общем, я недолго думая сделал растровый редактор. Но когда я стал изучать конкурентов, я обнаружил, что многие из них используют векторные редакторы. Почему так? Потому что почти все они имеют корни в Мультаторе (И англоязычном аналоге - Тунаторе (Не путать с Тунио!)), который имел редактор на Флеше.
И векторная, и растровая графика имеют свои преимущества, но я бы хотел продолжать разрабатывать растровый редактор, а в будущем добавить в него векторные элементы.
Обновления
Новый дизайн
В первую очередь я переделал дизайн. Теперь он больше похож на дизайн редактора Мультатора.
Старый дизайн
Новый дизайн
Дизайн страницы редактора Мультатора для сравнения
Для этого пришлось практически полностью переписать код редактора.
Луковая Шелуха
Я стал реализовывать "Луковую Шелуху", которую запланировал реализовать ещё в прошлом дневнике. Если вы тоже не знаете что это - то это когда предыдущие кадры полупрозрачно отображаются поверх нынешнего, чтобы было удобнее рисовать. Это оказалось довольно сложной для меня задачей, редактор постоянно работал неправильно, то не отображал шелуху, то отображал, но сохранял её вместе с кадром. Я потратил достаточно много времени, чтобы заставить её работать правильно. Теперь пользователь рисует не на белом фоне, а на прозрачном, а белый является лишь подложкой. При этом пришлось сделать на странице редактора не одно графическое поле (Канвас), а два - одно под другим, одного отображает нынешний кадр, а другое - шелуху. Так было легче реализовать эту функцию, потому что у Канваса есть встроенные методы, с которыми удобно работать - просто берёшь и рисуешь пиксели, потом берёшь и сохраняешь поле Канваса в файл. Но если делать шелуху в том же канвасе, то нужно прописывать собственную логику как красить пиксели кистями разного размера и разного цвета, как отрисовывать полученное изображение, да ещё и вместе с шелухой, где его хранить, как сохранять в файл. Ну, в общем, сложно это, легче было создать два Канваса и использовать встроенные методы для отрисовки.
Отмена действия
Я реализовал отмену действия на клавишу Z. Для этого я добавил стек с сохранёнными действиями. Правда, потом уже я обнаружил, что отмена добавления и удаления кадров работает хорошо, а вот отмена мазков сломалась. Буду исправлять этот баг на следующей неделе.
Прочее
В общем, я ещё добавил быстрые клавиши для копирования и вставления кадров, а также для изменения размера кисти, поработал над курсором... (Кстати, для отрисовки курсора добавил третий Канвас). В общем, работы ещё много.
Сайт
Почта
В первом дневнике я говорил о проблеме с верификацией почты: когда пользователь получает автоматическое письмо на почту, оно отображается под профилем адреса почты (noreply), а не названия сайта, из-за этого письмо может быть сложнее найти. Я хотел сменить адрес почты, чтобы решить эту проблему, но, оказывается, всё проще: надо лишь в адресе почты отправки указать 'Ппааааа <noreply@ppaaaaa.ru>' вместо 'noreply@ppaaaaa.ru'. Я наткнулся на это решение когда попытался перенастроить профиль почты в корпоративном почтовом ящике и при отправке почты с корпоративного ящика вручную ящик сам подставлял эту строку в поле исходящего адреса, но отправка автоматического письма с сервера была как раньше, без профиля, поэтому я просто сделал такую же строчку в коде и всё заработало. Таким образом можно заменить себе имя профиля на любое.
Гит
Я решил создать в Гите новую ветку dev, а в main оставить оставить стабильную версию без багов. Наверное, это не так уж необходимо на данном этапе, но может пригодиться в будущем. Можно делать новые фичи в dev, а исправлять баги, например, в ещё одной ветке debug и, таким образом, можно будет работать над исправлением багов и загружать исправления на сервер, не загружая при этом новые фичи раньше времени.
Ppaaaaa.online
От Рег.ру мне помимо ppaaaaa.ru бонусом за 1 рубль дали домен ppaaaaa.online. Я изначально хотел там сделать дополнительно что-то вроде мессенджера к проекту но мессенджер можно и на основном домене сделать. 1 рубль стоит аренда лишь первого месяца, а затем аренда стоит как обычно, к тому же ко второму домену нужно будет дополнительно покупать SSL-сертификат, а это дополнительные расходы. Я хотел с ppaaaaa.online сделать перенаправление на ppaaaaa.ru, но без сертификата это не имеет смысла. Решив, что от второго домена лишь одни расходы, я с чистой совестью отключил автопродление и решил пока забыть о нём.
Глазик
В прошлом дневнике я писал о проблеме, что кнопка показа пароля ("Глазик") при регистрации показывается дважды. Оказалось, что второй глазик добавляется браузером, при чём не любым. В Edge он добавляется, а в FireFox - нет. В общем, я с помощью <style> убрал браузерный глазик, чтобы он не дублировал функционал, тем более, что работал он криво и не на всех браузерах.
Бета в лого
Добавил в лого надпись "Бета", чтобы пользователи знали, что проект ещё будет дорабатываться.
Старое лого
Новое лого
Версии
В прошлом дневнике у меня была идея добавить номер версии в редактор и на сам сайт, чтобы люди знали номер версии, а ещё чтобы было проще следить за версиями сайта, например, через веб-архив. Я добавил, но потом убрал. Всё-таки, я делаю сайт, а не приложение, не думаю, что людям очень нужно знать номер версии. Если ты делаешь приложение - номер версии помогает определять совместимость с разными плагинами и другими приложениями, подсказывая, когда устанавливать обновления. Так как на сайте обновления выходят для всех в одно и то же время, пользователю нет смысла знать о том, какая именно версия сайта сейчас на сервере, это лишняя информация лишь нагружает страницу, как будто бы. Если нужно сообщить пользователю о нововведениях, лучше сделать объявление или баннер, чем ждать, что он заметит изменение маленькой цифры внизу страницы.
Заглавная
Я добавил посвящение, новости и баннер Дискорда на заглавную. Теперь она выглядит более наполненной.
Скрин заглавной
Скрин заглавной Мультатора для сравнения (2012 год)
Кстати, новости прописаны в специальном файле, который добавлен в .gitignore, поэтому их можно менять в любое время, не обновляя сборку.
Анонимы
Я добавил возможность делать мульты анонимно. Это важная фича, потому что это очень важно для привлечения новых пользователей. Нужно дать людям возможность пощупать редактор без всех этих сложностей с регистрацией и почтой. Очень важно удержать пользователя в первые минуты на сайте, а необходимость регистрации этому мешает.
Сроки
Я долго думал над тем, когда же выкатывать бета-версию моего проекта. Изначально я хотел делать обновления раз в месяц, поэтому я думал, что в течение всего марта проект будет в стадии альфа-теста, в течение апреля в стадии бета-теста и, наконец, к маю я выкачу полноценную версию 1.0. Это было чрезмерно амбициозно. Поняв, что разработка идёт не так быстро, как хотелось бы, я стал думать над тем, чтобы делать обновления раз в три месяца, а раз в месяц выкатывать небольшие обновления с устранением багов и уязвимостей. Тогда я бы спокойно и без спешки делал бы бета-версию всю весну, успев реализовать большее количество фич, выложил бы её к началу июня, а полноценную версию доделал бы к началу сентября. Но потом мне показалось, что это не лучшие даты для публикации версий. Например, начало сентября обычно сопровождается спадом онлайна в связи с началом учебного года, это я знаю ещё со времён моей деятельности на игровых серверах. В общем, я решил выкладывать версии в конце кварталов, то есть в конце марта и конце июня. Но тогда у меня на разработку бета-версии было бы ещё меньше времени. И я подумал: "Ну а зачем мне выкладывать бету в конце этого квартала? Если бы я начал проект 28 марта, у меня на разработку беты было бы пара дней?". В общем, я решил пожертвовать кварталом и запланировать бету на конец июня, а полноценную версию на конец сентября. Да, это очень не скоро, но зато к выходу беты это будет не просто минимально-жизнеспособный, а вполне привлекательный продукт, которым уже можно будет пользоваться и это даст больше возможностей для резкого толчка для раскрутки. Остаётся надеяться, что я не растеряю мотивацию к тому моменту. Но, всё-таки, окончательное решение по дате я приму к следующей пятнице - 20 марта. (Хочется быть полностью уверенным в этом решении.)
Размышления
А тут ещё и Каракули анонсирует свой проект по воссозданию Мультатора. У меня это вызвало смесь радости и злости. Конечно, я рад, что она занялась таким проектом, с её то навыками, может быть, из этого что-то путное и выйдет. Однако... Почему она анонсирует это ровно через неделю после анонса моего проекта? Неужели я её вдохновил сделать подобное, или просто совпадение? Да и не факт, что под Multator revival стоит именно она, хотя многое на это указывает. Ну и ещё я немного злюсь, что мне самому просто не пришла в голову идея скопировать интерфейс Мультатора. Это гениально. Но, на самом деле, учитывая её навыки и знакомства в комьюнити, с ней будет трудно конкурировать. Но не стоит опускать руки, её проект ещё только в самой ранней стадии разработки, а у меня есть реальные конкуренты с реальными преимуществами, так что вряд ли есть смысл бояться Multator revival. По крайней мере пока...
In bundle
дневник
дневник разработчика