diff --git a/tutorials/2d/2d_parallax.rst b/tutorials/2d/2d_parallax.rst index 218383409..50d51aded 100644 --- a/tutorials/2d/2d_parallax.rst +++ b/tutorials/2d/2d_parallax.rst @@ -16,6 +16,19 @@ up though, so this page provides in-depth descriptions of some properties and ho recommended to use over the :ref:`ParallaxLayer` and :ref:`ParallaxBackground` nodes. +Getting started +--------------- + +The parallax node supports adding nodes that render things as children, so you can use one or many nodes to make up each +layer. To begin, place each node or nodes you want to have scroll independently as a child of their own parallax node. +Make sure that the top left of the textures used are at the ``(0, 0)`` crossing, like in the image below. See the section +on :ref:`positioning ` for why this is important. + +.. image:: img/2d_parallax_size_viewport.webp + +The scene above uses one prepared texture for the higher clouds in a :ref:`Sprite2D `, but you could +just as easily use multiple nodes spaced out to compose the layer. + Scroll scale ------------ @@ -25,8 +38,6 @@ A value of 1 makes the parallax node scroll at the same speed as the camera. If when scrolling, use a value lower than 1, with 0 bringing it to a complete stop. If you want something to appear closer to the camera, use a value higher than 1, making it scroll faster. -.. image:: img/2d_parallax_size_viewport.webp - The scene above is comprised of five layers. Some good :ref:`scroll_scale ` values might be: @@ -119,6 +130,8 @@ Below, you can see that repeating the image twice makes it large enough to cover .. image:: img/2d_parallax_size_repeat.webp +.. _doc_2d_parallax_positioning: + Poor positioning ~~~~~~~~~~~~~~~~ diff --git a/tutorials/2d/img/2d_parallax_size_viewport.webp b/tutorials/2d/img/2d_parallax_size_viewport.webp index 0ad33a04e..1f2b4d068 100644 Binary files a/tutorials/2d/img/2d_parallax_size_viewport.webp and b/tutorials/2d/img/2d_parallax_size_viewport.webp differ