Skip to content

Commit

Permalink
Add Getting Started for Parallax2D
Browse files Browse the repository at this point in the history
  • Loading branch information
markdibarry committed Jan 29, 2025
1 parent 173ff27 commit 737a721
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 4 deletions.
18 changes: 14 additions & 4 deletions tutorials/2d/2d_parallax.rst
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,25 @@ up though, so this page provides in-depth descriptions of some properties and ho
recommended to use over the :ref:`ParallaxLayer<class_parallaxlayer>` and
:ref:`ParallaxBackground<class_parallaxbackground>` nodes.

Scroll scale
------------
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 <doc_2d_parallax_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 <class_sprite2d>`, but you could
just as easily use multiple nodes spaced out to compose the layer.

The backbone of the parallax effect is the :ref:`scroll_scale <class_parallax2d_property_scroll_scale>` property.
It works as a scroll-speed multiplier, allowing layers to move at a different speed than the camera for each axis set.
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
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 <class_parallax2d_property_scroll_scale>`
values might be:

Expand Down Expand Up @@ -119,6 +127,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
~~~~~~~~~~~~~~~~

Expand Down
Binary file modified tutorials/2d/img/2d_parallax_size_viewport.webp
Binary file not shown.

0 comments on commit 737a721

Please sign in to comment.