Skip to content

Commit 013b84f

Browse files
committed
Add Getting Started for Parallax2D
1 parent 173ff27 commit 013b84f

File tree

2 files changed

+14
-4
lines changed

2 files changed

+14
-4
lines changed

tutorials/2d/2d_parallax.rst

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,25 @@ up though, so this page provides in-depth descriptions of some properties and ho
1616
recommended to use over the :ref:`ParallaxLayer<class_parallaxlayer>` and
1717
:ref:`ParallaxBackground<class_parallaxbackground>` nodes.
1818

19-
Scroll scale
20-
------------
19+
Getting started
20+
---------------
21+
22+
The parallax node supports adding nodes that render things as children, so you can use one or many nodes to make up each
23+
layer. To begin, place each node or nodes you want to have scroll independently as a child of their own parallax node.
24+
Make sure that the top left of the textures used are at the ``(0, 0)`` crossing, like in the image below. See the section
25+
on :ref:`positioning <doc_2d_parallax_positioning>` for why this is important.
26+
27+
.. image:: img/2d_parallax_size_viewport.webp
28+
29+
The scene above uses one prepared texture for the higher clouds in a :ref:`Sprite2D <class_sprite2d>`, but you could
30+
just as easily use multiple nodes spaced out to compose the layer.
2131

2232
The backbone of the parallax effect is the :ref:`scroll_scale <class_parallax2d_property_scroll_scale>` property.
2333
It works as a scroll-speed multiplier, allowing layers to move at a different speed than the camera for each axis set.
2434
A value of 1 makes the parallax node scroll at the same speed as the camera. If you want your image to look further away
2535
when scrolling, use a value lower than 1, with 0 bringing it to a complete stop. If you want something to appear closer
2636
to the camera, use a value higher than 1, making it scroll faster.
2737

28-
.. image:: img/2d_parallax_size_viewport.webp
29-
3038
The scene above is comprised of five layers. Some good :ref:`scroll_scale <class_parallax2d_property_scroll_scale>`
3139
values might be:
3240

@@ -119,6 +127,8 @@ Below, you can see that repeating the image twice makes it large enough to cover
119127

120128
.. image:: img/2d_parallax_size_repeat.webp
121129

130+
.. _doc_2d_parallax_positioning:
131+
122132
Poor positioning
123133
~~~~~~~~~~~~~~~~
124134

45.1 KB
Loading

0 commit comments

Comments
 (0)