Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

2D паралакс

Вступ

Паралакс — це ефект, який використовується для імітації глибини завдяки тому, що текстури рухаються з різною швидкістю відносно камери. Для досягнення цього ефекту Godot надає вузол Parallax2D. Проте все ще може бути легко спіткнутися, тому ця сторінка містить докладний опис деяких властивостей і способи виправлення деяких поширених помилок.

Примітка

На цій сторінці описано, як використовувати Parallax2D, який рекомендується використовувати над вузлами ParallaxLayer і ParallaxBackground.

Перші кроки

Вузол паралакса підтримує додавання вузлів, які відображають речі як дочірні, тому ви можете використовувати один або багато вузлів для створення кожного шару. Для початку розмістіть кожен вузол або вузли, які ви хочете прокручувати незалежно, як дочірні елементи їх власного вузла паралакса. Переконайтеся, що верхня ліва частина використовуваних текстур знаходиться на перетині (0, 0), як на зображенні нижче. Перегляньте розділ про positioning, щоб дізнатися, чому це важливо.

../../_images/2d_parallax_size_viewport.webp

У наведеній вище сцені використовується одна підготовлена текстура для вищих хмар у Sprite2D, але ви можете так само легко використовувати кілька вузлів, розташованих на відстані, щоб скласти шар.

Прокрутка масштабу

Основою ефекту паралакса є властивість scroll_scale. Він працює як множник швидкості прокручування, дозволяючи шарам рухатися з іншою швидкістю, ніж швидкість камери для кожного набору осі. Значення 1 змушує вузол паралакса прокручуватися з тією ж швидкістю, що й камера. Якщо ви хочете, щоб зображення дивилося далі під час прокручування, використовуйте значення менше 1, а 0 повністю зупиняє його. Якщо ви хочете, щоб щось виглядало ближче до камери, використовуйте значення вище 1, щоб прокручуватись швидше.

Сцена вище складається з п'яти шарів. Деякі хороші значення scroll_scale можуть бути такими:

(0,7, 1) - Ліс
(0,5, 1) - Пагорби
(0,3, 1) - Нижня хмарність
(0,2, 1) - Вищі хмари
(0,1, 1) - Небо

У відео нижче показано, як ці значення впливають на прокручування під час гри:

Нескінченне повторення

Parallax2D забезпечує бонусний ефект, який створює ілюзію нескінченного повторення текстур. repeat_size повідомляє вузлу фіксувати свою позицію вперед або назад, коли камера прокручується на встановлене значення. Цей ефект досягається шляхом додавання одного повтору до всіх дочірніх елементів полотна, зміщених за значенням. Коли камера прокручується між зображенням і його повторенням, вона непомітно повертається назад, створюючи вигляд циклічного зображення.

Будучи делікатним ефектом, незнайомим користувачам легко помилитися в налаштуваннях. Давайте розглянемо кілька поширених проблем, з якими стикаються користувачі, «як» і «чому».

Поганий розмір

З ефектом нескінченного повторення найпростіше працювати, коли у вас є зображення, призначене для безперебійного повторення, і воно має такий самий розмір або більше, ніж ваше вікно перегляду до встановлення repeat_size. Якщо ви не можете отримати ресурси, призначені для цього завдання, є деякі інші речі, які ви можете зробити, щоб краще підготувати своє зображення щодо розміру.

Ось приклад текстури, яка занадто мала для вікна перегляду:

Ми бачимо, що розмір вікна перегляду становить 500x300, а текстура — 288x208. Якщо ми встановимо repeat_size до розміру нашого зображення, ефект нескінченного повторення не прокручується належним чином, оскільки оригінальна текстура не покриває вікно перегляду. Якщо ми встановимо repeat_size на розмір вікна перегляду, ми матимемо великий розрив. Що ми можемо зробити?

Зменшіть вікно перегляду

Найпростіша відповідь — зробити вікно перегляду такого ж розміру або менше, ніж текстури. У Project Settings > Display > Window змініть налаштування Viewport Width і Viewport Height відповідно до вашого фону.

Масштаб Parallax2D

Якщо ви не прагнете досконалого піксельного стилю або не проти розмитості, ви можете збільшити текстури, щоб вони відповідали вашому екрану. Встановіть scale для Parallax2D, і всі дочірні текстури масштабуються відповідно до нього.

Масштабуйте дочірні вузли

Подібно до масштабування Parallax2D, ви можете масштабувати вузли Sprite2D так, щоб вони були достатньо великими, щоб покрити екран. Майте на увазі, що деякі налаштування, такі як Parallax2D.repeat_size і Sprite2D.region_rect не враховують масштабування, тому необхідно налаштувати ці значення на основі масштабу.

../../_images/2d_parallax_size_scale.webp

Повторіть текстури

Ви також можете почати з правої ноги, підготувавши дочірні вузли раніше в процесі. Якщо у вас є Sprite2D, який ви хотіли б повторити, але він замалий, ви можете зробити наступне, щоб повторити його:

встановити texture_repeat на CanvasItem.TEXTURE_REPEAT_ENABLED
встановити region_enabled на true
встановіть region_rect значення, кратне розміру вашої текстури, достатньо великого, щоб охопити вікно перегляду.

Нижче ви можете побачити, що повторення зображення двічі робить його достатньо великим, щоб покрити екран.

../../_images/2d_parallax_size_repeat.webp

Погане позиціонування

Зазвичай користувачі помилково встановлюють центрування всіх своїх текстур на (0,0):

../../_images/2d_parallax_single_centered.webp

Це створює проблеми з ефектом нескінченного повторення, і цього слід уникати. «Полотно нескінченного повторення» починається з (0,0) і розширюється вниз і вправо до розміру значення repeat_size.

../../_images/2d_parallax_single_expand.webp

Якщо текстури зосереджені на перетині (0,0), полотно нескінченного повторення покривається лише частково, тому воно повторюється лише частково.

Чи вирішить це збільшення `repeat_times`?

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

Спочатку перевірте, чи не переливаються текстури на негативні частини полотна. Переконайтеся, що текстури, які використовуються у вузлах паралакса, відповідають «нескінченному повторюваному полотну», починаючи з (0,0). Таким чином, якщо Parallax2D.repeat_size встановлено правильно, це має виглядати приблизно так, з одним єдиним циклом зображення того самого розміру або більшого, ніж область перегляду:

../../_images/2d_parallax_repeat_good_norect.webp

Якщо ви подумаєте про те, як зображення прокручується по екрану, воно починається з відображення того, що знаходиться всередині червоного прямокутника (визначається repeat_size), а коли воно досягає того, що знаходиться всередині жовтого прямокутника, воно переміщує зображення вперед до створити ілюзію прокручування назавжди.

../../_images/2d_parallax_repeat_good.webp

Якщо у вас зображення розташоване поза «полотном нескінченного повторення», коли камера досягає жовтого прямокутника, половина зображення буде обрізано, перш ніж воно перескочить вперед, як на зображенні нижче:

../../_images/2d_parallax_repeat_bad.webp

Зміщення прокручування

Якщо ваші текстури паралакса вже працюють належним чином, але ви бажаєте, щоб вони починалися з іншої точки, Parallax2D поставляється з властивістю scroll_offset, яка використовується для зсуву там, де нескінченне повторення полотна починається. Наприклад, якщо ваше зображення має розмір 288x208, встановлення scroll_offset на (-144,0) або (144,0) дозволить йому починатися з середини зображення .

Повторити рази

В ідеалі, дотримуючись цього посібника, ваші текстури паралакса будуть достатньо великими, щоб покривати екран навіть у зменшеному масштабі. Досі ми мали ідеально підходящу текстуру 288x208 у вікні перегляду 288x208. Однак виникають проблеми, коли ми зменшуємо масштаб, встановлюючи для Camera2D.zoom значення (0,5, 0,5):

../../_images/2d_parallax_zoom_single.webp

Навіть якщо для області перегляду все налаштовано правильно на рівні масштабування за замовчуванням, зменшення масштабу робить її меншою за область перегляду, порушуючи ефект нескінченного повторення. Саме тут може допомогти repeat_times. Встановивши значення 3 (одне додаткове повторення позаду та попереду), воно тепер достатньо велике, щоб вмістити ефект нескінченного повторення.

../../_images/2d_parallax_zoom_repeat_times.webp

Якби ці текстури мали повторюватися вертикально, ми б вказали значення y для repeat_size. repeat_times також автоматично додасть повтор вище та нижче. Це лише горизонтальний паралакс, тому він залишає порожній блок над і під зображенням. Як ми це вирішимо? Нам потрібно бути креативними! У цьому прикладі ми розтягуємо небо вище, а спрайт трави нижче. Тепер текстури підтримують звичайний рівень масштабування та зменшення до половини розміру.

../../_images/2d_parallax_zoom_repeat_adjusted.webp

Розділений екран

Більшість навчальних посібників із створення гри з розділеним екраном у Godot починаються з написання невеликого сценарію для призначення Viewport.world_2d першого SubViewport другому, щоб вони мали спільний дисплей. Часто виникають запитання про те, як поділитися ефектом паралакса між обома екранами.

Ефект паралакса фальсифікує перспективу, змінюючи положення різних текстур відносно камери. Це, зрозуміло, проблематично, якщо у вас є кілька камер, тому що ваші текстури не можуть бути в двох місцях одночасно!

Цього все ще можна досягти шляхом клонування вузлів паралакса у другий (або третій або четвертий) SubViewport. Ось як виглядає налаштування гри для двох гравців:

../../_images/2d_parallax_splitscreen.webp

Звичайно, тепер обидва фони відображаються в обох вікнах SubViewport. Ми хочемо, щоб кожен паралакс відображався лише у відповідному вікні перегляду. Ми можемо досягти цього, виконавши такі дії:

Залиште всі вузли паралакса за замовчуванням visibility_layer 1.
Встановіть для першого SubViewport canvas_cull_mask лише шари 1 і 2.
Зробіть те саме для другого SubViewport, але використовуйте шари 1 і 3.
Надайте своїм паралактичним вузлам у першому SubViewport загального батька та встановіть для його visibility_layer значення 2.
Зробіть те саме для вузлів паралакса другого SubViewport, але використовуйте шар 3.

Як це працює? Якщо елемент полотна має visibility_layer, який не збігається з canvas_cull_mask SubViewport, він приховає всіх дочірніх елементів, навіть якщо вони збігаються. Ми використовуємо це на нашу користь, дозволяючи SubViewports відключати відтворення вузлів паралакса, батьківський елемент яких не має підтримуваного visibility_layer.

Попередній перегляд у редакторі

До версії 4.3 рекомендовано розміщувати кожен шар у власному ParallaxBackground, увімкнути властивість follow_viewport_enabled і масштабувати окремий шар. Цей метод завжди було складно підібрати правильно, але він все ще можливий, використовуючи CanvasLayer замість ParallaxBackground.