Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Getting Started for Parallax2D #10565

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions tutorials/2d/2d_parallax.rst
Original file line number Diff line number Diff line change
Expand Up @@ -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<class_parallaxlayer>` and
:ref:`ParallaxBackground<class_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 <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.
markdibarry marked this conversation as resolved.
Show resolved Hide resolved

Scroll scale
------------

Expand All @@ -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 <class_parallax2d_property_scroll_scale>`
values might be:

Expand Down Expand Up @@ -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
~~~~~~~~~~~~~~~~

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