|
@@ -6,31 +6,30 @@ Canvas layers
|
|
Viewport and Canvas items
|
|
Viewport and Canvas items
|
|
-------------------------
|
|
-------------------------
|
|
|
|
|
|
-:ref:`CanvasItem <class_CanvasItem>` is the base for all 2D nodes,
|
|
|
|
-regular 2D nodes, such as :ref:`Node2D <class_Node2D>` or
|
|
|
|
-:ref:`Control <class_Control>` both inherit from :ref:`CanvasItem <class_CanvasItem>`.
|
|
|
|
-CanvasItems can be arranged in trees. Each item will inherit
|
|
|
|
-its parent's transform. This means that when the parent move, the children
|
|
|
|
-will move too.
|
|
|
|
|
|
+:ref:`CanvasItem <class_CanvasItem>` is the base for all 2D nodes, be it regular
|
|
|
|
+ 2D nodes, such as :ref:`Node2D <class_Node2D>`, or `Control
|
|
|
|
+ <class_Control>`. Both inherit from :ref:`CanvasItem <class_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
|
|
CanvasItem nodes, and nodes inheriting from them, are direct or indirect children of a
|
|
-:ref:`Viewport <class_Viewport>`, that will display them.
|
|
|
|
|
|
+:ref:`Viewport <class_Viewport>`, that display them.
|
|
|
|
|
|
The Viewport's property
|
|
The Viewport's property
|
|
:ref:`Viewport.canvas_transform <class_Viewport_property_canvas_transform>`,
|
|
:ref:`Viewport.canvas_transform <class_Viewport_property_canvas_transform>`,
|
|
allows to apply a custom :ref:`Transform2D <class_Transform2D>`
|
|
allows to apply a custom :ref:`Transform2D <class_Transform2D>`
|
|
transform to the CanvasItem hierarchy it contains. Nodes such as
|
|
transform to the CanvasItem hierarchy it contains. Nodes such as
|
|
-:ref:`Camera2D <class_Camera2D>` change that transform to work.
|
|
|
|
|
|
+:ref:`Camera2D <class_Camera2D>` work by changing that transform.
|
|
|
|
|
|
-Approaches to achieve effects like scrolling that manipulate the canvas transform property are
|
|
|
|
-more efficient than those that move the root canvas item (and hence the whole scene).
|
|
|
|
|
|
+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
|
|
Usually though, we don't want *everything* in the game or app to be subject to the canvas
|
|
transform. Examples of this are:
|
|
transform. Examples of this are:
|
|
|
|
|
|
- **Parallax Backgrounds**: Backgrounds that move slower than the rest
|
|
- **Parallax Backgrounds**: Backgrounds that move slower than the rest
|
|
of the stage.
|
|
of the stage.
|
|
-- **UI**: Think of a user interface (UI) or Heads-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 change.
|
|
|
|
|
|
+- **UI**: Think of a user interface (UI) or Heads-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.
|
|
- **Transitions**: We may want visual effects used for transitions (fades, blends) to remain at a fixed screen location.
|
|
- **Transitions**: We may want visual effects used for transitions (fades, blends) to remain at a fixed screen location.
|
|
|
|
|
|
How to solve these problems in a single scene tree?
|
|
How to solve these problems in a single scene tree?
|
|
@@ -47,7 +46,7 @@ CanvasLayers also have their own transform and do not depend on the
|
|
transform of other layers. This allows the UI to be fixed in screen-space
|
|
transform of other layers. This allows the UI to be fixed in screen-space
|
|
while our view on the game world changes.
|
|
while our view on the game world changes.
|
|
|
|
|
|
-An example of this is the creation of a parallax background. This can be done
|
|
|
|
|
|
+An example of this is creating a parallax background. This can be done
|
|
with a CanvasLayer at layer "-1". The screen with the points, life
|
|
with a CanvasLayer at layer "-1". The screen with the points, life
|
|
counter and pause button can also be created at layer "1".
|
|
counter and pause button can also be created at layer "1".
|
|
|
|
|