Remove all HTML tags except for img tags and a tags:

<p>In this lesson, we will be covering the concepts of nodes and scenes inside Godot. In a Godot game, everything is made up of nodes, like how everything in the real world is made up of atoms. Everything that has a position in space or any other logic behind it will be part of a node, so they are an important thing to understand for game development inside the Godot Engine.</p>
<h3>What is a Node?</h3>
<p>A node is a fundamental element in Godot. Everything in a Godot project, such as the player, enemies, environments, lights, backgrounds, and camera, is made up of nodes. Nodes can have children nodes, which can have children nodes, and so on. This creates a hierarchy of nodes, which is the basis of a Godot game. In the <em>Scene </em>window, we already have one node which we created previously, our <strong>Node2D</strong> that acts as our scene <em>root</em>. The <em>root node </em>is essentially the utmost node in a scene - it is at the top of the hierarchy, and everything attached to it will build up our scene.</p>
<p><img class="alignnone wp-image-3275641 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-178.png" /></p>
<p>If you <strong>select</strong> the <em>Node2D </em>node, you will see some options appear in the <em>Inspector </em>window. These allow you to modify the values of the node that you have selected, such as its transform. Since our <em>Node2D </em>is a root node it is best to leave the values as their defaults.</p>
<p><img class="alignnone wp-image-3275644 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-179.png" /></p>
<p>Instead of modifying the root node, we can add a new node to the scene by pressing <strong>plus</strong> button at the top left corner of the <em>Scene </em>window.</p>
<p><img class="alignnone wp-image-3275646 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-181.png" /></p>
<p>This will open the <em>Create New Node </em>window, which contains a list of nodes that can be chosen from. The list is divided into 2D and 3D sections, and each type has its own list of nodes. Under the <em>Node2D </em>section, you find the <em>Sprite2D</em> node, which you can double-click to create (or use the <strong>Create </strong>button).</p>
<p><img class="alignnone wp-image-3275647 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-182.png" /></p>
<p>The <em>Sprite2D </em>node is a general-purpose node used for displaying sprites, as per the <em>Description</em>. You will notice the new <em>Sprite2D </em>is added as a child of the root node. Nodes inherit their position, rotation, and scale from their parent node, so if you move the <em>Node2D </em>root node, it will also move the <em>Sprite2D </em>by the same distance. Nodes can effectively have an infinite number of children, and each child can have an infinite number, and so on.</p>
<p>We can rename the sprite by double-clicking, to help with project organization. We will rename ours to <em>Player</em>.</p>
<p><img class="alignnone wp-image-3275649 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-183.png" /></p>
<p>A <em>Sprite2D </em>node is used to render a 2D texture to the screen. To do this we first need to set the <strong>Texture </strong>property of the <em>Player </em>node. By default, it says <em>&lt;empty</em><em>&gt; </em>which means no value has been assigned. You can drag the <strong>Player.png </strong>file (found in the <em>FileSystem</em>) into the property field to set it as the <em>Texture</em>.</p>
<p><img class="alignnone wp-image-3275652 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-184.png" /></p>
<p>This will make our player appear in the <em>Scene Viewport</em>.</p>
<p><img class="alignnone wp-image-3275653 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-185.png" /></p>
<p>In the <strong>Transform </strong>property, found in the <em>Inspector </em>window, you can modify the position, rotation, and scale of the <em>Player </em>sprite. If you change any of the values you will notice they update inside the <em>Viewport </em>window. For example, setting the position to <em>(50, 0) </em>will move it 50 pixels to the right. On the other hand, setting the position to <em>(-150, 0)</em> will move it 150 pixels to the left of the center of the graph.</p>
<h3>What is a Scene?</h3>
<p>We mentioned <em>scenes </em>multiple times above, they are collections of nodes that can be instanced at any time. For example, levels in a game can be their own scene, and the player can be a scene that is instanced in multiple levels. Enemies can also be saved as a scene and spawned in multiple times.</p>
<p>Now that we know how to create nodes, we are going to take a deeper look into the concept of scenes. Currently in our <em>TestScene </em>level is a <em>Player </em>node, but we might also want multiple other objects, such as rocks, trees, or enemies.</p>
<h3>Duplicating Nodes</h3>
<p>We can start by duplicating the <em>Player </em>node we created in the last lesson. To do this, select the node and press <strong>CTRL+D </strong>to duplicate the player. Alternatively, right-click the node and select <strong>Duplicate</strong>. This will create a second version of our player in the scene.</p>
<p><img class="alignnone wp-image-3275682 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-188.png" /></p>
<h3>Changing Node Properties</h3>
<p>With our <em>Player2 </em>duplicate node selected, we can then change its position to differentiate it from the original node. We will change the position to be around <strong>(-100, 0)</strong>.</p>
<p><img class="alignnone wp-image-3275681 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-187.png" /></p>
<p>We can then <strong>duplicate</strong> the node again to create 3 player nodes and change its position to something else, for example <strong>(-100, 100)</strong>. Now we have 3 duplicates of our <em>Player </em>in our test scene, if we select the original <em>Player </em>node, we can change the color by changing the <strong>Modulate </strong>value, underneath the <strong>Visibility </strong>dropdown.</p>
<p><img class="alignnone wp-image-3275684 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-189.png" /></p>
<p>However, if we want to apply this to every version of the player we have to go through and do it individually, which would take a lot of time. Instead, what we will do is turn our player node into a scene.</p>
<h3>Creating a Scene</h3>
<p>To begin with, delete the duplicate nodes, as we will not be using them. Then, select our<em> Player</em> node and <strong>right-click</strong> it, then press <strong>Save Branch as Scene</strong>.</p>
<p><img class="alignnone wp-image-3275686 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-190.png" /></p>
<p>In the pop-up window, name the scene <em>Player.tscn </em>and press <strong>Save</strong>.</p>
<p><img class="alignnone wp-image-3275687 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-191.png" /></p>
<p>You'll now be able to see our <em>Player.tscn </em>scene inside the <em>FileSystem </em>window.</p>
<p><img class="alignnone wp-image-3275688 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-192.png" /></p>
<h3>Using our Scene</h3>
<p>If you now <strong>double-click</strong> the <em>Player.tscn </em>scene, it will open it in a new scene window.</p>
<p><img class="alignnone wp-image-3275691 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-195.png" /></p>
<p>Return to the <strong>TestScene </strong>if you opened the <em>Player </em>window by pressing the <em>TestScene </em>tab.</p>
<p><img class="alignnone wp-image-3275692 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-196.png" /></p>
<p>We can then drag the <em>Player.tscn </em>scene into our <em>TestScene </em>level to create another instance of it.</p>
<p><img class="alignnone wp-image-3275694 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-197.png" /></p>
<p>You can do this as many times as you like, to make as many <em>Player</em> nodes as you want.</p>
<p><img class="alignnone wp-image-3275695 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-198.png" /></p>
<p>Now, if we want to change the color this time, we can do it by editing the <strong>Player Scene</strong>.</p>
<p><img id="thepasted-14" class="alignnone wp-image-3275691 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-195.png" /></p>
<p>With the <em>Player </em>scene open, change the <strong>Modulate </strong>value to a new color.</p>
<p><img class="alignnone wp-image-3275697 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-199.png" /></p>
<p>Then <strong>save </strong>the scene (<strong>CTRL+S</strong>) and return to the <strong>TestScene</strong>.</p>
<p><img id="thepasted-16" class="alignnone wp-image-3275692 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-196.png" /></p>
<p>You will now see that every instance of the <em>Player </em>scene is the color we assigned in the original scene.</p>
<p>We can also add nodes to our scenes, so in the <strong>Player Scene, </strong>right-click the <em>root </em>node and press <strong>Add Child Node</strong>.</p>
<p><img class="alignnone wp-image-3275701 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-200.png" /></p>
<p>We will add another <strong>Sprite2D </strong>node to the scene.</p>
<p><img class="alignnone wp-image-3275702 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-201.png" /></p>
<p>This time, we will set the <strong>Texture </strong>property to be our <strong>Coin.png </strong>texture.</p>
<p><img class="alignnone wp-image-3275703 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-202.png" /></p>
<p>We will the coin above the <em>Player </em>sprite's head by setting the <strong>Position </strong>property to <strong>(0, -50)</strong>.</p>
<p><img class="alignnone wp-image-3275704 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-203.png" /></p>
<p><strong>Save </strong>the scene and return to the <strong>TestScene </strong>and you will see the coin appears above every instance of the player, as expected.</p>
<p><img class="alignnone wp-image-3275705 size-full" src="https://academy.zenva.com/wp-content/uploads/2023/03/Pasted-204.png" /></p>