Визуальный стиль TD и близких стратегий — уроки для «Стражей Рубежа»

Исследование 24.10.2026 для rimwardens/docs/ART_DESIGN.md (разделы 1–5, 10, 11). Группа: Bloons TD 6, Arknights, Rush Royale, Clash Royale и Clash of Clans (Supercell), Legend of Keepers, Dungeon Warfare 2, GemCraft, Thronefall, Bad North, Kingdom Two Crowns, They Are Billions, Warcraft III (Reforged), Northgard. Для обобщения взяты также два внешних эталона по читаемости: руководство Riot по эффектам и статья Valve о TF2.

Пометки. [Ф] — факт из источника (URL рядом). [Н] — наблюдение по скриншотам, геймплею и общеизвестной практике, без первоисточника: проверить на живой игре перед тем, как вносить в канон. [Р] — наш расчёт или вывод. Оговорка о качестве источников: у Supercell, Ninja Kiwi и Hypergryph почти нет открытых докладов именно об арт-дирекции игрового поля; лучшие первоисточники — интервью Supercell (Adobe, PocketGamer), руководство Riot по эффектам, разбор UI Arknights от Tencent. Остальное — обзоры, вики и форумы.

1. По играм

Bloons TD 6 (Ninja Kiwi, 2018)

1. Камера. [Ф] 2.5D, вид сверху, 3D-модели на Unity (Wikipedia, Giant Bomb). [Н] Камера почти отвесная, карта целиком в одном экране, без зума; враги крупные относительно дороги.
2. Палитра. [Н] Фон — насыщенная, но «плоская» трава и вода средней светлоты; шары — чистые первичные цвета с белым бликом, поэтому выбиваются из любого фона. Ставка не на светлоту, а на «чистый цвет + блик» против «природного цвета».
3. Контур/заливка. [Н] Мягкий тун, почти без контура; обезьяны с крупными головами; детали минимальны.
4. Читаемость угроз. [Ф] Свойства врага кодируются оверлеем поверх базового цвета: камуфляж — пятнистый узор, регенерация — форма сердца, укрепление — одна-две ленты по телу; свойства складываются (вики Camo, Regrow, Fortified). [Н] Прочность слоя кодируется цветом шара по лестнице (красный → синий → зелёный → жёлтый → розовый → …), а класс угрозы — формой: тяжёлые враги — дирижабли (MOAB-класс), у каждого ранга свой цвет и размер, повреждения видны трещинами по корпусу. [Ф] Боссы — отдельный класс дирижаблей с уровнями 1–5 (Boss Bloon Event). [Н] У босса — большая полоса здоровья в HUD, не над головой.
5. Толпы и эффекты. [Ф] Поздние раунды с массой снарядов просаживают FPS; игроки называют виновниками башни-«поливалки», советуют меньше, но сильнее башен (Steam). [Н] Сотни шаров читаются, потому что: один силуэт (круг) на всех рядовых, различие только цветом и оверлеем; MOAB-класс резко крупнее; эффект лопания — короткий, сам шар исчезает мгновенно.
6. UI. [Н] Толстые белые цифры с тёмной обводкой, крупные круглые иконки апгрейдов 3 путей × 5 уровней; [Ф] обзор доступности отмечает слабый контраст части текста к фону (Family Gaming Database).
7. Хвалят/ругают. [Ф] Хвалят мультяшную привлекательность для широкой аудитории (Wikipedia); ругают лаги в позднем бою. - Урок нам: база + оверлей свойства (броня, регенерация, невидимость) вместо отдельного спрайта на каждое сочетание; повреждение крупного врага — стадиями на корпусе.

Arknights (Hypergryph, 2019)

1. Камера. [Н] Сетка тайлов под наклоном ~3/4, сцена 3D, персонажи — 2D-чиби на скелетной анимации (Spine); карта помещается в экран, без свободного зума.
2. Палитра. [Н] Сдержанная индустриальная гамма (серый бетон, графит), враги и свои отделяются тем, что поле очень спокойное, а персонажи — контрастные чиби с ярким пятном цвета.
3. Контур. [Н] Чиби с тонким тёмным контуром, крупная голова; фон почти без контура.
4. Угрозы. [Ф] Враги делятся на три класса: обычные, элита, босс; элита выходит малыми партиями и бывает мини-боссом (вики, Enemy). [Ф] При выборе юнита игра замедляется вдвое и показывает радиус атаки тайлами; у навыков с областью — переключатель «радиус атаки / область навыка» (вики Operation).
5. Эффекты. [Н] Короткие, плоские, «технические» эффекты; навыки — с рамкой-плашкой на портрете, а не с большим взрывом на поле.
6. UI. [Ф] Разбор Tencent: очень высокий контраст слоёв, размытие фона под всплывающими панелями (видно, что под ними), предупреждающие яркие акценты, карточки с тенью и скруглением, декоративный английский текст, шрифт Bender; переходы соответствуют связи экранов (зум между темой и выбором уровня, тёмное затухание между несвязанными системами) (163.com / Tencent GAD). [Ф] Карточка юнита в панели развёртки: красная с таймером — ждёт повторной высадки, полупрозрачная — не хватает очков (вики).
7. Хвалят/ругают. [Н] Хвалят UI как эталон «стильного и понятного»; поле боя считают скромным. - Урок нам: состояние карточки (недоступно / перезарядка / готово) — тремя разными способами одновременно (прозрачность, цвет, таймер); замедление и показ радиуса при выборе на телефоне; размытый фон под меню.

Rush Royale (MY.GAMES / IT Territory, 2020)

1. Камера. [Н] Портрет, две доски 3×5 (своя снизу, чужая/союзная сверху), враги идут по периметру доски; масштаб не меняется.
2. Палитра. [Ф] Яркий стилизованный, «персонажный» стиль (Pocket Tactics). [Н] Доска — тёмный камень, юниты — светлые насыщенные пятна.
3. Контур. [Н] Чиби с толстым контуром, плоская заливка + один градиент.
4. Угрозы. [Ф] Слияние двух одинаковых юнитов даёт новый случайный юнит (Wikipedia). [Н] Ранг юнита — точками-пипсами на фишке (как у кости); у врагов над головой число HP, босс — гигантский спрайт с полосой.
5. Эффекты. [Н] Очень много снарядов, но они мелкие и однотонные; крупный эффект только у босса и ульт.
6. UI. [Ф] Обучение слиянию через текст описано как неясное, выручает визуальная справка (Common Sense Media). - Урок нам: ранг/уровень, считываемый счётом (пипсы, зубцы, полоски), а не оттенком.

Clash Royale и Clash of Clans (Supercell)

1. Камера. [Н] CR — портрет, ортографический вид 3/4 сверху, арена целиком в экране. [Ф] Про ортографию — мнение с форума Unity, не официально (Unity). CoC — изометрия с зумом. [Ф] CoC — собственный движок, предрендер 3D в спрайты (по косвенным источникам; Wikipedia CR).
2. Палитра. [Ф] Ранний CoC был ярче и мультяшнее; тона приглушили, чтобы не отпугнуть «серьёзных» игроков, найдя середину между реализмом и супердеформацией (Pixar, Capcom) (Game Developer, PocketGamer.biz). [Ф] Принципы текстуры: простое альбедо — пара оттенков на материал; вариации — через шероховатость и маски износа; металл скромный и локальный, формы «коробочные»; сдвиги цвета и светлоты ведут глаз к лицу персонажа (Adobe Substance, Supercell Helsinki) — это уже совпадает с нашим 4.2.
3. Контур. [Н] Без нарисованного контура: силуэт отделяется тёмной окклюзией у ног, светлым ободком сверху и контактной тенью.
4. Читаемость ролей. [Ф] У Supercell (Brawl Stars) каждый новый персонаж должен почти мгновенно передавать роль, силуэт, характер и функцию, причём проверяется в движении, на малом размере и в хаосе боя (GameDev.net, PocketGamer.biz). [Н] CR: сторона — цветом (свои синие, враги красные: плащи, флажки, полоса HP), размер юнита пропорционален угрозе (гигант, голем — в 2–3 раза крупнее рыцаря), рои (скелеты, гоблины) — мелкие и одинаковые. [Н] CoC: каждый уровень здания меняет материал (дерево → камень → золото → тёмный металл/лава) — уровень читается материалом с первого взгляда.
5. Эффекты. [Н] Заклинания показывают точный круг области на земле; эффекты короткие, яркие, на земле — круг/кольцо.
6. UI. [Н] Жирный шрифт с тёмной обводкой и тенью (Supercell-Magic), толстые «леденцовые» кнопки, рамки карт по редкости (серая, оранжевая, фиолетовая, радужная/золотая); [Ф] в вакансиях UI CR цель — «более читаемый, красивый, отзывчивый» опыт (Supercell).
7. Хвалят/ругают. [Н] Стиль считают эталоном мобильной читаемости; упрёк — «одинаковый пастельный мобильный стиль» (PocketGamer.biz об Arclight Rumble). - Урок нам: сторона — цветом на одежде и полосе HP; уровень постройки — сменой материала; размер = угроза; круг области заклинания всегда точный.

Legend of Keepers (Goblinz, 2021)

1. Камера. [Н] Вид сбоку, бой в комнатах подземелья, пошагово — это не карта TD. 2–3. [Ф] Пиксель-арт выбран потому, что в команде уже был пиксельный художник; юмор — от Dungeon Keeper и французской юмористической фэнтези (Астерикс, Kaamelott) (Turn Based Lovers). [Ф] Хвалят чёткий пиксель, фоны «как живопись», анимацию каждой атаки (Dread Central, GamingOnLinux). 4–6. [Н] Комедия держится на анимации атак и подписях, UI — пергамент и дерево, крупные иконки статусов. - Урок нам: юмор — в анимациях и idle, а не в шуме деталей; это подтверждает наш раздел 1 «Характер в деталях».

Dungeon Warfare 2 (Valsar, 2017)

1. [Н] Почти отвесный вид сверху на коридоры, мелкий пиксель-арт, ловушки на клетках.
2. [Ф] В Steam описана физика: 33 ловушки, отбрасывание в ямы и опасности окружения (Steam). [Н] Ловушки читаются по форме иконки на клетке, а не по спрайту в мире.
3. [Ф] Ругают «грубую» графику; у первой части — слишком мелкий пиксель, дающий визуальный шум и усталость глаз (VaporLens DW2, VaporLens DW1, TouchArcade). - Урок нам: мелкая детализация на малом экранном размере — прямой путь к «шуму»; правило «не мельче 40 px» из нашего раздела 1 верное.

GemCraft: Frostborn Wrath (Game in a Bottle, 2020)

1. [Ф] Вид сверху на сетку 60×38 тайлов по 28×28 px, арт перерисован под Full HD (GemCraft вики). 2–4. [Ф] Шесть типов камней, тип = цвет = эффект: оранжевый — кража маны, жёлтый — крит, зелёный — яд, красный — кровотечение, синий — замедление, фиолетовый — разрыв брони (TV Tropes). [Н] Тёмный, приглушённый фон — и самые яркие пиксели на экране это камни и выстрелы; монстры — тёмные силуэты.
2. [Ф] Игроки жалуются на тормоза при массе монстров; советуют отключить погоду; выше 1080p — сильное падение FPS (Steam). - Урок нам: жёсткая связка «цвет ↔ эффект» на всё поле; отключаемая погода как настройка производительности.

Thronefall (Grizzly Games, 2023/2024)

1. [Н] 3D low-poly, наклонная камера 3/4, карта небольшая; день — стройка, ночь — бой.
2. [Ф] Минимализм с отдельной цветовой палитрой у каждого уровня (Fingerguns); плоские яркие цвета (Gameluster).
3. [Ф] Союзники, враги, ключевые здания и UI построены ясно, враги легко опознаются (Siliconera). Но есть противоположное мнение: минимализм «мутит» бой, враги недостаточно чёткие (Startmenu).
4. [Н] UI почти отсутствует: цена стройки — монетками над площадкой, игрок «вносит» золото, проезжая мимо. - Урок нам: палитра на уровень — да; но минимализм без силуэтной разницы врагов даёт кашу ночью — нам нужна ночная проверка читаемости (наш 4.4).

Bad North (Plausible Concept, 2018)

1. [Ф] Маленькие острова-диорамы, камеру можно вращать (GamesBeat, PocketGamer.biz).
2. [Ф] Размытые, приглушённые тона на фоне жестокости (PocketGamer.biz); сравнивают с ожившим гобеленом из Байё (Nintendo World Report). 3–4. [Н] Солдаты — крошечные фигурки без лица, отряд читается как одно пятно с флажком командира; кровь копится на земле как след боя.
3. [Ф] Минимализм — «нить через всю игру»; системы RTS спрятаны, игрок входит постепенно (PocketGamer.biz). - Урок нам: отряд бараков читается как группа под одним флажком; следы боя (у нас — воронки, щепки, пыль фракции) накапливаются на карте.

Kingdom Two Crowns (Noio / Coatsink, 2018)

1. [Н] Вид сбоку, параллакс, свиток вправо-влево.
2. [Ф] Пиксель-арт выбран, чтобы сократить путь от рисунка до игры (Wikipedia); хвалят свет и постоянное отражение в воде (Nintendo Life). [Ф] Автор: для чистого пикселя пиксели должны совпадать с геометрией и быть одного размера по всей модели; урезание света сделало картинку цельнее (80.lv).
3. [Ф] Интерфейс урезан до необходимого (обзор). [Н] Монеты — физические предметы в мире.
4. [Ф] Ругают ночные отражения: «жёлтые линии пикселей» (Steam). - Урок нам: единый размер «мазка/пикселя» по всем ассетам при любом масштабе спрайта (у нас — единая толщина контура в экранных px, см. 3).

They Are Billions (Numantian Games, 2017/2019)

1. [Н] Наклонный вид сверху, сильный зум, мелкие юниты.
2. [Ф] Тёмные мрачные тона + стимпанк (Way Too Many Games). 4–5. [Ф] Собственный движок, тысячи врагов на экране; заявлено до 20 000 одновременно (KeenGamer, Game*Spark). [Н] Орда — ковёр из одинаковых тёмных фигурок, отличимых только размером и цветовым пятном у особых (толстяк, крикун, гарпия); здания игрока светлее и теплее.
3. [Ф] Хвалят ощущение масштаба орды (Game Informer); ругают мутные детали на зуме и «копипасту» моделей (CogConnected, Thumb Culture). - Урок нам: при больших толпах рядовых не надо детализировать — нужен общий тон и выделение особых; но при приближении нужен «второй слой» детали (LOD наоборот), иначе зум разочаровывает.

Warcraft III и спор о Reforged (Blizzard, 2002 / 2020)

1. [Н] Наклонная перспективная камера RTS, зум ограничен. 2–3. [Н] Оригинал: утрированные пропорции (огромные плечи, руки, оружие), насыщенное золото/белое у людей, полосы цвета команды на юнитах. [Ф] Reforged: уход в реализм; игроки пишут, что пехотинцы и рыцари в одинаковом глянцевом металле сливаются в группе и теряют силуэт, блеск меняет кажущийся цвет команды, картинка серая и туманная (форум Blizzard, TL.net).
2. [Ф] Blizzard ответила, что сосредоточилась на позах, анимации и читаемости — сразу ли лучник похож на лучника (VGC). [Ф] В 2024 добавлен режим Classic HD; классическая графика доступна (Wikipedia). - Рядом: [Ф] арт-директор Warcraft Arclight Rumble — на мобильной камере сверху читаемость первична; силуэты узнаваемые, без «раздробленных материалов»; стиль «игрушечных миниатюр» (PocketGamer.biz). - Урок нам: главный антипример — реалистичные материалы (глянец, отражения) убивают силуэт и цвет команды. У нас это уже запрещено разделом 1 («никакого глянца»), стоит добавить «правило материала»: один крупный материал на силуэт, без бликов, меняющих цвет.

Northgard (Shiro Games, 2018)

1. [Н] Наклонная камера 3/4, карта из клеток-территорий с цветными границами кланов.
2. [Ф] Насыщенно текстурированные ландшафты, спрайты выделяются на фоне утрированно и мультяшно; стиль сравнивают с «первым Warcraft на современных ассетах» (Checkpoint Gaming).
3. [Ф] Художники знают, какие части персонажа видны на экране, и не делают лишних деталей (интервью Tom's Hardware, в пересказе; ссылка).
4. [Н] Принадлежность — цветными границами территорий и щитами/флажками; роли юнитов — по оружию и позе. - Урок нам: детализировать только то, что видно с нашей камеры 50° (верх головы, плечи, оружие, крыша), а не спину и подошвы.

2. Внешние эталоны (вне группы, но про читаемость)

• Riot, League of Legends. [Ф] Цели эффектов по приоритету: ясность игры, минимум шума, тема персонажа; визуальный вес = игровой вес (громкая ульта, тихая обычная атака); внимание, которое забирает способность, должно соответствовать её важности; эффект показывает точную область — расхождение путает игроков; у эффекта есть главный элемент (граница радиуса) и второстепенный (заполнение); снаряд показывает направление полёта даже в стоп-кадре (VFX Style Guide, Clarity in League).
• Valve, Team Fortress 2. [Н] Известная статья: порядок прочтения «команда → класс → оружие», детали и светлота сосредоточены у груди и головы, к ногам темнее, фон приглушён (Game Developer; страница при проверке отдала 403, пересказ по памяти — сверить).

3. Принципы читаемости и масштабируемости (обобщение)

3.1 Порядок прочтения юнита

[Р] Любой юнит читается в фиксированном порядке, и каждый уровень закреплён за своим каналом: 1. Сторона (свой/враг) — цвет плаща/флажка + цвет полосы HP + сторона движения. Никогда только оттенком кожи/доспеха (урок Reforged). 2. Угроза/вес (мелочь, пехота, тяжёлый, элита, босс) — размер и плотность силуэта (CR, BTD6 MOAB). Наша таблица 3 уже даёт ступени; важно, чтобы соседние ступени различались по высоте не меньше чем в 1.25 раза. 3. Роль/тип (бронированный, маг-сопротивление, летающий, быстрый, лекарь) — форма силуэта и оружие (щит, посох, крылья). 4. Свойство/состояние (бронирован, регенерирует, невидим, проклят, горит) — оверлей поверх базы, а не новый спрайт (BTD6). 5. Уровень/ранг — счётом (пипсы, зубцы, лычки; Rush Royale) или материалом (CoC), но не оттенком.

3.2 300+ юнитов на экране

• Один силуэт на рядовых класса + различие пятном цвета (BTD6, They Are Billions). Рядовые — без лишних подвижных деталей; в толпе работают только контур и пятно.
• Особые выбиваются из толпы размером (минимум ×1.4 к пехоте) и меткой (знак над головой/кольцо под ногами), а не только цветом.
• Смерть рядового — мгновенная и короткая (BTD6: шар исчезает сразу; у нас — распад в пыль ≤ 0.4 с), иначе трупы и эффекты забивают дорогу.
• Снаряды рядовых башен мелкие и однотонные (Rush Royale); крупные — только у взрывных, ульт и босса.
• Полосы HP — только у повреждённых и только у элиты/тяжёлых по умолчанию; у рядовых можно скрыть, оставив опцию (ср. наш 10.2 про цифры урона).
• Производительность — как часть арта: настройки «погода», «эмбиент», «плотность частиц» (GemCraft, BTD6 жалобы); бюджет частиц по приоритету уже есть в 10.3 — добавить авто-снижение при падении FPS.

3.3 Зум 0.5–1.5

• [Р] Проектировать спрайты для худшего зума (0.5) — на нём силуэт, контур и пятно должны работать; детали — бонус для 1.0–1.5.
• [Р] Контур в экранных px постоянный (как «пиксель одного размера» у Kingdom): при зуме 0.5 исходный контур атласа истончается вдвое — нужен второй набор/миплеп с утолщённым контуром или контур шейдером. Сейчас в разделе 3 толщина задана на 128 px спрайта — дописать правило для зума.
• [Р] Два уровня информации: на 0.5 — значки над юнитами крупнее (обратное масштабирование HUD-меток, иконки статусов не мельче 16 pt), на 1.5 — видны детали и idle-сцены. Урок They Are Billions: если на зуме нечего смотреть, игроки называют графику мутной.
• [Р] Тени, полосы HP, иконки статусов и круги радиусов — в экранном пространстве (не масштабируются вместе с миром) или масштабируются слабее (например, √зума).

3.4 Телефон

• [Р] Расчёт: на телефоне ~6.1" в альбоме при показе той же площади карты, что 1080p на ПК при зуме 0.5, пехота (40–48 px в 1080p) займёт ~3 мм. У Clash Royale рыцарь на портретном экране ≈ 30–35 pt (≈ 5 мм). Значит, на телефоне минимальный зум выше (≈ 0.75 от ПК) или «телефонный» мир показывает меньше площади. Предлагаемые пороги на телефоне: рядовая пехота ≥ 28 pt по высоте, мелочь ≥ 20 pt, иконка статуса ≥ 12 pt, касание по юниту/паду — зона ≥ 44 pt независимо от размера спрайта.
• Выбор цели на телефоне: замедлять игру и показывать радиус тайлами/кругом (Arknights).
• Карточки и кнопки: три состояния одновременно — прозрачность (нет денег), цвет+таймер (перезарядка), подсветка (готово) (Arknights).
• Меню поверх поля — с размытием фона, чтобы видно было, что бой под ним (Arknights).

3.5 Цветовое кодирование урона и угроз

• Цвет урона = цвет вспышки = цвет цифр = цвет иконки — везде одинаков (GemCraft: цвет камня = эффект). У нас палитра 4.3 уже есть; добавить, что тот же цвет несут иконки сопротивлений врага.
• Сопротивление врага к типу урона показывать на нём знаком (щит/руна цвета урона на поясе/знамени), дублировать в превью волны. Это аналог «оверлея свойства» BTD6.
• Сторона ≠ урон. Красный зарезервирован под врага/опасность (полоса HP врага, зона удара босса); поэтому ни один тип урона не должен быть чисто красным (у нас взрывной #FFB04A — оранжевый, это правильно).
• Каждый цвет дублируется формой (наш режим Okabe–Ito); добавить: формы вспышек типов урона из 10.1 обязательны и в режиме дальтоника.

3.6 Элита и боссы

• Элита: размер ×1.15–1.3 к базовой версии того же врага + постоянная метка (кольцо под ногами цвета фракции с зубцами, рог/корона) + полоса HP всегда видна. Не «перекрашенный рядовой» — у элиты другая деталь силуэта (Arknights: элита — отдельный класс; CR: гиганты крупнее).
• Босс: полоса HP в HUD (верх экрана, с именем и фазами — BTD6), не над головой; на поле — повреждение стадиями (трещины, отлетевшая броня, BTD6 MOAB), смена фаз видна по силуэту.
• Телеграф ударов босса: точная зона на земле (Riot, CR) — граница главная, заливка второстепенная; длительность предупреждения ≥ 0.6 с; цвет — красная граница поверх любой биомной палитры.
• Визуальный вес = игровой вес (Riot): ульта героя и удар босса — самые громкие события; выстрел рядовой башни — самый тихий.

3.7 Материалы и детализация

• Простое альбедо: 2–3 цвета на материал, вариация — светлотой и износом (Supercell) — уже в нашем 4.2.
• Без глянца и отражений, меняющих цвет (Reforged).
• Деталь только там, где её видит камера 50° (Northgard), и не мельче 3–4 экранных px на зуме 0.5 (DW1 — шум и усталость глаз).
• Палитра на уровень/биом при едином языке форм (Thronefall) — у нас 19 биомных палитр; нужна ночная проверка (Thronefall: ночью минимализм «мутнеет»).

4. Что предложить добавить в ART_DESIGN.md