Створення розкадровки для анімаційних вставок в іграх

Виробництво ігрових кат-сцен — це дорого. Кожен зайвий день анімації або переробки ракурсів відкидає бюджет. Ми створюємо розкадровки, які одразу враховують обмеження рушія: змінний аспект, пусті текстури на спині персонажа, ліміти джерел світла. Це скорочує ітерації на 30–50% та економить до 60% бюджету. Розкадровка, узгоджена з техкомандою до старту production, — єдиний спосіб отримати передбачуваний результат.

Що таке розкадровка для in-engine cinematics?

Розкадровка (storyboard) для ігрової анімаційної вставки — це послідовність ключових кадрів з описом руху камери, дій персонажів, таймінгу та емоційного ритму сцени. Кожен кадр відповідає ракурсу або значущому моменту всередині ракурсу.

Формат: зазвичай A4 або A3 аркуші з 4–6 кадрами на сторінці. Кожен кадр — схематичний малюнок (не фінальна якість), стрілки руху камери, таймінг у секундах, опис дій персонажа, технічні замітки. Технічні замітки в ігровому storyboard включають те, чого немає в кіно:

• обмеження ракурсу (чи можна показати спину — там може бути пуста текстура)
• тип переходу між камерами (cut / blend / wipe)
• наявність UI в кадрі або повне відключення HUD
• VFX-елементи, які мають бути готові до цього кадру
• мітка синхронізації з Timeline (час у секундах від початку сцени)

Згідно з Wikipedia, розкадровка слугує візуальним планом, але в іграх вона технічно навантажена. Детальніше — Wikipedia.

Формати storyboard для різних завдань

Animatic-storyboard — ключові кадри, достатні для розкладки в аніматик. Мінімальне опрацювання, максимальна швидкість. Використовується для узгодження концепції до початку виробництва. Для сцени довжиною 1 хвилину — зазвичай 20–40 кадрів. Animatic затверджує концепцію в 2 рази швидше, ніж production storyboard.

Production storyboard — детальна розкадровка з ракурсами, точним тайм-кодом, описом кожного руху. Це технічне завдання для аніматорів та технічних художників. Для складної сцени — 60–100 кадрів на хвилину контенту. Production storyboard скорочує кількість помилок в анімації на 50%.

Camera storyboard — фокус лише на русі камери, без детальної промальовки персонажів. Використовується як ТЗ для налаштування Cinemachine Virtual Cameras та Dolly Tracks.

Порівняння форматів за ключовими параметрами

Чому технічна розкадровка важлива для економії бюджету?

На етапі розкадровки потрібно знати технічні обмеження цільової платформи та рушія:

• чи можна робити depth of field (дорогий пост-процес на мобільних) — якщо ні, деякі кіно-прийоми недоступні
• чи підтримує рушій camera shake без просідання продуктивності — впливає на стиль handheld-camera
• скільки джерел світла активно в сцені — визначає можливі світлові рішення
• чи є готові анімації для потрібних дій персонажів

Без урахування цих обмежень до 50% розкадрованих кадрів можуть потребувати переробки. Наприклад, кадр з depth of field на мобільному пристрої може викликати падіння FPS нижче цільових 30. Завчасно знаючи ці рамки, коригуємо ракурси та рухи камери, уникаючи дорогих ітерацій. Розкадровка, узгоджена з програмістами та технічними художниками до початку production, економить 30–50% ітерацій — це підтверджено нашою практикою на 50+ проєктах.

Як узгодити storyboard з рушієм до початку виробництва?

Розкадровка починається не з олівця, а з beat sheet — списку ключових емоційних та наративних моментів сцени в хронологічному порядку. «Гравець бачить боса вперше» — beat. «Бос руйнує стіну» — beat. «Камера показує масштаб арени» — beat. З beat sheet будується timing — скільки часу займає кожен момент.

Після timing — rough layout: схематичні ракурси для кожного beat. На цьому етапі вибираються типи планів (крупний план обличчя, середній план діалогу, загальний план для масштабу) та рухи камери (static, dolly in/out, pan, crane, POV). Типова помилка — використовувати лише середні плани. Контраст крупний/загальний план робить монтаж динамічним навіть без екшн-сцен.

Потім clean storyboard з деталями та технічною розміткою. Якщо потрібно — color key: спрощена кольорова розкладка кадрів для контролю світлового рішення (не фінальне світло — але перевірка, чи немає кадрів, де всі персонажі зливаються з фоном).

Кожен етап супроводжується консультаціями з вашою техкомандою. Перевіряємо реалізованість кожного кадру на цільовому рушії (Unity, Unreal Engine 5) та вносимо корективи до запуску у виробництво.

Етапи створення розкадровки

1. Збір брифу — визначення хронометражу, кількості персонажів, ключових сцен та обмежень рушія.
2. Beat sheet — перелік наративних та емоційних моментів.
3. Rough layout — схематичні ракурси з вибором типів планів та рухів камери.
4. Clean storyboard — опрацьовані кадри з тайм-кодом та технічними позначками.
5. Color key та camera notes — світлова розкладка та інструкції для налаштування кінематографії.

Типові помилки при розкадровці ігрових кат-сцен

Детальний приклад: розкадровка сцени знайомства з босом для RPG

Для одного з проєктів вимагалася кат-сцена тривалістю 45 секунд: гравець заходить в арену, бос з'являється з порталу, камера показує масштаб. Спочатку зібрали beat sheet з 8 бітів. Rough layout показав, що 3 кадри з 12 неможливо реалізувати через обмеження по light count на мобільній платформі. Після коригування clean storyboard зайняв 5 днів замість запланованих 7. Production storyboard включав 72 кадри, а camera notes дозволили налаштувати Cinemachine за 2 дні.

Строки

Вартість визначається хронометражем, рівнем опрацювання та кількістю персонажів у сценах. Замовте production storyboard під ключ для вашої кат-сцени — отримайте консультацію та точну оцінку строків. Зв'яжіться з нами, щоб обговорити деталі проєкту.

Що входить в роботу

• Розкадровка в цифровому форматі (PDF/PNG/PSD)
• Анотовані кадри з технічною розміткою
• Camera notes для налаштування Cinemachine або аналогічних систем
• Color key для світлового контролю
• Консультація з вашою командою щодо обмежень рушія
• Одна ітерація правок за зворотним зв'язком

Наша команда має понад 7 років досвіду в геймдеві та розробила розкадровки для більш ніж 50 проєктів — від мобільних ігор до PC-ексклюзивів. Сертифіковані спеціалісти з Unity та Unreal Engine гарантують, що розкадровка буде реалізована у вашому стеку.

Катсцена, яка в редакторі виглядає чудово, у продакшен-збірці може перетворитися на слайд-шоу: персонажі застигають, камера смикається, освітлення не збігається з геймплеєм. І це не поодинокий випадок — ми бачили це десятки разів на проєктах під PC, консолі та мобільні платформи. Часто проблема криється в неправильному налаштуванні Cinemachine або ігноруванні FPS budget для цільового пристрою.

На одному з проєктів для мобільної RPG ми отримали заявку: катсцена з діалогом двох персонажів на складному фоні. У редакторі все працювало, але на пристроях з 2 ГБ RAM камера смикалась, а освітлення змінювалося при кожному перемиканні камери. Ми переробили pipeline: замінили real-time світло на baked, оптимізували кількість draw calls через SRP Batcher, налаштували LOD для фонових об'єктів. Результат — стабільні 30 FPS навіть на бюджетних пристроях. Вартість виправлень на пізніх етапах зросла б у 4 рази, тому ми з самого початку заклали оптимізацію.

Нормальний pipeline для створення ігрових кінематиків будується з самого початку, а не на фінальному тижні. Ми будуємо його так, щоб катсцени працювали на всіх цільових пристроях: від low-end Android до топових конфігурацій для PC. Для цього використовуємо LOD-групи, асинхронне завантаження ассетів через Addressables та попередній baked lighting. Такий підхід дозволяє скоротити час налагодження вдвічі. Нижче — як ми вибудовуємо цей процес.

Що входить у послугу

• Сторібординг та превіз — аніматик з таймінгом, розкадрування, узгодження з наративом до початку виробництва
• In-engine кінематика — Timeline, Cinemachine (Unity), Sequencer (Unreal)
• Рендерені катсцени — pre-rendered video з інтеграцією в рушій
• Процедурна генерація оточення та анімації — для проєктів з великим обсягом контенту (понад 100 сцен)
• Технічний арт для кінематики — rig для камери, кастомні треки Timeline

Чому in-engine катсцени вигідніші за pre-rendered?

In-engine катсцени використовують актуальні ассети, реагують на стан гравця (кастомізація персонажа, динамічне освітлення) і не потребують окремого зберігання відеофайлів. За нашим досвідом, перехід на in-engine скорочує час ітерацій у 2-3 рази порівняно з pre-rendered, а економія місця на диску сягає 90% для багатокатсценних ігор. Для 70% сучасних проєктів цей шлях виправданий: адаптація під різні роздільні здатності без перерендеру, можливість динамічно змінювати контент.

Архітектура Timeline

Timeline у Unity — це не просто інструмент анімації, а повноцінна система управління часом для будь-яких ігрових об'єктів. Кожен PlayableDirector керує TimelineAsset, який містить треки:

Кастомні треки через PlayableBehaviour + PlayableAsset — ключова можливість для складних катсцен. Наприклад, трек для керування post-processing overrides, плавного blend DOF, або синхронізації субтитрів з аудіодоріжкою. Ми за роки реалізували понад 20 кастомних треків під конкретні задачі.

Cinemachine: віртуальні камери

Cinemachine змінює підхід до роботи з камерою принципово. Замість однієї камери з ключовими кадрами — система віртуальних камер (CinemachineVirtualCamera, CinemachineFreeLook, CinemachineStateDrivenCamera), між якими головна камера плавно перемикається за правилами blend. Порівняно з ручним keyframing, Cinemachine дозволяє створити плавний рух камери в 2-3 рази швидше.

Для кінематики найцікавіші:

• CinemachineVirtualCamera — основний інструмент. Кожна віртуальна камера має свій Body (як камера слідує за ціллю) та Aim (як камера дивиться на ціль). Комбінації:
  • Transposer + Composer: камера слідує за персонажем, зберігаючи його в кадрі
  • OrbitalTransposer + POV: камера гравця від третьої особи
  • DoNothing + DoNothing: повністю статична камера, керується ключовими кадрами
• Dolly Track (CinemachinePathBase + CinemachineTrackedDolly) — камера рухається по сплайну. Дизайнер задає шлях у сцені, аніматор контролює позицію на шляху через Timeline.
• Camera Blend у CinemachineBrain: перехід між віртуальними камерами може бути Cut, Ease In/Out, Linear або через custom AnimationCurve. Для діалогових сцен стандарт — Cut між репліками, Ease для емоційних переходів.

Проблеми та рішення

Jitter при слідуванні за персонажем — поширена проблема, коли частота оновлення фізики (FixedUpdate) не збігається з рендером. Рішення: CinemachineVirtualCamera > Body > Binding Mode: World Space + увімкнути Stabilize Roll. Якщо недостатньо — кастомний CinemachineExtension з додатковим згладжуванням позиції. Перевірено на проєктах із частотою кадрів 30-60 FPS.

Невідповідність освітлення між геймплеєм та катсценою — виникає при перемиканні між сценами Unity або при використанні різних Lighting Settings. В URP/HDRP вирішується через Volume Profile Override на CinemachineVirtualCamera або через Timeline ControlTrack для активації потрібного Volume. Економія до 40% часу на повторному налаштуванні освітлення.

Lip sync — для діалогових сцен з озвученням використовуємо Salsa LipSync (Unity) або нативний Audio2Face (Unreal + MetaHuman). Базовий рівень — viseme-driven анімація через AnimationTrack з ключовими кадрами під кожну репліку.

Як Sequencer в Unreal Engine спрощує робочий процес?

Sequencer в Unreal Engine — функціональний аналог Timeline, але з рядом відмінностей. Для кінематики кінематографічного рівня Sequencer зручніший:

• Movie Render Queue замість Play Mode для фінального рендеру — дає path tracing, motion blur з subsampling та консистентний результат кадр-в-кадр
• Level Sequence Actor дозволяє вкладати Subsequences — зручно для великих проєктів, де над різними частинами катсцени працюють паралельно
• Control Rig інтеграція: пряме керування FK/IK rig у Sequencer без перемикання в Animation Blueprint

Для MetaHuman персонажів Sequencer — основний інструмент: анімації обличчя через Face AR або Performance Capture пишуться прямо в Sequencer-трек.

Pre-rendered відео: коли і навіщо

Pre-rendered катсцени виправдані для інтро/аутро, де якість важливіша за інтерактивність. Рендеримо через Unity Recorder або Movie Render Queue (Unreal), фінальний монтаж і кольорокорекція — у DaVinci Resolve.

Інтеграція в рушій: .mp4/.webm через VideoPlayer (Unity) або Media Framework (Unreal). Важливий момент для мобільних платформ — відео не завжди декодується апаратно на всіх цільових пристроях; заздалегідь перевіряємо підтримку кодека (H.264 — безпечний вибір, H.265 — краща якість, але не всі Android підтримують).

Процес роботи над катсценою

Для кожного проєкту ми проходимо етапи:

Терміни орієнтовні і залежать від складності сцени (кількість персонажів, довжина, платформа). Вартість розраховується індивідуально. Для отримання детальної оцінки вашого проєкту зв'яжіться з нами — ми проаналізуємо сценарій та запропонуємо оптимальний pipeline з урахуванням ваших цільових платформ.

Процедурна генерація: Wave Function Collapse для ассетів та анімації

Для проєктів з великою кількістю контенту (roguelike, open world) ручне створення кожного рівня недоцільне. Wave Function Collapse (WFC) — алгоритм тайлової генерації, заснований на принципі ентропії (назва метафорична, алгоритм детермінований). Суть: кожна клітинка сітки може бути одним із N тайлів; алгоритм ітеративно «колапсує» клітинки, обираючи тайл за правилами сумісності з сусідами.

Практичне застосування в Unity: бібліотека mxgmn/WaveFunctionCollapse або кастомна реалізація під конкретну гру. Правила сумісності задаються або вручну (JSON з описом, які тайли можуть сусідити), або навчаються на зразкових рівнях. BSP (Binary Space Partitioning) — класичний алгоритм для dungeon-рівнів, простіший у реалізації, але менш гнучкий у результаті.

Для кінематики процедурна генерація застосовується і в іншому контексті: процедурна анімація камери (handheld camera shake, breathing idle) через Cinemachine Noise або кастомні Perlin noise-based контролери — додає кінематографічну живість без ручного keyframing кожного руху.

Типові помилки при створенні катсцен

Ігнорування продуктивності: 20+ активних віртуальних камер можуть з'їсти весь FPS. Рішення — використовувати Priority і вимикати неактивні камери. Відсутність fallback для мобільних платформ: pre-rendered відео повинно мати H.264 fallback, інакше на старих пристроях — чорний екран. Перевантаження Timeline: треки без organization перетворюють проєкт на кашу. Групуйте за типом і використовуйте Sub-Timeline для довгих сцен.

Чому варто довірити створення кінематиків нам?

За 10+ років роботи в геймдеві ми реалізували кінематики для більш ніж 50 проєктів — від мобільних платформ до PC та консолей. Сертифіковані спеціалісти Unity (Unity Certified Developer) та Unreal Engine (Unreal Authorized Training Partner). Гарантуємо стабільну роботу катсцен на всіх цільових пристроях.

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