N09
Основной экран и направление для первого визуального обновления.
На этой странице зафиксировано визуальное направление игры и показан новый прототип главного экрана, собранный из отдельных графических элементов. Сейчас задача дизайнера — оценить v2 и указать, что берём в дальнейшую работу.
Первый опрос и выбор эскизов завершены. Ниже зафиксировано визуальное направление, от которого дальше строим графику игры: не как анкету, а как рабочее решение для следующих задач.
Это не черновые пожелания, а исходная рамка для работы над графикой. Если новое решение спорит с этими пунктами, его нужно отдельно согласовать.
Дизайнер выбрал N09 как главный ориентир. Остальные выбранные эскизы не конкурируют с ним, а уточняют отдельные части: материалы, поле, крупные размеры и общее настроение.
Основной экран и направление для первого визуального обновления.
Палитра, металл, фактуры, кнопки и ощущение старой тактической панели.
Рамка поля, читаемость клеток и общий вид игрового пространства.
Проверяем, что стиль не ломается на средних и больших полях.
| Берём в работу | Палитру, материалы и фактуры, рамку поля, танки, кнопки, главный экран и настроение. |
| Комментарий дизайнера | Каждый используемый элемент нужно выделить отдельно, создать несколько вариантов и согласовать. |
| Что не переносить | Отдельных запретов по эскизам дизайнер не добавил, поэтому остаются общие ограничения: не ухудшать читаемость, не мельчить детали, не ломать сетку. |
Это не новая сложная система, а зафиксированное визуальное направление. Оно нужно, чтобы каждая следующая задача по графике не начиналась с нуля и не уводила игру в другой стиль.
Основной экран, который задаёт общее настроение, рамку поля и уровень качества.
Чистый тактический металл: меньше лишней грязи, больше аккуратности и читаемости.
Источник для кнопок, фактур и ощущения тяжёлой военной панели.
Проверка рамки, клеток и общего вида поля на разных размерах.
Проверка, что стиль работает на поле 13x13 и не перегружает экран.
Проверка читаемости при максимальном количестве клеток.
Это не финальный экран игры, а рабочая проверка процесса: отдельные растровые элементы, поверх них управляемые HTML/CSS-текст, сетка и состояния. Такой подход позволяет согласовать визуальное направление до внедрения в игру.
Важно: мы не переносим в игру одну готовую картинку экрана. Дизайнер оценивает набор, а дальше разработка забирает отдельные файлы: фон, кнопки, карточки, рамку поля, клетки, танки и маркеры.
Ниже показано, как могут работать фон, кнопки, плашки, карточки, рамка поля, клетки, танки и маркеры без запекания текста в картинку.
Проверь тактику на полях 9x9, 13x13 и 17x17. Каждый живой танк движется до трёх шагов, затем делает три выстрела. Простреленные клетки становятся опасными.
Поля 9x9, 13x13 и 17x17
До 3 танков на сторону
3 выстрела на танк
Победы: 0
Поражения: 0
Ничьи: 0
Поле
9x9
Режим
Против бота
Сторона
Южный танк
Бот
Штурм флага
Рамка поля, клетки, маркеры и танки остаются отдельными слоями. Это позволит внедрять стиль постепенно и проверять читаемость на разных размерах поля.
Все элементы сохранены отдельно. Клетки имеют одинаковый размер, танки имеют единый холст, маркеры не обрезаны, кнопки не растягиваются произвольно.
Эти файлы можно оценивать по частям: что оставить как основу, что доработать, что лучше не переносить в игру.
Основная панель
Рамка поля
Карточка настройки
Малая плашка
Обычная клетка
Клетка хода
Опасная клетка
Южный танк
Северный танк
Маркер маршрута
Маркер цели
Главная кнопка
Второстепенная кнопка
Оливковая кнопкаНиже оставлен рабочий процесс для следующих задач. Активное согласование сейчас выше, а этот блок нужен как справка: как готовить графические элементы так, чтобы они выглядели качественно и не ломали игру.
Иконки интерфейса, шкалы здоровья, подсветки клеток, маркеры, простые служебные объекты.
Танки, камни, аптечки, флаги, дым, взрывы, портреты в галерее и стартовый экран.
Маленькие повторяющиеся объекты и эффекты, чтобы не грузить десятки файлов.
Галерея, открытие нового танка и стартовый экран получают несколько размеров, а не один тяжёлый файл.
Простое правило: если объект должен быть точным и управляемым состояниями, оставляем его кодовым. Если объект должен создавать ощущение качества, фактуры и света, делаем растровый графический элемент, готовый к внедрению.
| Тип элемента | Решение | Почему так |
|---|---|---|
| Иконки интерфейса, кнопки, простые знаки | SVG (векторная графика) или библиотека иконок |
Чётко на любом размере, легко перекрасить, минимальный вес. |
| Подсветки клеток и маркеры планирования | CSS / SVG |
Это часть игровой логики и состояний, её нужно тестировать и точно позиционировать. |
| Танки, камни, аптечки, флаги | PNG/WebP с прозрачностью |
Именно здесь растровая картинка даст видимый рост качества: материал, свет, силуэт. |
| Взрыв, дым, вспышка выстрела | Лист спрайтов | Эффект выглядит живее, но остаётся лёгким и контролируемым во время работы игры. |
| Галерея, открытие танка, стартовый экран | Несколько размеров WebP/AVIF и запасной PNG |
Крупное изображение не должно грузиться в одном размере для всех экранов. |
Графический элемент, готовый к внедрению, рождается не в момент генерации. Он проходит понятные шаги: задание, набор вариантов, фиксация стиля, подготовка файла, описание загрузки, внедрение и проверка качества. Если элемент плохо читается в реальном размере, возвращаемся к заданию или стилю, а не маскируем проблему кодом.
Это операционная модель. Она нужна, чтобы генерация не превратилась в бесконечное «ещё один красивый вариант», а каждый принятый графический элемент можно было проверить и откатить.
Фиксируем место элемента, размер в интерфейсе, состояния, фон и ограничения экрана телефона.
Готовим несколько вариантов одного направления, а не один случайный финал.
Закрепляем ракурс, палитру, тень, детализацию, правила повреждений и эффектов.
Храним основной исходник отдельно от оптимизированного файла, который реально грузит игра.
Задаём размер, точку привязки, версию, состояние и файл, который реально грузит игра.
Проверяем на целевых размерах экрана, в игре, рядом с маркерами и текущим интерфейсом.
Не начинаем с полной замены всех игровых картинок. Сначала берём зоны с высоким визуальным эффектом и низким игровым риском, затем двигаемся к полю и эффектам.
Одна страница направления: палитра, свет, вид сверху, размер в клетке, принятые и отклонённые примеры.
Быстрый визуальный скачок без риска для выбора клеток. Здесь можно быстро поднять качество без риска для правил боя.
Камни, аптечки, флаги. Проверяем центрирование, обрезку, контраст с маркерами и размещение в редакторе.
Самый важный слой: сторона, направление дула, повреждённые и уничтоженные состояния, размер на 9x9/13x13/17x17.
Вспышка выстрела, попадание, дым, огонь, подбор аптечки. Проверяем время показа, порядок слоёв и читаемость поля.
Графический элемент не считается готовым к внедрению, пока он не прошёл не только художественный отбор, но и техническую проверку в реальной игре.
Главный риск: мы получим красивые отдельные картинки, но игра станет хуже читаться. Поэтому защита строится вокруг фиксации стиля, описания загрузки, визуальной проверки и маленьких фаз.
| Риск | Как защищаемся |
|---|---|
| Красивые графические элементы ухудшат читаемость боя. | Проверяем не на превью, а в реальном размере клетки на телефоне. |
| Разные генеративные эскизы дадут разный стиль. | Сначала визуальный стандарт v0 и фиксация стиля, потом набор вариантов внутри одной системы. |
| Растровые изображения увеличат вес приложения. | Атлас, сжатие, отложенная загрузка и несколько размеров для крупных изображений. |
| Тени и прозрачность сломают ощущение выбора клеток. | Логика выбора остаётся на клетках интерфейса, точка привязки задаётся явно в описании загрузки. |
| Темы начнут конфликтовать с изображениями. | Игровые элементы проходят проверку совместимости с темами, особенно для светлой темы. |
| Ручная оптимизация будет забываться. | Подготовка файла и сжатие автоматизируются, проверка веса входит в критерии готовности. |
Принять гибридный процесс создания графики: оставить SVG (векторную графику) и CSS (стили интерфейса) для точных технических слоёв, использовать генеративные эскизы и растровую доработку для художественных слоёв, ввести описание загрузки, начинать с галереи и стартового экрана, затем переходить к объектам поля, танкам и эффектам. Каждый шаг закрывать скриншотами проверки и текущими критериями визуального качества.
Эта HTML-версия публикуется вместе с папкой с материалами, где лежат схемы и выбранные облегчённые превью созданных эскизов.