Полотняні шари

Елементи Вікно перегляду та Полотна

CanvasItem (Елемент Полотна) є основою для всіх 2D-вузлів, таких як Node2D, або Control. Обидва успадковуються від CanvasItem. Ви можете додавати вузли CanvasItem в дерево. Кожен елемент успадкує батьківські перетворення: це означає, що коли предка перенесуть, перемістяться і нащадки.

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

Viewport має властивість Viewport.canvas_transform, що дозволяє застосовувати власне перетворення Transform2D до ієрархії CanvasItem, яку воно містить. Такі вузли, як Camera2D, працюють змінюючи це перетворення.

Для досягнення таких ефектів, як прокрутка, краще маніпулювати з властивістю перетворення полотна, ніж з переміщенням елемента кореневого полотна та всієї сцени з ним.

Зазвичай, ми не хочемо, щоб усе в грі, чи застосунку, підлягало перетворенню полотна. Прикладами цього є:

  • Паралакс фони: Фони, які рухаються повільніше, ніж решта сцени.

  • Інтерфейс Користувача: Подумайте про Інтерфейс користувача (UI), або Головний дисплей (HUD), накладений поверх ігрового світу. Ми хочемо, щоб лічильник життя, балів та інші елементи зберігали свої позиції на екрані, навіть коли наш погляд на ігровий світ змінюється.

  • Переходи: Ми можемо хотіти, щоб візуальні ефекти, що використовуються для переходів (затухання, поєднання), залишалися у фіксованому місці екрана.

Як ці проблеми можна вирішити в одному дереві сцен?

CanvasLayers (Полотняні шари)

Відповідь - CanvasLayer (Полотняні шари), це вузол, який додає окремий шар 2D-рендерингу для всіх своїх нащадків. Нащадки вікна перегляду за замовчуванням малюватимуть на шарі "0", тоді як CanvasLayer малюватиме на будь-якому числовому шарі. Шари з більшим числом будуть намальовані поверх шарів з меншим числом. CanvasLayers також мають власну трансформацію і не залежать від трансформації інших шарів. Це дозволяє інтерфейсу користувача фіксуватися в просторі екрана, поки наш погляд на ігровий світ змінюється.

Прикладом цього є створення паралаксного фону. Його можна зробити за допомогою CanvasLayer на шарі "-1". Екран з точками, лічильником життя та кнопкою паузи також можна створити на шарі "1".

Ось схема того, як це виглядає:

../../_images/canvaslayers.png

CanvasLayers не залежать від порядку в дереві, вони залежать лише від номера шару, тому їх можна створити за потреби, коли це потрібно.

Примітка

CanvasLayers не потрібні для управління порядком малювання вузлів. Стандартний спосіб забезпечити, щоб вузол був правильно намальований "попереду" або "позаду" інших, - це маніпулювати порядком вузлів на панелі сцени. Можливо, протилежно інтуїтивно, верхні вузли на панелі сцени намальовані позаду нижчих у вікні перегляду. 2d-вузли також мають властивість для контролю порядку малювання (дивіться Node2D.z_index).