Розробка розкадрування (Storyboarding) ігрових сцен

Розробка розкадрування (Storyboarding) сцен ігор

Ми розробляємо розкадрування, яке економить ваші гроші: один день роботи художника-розкадровника запобігає тижню переробок у аніматорів і технічних художників. Команди, які використовують storyboard до початку продакшну, витрачають на переробки в 3 рази менше часу — це не метафора, а результат нашої практики. Оцінимо ваш проєкт і запропонуємо оптимальний формат. За останні 10 років ми реалізували понад 50 проєктів для різних жанрів — від RPG до хорорів, від мобільних платформ до PC з високими вимогами до графіки.

Чому розкадрування критичне для геймдеву?

Без розкадрування команда починає виробництво з розпливчастим уявленням про фінальний результат, виявляє невідповідності в середині роботи і переробляє. Наш досвід (10+ років у геймдеві, понад 50 реалізованих проєктів) показує: розкадрування — найдешевший спосіб уникнути помилок композиції, staging і таймінгу на ранньому етапі. Зв'яжіться з нами — і ми покажемо, як це працює на практиці.

Який формат розкадрування обрати для вашої сцени?

Не кожна ігрова сцена потребує одного типу розкадрування. Різні завдання — різні формати. Вибір залежить від стадії проєкту та необхідної точності.

Thumbnail storyboard. Найшвидший варіант: маленькі ескізи (5×8 см), схематичні фігури, лише ключові моменти. Використовується для первинного узгодження концепції. Робиться за кілька годин, дозволяє оцінити потік і ритм сцени до детального опрацювання.

Rough storyboard. Кадри A5-A4 формату, зрозумілі пози та вирази персонажів, вказівки руху камери (стрілки). Достатньо для аніматику — послідовності статичних кадрів з тайм-кодом, яка показує timing сцени. Більшість виробничих рішень приймається на етапі rough storyboard.

Clean storyboard. Фіналізовані кадри з деталями, підписами, тайм-кодами. Використовується як офіційна документація для складних продакшнів з великими командами або при роботі з аутсорсом — коли потрібен документ без подвійних тлумачень.

Що показує хороше розкадрування

Кожен кадр розкадрування містить три шари інформації:

Візуальна композиція. Положення персонажів у кадрі, лінія горизонту, foreground/background розділення. Погане розкадрування — персонажі по центру кожного кадру, жодної роботи з правилом третин, немає глибини. Хороше — кожен кадр читається як самостійна композиція і одночасно вписується в потік.

Рух. Стрілки руху камери (pan, tilt, dolly, crane) та руху персонажів. Без стрілок розкадрування показує «звідки» і «куди», але не «як». Типова втрата інформації: рух камери на 30 градусів ліворуч виглядає на папері так само, як рух на 90 градусів — без явного зазначення кута.

Staging. Персонажі повинні читатися як силуети. Якщо два персонажі зливаються в кадрі — це staging-проблема. На етапі розкадрування це видно і легко виправити. У готовій анімації — години переробок.

Специфіка розкадрування для in-engine сцен

Для кат-сцен, які рендеряться в рушії (Timeline + Cinemachine), розкадрування містить додаткові технічні шари:

Camera lens notes. Приблизний Field of View для кожного ракурсу. Wide angle (FOV 70–90°) для масштабу та динаміки, telephoto (FOV 30–50°) для компресії простору та ізоляції персонажа. Це впливає на налаштування Cinemachine Virtual Camera.

Depth of field indicator. Позначка, чи різкий передній план, задній, чи обидва — для налаштування Post-processing Depth of Field. Shallow DOF для емоційних крупних планів, глибокий — для action і environment shots.

Transition type. Між кожною парою кадрів: hard cut / dissolve / wipe. У Timeline це налаштування CinemachineBlend.

VFX marks. Позначки де в кадрі мають бути ефекти частинок, шейдерні ефекти, взаємодії зі світлом.

Розкадрування зменшує час переробок у 3 рази порівняно з роботою без нього. Це підтверджується нашою практикою — у 90% випадків проєкти з розкадруванням здаються в строк, без нього затримки становлять 30–50%.

«Розкадрування — це міст між режисурою та продакшном», — каже наш провідний художник-розкадровник із 15-річним стажем.

Як вибудовується робота

Робота починається з брифінгу: передається літературний сценарій або опис сцени, референси за стилем, технічні обмеження (платформа, можливості рушія). Далі — thumbnail pass для узгодження загального потоку, потім rough storyboard для затвердження кожного кадру, потім clean pass за необхідності.

Важливий етап — review з аніматорами. Аніматор дивиться на розкадрування і каже: «ось ця поза фізично неможлива для цього персонажа» або «між цими двома кадрами немає достатньо часу для переходу» — це потрібно знати до початку анімації.

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

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

• Збір референсів і технічних обмежень
• Thumbnail pass (узгодження загального потоку)
• Rough storyboard (затвердження кожного кадру)
• Clean pass з технічними нотами (FOV, DOF, transition type, VFX marks)
• Рев’ю з аніматорами та внесення правок
• Підсумкова документація (PDF/зображення з тайм-кодами)

Гарантуємо, що кожен кадр читається як самостійна композиція та вписується в потік. Отримайте консультацію — ми оцінимо ваш проєкт і запропонуємо строки.

Економія на переробках може сягати 70% бюджету. Зв'яжіться з нами для точної оцінки вашого проєкту.

Розкадрування — це економія часу та грошей. Наш досвід і гарантія якості підтверджені десятками реалізованих проєктів.

Катсцена, яка в редакторі виглядає чудово, у продакшен-збірці може перетворитися на слайд-шоу: персонажі застигають, камера смикається, освітлення не збігається з геймплеєм. І це не поодинокий випадок — ми бачили це десятки разів на проєктах під 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). Гарантуємо стабільну роботу катсцен на всіх цільових пристроях.

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