Приветствую! Идея создать свой редактор пиксель-арта (обязательно с блэкджеком) появилась на отдыхе, когда мне уже совсем надоело бездельничать и захотелось позаниматься любимым делом (а я занимаюсь играми и приложениями). А ноутбук я с собой не взял. Сейчас Pixel Studio активно набирает популярность, а нескромный заголовок «Лучший мобильный редактор пиксель-арта» нужно оправдывать) Под катом расскажу о том, сколько, как и в чем разрабатываю, как публикую и продвигаю, как развивается приложение и какие планы на будущее.
Самый первый вопрос, который нужно себе задать. Ну, во-первых, понадобилось мне самому) Я занимаюсь разработкой игр, приложений и ассетов, увлекаюсь пиксель-артом. Иметь мобильную рисовалку под рукой было бы неплохо. Разумеется, я начал искать мобильные редакторы в сторах. На всякий случай уточню, что мне нужен был именно редактор на смартфоне. Достойные пиксельные редакторы для ПК существуют, например, Photoshop или всеми любимый Aseprite, который умеет всё. Их я рассматривать не стану. Пробежимся по самым популярным приложениям. Разумеется, все описывать смысла нет, на их изучение я потратил довольно много времени.
Pixel Art editor (SPC Mobile) — самый популярный редактор, более миллиона загрузок, средняя оценка 4,0. Есть в Google Play, в App Store я его не нашел. Последнее обновление — 2011 год. Интерфейс выглядит, мягко говоря, старомодно. Тем не менее, многие им пользуются. Анимацию не поддерживает.
dotpict — Easy to Pixel Arts (dotpicko) — мимимишный редактор, более миллиона установок, оценка 4,5. Мне очень понравился, несмотря на всю свою примитивность и довольно необычный способ рисования курсором. Анимацию не поддерживает. Зато в нем есть онлайн-галерея работ с лайками. А еще в dotpict встроены миниигры, это прям очень круто) Тем не менее, это скорее time killer, нежели профессиональный редактор.
8bit Painter (OneTap Japan) — выбор редакции Google Play, более полумиллиона загрузок, оценка 4,6. Минималистичный дизайн, умеет рисовать пиксели и ничего более. Никаких дополнительных инструментов. Могу предположить, что это скорее тоже time killer, нежели профессиональный редактор.
Pixly — Pixel Art Editor (Gustavo Maciel) — неплохой редактор, более 100.000 установок, оценка 4,1, последнее обновление в 2016. Первый профессиональный редактор, который мне попался, да и еще с анимацией. Очень неудобный и непонятный интерфейс, о чем чаще всего жалуются в отзывах. Проект, вероятно, заброшен.
Выбранный сегмент приложений имеет место быть, у него есть широкая аудитория, при этом нет каких-либо превалирующих приложений от крупных разработчиков. Значит, будем работать) Чем можно выделить будущий редактор? Во-первых, он должен быть «Лучше всех». Это значит, что он должен иметь современный, простой и понятный интерфейс, удобное управление, экспорт в популярные форматы и конечно же, широкий набор инструментов. Но самое главное, он должен поддерживать анимацию! Забегая вперед скажу, что именно эта функция определила популярность приложения и высокие оценки. Кто будет целевой аудиторией? Я решил, что буду делать редактор для художников и разработчиков игр. Но при этом двери должны быть открыты для всех желающих, т.е. для самой широкой аудитории, включая детей. Как говорится:
В основном, я делаю игры на Unity. И хотя многие считают, что немного странно делать приложения на Unity, я придерживаюсь другого мнения. Если это целесообразно — почему бы и нет? Да, приложение на Unity будет «толстым» и будет весить намного больше, чем native приложения размером в сотню-другую килобайт. Но размером 20 мегабайт за простую рисовалку сейчас уже никого не напугать) Да, придется делать свой UI/UX вместо того, чтобы использовать интерфейс ОС. Но мы не ищем легких путей! С другой стороны, использование Unity дает весьма существенные плюсы:
На самом деле, интерфейс я нарисовал на бумаге уже в самолете, когда возвращался с отпуска. Лететь было 12 часов, времени было достаточно) Итак, я уже насмотрелся на UI наиболее популярных приложений для пиксель-арта, почитал отзывы и составил для себя список того, как надо и как не надо делать. Во-первых, был соблазн сделать интерфейс пиксельным. Ну ведь редактор же для пиксель-арта, да? Да, но пиксельный стиль, а особенно пиксельные шрифты, делают интерфейс сложнее для восприятия. Особенно, когда нужно показать много информации (кнопочки, инструменты, панельки), при этом не забывая, что основной элемент на экране, вообще-то, это холст. Я решил позаимствовать опыт у Photoshop. Это простой шрифт без всяких выкрутасов и простые серые кнопочки-панельки без дополнительных украшательств. В таком интерфейсе можно разместить больше мелких элементов, и при это все будет читабельно и кликабельно. Но в то же время я прекрасно понимал, что делаю не свой Photoshop с тяжелым и пугающим интерфейсом, а мобильный редактор. Все должно быть супер-просто и удобно, а дополнительные функции надо было спрятать. Но спрятать не так, чтобы их никогда никто не нашел.
Итак, каков минимальный набор инструментов, нужных пользователю, чтобы начать рисовать пиксель-арт? Наверное, инструмент карандаш точно понадобится. К нему должен быть выбор цвета. Но должны быть и пресеты цветов (готовая палитра). Пипетка для выбора цвета не помешает. И ластик, куда же без него?) Заливку тоже нет смысла куда-то прятать. Ну и конечно же, должна быть кнопка «вернуть все взад» (в то время как «вернуть вперед» можно и спрятать). Выбранные инструменты были обусловлены еще и вертикальным расположением экрана, которое я посчитал по-умолчанию. Я хотел, чтобы рисовать можно было даже на 5-дюймовом телефоне одной рукой. Итак, сверху я расположил палитру в 2 ряда по 12 цветов. Мне показалось, что 24 цвета для пиксель-арта будет в большинстве случаев достаточным. А в дальнейшем можно будет сделать и прокрутку слайдом. При этом 12 кнопок в ширину 5-дюймового экрана — это уже предел кликабельности. Внизу я расположил панель инструментов, 8 кнопок в ряд. Панель волшебная, будет раскрываться (выезжать снизу), показывая дополнительные инструменты.
Вот, что видит пользователь, который только что установил приложение. Бери и рисуй, так ведь и задумано?) Никаких мануалов и подсказок, все должно быть максимально просто!
А вот так выглядит интерфейс художника, который создает анимацию или персонажа для игры:
Я планирую добавить небольшой туториал при первом запуске. Ну, как это обычно бывает — листаешь странички с картинками или анимацией. Он просто назрел — как оказывается, например, не все пользователи додумываются нажать на стрелочку, чтобы развернуть панель инструментов. Кроме того, для некоторых функций, требующих разъяснения, я добавил небольшие вопросики, при нажатии на которые появляется всплывающая подсказка.
Конечно, очень важную роль в оптимизации UI играет аналитика. Кстати, я использую Yandex AppMetrica и встроенную аналитику Unity. Я логирую нажатия всех кнопок, выполнение всех функций, а также ошибки и непредвиденные ситуации. Не бойтесь отправлять в аналитику все подряд, особенно поначалу).
Перевод на английский язык я сделал самостоятельно. Перед релизом приложения я также заказал профессиональный перевод промо-текстов для магазинов на сайте translated.net. Переводы на самые популярные языки (испанский, французский, немецкий, китайский и японский) вышли по 20-30$ (за текст в 150 слов). В процессе локализации самого приложения я решил оформить свои наработки в самостоятельный ассет, который сейчас доступен в Unity Asset Store. Подробнее о нем читайте в моей статье Локализация игр и приложений в Unity. Быстро и удобно. Язык приложения определяется при первом запуске по системному языку, а сменить его можно через настройки:
Когда наступила пора переводить приложение на другие языки, я сразу прикинул, что выйдет это совсем недешево) Значит, надо включать смекалку. Сделал небольшой плюсик рядом с выбором языка, который перекидывает пользователя на таблицу с переводами в Google Таблицы. Кто желает добавить свой перевод, может запросить разрешение на редактирование. Удивительно, но пользователи сами сделали переводы на немецкий, португальский, испанский, французский, польский и китайский языки. И это не стоило мне ни копейки) Да, в процессе разработки появляются новые тексты, которые остаются нелокализованными. Но это особо никого не беспокоит) Более того, некоторые авторы иногда сами дополняют свои переводы.
Я вас уже, наверное, утомил) Хотя обещал рассказать и про разработку, и про продвижение, про статистику и про планы на будущее? Что ж, давайте оставим это для второй части?) Там я расскажу, как писал свою библиотеку GIF, как habr помог мне в ее реализации, как в результате работы над Pixel Studio в Asset Store появились 6 новых бесплатных ассетов, как, где и почем продвигал приложение, про общение с пользователями, про хейтеров и про хороших людей, которые бесплатно перевели Pixel Studio на кучу языков, про баги и недоработки в Pixel Studio, про замечательный сервис italki, который помог мне с изучением английского и разработкой Pixel Studio. Отдельно хотелось бы рассказать и про свой первый опыт публикации в Windows Store на UWP. А пока всем спасибо за внимание, удачи!
Я не считаю себя каким-то гуру дизайна или мега-крутым разработчиком. По многим техническим вопросам я даже не готов с вами спорить. Но у меня получается делать неплохие игры, приложения и ассеты (ах как хочется в это верить =). Tap Tap Builder — наверное, мой самый сложный проект. И у меня большие надежды на Pixel Studio) В Unity Asset Store мы на пару с художником неплохо продаем ассеты, например, наш редактор персонажей Fantasy Heroes. Еще я люблю общаться с пользователями и другими разработчиками и посещать различные мероприятия и хакатоны. Так что задавайте вопросы, пишите комментарии, при желании — плюсуйте и минусуйте).
Но лучше плюсуйте…
Кому оно вообще нужно?
Самый первый вопрос, который нужно себе задать. Ну, во-первых, понадобилось мне самому) Я занимаюсь разработкой игр, приложений и ассетов, увлекаюсь пиксель-артом. Иметь мобильную рисовалку под рукой было бы неплохо. Разумеется, я начал искать мобильные редакторы в сторах. На всякий случай уточню, что мне нужен был именно редактор на смартфоне. Достойные пиксельные редакторы для ПК существуют, например, Photoshop или всеми любимый Aseprite, который умеет всё. Их я рассматривать не стану. Пробежимся по самым популярным приложениям. Разумеется, все описывать смысла нет, на их изучение я потратил довольно много времени.
Pixel Art editor (SPC Mobile) — самый популярный редактор, более миллиона загрузок, средняя оценка 4,0. Есть в Google Play, в App Store я его не нашел. Последнее обновление — 2011 год. Интерфейс выглядит, мягко говоря, старомодно. Тем не менее, многие им пользуются. Анимацию не поддерживает.
dotpict — Easy to Pixel Arts (dotpicko) — мимимишный редактор, более миллиона установок, оценка 4,5. Мне очень понравился, несмотря на всю свою примитивность и довольно необычный способ рисования курсором. Анимацию не поддерживает. Зато в нем есть онлайн-галерея работ с лайками. А еще в dotpict встроены миниигры, это прям очень круто) Тем не менее, это скорее time killer, нежели профессиональный редактор.
8bit Painter (OneTap Japan) — выбор редакции Google Play, более полумиллиона загрузок, оценка 4,6. Минималистичный дизайн, умеет рисовать пиксели и ничего более. Никаких дополнительных инструментов. Могу предположить, что это скорее тоже time killer, нежели профессиональный редактор.
Pixly — Pixel Art Editor (Gustavo Maciel) — неплохой редактор, более 100.000 установок, оценка 4,1, последнее обновление в 2016. Первый профессиональный редактор, который мне попался, да и еще с анимацией. Очень неудобный и непонятный интерфейс, о чем чаще всего жалуются в отзывах. Проект, вероятно, заброшен.
Выводы
Выбранный сегмент приложений имеет место быть, у него есть широкая аудитория, при этом нет каких-либо превалирующих приложений от крупных разработчиков. Значит, будем работать) Чем можно выделить будущий редактор? Во-первых, он должен быть «Лучше всех». Это значит, что он должен иметь современный, простой и понятный интерфейс, удобное управление, экспорт в популярные форматы и конечно же, широкий набор инструментов. Но самое главное, он должен поддерживать анимацию! Забегая вперед скажу, что именно эта функция определила популярность приложения и высокие оценки. Кто будет целевой аудиторией? Я решил, что буду делать редактор для художников и разработчиков игр. Но при этом двери должны быть открыты для всех желающих, т.е. для самой широкой аудитории, включая детей. Как говорится:
Easy to learn, hard to play!Хотите просто порисовать, чтобы убить время? Без проблем! Хотите сделать раскадровку персонажа для своей игры? Пожалуйста!
Выбор среды разработки
В основном, я делаю игры на Unity. И хотя многие считают, что немного странно делать приложения на Unity, я придерживаюсь другого мнения. Если это целесообразно — почему бы и нет? Да, приложение на Unity будет «толстым» и будет весить намного больше, чем native приложения размером в сотню-другую килобайт. Но размером 20 мегабайт за простую рисовалку сейчас уже никого не напугать) Да, придется делать свой UI/UX вместо того, чтобы использовать интерфейс ОС. Но мы не ищем легких путей! С другой стороны, использование Unity дает весьма существенные плюсы:
- кросплатформенность, это и iOS, и Android, и UWP
- куча ассетов в Asset Store, которые можно использовать для разработки
- скорость разработки (на самом деле, было самое главное для меня)
Интерфейс (UI/UX)
На самом деле, интерфейс я нарисовал на бумаге уже в самолете, когда возвращался с отпуска. Лететь было 12 часов, времени было достаточно) Итак, я уже насмотрелся на UI наиболее популярных приложений для пиксель-арта, почитал отзывы и составил для себя список того, как надо и как не надо делать. Во-первых, был соблазн сделать интерфейс пиксельным. Ну ведь редактор же для пиксель-арта, да? Да, но пиксельный стиль, а особенно пиксельные шрифты, делают интерфейс сложнее для восприятия. Особенно, когда нужно показать много информации (кнопочки, инструменты, панельки), при этом не забывая, что основной элемент на экране, вообще-то, это холст. Я решил позаимствовать опыт у Photoshop. Это простой шрифт без всяких выкрутасов и простые серые кнопочки-панельки без дополнительных украшательств. В таком интерфейсе можно разместить больше мелких элементов, и при это все будет читабельно и кликабельно. Но в то же время я прекрасно понимал, что делаю не свой Photoshop с тяжелым и пугающим интерфейсом, а мобильный редактор. Все должно быть супер-просто и удобно, а дополнительные функции надо было спрятать. Но спрятать не так, чтобы их никогда никто не нашел.
Итак, каков минимальный набор инструментов, нужных пользователю, чтобы начать рисовать пиксель-арт? Наверное, инструмент карандаш точно понадобится. К нему должен быть выбор цвета. Но должны быть и пресеты цветов (готовая палитра). Пипетка для выбора цвета не помешает. И ластик, куда же без него?) Заливку тоже нет смысла куда-то прятать. Ну и конечно же, должна быть кнопка «вернуть все взад» (в то время как «вернуть вперед» можно и спрятать). Выбранные инструменты были обусловлены еще и вертикальным расположением экрана, которое я посчитал по-умолчанию. Я хотел, чтобы рисовать можно было даже на 5-дюймовом телефоне одной рукой. Итак, сверху я расположил палитру в 2 ряда по 12 цветов. Мне показалось, что 24 цвета для пиксель-арта будет в большинстве случаев достаточным. А в дальнейшем можно будет сделать и прокрутку слайдом. При этом 12 кнопок в ширину 5-дюймового экрана — это уже предел кликабельности. Внизу я расположил панель инструментов, 8 кнопок в ряд. Панель волшебная, будет раскрываться (выезжать снизу), показывая дополнительные инструменты.
Вот, что видит пользователь, который только что установил приложение. Бери и рисуй, так ведь и задумано?) Никаких мануалов и подсказок, все должно быть максимально просто!
А вот так выглядит интерфейс художника, который создает анимацию или персонажа для игры:
Про обучение
Я планирую добавить небольшой туториал при первом запуске. Ну, как это обычно бывает — листаешь странички с картинками или анимацией. Он просто назрел — как оказывается, например, не все пользователи додумываются нажать на стрелочку, чтобы развернуть панель инструментов. Кроме того, для некоторых функций, требующих разъяснения, я добавил небольшие вопросики, при нажатии на которые появляется всплывающая подсказка.
Про аналитику
Конечно, очень важную роль в оптимизации UI играет аналитика. Кстати, я использую Yandex AppMetrica и встроенную аналитику Unity. Я логирую нажатия всех кнопок, выполнение всех функций, а также ошибки и непредвиденные ситуации. Не бойтесь отправлять в аналитику все подряд, особенно поначалу).
Про локализацию
Перевод на английский язык я сделал самостоятельно. Перед релизом приложения я также заказал профессиональный перевод промо-текстов для магазинов на сайте translated.net. Переводы на самые популярные языки (испанский, французский, немецкий, китайский и японский) вышли по 20-30$ (за текст в 150 слов). В процессе локализации самого приложения я решил оформить свои наработки в самостоятельный ассет, который сейчас доступен в Unity Asset Store. Подробнее о нем читайте в моей статье Локализация игр и приложений в Unity. Быстро и удобно. Язык приложения определяется при первом запуске по системному языку, а сменить его можно через настройки:
Когда наступила пора переводить приложение на другие языки, я сразу прикинул, что выйдет это совсем недешево) Значит, надо включать смекалку. Сделал небольшой плюсик рядом с выбором языка, который перекидывает пользователя на таблицу с переводами в Google Таблицы. Кто желает добавить свой перевод, может запросить разрешение на редактирование. Удивительно, но пользователи сами сделали переводы на немецкий, португальский, испанский, французский, польский и китайский языки. И это не стоило мне ни копейки) Да, в процессе разработки появляются новые тексты, которые остаются нелокализованными. Но это особо никого не беспокоит) Более того, некоторые авторы иногда сами дополняют свои переводы.
Что дальше?
Я вас уже, наверное, утомил) Хотя обещал рассказать и про разработку, и про продвижение, про статистику и про планы на будущее? Что ж, давайте оставим это для второй части?) Там я расскажу, как писал свою библиотеку GIF, как habr помог мне в ее реализации, как в результате работы над Pixel Studio в Asset Store появились 6 новых бесплатных ассетов, как, где и почем продвигал приложение, про общение с пользователями, про хейтеров и про хороших людей, которые бесплатно перевели Pixel Studio на кучу языков, про баги и недоработки в Pixel Studio, про замечательный сервис italki, который помог мне с изучением английского и разработкой Pixel Studio. Отдельно хотелось бы рассказать и про свой первый опыт публикации в Windows Store на UWP. А пока всем спасибо за внимание, удачи!
Об авторе
Я не считаю себя каким-то гуру дизайна или мега-крутым разработчиком. По многим техническим вопросам я даже не готов с вами спорить. Но у меня получается делать неплохие игры, приложения и ассеты (ах как хочется в это верить =). Tap Tap Builder — наверное, мой самый сложный проект. И у меня большие надежды на Pixel Studio) В Unity Asset Store мы на пару с художником неплохо продаем ассеты, например, наш редактор персонажей Fantasy Heroes. Еще я люблю общаться с пользователями и другими разработчиками и посещать различные мероприятия и хакатоны. Так что задавайте вопросы, пишите комментарии, при желании — плюсуйте и минусуйте).
Но лучше плюсуйте…
