Це цікаво

Pixel Studio — мобільний редактор піксель-арту

Вітаю! Ідея створити свій редактор піксель-арту (обов’язково з блекджеком) з’явилася на відпочинку, коли мені вже зовсім набридло байдикувати і захотілося зайнятися улюбленою справою (а я займаюся іграми і додатками). А ноутбук я з собою не взяв. Зараз Pixel Studio активно набирає популярність, а нескромний заголовок «Кращий мобільний редактор піксель-арту» потрібно виправдовувати) Під катом розповім про те, скільки, як і в чому розробляю, як публікую і просуваю, як розвивається додаток і які плани на майбутнє.

Кому воно взагалі потрібно?

Найперший питання, яке потрібно задати собі. Ну, по-перше, знадобилося мені самому) Я займаюся розробкою ігор, додатків і ассетов, захоплююся піксель-артом. Мати мобільну рисовалку під рукою було б непогано. Зрозуміло, я почав шукати мобільні редактори сторах. На всяк випадок уточню, що мені потрібен був саме редактор на смартфоні. Гідні піксельні редактори для ПК існують, наприклад, Photoshop або всіма улюблений Aseprite, який вміє все. Їх я розглядати не буду. Пробіжимося по найпопулярніших додатків. Зрозуміло, все описувати сенсу немає, на їх вивчення я витратив досить багато часу.

Pixel Art editor (SPB 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. Ще я люблю спілкуватися з користувачами і розробниками та відвідувати різні заходи і хакатони. Так що задавайте питання, пишіть коментарі, при бажанні — плюс і минусуйте).

Але краще плюс…

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Close