Розробка браузерної гри на Unity за два дні. Які технології та плагіни використовувалися при створенні LearnUkraine

Вітаю! Мене звати Альберт Ковнір. Вдень я Engineering Manager в ігровій компанії PlayQ, а ввечері перетворююся на інді-розробника. Кілька тижнів тому я вирішив влаштувати собі патріотичний «геймджем» і створити невелику гру, в якій потрібно вгадувати міста та області України на мапі. У результаті вийшов проєкт LearnUkraine, про який ви, можливо, вже чули.

На створення гри я вирішив виділити лише одні вихідні, щоб не сильно відволікатися від іншого свого проєкту Through the Nightmares, яким зазвичай займаюся вечорами після роботи та у вихідні. У цьому матеріалі я розповім про процес розробки LearnUkraine, про технології, ресурси та особливо плагіни, які використав. І про те, чому я так і не встиг зробити гру за одні вихідні.

День 1 (16 квітня)

Першого дня в моїй голові вже була сформована концепція гри. Гравцеві буде даватися хвилина, за яку він повинен набрати максимальну кількість очок, правильно вказуючи розташування областей та міст на мапі України.

Я розумів, що гра обов’язково має бути браузерною, щоб охопити ширшу аудиторію. Потрібно було обрати технологію та починати кодити.

За підсумками першого дня я підготував прототип гри з вибором регіонів. Зробив підрахунок очок, партикли успішного вгадування та підсвічування областей. Додав просту анімацію показу завдання та лічильника правильних/неправильних відповідей. Реалізував таймер, але логіка завершення гри ще не була готова, тож після закінчення часу таймер просто йшов у мінус, а гра продовжувалась.

Рушій

Гра написана на Unity. Зараз у багатьох у голові пролунало: WHAT??? Unity є дійсно жахливим вибором для подібного проєкту. Довге завантаження, великий розмір навіть порожнього білду, великий технічний оверхед на створення контенту для дозавантаження, необхідність перезбирати гру щоразу, щоб перевірити, як вона буде працювати в браузері. Нарешті Unity не підтримує WebGL для мобільних платформ.

По-хорошому потрібно було брати JS і писати повноцінний браузерний застосунок. Але я обмежив себе двома днями. Мої навички фронтенд-розробки недалеко пішли від джунівського рівня, у той час як Unity я знаю як свої п’ять пальців. Щоб встигнути написати гру за вихідні, мені довелося принести в жертву здоровий глузд.

З іншого боку, саме ігрові речі типу партиклів та анімацій в Unity робити простіше, та й велика кількість вже знайомих асетів прискорювала процес. Тож десь втратили, десь придбали.

IDE

Звичайно, JetBrains Rider. Це стандарт професійної розробки на шарпі. Якщо ви .NET девелопер, але якимось чином ще з ним не знайомі — закривайте статтю та йдіть гуглити. Описувати тут всі його плюси та можливості буде занадто довго, тож навіть не намагатимуся.

Шрифти

Шрифти я брав стандартно із Google Fonts. Головний критерій — наявність символів української мови. На сайті можна обрати кирилицю та отримати всі шрифти, що її підтримують.

Для більшості UI я використав досить універсальний шрифт Rubik.

Для візуалізації шрифтів у грі використовував TextMeshPro. Це чи не єдиний спосіб отримати гарний незаблюрений текст на будь-яких роздільних здатностях екрана. Для цього він використовує Signed Distance Field (SDF), але також підтримує Bitmap шейдинг. Якщо комусь цікаво, в чому магія SDF — можна почитати, наприклад, тут.

Єдиний, на мій погляд, недолік TextMeshPro — необхідність перегенерування шрифтів вручну, тому що TTF він не підтримує, але з цим можна змиритися.

UI

Для першої версії я взяв безкоштовний 2D Casual UI HD. Це просто PNG-файл, побитий на спрайти, та їхній вихідний PSD-файл. Усе. Ні анімацій, ні готових префабів.

Для анімацій я використовував Doozy UI Manager за $90. Це досить жирний плагін, який керує попапами, їхніми переходами, станами системи UI та навіть звуками. Але колись купивши його та інтегрувавши у Through the Nightmares, я швидко від нього відмовився. Це все здорово виглядає на відео, але в реальному проєкті до менеджменту UI зовсім інші вимоги — він має бути інтегрованим у гру, а не гра інтегрована в UI. Можливо, якщо ви робите гру про UI, він підійде ідеально, не знаю.

Яку частину Doozy UI я, як і раніше, повсюдно використовую — це суперзручний аніматор елементів UI в інспекторі з бібліотекою із сотні готових соковитих анімацій, які костомізуються у кілька кліків. Так само в плагіні є велика кількість якісних іконок і спрайтів UI, і бібліотека непоганих універсальних звуків для інтерфейсу. Абсолютно все, що ви чуєте у LearnUkraine, було взято звідти.

Карта

Я подосліджував кілька варіантів роботи з картою, в результаті зупинився на World Map Strategy Kit за $105. У ньому з коробки вже було багато функціональності, необхідної для розробки такої гри: відображення карти, підсвічування регіонів, прорахунок відстані, менеджмент міст та областей, можливість додавати їх кліком по карті, розширюваність через атрибути (словник) у редакторі. Крім цього, до плагіну вже додані усі області України та 55 міст — для релізу мені цього вистачило.

Але на практиці все виявилося набагато гірше. Все API скинуто в один великий God-клас. Частина інтерфейсів погано задизайнена або переускладнена: я витратив не менш як годину на те, щоб банально навчитися розраховувати відстані між двома точками на мапі. Не все в принципі працює, наприклад, я так і не зміг змусити підсвічування областей затухати, так що воно зникає різко. Кастомізація рендерингу також потребує великих зусиль. Іноді при створенні міст він починав додавати по два за один клік, іноді не хотів видаляти міста з бази. Зрештою, плагін затягує понад 200 мегабайтів своїх асетів з ресурсів.

Загалом моя оцінка плагіну не вище як 3, тому що для нормальної роботи його потрібно допилювати та допилювати. Але й базова версія вирішила велику частину моїх проблем, тому, якщо у вас гра заточена на мапу — рекомендую, кращого рішення я не знайшов.

Twinning

У проєкт в мене додані два твінери. Перший це DoTween, який є індустріальним стандартом. Але я додав його тільки тому, що він необхідний для роботи Doozy UI.

Для решти я використав свій FastTweener. Це легковажна альтернатива DoTween зі значно меншою алокацією пам’яті на ініціалізації та повною її відсутністю під час виконання. Та й щодо перформансу краще. Функціонала в ньому менше, наприклад, не підтримуються секвенції, але якщо вам важлива швидкість і контроль споживання пам’яті (наприклад, для мобільних або VR-ігор) — рекомендую.

У цьому випадку річ була не в оптимізації, за весь час розробки LearnUkraine я лише один раз відкривав профайлер, просто вже звик працювати саме з ним.

Партикли

Щоб не малювати та налаштовувати партикли самостійно, я взяв безкоштовний пак — Cartoon FX Free. Складно сказати про нього щось гарне чи погане. Це просто набір мультяшних партиклів середньої складності, добре оформлений, з демосценою і без сміття. Використовувати чи ні — залежить від стилістики вашого проєкту.

У результаті я взяв звідти тільки партикли феєрверків для похвали, коли гравець точно вгадує розташування міста або вибирає правильну область.

Кумедно, що багато людей після випуску гри написали мені, що цей феєрверк схожий на вибух фосфорної бомби. Це викликало неправильні асоціації, коли ти влучно клікаєш на місто та бачиш вибух. Дехто навіть думав, що гра саме про це. Тому в першому ж мажорному апдейті партикли переробив. Тепер це жовто-блакитне конфеті. Зараз від Cartoon FX Free у грі зовсім нічого і не залишилося.

День 2 (17 квітня)

За другий день я додав головне меню, зробив стартовий відлік, написав режим вгадування міст, оновив панель результатів, а також додав кінець гри з попапом результатів і збереженням. Якщо гравець бив свій попередній рекорд, зверху сипалися зірочки. Також я нарешті вирівняв карту, що виявилося нетривіальним завданням із World Map Strategy Kit. І, звичайно ж, анімації! Жахливі безглузді анімації на весь UI за допомогою мого улюбленого Doozy UI.

Жодних нових плагінів цього дня не додавав.

Збереження я зробив за допомогою Player Prefs. Робити щось складніше або затягувати плагіни сенсу не було. KISS.

За кадром залишилася локалізація міст, яка на цьому етапі вже працювала, але самі імена ще не були перекладені. Для цього я написав своє невелике рішення. Додавати якийсь готовий плагін я вважав недоцільним, тому що все, що мені потрібно було — переклади міст та областей з англійської, як вони були задані у World Map Strategy Kit, українською.

Цього дня я зареєстрував обліковий запис LearnUkraine на Git і створив репозиторій для learnukraine.github.io. Зібрав перший тестовий білд і очманів з його розміру — понад 200 МБ. Через те, що розмір файлу без LFS на безкоштовному обліковому записі Git не повинен перевищувати 100 МБ, а Unity пакує майже все в один великий data-файл, перший деплой я зафейлив. День добігав кінця, тому я зібрав десктопну версію і розіслав її друзям.

Відгуки були гарними, але я не був задоволений картинкою. Таким чином, крім першого зафейленого деплою, я зафейлив і мету написати гру за два дні. Наступні вихідні я провів у реальному світі, паралельно роздумуючи над тим, що робити з артом, та повернувся у віртуальний лише за тиждень.

День 3 (30 квітня)

Цього дня я повністю оновив UI та переверстав усі вікна. Меню рахунку пішло вгору, а завдання, навпаки, донизу, додалося вікно паузи та затемнення за попапами. Нарешті додав шрифт Rubic, про який писав вище. Переробив анімації, щоб вони були не такі безглузді, додав частину звуків для UI.

Також прибрав можливість клікати поза Україною, бо бісили міскліки, і виправив кілька дрібних багів. Нарешті локалізував усі міста та області.

Уже ввечері з’явилася ідея додати козачка — маскота, який коментував би результати гравця, причому переважно в негативному ключі. Я швидко зробив основну частину коду і написав декілька фраз, а як картинку взяв тестовий спрайт.

UI

Оскільки я не художник, та й бажання закінчити гру якнайшвидше нікуди не поділося, арт я вирішив брати з асету. Я зупинив свій вибір на GUI PRO Kit — Simple Casual за $39.99. Самі спрайти відмінної якості та їх реально багато. Є демосцена плюс розбиття на префаби. Але, на жаль, не всі вони зібрані грамотно, ще у пакеті немає анімації. Тобто будь-які перемикачі, тогли та все інше доводиться допрацьовувати.

Це не той асет, який береш і відразу використовуєш, інтеграція практично будь-чого з нього вимагає окремих витрат часу. Проте GUI PRO Kit мені дуже сподобався, він добре дотримується флет-стилістики, все виглядає дуже красиво та гармонійно. Напевно, я і в майбутньому користуватимуся асетами цих артистів, вибір UI у них широкий.

Tools

Зі зручних тулів я додав маленький асет Easy Button, який дозволяє за допомогою атрибута [Button] до методу монобехевіора виводити його в інспекторі у вигляді кнопки. Дуже зручно, якщо у проєкт не інтегрований Odin.

День 4 — релізний (1 травня)

В останній день моя дружина намалювала козачка, я інтегрував його, додав анімації та більше фраз. Вивіряв баланс, щоб він хвалив лише за справді сильний результат. Далі ми намалювали нову карту, і я додав її в гру, матюкаючись на World Map Strategy Kit.

Крім цього, добив попапи та звуки. У головне меню додав панель з моїми контактами та кнопкою підписки на оновлення, щоб можна було повертати користувачів після випуску апдейтів. Щоб не захаращувати інтерфейс, я вирішив її показувати тільки після другого заходу в меню, тобто тільки для тих користувачів, кому це може бути цікаво. Виправив кілька помилок у перекладах і зменшив розмір білду, щоб він вліз на github.io та швидко викачувався у користувачів. Оновив WebGL шаблон і випустив гру у світ.

WebGL Template

На жаль, Unity не надає різноманітність HTML темплейтів для WebGL, тож я знайшов і використовував опенсорсний A Better Unity WebGL template. Він дуже простий та дозволяє рендерити гру на весь розмір вкладки браузера. У ньому не було жодної перевірки на мобільні девайси, тому довелося його трохи підредагувати, щоб одразу писати, що гра не завантажиться, а не просто зустрічати користувачів лоадинг-баром, наприкінці якого вивалюється помилка.

Підписка

Підписку я зробив за допомогою MailChimp. Цей інструмент нескладний та зручний, а головне — мені вже знайомий. За допомогою нього я зробив підписку на розсилку у своїй основній грі Throught The Nightmares. Mailchimp дозволяє у візуальному редакторі швидко нагенерувати всі потрібні поля та форми та одразу їх задеплоїти на своєму хостингу, якщо ви не хочете паритися з інтеграцією форми у себе на сайті. Все налаштування зайняло у мене близько пів години. Ключовий момент полягає в тому, що інструмент безкоштовний, доки не починаєте надсилати по 10 000 повідомлень на місяць чи 2000 повідомлень на день.

Конверсія була жахлива, близько однієї десятої відсотка. Чесно, я більше і не розраховував, конверсія в моїй основній грі не вища. Просто кнопка мало кого мотивує.

Аналітика

Внутрішньоігрову аналітику я не додавав, тому що просто не встигав, а затягувати розробку не хотілося. Замість неї я вбудував Google Analytics у шаблон WebGL. Її цілком вистачає, щоб трекати кількість гравців, середній час сеансу, платформу, отримувати зведення з геолокації, DAU, MAU і навіть ретеншн. Звичайно, все безкоштовно.

Оптимізація розміру збірки

Щоб не копати логи вручну, я використав Build Report Tool за $15. Він сам парсить лог білду і візуалізує, що, якого розміру і чому затяглося. Мастхев для оптимізації білд-сайзу. Найбільша кількість сміття була з World Map Strategy Kit, який тягне всі свої 4к текстури, навіть якщо вони не використовуються у грі. Круто хлопці написали! Позбутися їх, при цьому не зламати плагін, стало челенджем і зайняло чимало часу, але в результаті білд був зменшений до 40 МБ, що, на мою думку, good enough.

Реліз

Я залив гру на learnukraine.github.io, написав у себе у твіттері та фейсбуці, закинув у фейсбук-групу Game Developers — Ukraine та написав адмінам невеликого телеграм-каналу GameStreetUA. Твіттер та група ФБ спрацювали просто чудово! Я відразу почав отримувати велику кількість позитивних відгуків та репортів на недекомунізовані назви та одруки (українська у мене не дуже), які я оперативно хотфіксив ще кілька днів.

Перед сном я надіслав листа редакторам DOU та AIN. Вранці AIN надіслали мені запитання і вже вдень випустили статтю про гру. У ній я пообіцяв, що якщо вона стане популярною, я її доопрацьовуватиму. Після тієї публікації новину підхопила велика кількість видань і телеграм-каналів. Два дні DAU трималася понад 5 тисяч. Я отримував велику кількість відгуків та ідей для оновлень. Декілька людей запропонували свою допомогу у створенні апдейтів.

На жаль, слава пішла так швидко, як і прийшла. Щойно припинилися хвиля репостингу новин про гру, DAU впало близько 500 людей на день. Але я пообіцяв випустити апдейт у разі успіху — я дочекався вихідних і взявся за версію 1.1.0.

День 5 (7 травня)

У перший день роботи над оновленням 1.1.0 виправив масштабування карти під різні роздільні здатності екрана (о, мій улюблений World Map Strategy Kit), додав нові міста, зробив шеринг у соціальних мережах, додав підтримку англійської та кнопку перемикання мов, підписку через браузер, а також виправив ​​кілька мінорних багів, знайдених у релізній версії.

Дружина перемалювала козачка, щоб він не здавався таким сором’язливим, а знайомий аніматор взявся оживити його і заодно зробив нормальні жовто-блакитні партикли для правильної відповіді замість старого фосфорного феєрверка.

Також у мене раптово перестали збиратися WebGL білди, тому ще якийсь час я витратив на пошук проблеми. Річ у тім, що за цей тиждень я оновив версію MacOS і через апдейти в системі WebGL Support Unity крякнув. Потанцювавши якийсь час з бубном, білд полагодив і ще сильніше захотів завести білд-машину для особистих потреб.

Task Tracking

Використовувати блокнот було вже не зручно, тому потрібно було пересідати на більш просунуте рішення. Плюс до мене приєдналася ще одна людина, яка запропонувала додати до гри більше міст з перекладами. Я вибрав Trello, тому що він простий, цього не потрібно навчатися, плюс можна зробити його доступним для всіх за посиланням. Це було важливо, тому що гравці писали мені свої ідеї, і я хотів скидати їм список того, що вже заплановано, щоб вони могли прочитати та дати свої поради. Згодом з дошки Trello можна зробити публічний RoadMap проєкт.

Локалізація

Коли писав першу версію, я не думав, що гра стане багатомовною, але додати англійську мене просило багато людей. Моя система локалізації була примітивною, так що найпростіше було додати до проєкту i2localisation і випилити своє рішення.

I2localisation — дуже потужний, при цьому простий плагін, який з мого досвіду використовується в більшості ігор на Unity. Весь інтерфейс LearnUkraine було локалізовано через нього. Переклади козачка я засунув у ScriptableObject з його фразами, з підв’язкою на поточну мову з i2localisation. Локалізацію міст та областей ми додали прямо до атрибутів World Map Strategy Kit (словник, ключі ukr та eng, значення — переклад). Щоб нічого не проґавити, довелося написати невеликий скрипт для валідації атрибутів.

Social Sharing

Я не знайшов жодного готового рішення для шерингу у WebGL, так що написав сам. Показ попапів я зробив на JS. На жаль, в Unity зв’язок вебсторінки та самої гри зроблено дуже незручно, вже не кажучи про те, що її ніяк не перевіриш без збірки білду.

Щоб тут довго не розписувати принцип роботи, я виніс його до окремого репозиторію.

Браузерні повідомлення

Підписка через кнопку, як я писав раніше, працювала дуже погано, тому я вирішив додати альтернативний спосіб — через браузерні сповіщення. Для реалізації я використав One Signal. Безплатна версія підтримує до 10 000 одержувачів однієї нотифікації, що з головою покриває мої потреби. One Signal з коробки дозволяє зробити кілька варіантів підписки — через кнопку, HTML-попап або нативний попап браузера.

Я не хотів ні вбудовувати підтримку в ігровий луп для економії часу розробки, ні перевантажувати сторінку кнопками чи попапами, тому я вибрав варіант із браузерними нотифікаціями. Варіант поганий, тому що вони працюють дуже непрозоро. Якщо користувач браузера кілька разів негативно відповідає на пропозицію ввімкнути сповіщення, браузер блокує їх і для інших сайтів також. За моїми підрахунками, лише близько 1% користувачів бачать нотифікації, з них близько 7% підписуються.

День 6 (8 травня)

В останній день розробки я додав режими складності, навчив козачка говорити англійською, і переклав усе, що пропустив раніше. Кількість міст ми добили до 124. Ще раз довелося виправити масштабування карти (привіт, World Map Strategy Kit). Також я додав попап ченджлога. Він показується гравцям, які грали в попередню версію, і повернулися до нової, щоб вони бачили, що гра розвивається, і підписувалися на оновлення. Також переробив партикли зірочок у меню результатів, щоб вони сортувалися поверх затемнення UI.

Рівні складності ми зробили через атрибути World Map Strategy Kit. Ключ Complexity, значення число від 0 до 2, де 0 — найпростіші, 1 — середні, 2 — складні. Довелося оновити валідатор атрибутів, щоби нічого не пропустити. Для простого режиму ми беремо міста зі складністю 0 і 1, для складного — 1 і 2, а для режиму з усіма містами, очевидно, 1, 2 і 3. Після розбиття по режимах, крім оновлення меню та ігрової логіки, довелося переробити збереження, щоб воно враховувало складність, оновити шеринг в соціальних мережах, додати ім’я режиму в попап результатів, і перевірити все це двома мовами. Якщо на початку я додав новий функціонал дуже швидко, до кінця розробки швидкість почала сповільнюватися та дуже не вистачало QA.

UI Particles

Сортування відображення канвасу UI та ігрових об’єктів — зазвичай завдання нетривіальне, в Unity немає способу це зробити просто. Найпопулярніші варіанти — розмістити канвас не оверлеєм, а об’єктом у світі та самостійно дбати про підгонку до розмірів екрана. Або поставити потрібні об’єкти десь за межами видимості, рендерити їх у текстуру та вже її виводити у канвас. І той і інший варіант були надто трудомісткі, тому для партиклів я пішов іншим шляхом.

Я використав безкоштовний асет Unity UI Particles, який симулює прості particle systems в UI. Він дуже примітивний і без доопрацювання майже 100% вам не підійде. З іншого боку, коду в ньому мало і можна розібратися швидко. Як базове рішення можна брати, але я б порадив ще пошукати альтернативи (наприклад, цю).

Насамкінець я ще раз оптимізував розмір білду, виклав оновлену версію на сайт і відписав у своєму фейсбуці та твіттері.

Висновок

Знання сервісів, тулів і плагінів, а також вміння швидко знайти доречний і розібратися в ньому, я вважаю одним з найважливіших навичок девелопера, тому що на реальному проєкті це дозволяє заощадити сотні та сотні людино-годин, причому не лише розробників. Тому плагіни я і вибрав основною темою цієї статті. У LearnUkraine вони зробили не менше як 2/3 роботи та дозволили написати гру за короткий проміжок часу. Якщо у вас є якісь технічні питання — пишіть у коментарі — із задоволенням відповім.

Щодо гри, то ідей у мене ще дуже багато, але, відверто, я не знаю, чи продовжуватиму її оновлювати. Кілька днів тому у гри був ще один пік відвідуваності, після якого DAU вже кілька днів тримається на рівні 1,5 тисячі людей.

Але інтерес медіа до гри згас, нові вагомі публікації навряд чи з’являться, а органіка найімовірніше невдовзі зійде нанівець. У будь-якому випадку це був класний досвід, радий, що гра захопила та розважила таку велику кількість українців.

Дякую за увагу всім, хто дочитав до кінця! Якщо вам цікава розробка ігор — радий бачити вас у своєму твіттері.

Підписуйтеся на Telegram-канал @gamedev_dou, щоб не пропустити найважливіші статті і новини

👍ПодобаєтьсяСподобалось3
До обраногоВ обраному1
LinkedIn


Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Підписатись на коментарі