DeFight — браузерна RPG на Web3
Масштабна браузерна RPG навколо власного токена, з тисячами предметів, локацій і механік, а також дизайн-система, яка все це тримає разом.
- Роль
- Design Lead
- Період
- Лют 2024 — 2026
- Команда
- 3 дизайнери (лід, мідл, дизайнер персонажів і моушну)
Контекст
DeFight — браузерна RPG на власному токені. Гравець збирає загін героїв, одягає їх у броню й зброю, проходить квести, бере участь в івентах і торгує предметами за криптовалюту. За два роки гра виросла у величезний світ: сотні предметів, десятки механік і власна економіка. Паралельно та сама команда вела Dapp.Expert, криптомедіа.
Моя роль
Я вів дизайн DeFight як Design Lead у команді з трьох дизайнерів: я, мідл продуктовий дизайнер і дизайнер персонажів і моушну, який створював і анімував героїв. На мені були структура гри з боку інтерфейсу, правила бібліотеки й комунікація з CEO та розробниками.
Гра постійно росла: з’являлися нові івенти, сезони й предмети. Тому ми будували не набір екранів, а систему, у якій новий контент додається без перемальовування інтерфейсу. Кожен екран проходив рев’ю й потрапляв до розробки з усіма станами та анотаціями логіки.
Айдентика
Логотип DeFight побудований на образі біржової свічки: замість літери «I» у слові стоїть бірюзова свічка з ґнотами, як на графіку ціни. Так знак одразу говорить, що це гра про крипторинок. Для вікі й вайтпейпера ми зробили окремі версії знака, а кожна має варіанти для темного й світлого фону та монохромну версію.
Дизайн-система
Ігровий інтерфейс складніший за звичайний продукт: інвентар, герої, квести, івенти, гаманець і маркетплейс мають жити в одному стилі й не заважати грі. Ми зібрали одну бібліотеку на все: від кнопок і полів до карток героїв, слотів спорядження, бойових пропусків і віджетів івентів.
Темна космічна тема з бірюзовим акцентом: він веде погляд до головних дій і прогресу, а червоні градієнтні кнопки позначають ключові дії гри. Окрема шкала рідкості з десяти рівнів, від Normal до Divine, проходить через увесь інтерфейс: рамки предметів, нагороди, картки героїв. Характеристики героя мають власні кольори, тож гравець читає силу чи спритність ще до того, як прочитає цифру.
Кожен компонент має всі стани, від hover і disabled до заблокованих і отриманих нагород, а шаблони зібрані у трьох брейкпоінтах. Новий івент чи сезон збирався з готових блоків, а не малювався з нуля.
Предмети
Серце RPG — спорядження. У грі 842 предмети: броня, зброя, аксесуари, скрині й ресурси. Кожен належить до одного з понад 80 сетів із крипто-назвами, від No-Coiner і Scam Hunter до Crypto Whale і Bull Market Legend, і має рівень від 1 до 15.
Предмет росте разом із гравцем: чим вищий рівень, тим складніша форма, яскравіший колір і більше деталей. Рідкість не вшита в арт, її задає картка з дизайн-системи. Тому один і той самий меч може бути звичайним чи легендарним, а бібліотеці не потрібні сотні перемальованих копій.
Картки предметів
Кожен предмет гравець бачить у картці: тип, якість, бонуси, міцність і дії. Картка одна на всю гру, а рідкість змінює лише колір фону й підпис якості. Так один шолом Altcoin Surge існує в десяти рідкостях без жодного перемальованого арту.
Спорядження зношується, коли гравець відправляє мемів у бій, тому картка має шість станів: від цілого предмета до зламаного чи відсутнього. Колір смуги міцності, позначки на арті й кнопка дії підказують гравцю, що робити далі, ще до того, як він прочитає текст.
Персонажі
Гра тримається на іронії над крипторинком. Герої поділені на дві фракції, як і сам ринок: Bulls і Bears, бики й ведмеді. Навколо них живуть меми з криптокультури, від армії жаб Пепе до жертв rug pull, а також боги, що уособлюють страх і жадібність ринку, і пети-компаньйони.
Персонажів створював і анімував наш дизайнер персонажів і моушну, а моїм завданням було вбудувати їх в інтерфейс. Картки героїв, рамки рідкості, зірки й тири зібрані в дизайн-системі, тож новий герой з’являється в грі без окремого макета під нього.
Навігація
DeFight живе всередині Dapp.expert. Криптомедіа — це «місто», а гра — віджет поверх нього: на десктопі вона відкривається панеллю збоку від сторінки, на мобільному займає весь екран. Тому навігація має два рівні: хедер Dapp.expert і меню самої гри.
На мобільному обидва рівні зібрані в один нижній таб-бар. Він не змінюється від екрана до екрана, а пункти підлаштовуються під контекст: поза грою там Megaplex і My Hero, а всередині Lobby, Storage і Market. Гравець за один дотик переходить із новин у бій і назад.
На десктопі віджет має власну вертикальну рейку з іконками розділів і шапку з ресурсами гравця, а сторінка Dapp.expert лишається поруч. Перемикай розділи, щоб побачити, як один і той самий екран живе на десктопі й на мобільному.
Вхід в екосистему: криптомедіа, де DeFight стоїть у головному меню. На мобільному внизу вже є таб-бар гри.
Лендинг гри. На десктопі він відкривається віджетом поверх Dapp.expert, на мобільному займає весь екран.
Хаб гри: Megaplex, герой, інвентар, таверна, поточні квести й івенти. Ресурси гравця завжди у шапці віджета.
Сховище: нагороди за пре-реєстрацію і Meme Vault зі звичайними, VIP і NFT-мемами.
Магазин: щоденний подарунок, Genesis і Battle Pass, меми, гарячі пропозиції й герої.
Квести: сезон Degens Odyssey, Meme Invasion, головні й одноразові завдання.
Лендинг
Лендинг мав за кілька екранів пояснити новачку, що це за гра, і привести його в неї. Перший екран — «Defight Club: Fight, Earn, DeFi!» і одна головна дія: грати безкоштовно.
Далі сторінка веде гравця тим самим шляхом, що й гра: обрати сторону, биків чи ведмедів, зібрати героя, вдягнути спорядження, піти в бій і заробити. Кожна секція показує справжні елементи інтерфейсу з дизайн-системи, тож лендинг і гра виглядають як одне ціле.
Найпомітніша секція — спорядження. Гравець гортає рідкість ліворуч і тип предмета праворуч і одразу бачить, як змінюється картка. На мобільному обидві шкали стають горизонтальними стрічками над і під карткою.
Лобі
Лобі — головний хаб гри, з нього гравець починає кожну сесію. Тут на одному екрані зібрані всі активності та їхні статуси: рівень і ресурси, прогрес головного квесту, івенти з таймерами, нагорода, яку вже можна забрати, і підказка, що зробити далі. Гравцю не треба шукати, що змінилося, поки його не було: усе видно з першого погляду.
Ігрові режими витрачають витривалість, тому в лобі є окремий сценарій для неї. Шкала показує запас і швидкість відновлення, а поруч чотири способи поповнити: забрати безкоштовну порцію раз на 4 години, використати збережений заряд, запросити друга або просунутися в головному квесті. На десктопі це поп-ап поверх віджета, на мобільному — шторка на весь екран.
Режим Deploy
Кнопка PLAY у лобі веде в Deploy, головний ігровий режим. Раунд складається з трьох кроків: гравець обирає мемів, яких «задеплоїть», запускає раунд і ставить мемів на сітку з множниками, поки біжить графік ціни. Чим далі клітинка від поточної точки графіка, тим вищий у ній множник, а отже більший ризик і більша нагорода. Рідкість теж важлива: чим вища вона в мема, тим більше очок він може вибити.
Задача була вмістити живу гру у віджет. Вибір мемів займає один екран: зверху загін на раунд з автовибором і лічильником 50 of 50, знизу Meme Vault з вкладками Main, VIP і NFT, а ціна старту написана прямо на кнопці START. Під час раунду на екрані лише графік, сітка, таймер і лоток з обраними мемами, нічого зайвого.
Загін на раунд і весь Meme Vault в одному вікні. Автовибір збирає 50 мемів за гравця, кнопка START показує, скільки коштує раунд.
Раунд триває хвилину. Ліворуч біжить графік ціни, праворуч сітка з множниками: що далі від графіка, то більший множник. Внизу лоток з мемами.
Гравець ставить мема на клітинку, і вона одразу показує, скільки очок він вибив.
FOMO Port
FOMO Port — гра на нервах: перемагає той, хто запустить ракету останнім. Кожен запуск ставить гравця на перше місце й додає раунду 5 секунд, тож таймер не дає розслабитися ні на мить. Коли відлік доходить до нуля, призи отримує топ-100: 5 000 за перше місце, 2 500 за друге, 1 000 за третє й по 200 усім іншим. Ракети гравець добуває в інших механіках гри або купує.
Весь режим уміщується в один екран з трьома вкладками: список гравців, покупка ракет і правила. Таймер і велика кнопка LAUNCH з кількістю ракет завжди на місці, а поруч видно поточне місце гравця. Коли раунд закінчується, той самий екран показує п’єдестал переможців і нагороду гравця з кнопкою Claim.
«One LAST LAUNCH to Win»: таймер, таблиця з призами за кожне місце, місце гравця й кнопка запуску.
П’єдестал трьох переможців, місце й нагорода гравця, таймер до наступного раунду.
Якщо ракети закінчилися, їх можна докупити, не виходячи з раунду.
Правила гри й таблиця призів для топ-100.
Megaplex
Megaplex — головна база гравця, довга гра поза раундами. Тут стоять будівлі, які переплавляють зброю й піднімають її рівень, станції, що добувають ресурси, і технології, які можна досліджувати. Усе тримається на Гіперкубі: його прокачка відкриває нові функції й будівлі, а будівлі прокачуються ресурсами, які видобуває база: Dark matter, Lunar soil і Cosmic gas.
Будівель на базі багато, і з часом їх стане ще більше, тому кожна будівля — це однакова картка зі статусом, а кожен екран будівлі зібраний з тих самих блоків: картка з рівнем і характеристиками, вкладки ресурсів, слоти з вимогами. Закриті будівлі вже стоять на мапі з позначкою LOCKED, і гравець бачить, до чого рухається.
Гіперкуб і сітка будівель: видобуток і сховища ресурсів, технологічний центр, Cyber Synthesizer, DAO і Tech Hub.
Вкладки трьох ресурсів і слоти сховищ. Кожен слот показує, що потрібно для відкриття, наприклад Гіперкуб другого рівня.
Будівля з рівнем, міцністю й швидкістю досліджень, а нижче слоти технологій з прогресом.
Мій герой
My Hero — сторінка, де гравець керує своїм героєм: вдягає його в спорядження, прокачує рівень і характеристики, відкриває здібності, а в Таверні збирає колекцію героїв і призиває нових. Тут сходяться майже всі системи гри: предмети, картки, ресурси й рідкість.
Екран героя поєднує дві задачі, які зазвичай живуть окремо: спорядження й інвентар. Вгорі герой зі шкалами HP і EP та вкладками Equip, Mastery і Stats, нижче весь інвентар з фільтрами й оцінкою його ринкової вартості. Предмет відкривається в тій самій картці, що й по всій грі, з міцністю й бонусом до Deploy, тому гравцю не треба вчити новий інтерфейс.
Герой, його шкали й слоти спорядження, а поруч інвентар з вкладками All, Special, Equipment і Consumables.
Тип, якість, бонус до Deploy і міцність, яка падає, коли гравець деплоїть мемів. Одна кнопка: вдягнути.
Рівень і досвід, очки на характеристики, зірки героя й очки здібностей. Нижче шість характеристик, кожну можна підняти окремо.
Дерево здібностей з основною й додатковою гілкою. Поки воно в розробці, гравець уже бачить його форму.
Колекція героїв: свої й ще не призвані. Кожна картка показує фракцію, рідкість і прогрес до призову.
Сховище
Storage — сховище гравця. Тут зберігаються всі зібрані меми, а ще живе пре-реєстрація: завдання й нагороди, які гра роздає ще до повного запуску.
Пре-реєстрація побудована як спільна ціль: лічильник показує, скільки гравців уже зареєструвалося, а шкала з порогами від 1k до 100k відкриває скрині з нагородами для всіх. «More players — more prizes!»: що більше людей прийде, то більше призів отримає кожен, тож гравцю вигідно кликати друзів. Нижче Meme Vault, колекція мемів з вкладками Main, VIP і NFT і лічильником копій на кожній картці.
Окремий екран зі завданнями пре-реєстрації веде гравця сімома кроками до ключа доступу: зареєструватися, підписатися на Telegram, підключити гаманець, X і Discord. За кожне завдання гравець отримує бонус, а виконані переїжджають у вкладку Completed.
Лічильник реєстрацій, шкала спільних нагород зі скринями, які вже можна забрати, і Meme Vault.
Сім кроків до ключа доступу. Готове до отримання завдання підсвічене кнопкою Claim, решта ведуть кнопкою GO туди, де їх треба виконати.
Квести
Quests — розділ, який повертає гравця в гру щодня. Тут зібрані всі довгі цілі: сезонний пропуск Degens Odyssey, івент Meme Invasion, головний квест і щоденний вхід. На загальному екрані кожен квест — окрема картка з прогресом, таймером і червоною позначкою, якщо там чекає нагорода.
Degens Odyssey — наш аналог батл-пасу: сезон на 30 днів і 35 рівнів, кожен з нагородами на безкоштовній і преміум-доріжці, від лутботів і скринь до петів, уламків героїв і токена FANTIC у фіналі. У Meme Invasion гравці захоплюють сектор, деплоять мемів за очки й змагаються в денному й тижневому рейтингах. Окремі меми стають цільовими: поки діє множник, вони приносять удвічі більше очок. Головний квест веде гравця етапами, щоденний вхід дає нагороду за кожен день, а пропущений день можна повернути квитком.
Чотири картки з прогресом і таймерами. Червона позначка підказує, де вже можна щось забрати.
Захоплення сектора: прогрес учасників, пороги очок з нагородами, таймер і меми, яких треба задеплоїти.
Дві доріжки, Free і Premium, з однаковими рівнями. Отримані нагороди позначені Claimed, доступні підсвічені кнопкою Claim.
Перший етап: зібрати всі фракції мемів рідкості Normal. Кожна фракція має свою шкалу й нагороду.
Нагорода дня з таймером, календар на 28 днів і особлива нагорода за серію входів.
Тижневий рейтинг Meme Invasion з таймером до кінця тижня. Перші три місця виділені кольором, а рядок гравця закріплений унизу, тож своє місце видно, навіть якщо ти далеко від топу.
Маркет
Market — магазин гри, де гравець купує все, що знадобиться в DeFight: меми, героїв, петів, божеств, спорядження, покращення, косметику, ресурси й дрони. Головний екран починається зі щоденного подарунка й банерів Genesis Pass і Battle Pass, а нижче розділи магазину картками.
Розділів багато, тому всі вони зібрані з однакових блоків: сітка карток з кнопкою Details і фільтром за расою, рідкістю й класом. Обмежені предмети показують, скільки їх лишилося, а гарячі пропозиції мають таймер і знижку прямо на картці. Покупка відкривається одним вікном: що входить у пак, ціна в токенах і орієнтовна ціна в доларах, оплата криптовалютою.
Щоденний подарунок з таймером, пропуски сезону й розділи магазину.
Сет Institutional з дев’яти предметів. Лічильник на картці показує, скільки примірників ще лишилося.
Дев’ять NFT-божеств, кожне уособлює щось із життя крипторинку, від страху й жадібності до духу Сатоші.
Герої з фракціями й рідкістю на картці. Фільтр звужує вибір за расою, рідкістю й класом.
Паки з ресурсами, спорядженням і мемами: склад, ціна, знижка й таймер до кінця пропозиції.
Вікно покупки: вміст пака, ціна в токенах і доларах, кнопка оплати криптовалютою.
Результати
DeFight пройшов шлях від логотипа до робочої гри: MVP уже в проді, а дизайн-система витримала два роки постійного росту контенту.
Саме на цьому проєкті ми вбудували ШІ в щоденну роботу команди: він автоматизував 80% рутини, і той самий обсяг гри тепер тримає команда на 70% менша.
- 01 MVP у проді Гра запущена: лобі, режими Deploy і FOMO Port, база, герой, квести, сховище й маркет працюють як один продукт.
- 02 Система на тисячі елементів 222 набори й 3 019 варіантів компонентів тримають 842 предмети й 188 персонажів. Новий контент додається без перемальовування інтерфейсу.
- 03 80% рутини на ШІ Інструменти з розділу «ШІ-процес» забрали на себе перевірки, специфікації й підготовку макетів. Тепер проєкт веде команда на 70% менша, ніж до інтеграції ШІ.
Що я виніс
DeFight — найбільший проєкт у моїй практиці: тисячі елементів, десятки механік і флоу, які перетинаються між собою. Він навчив мене тримати такий масштаб не на пам’яті, а на правилах: однакові картки, стани для кожного компонента, рев’ю кожного екрана й анотації логіки для розробки. Коли предметів сотні, а рідкостей десять, порядок у бібліотеці важить не менше за красу арту.
Друге — гра має бути водночас яскравою й зрозумілою. Гравець повинен відчувати азарт, але за секунду бачити, що змінилося, що можна забрати і куди йти далі. Тому кожен екран ми будували навколо статусів, таймерів і однієї головної дії.
І третє: саме на DeFight припав наш прорив зі ШІ. Ми не просто спробували нові інструменти, а вбудували їх у процес, і на великому проєкті це дало найпомітніший ефект.