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

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

CanvasItem is the base for all 2D nodes, be it regular 2D nodes, such as Node2D, or Control. Both inherit from CanvasItem. You can arrange canvas items in trees. Each item will inherit its parent's transform: when the parent moves, its children move too.

CanvasItem nodes, and nodes inheriting from them, are direct or indirect children of a Viewport, that display them.

A Viewport has the property Viewport.canvas_transform, allows to apply a custom Transform2D transform to the CanvasItem hierarchy it contains. Nodes such as Camera2D work by changing that transform.

To achieve effects like scrolling, manipulating the canvas transform property is more efficient than moving the root canvas item and the entire scene with it.

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).