Рабочая страница для дизайнера
19 мая 2026
Согласование игрового экрана
Графика для «Танков»: игровой экран и поле v0
Мы переносим фокус с главного экрана на игровой экран: поле, сетку, подсветки, танки, здоровье, кнопки и маркеры. Сейчас задача дизайнера — оценить направление игрового поля v0 и помочь выбрать, что берём дальше.
Текущий этап
Согласуем игровой экран и поле как единую карту.
Правильный процесс
Фон поля отдельно, сетка и игровые состояния накладываются сверху.
Результат от дизайнера
Нужен выбор направления: фон поля, слои, элементы и ограничения.
Игровой экран и поле v0
По уточнению дизайнера первый рабочий участок теперь не главный экран, а экран боя. Проверяем поле как единую карту, сетку и игровые состояния поверх неё, затем фиксируем реестр элементов для дальнейшей работы.
1. Начинаем с боя.
Первый фокус — поле, верхняя панель, здоровье, кнопки, танки и маркеры.
Первый фокус — поле, верхняя панель, здоровье, кнопки, танки и маркеры.
2. Поле — единая карта.
Обычные клетки не делаем отдельными красивыми картинками.
Обычные клетки не делаем отдельными красивыми картинками.
3. Состояния сверху.
Сетка, подсветки, опасные клетки, маршрут и цель остаются отдельными слоями.
Сетка, подсветки, опасные клетки, маршрут и цель остаются отдельными слоями.
1Игровой экран v0: что согласуем сейчас
Это не финальная графика игры. Это рабочая страница для выбора направления: какой должна быть базовая поверхность поля, какие слои остаются поверх неё и какие элементы игрового экрана нужно готовить первыми.
Важно: фон поля не содержит сетку, танки, ходы, выстрелы и интерфейс. Всё, что меняется во время игры, остаётся управляемым слоем поверх фона.
Слой 1Фон поля
Слой 2Сетка
Слой 3Подсветки и опасные клетки
Слой 4Танки, маркеры, объекты
Слой 5Верхняя и нижняя панели
2Варианты фона поля
Первый набор фонов заменён: он был слишком похож на абстрактную грязную текстуру и слабо совпадал с выбранными референсами. Ниже новый набор: единая полевая подложка в духе N09/P01, без запечённой сетки, объектов и интерфейса. Сетка, танки и состояния наложены на странице отдельными слоями.
Проверяем не только сам фон, но и работу слоёв поверх него: рамка, сетка, танки, маршрут, цель, доступный ход и опасные клетки остаются отдельными управляемыми элементами.
Вариант A — тёмное поле
Танк 1100Танк 278Танк 342
Ближе к N09 по тёмному тактическому настроению. Сильнее ощущение тяжёлого военного экрана, но контраст надо проверить на мелких полях.
Вариант B — читаемая олива
Танк 1100Танк 278Танк 342
Самый спокойный вариант для телефона. Меньше давит на сетку и маркеры, но может потребовать больше характера по краям поля.
Вариант C — тёплая потертость
Танк 1100Танк 278Танк 342
Больше фактуры и потёртости в духе B06. Может выглядеть богаче, но важно не перегрузить поле на 13x13 и 17x17.
3Реестр графических элементов игрового экрана v0
Это рабочие индексы для общения с дизайнером. Они написаны по-русски и описывают не файлы в коде, а понятные части игрового экрана, которые нужно согласовывать.
| Индекс | Экран | Назначение | Статус | Приоритет | Что нужно от дизайнера |
|---|---|---|---|---|---|
игра-фон-01 | Экран боя | Общий фон за полем и панелями. | Нужен вариант | Средний | Проверить, насколько тёмным должен быть весь экран. |
игра-панель-верх-01 | Экран боя | Область параметров, монет, меню и карточек танков. | В реестре | Высокий | Уточнить плотность, высоту и материал панели. |
игра-кнопка-меню-01 | Экран боя | Кнопка параметров/меню. | В реестре | Средний | Согласовать форму и заметность без лишнего веса. |
игра-карточка-танка-01 | Экран боя | Карточка танка противника. | В реестре | Высокий | Проверить читаемость при трёх танках. |
игра-шкала-здоровья-01 | Экран боя | Здоровье танка. | В реестре | Высокий | Согласовать цветовую шкалу и контраст. |
игра-поле-фон-01 | Поле | Единая карта/местность поля. | Есть 3 варианта | Критический | Выбрать A/B/C или указать, что собрать из нескольких. |
игра-поле-сетка-01 | Поле | Сетка поверх карты. | HTML/CSS слой | Критический | Согласовать заметность линий на мобильном размере. |
игра-поле-рамка-01 | Поле | Рамка игрового поля. | В реестре | Высокий | Понять, нужна ли тяжёлая рамка или более лёгкая. |
игра-клетка-подсветка-01 | Поле | Доступный ход. | HTML/CSS слой | Критический | Проверить цвет и прозрачность. |
игра-клетка-выбрана-01 | Поле | Выбранная клетка. | HTML/CSS слой | Высокий | Согласовать отличие от доступного хода. |
игра-клетка-опасная-01 | Поле | Простреленная клетка. | HTML/CSS слой | Критический | Проверить, не спорит ли с танками и маршрутом. |
игра-маркер-хода-01 | Поле | Маршрут движения. | В реестре | Высокий | Уточнить форму: точка, метка, линия или комбинированный знак. |
игра-маркер-цели-01 | Поле | Цель выстрела. | В реестре | Высокий | Проверить читаемость на тёмном и светлом фоне поля. |
игра-танк-южный-01 | Поле | Танк игрока/южной стороны. | В реестре | Высокий | Согласовать форму, цвет и отличие от северного танка. |
игра-танк-северный-01 | Поле | Танк северной стороны. | В реестре | Высокий | Согласовать отличие цветом плюс формой. |
игра-флаг-01 | Поле | Флаг/цель захвата. | В реестре | Средний | Позже сделать варианты в выбранном стиле. |
игра-камень-01 | Поле | Препятствие. | В реестре | Средний | Позже согласовать силуэт и повреждения. |
игра-аптечка-01 | Поле | Лечение/бонус. | В реестре | Средний | Позже согласовать читаемый знак без лишней мелкости. |
игра-панель-низ-01 | Экран боя | Панель управления ходом. | В реестре | Высокий | Проверить высоту на телефоне. |
игра-кнопка-основная-01 | Экран боя | Подтверждение хода. | В реестре | Высокий | Согласовать цвет и вес основной команды. |
игра-кнопка-сброс-01 | Экран боя | Сброс/отмена. | В реестре | Средний | Согласовать спокойный вторичный вид. |
5Контекст: что уже согласовано
ОщущениеНастольная тактическая игра с ощущением качества
РакурсВид сверху с лёгким объёмом
ПалитраПриглушённая военная палитра; ориентир — палитра созданных эскизов
СтороныЦвет плюс форма
Фокус уточнёнНачинаем с игрового экрана, затем возвращаемся к главному экрану
ПолеЕдиная карта/местность, сверху сетка и игровые состояния
НельзяУхудшать читаемость клеток и ходов; делать слишком мелкие детали; ломать текущую сетку и размеры
УспехСтиль стал цельным и игра выглядит дороже
6Контекст: визуальный стандарт v0
Старые эскизы используем как источник направления: палитра, металл, фактура, рамки, настроение и ощущение тактической карты. Не используем их как готовые экраны.
N09 · Главный ориентир
Общее настроение, рамка, тёмная тактическая панель.
B03 · Материалы
Чистый металл и аккуратность без лишней грязи.
B06 · Механика
Источник для тяжёлых панелей, кнопок и деталей.
P01 · Поле
Ориентир по полю, но новая база поля теперь должна быть единой картой.
АрхивГлавный экран v2
Этот блок оставлен как завершённый черновой этап. Он показал полезный процесс: отдельные растровые элементы плюс управляемый текст и состояния поверх. Но текущий рабочий фокус перенесён на игровой экран и поле. Главный экран v2 — эталон процесса разделения слоёв, а не финальный ориентир для игрового поля.
Что забираем из v2
- Не запекать весь экран в одну картинку.
- Согласовывать элементы отдельно.
- Проверять мобильный размер раньше внедрения.
Справочно: как мы дальше производим графику
Ниже оставлен рабочий процесс для следующих задач. Активное согласование сейчас выше, а этот блок нужен как справка: как готовить графические элементы так, чтобы они выглядели качественно и не ломали игру.
SVG / CSS / React-компоненты
Иконки интерфейса, шкалы здоровья, подсветки клеток, маркеры, простые служебные объекты.
PNG/WebP изображения
Танки, камни, аптечки, флаги, дым, взрывы, портреты в галерее и стартовый экран.
Атлас и лист спрайтов
Маленькие повторяющиеся объекты и эффекты, чтобы не грузить десятки файлов.
Несколько размеров
Галерея, открытие нового танка и стартовый экран получают несколько размеров, а не один тяжёлый файл.
2. Как выбирать формат
Простое правило: если объект должен быть точным и управляемым состояниями, оставляем его кодовым. Если объект должен создавать ощущение качества, фактуры и света, делаем растровый графический элемент, готовый к внедрению.
| Тип элемента | Решение | Почему так |
|---|---|---|
| Иконки интерфейса, кнопки, простые знаки | SVG (векторная графика) или библиотека иконок |
Чётко на любом размере, легко перекрасить, минимальный вес. |
| Подсветки клеток и маркеры планирования | CSS / SVG |
Это часть игровой логики и состояний, её нужно тестировать и точно позиционировать. |
| Танки, камни, аптечки, флаги | PNG/WebP с прозрачностью |
Именно здесь растровая картинка даст видимый рост качества: материал, свет, силуэт. |
| Взрыв, дым, вспышка выстрела | Лист спрайтов | Эффект выглядит живее, но остаётся лёгким и контролируемым во время работы игры. |
| Галерея, открытие танка, стартовый экран | Несколько размеров WebP/AVIF и запасной PNG |
Крупное изображение не должно грузиться в одном размере для всех экранов. |
3. Целевой процесс
Графический элемент, готовый к внедрению, рождается не в момент генерации. Он проходит понятные шаги: задание, набор вариантов, фиксация стиля, подготовка файла, описание загрузки, внедрение и проверка качества. Если элемент плохо читается в реальном размере, возвращаемся к заданию или стилю, а не маскируем проблему кодом.
4. Что делает команда на каждом шаге
Это операционная модель. Она нужна, чтобы генерация не превратилась в бесконечное «ещё один красивый вариант», а каждый принятый графический элемент можно было проверить и откатить.
Художественное задание
Фиксируем место элемента, размер в интерфейсе, состояния, фон и ограничения экрана телефона.
Набор вариантов
Готовим несколько вариантов одного направления, а не один случайный финал.
Фиксация
Закрепляем ракурс, палитру, тень, детализацию, правила повреждений и эффектов.
Исходник
Храним основной исходник отдельно от оптимизированного файла, который реально грузит игра.
Файл и описание загрузки
Задаём размер, точку привязки, версию, состояние и файл, который реально грузит игра.
Визуальная проверка
Проверяем на целевых размерах экрана, в игре, рядом с маркерами и текущим интерфейсом.
5. Дорожная карта внедрения
Не начинаем с полной замены всех игровых картинок. Сначала берём зоны с высоким визуальным эффектом и низким игровым риском, затем двигаемся к полю и эффектам.
Визуальный стандарт v0
Одна страница направления: палитра, свет, вид сверху, размер в клетке, принятые и отклонённые примеры.
Игровой экран и поле
Сначала фиксируем фон поля как единую карту, сетку, подсветки, маркеры и читаемость на мобильном размере.
Объекты поля
Камни, аптечки, флаги. Проверяем центрирование, обрезку, контраст с маркерами и размещение в редакторе.
Танки
Самый важный слой: сторона, направление дула, повреждённые и уничтоженные состояния, размер на 9x9/13x13/17x17.
Эффекты
Вспышка выстрела, попадание, дым, огонь, подбор аптечки. Проверяем время показа, порядок слоёв и читаемость поля.
6. Критерии готовности графического элемента
Графический элемент не считается готовым к внедрению, пока он не прошёл не только художественный отбор, но и техническую проверку в реальной игре.
Есть исходник или ссылка на исходник.
Есть оптимизированный файл, который реально грузит игра.
Есть описание загрузки: размер, точка привязки, версия, состояния.
Элемент читается на 393x852 и не размыт.
Центр совпадает с центром клетки интерфейса.
Маркеры выбора, доступного хода и выстрела не конфликтуют с картинкой.
Размер сборки не вырос неожиданно.
Есть скриншоты проверки и понятный путь отката.
7. Риски и защита
Главный риск: мы получим красивые отдельные картинки, но игра станет хуже читаться. Поэтому защита строится вокруг фиксации стиля, описания загрузки, визуальной проверки и маленьких фаз.
| Риск | Как защищаемся |
|---|---|
| Красивые графические элементы ухудшат читаемость боя. | Проверяем не на превью, а в реальном размере клетки на телефоне. |
| Разные генеративные эскизы дадут разный стиль. | Сначала визуальный стандарт v0 и фиксация стиля, потом набор вариантов внутри одной системы. |
| Растровые изображения увеличат вес приложения. | Атлас, сжатие, отложенная загрузка и несколько размеров для крупных изображений. |
| Тени и прозрачность сломают ощущение выбора клеток. | Логика выбора остаётся на клетках интерфейса, точка привязки задаётся явно в описании загрузки. |
| Темы начнут конфликтовать с изображениями. | Игровые элементы проходят проверку совместимости с темами, особенно для светлой темы. |
| Ручная оптимизация будет забываться. | Подготовка файла и сжатие автоматизируются, проверка веса входит в критерии готовности. |
Рекомендуемое стратегическое решение
Принять гибридный процесс создания графики: оставить SVG (векторную графику) и CSS (стили интерфейса) для точных технических слоёв, использовать генеративные эскизы и растровую доработку для художественных слоёв, ввести описание загрузки, начинать с галереи и стартового экрана, затем переходить к объектам поля, танкам и эффектам. Каждый шаг закрывать скриншотами проверки и текущими критериями визуального качества.
Внешние источники и практики
- web.dev: Responsive images - адаптивные изображения, выбор размера и оптимизация доставки изображений.
- web.dev: Image performance - WebP/AVIF, сжатие, плотность пикселей и управление количеством вариантов.
- MDN: Including vector graphics in HTML - практическая разница между растровой и векторной графикой.
- Unity Manual: Sprite Atlas workflow - почему маленькие спрайты группируют в атлас.
- Apple HIG: Images - изображения для экранов с разной плотностью пикселей.
- Apple HIG: Icons - простота, узнаваемость и единый стиль иконок интерфейса.
Эта HTML-версия публикуется вместе с папкой с материалами, где лежат схемы и выбранные облегчённые превью созданных эскизов.