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

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

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

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

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

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

Usually though, we don't want everything in the game or app to be subject to the canvas transform. For example:

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

  • UI: Think of a user interface (UI) or head-up display (HUD) superimposed on our view of the game world. We want a life counter, score display and other elements to retain their screen positions even when our view of the game world changes.

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

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

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

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

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

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

../../_images/canvaslayers.png

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

Примітка

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