# ![Godot Engine Logo v3 (Competent).png](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmQ2KnJBHuH1PibeKCeJfYy3WnUasothREFQUNhPnQuzT1_1680x8400)   Tutorial

![](https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmeRXYK5hTURHD9TqUuGi4vPsockATFzcKFZdawUYpq24B_1680x8400) ...learn to use Path2D and FollowPath2D for Wave formations (concepts)

# What Will I Learn?
As part of my !['Invaders'](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-gui-for-score-and-lives) tutorial for beginners, I now need to implement WAVE formations; in addition to the 'Pack' that I have already added.

> What do I mean by Wave formations? 

Wave formations are patterns that the Invaders shall enter and navigate across the screen by. As provided in the tutorials, I have shown how to move all the invaders in a single pack from left to right. However, I would like to tap into other old games, such as ![Galaxians](https://www.youtube.com/watch?v=YCKxgVX6vSE), ![Galaga](https://www.youtube.com/watch?v=WYXVtQYzOxg) and even ![Centipede](https://www.youtube.com/watch?v=xGEZ3NNH6cs).

The Invaders should move in a synchronised manner, following set paths and with lots of twists and turns. 

I aim to show you how to build them! Although to achieve this, I've split the tutorial into two parts, due to the size of the topic.

> This provides the CONCEPT part along with the Godot Engine specific Nodes to use, i.e. how to manually add the Path and Followers. 
> The next Tutorial will explain how to programmatically create them with complete control by code! This will allow random paths to be created and for entries and exits to be implemented.

As a preview, the following is a tech prototype of the result i'm aiming for:
<center>
https://www.youtube.com/watch?v=F_bd7o7DBEc
</center>
This looks quite busy, but if you watch it closely, there are several groups of Invaders moving in set paths.

It is important I achieve this, because I anticipate adding 'Unlimited' wave levels to the game; where they are procedurally generated. I.E. Each level will progressively get harder, will be random per level, but each level will replay exactly, each time!

### Assumptions
> * You have installed [Godot Engine v3.0](https://steemit.com/gamedev/@sp33dy/installing-godot-engine-v3-0-windows)
> * You are familiar with GDScipt

### You will

* Paths and following them
* Manually adding paths
* Adding followers
* Smoothing paths
* Configuring speed and rotation

# Requirements
You must have installed [Godot Engine v3.0](https://steemit.com/gamedev/@sp33dy/installing-godot-engine-v3-0-windows).

All the code from this tutorial will be provided in a [GitHub repository](https://github.com/sp33dy/Godot-v3-Tutorials-Competent). I'll explain more about this, towards the end of the tutorial.

----

# Paths are constructed for feet to tread
Wouldn't it be great if we could build Godot Engine games and ask it to simply move our sprites and objects along a hand-drawn path:

![image.png](https://cdn.utopian.io/posts/6382195c4113a2add5cd98e505ac39fd527bimage.png)

Well, you can, and I'm going to show you how this simple concept works brilliantly in certain types of games!

Godot Engine provides several special _Nodes_ to do this:

![image.png](https://cdn.utopian.io/posts/42978ae15da817e0d8d231271b50e90da5a8image.png)

This is how I remember the _Nodes_ that enable path following to be formed:

* A _Path2D_ node contains the Path for a child _Follower_ to navigate
* A _PathFollower2D_ node is simply that; it follows the points of the path
* The _Path2D_ is assigned (set) a list of points, contained in a Curve2D instance

Let's try it!

# Manually adding a Path2D
Open a new Godot Engine project and create a _Game_ scene.

> In my sample project (see GitHub section below), I've:
>
> * Set the background to Black
> * Set the screen size to 1920 x 1080
> * Set the 2D scaling to "keep"

Add a _Path2D_ Node to the _Game_ root node:

<center>
![image.png](https://cdn.utopian.io/posts/669392903d4ffe422ae80c70ee311501b355image.png)
</center>

When the _Path2D_ node is selected, several icons appear (top left of the following screenshot):

<center>
![image.png](https://cdn.utopian.io/posts/e6f8f4ae498a5159dbcd1549705beff5610aimage.png)
</center>

These allow us to draw our Path, much like my drawing above! Click the add point icon ![image.png](https://cdn.utopian.io/posts/77b1a18a9abccae31c7e3b989f1c01be2188image.png)

Now click on the 2D View:

<center>
![image.png](https://cdn.utopian.io/posts/5833dbe83d7f1b2fa1bdd6c25d209ab9e19cimage.png)
</center>

A dot appears! Now try clicking to another area:

<center>
![image.png](https://cdn.utopian.io/posts/51d110d17686edb46b5ccf46ca3e43737006image.png)
</center>

Congratulations, you now have the start of your path! Try adding a few more points:

<center>
![image.png](https://cdn.utopian.io/posts/64d2ac7e804758a9c6dc6c454ad3284439dcimage.png)
</center>

We can construct a long or short path, as required and we can eventually add a follower to it. 

Now click the select points Icon ![image.png](https://cdn.utopian.io/posts/c6e1e5c34017bfbddb5e88575cfacb5e023fimage.png)

You may now click any point and move it, to reposition as required:

<center>
![move points.gif](https://cdn.utopian.io/posts/a9674e4e1bea2acf6a028bcf3cb4656fe13amove_points.gif)
</center>

The next Icon is the Select Control Points ![image.png](https://cdn.utopian.io/posts/ef0bbdf01ef0142f1fb806e5dd8231ebd0e3image.png)

> __PLEASE IGNORE THIS for now (see the "Smooth Paths" section below, as this gets confusing, quickly!)__

The next Icon speaks for itself as the delete option ![image.png](https://cdn.utopian.io/posts/6da4bd77e55947bec9c915629c8036bcbb5aimage.png)

Simply click points and they will be deleted, points either side will be connected. Use _Undo_ or _CTRL+Z_ to walk any accidental edits backwards.

The final Icon is a very important and quite easily missed function ![image.png](https://cdn.utopian.io/posts/3ac99847f05c7a419e0d4aa8ae9df9623930image.png)

No matter how hard you try, you cannot add points and complete a 'closed path', you _MUST_ click this to close it:

<center>
![close path.gif](https://cdn.utopian.io/posts/74234306027ce40159a5ca896c938f3747a8close_path.gif)
</center>

Clicking it again DOES NOT unclose it, which I find strange. Instead, you'll have to UNDO!

Try running the Game!

... There should be no surprises, you should face an empty screen! Why??? Well, we've not added a follower.

However, before we do, there is a REALLY useful DEBUG option that you should be aware of. In the editor, you are shown the path and you can set a configuration option to show it when the game is executing!

<center>
![image.png](https://cdn.utopian.io/posts/3667cd7ee9a91dca0ec5cc01566b510e724dimage.png)
</center>

By clicking this, when you rerun, you should see the path:

<center>
![image.png](https://cdn.utopian.io/posts/165fc72b256cbfbd59f3f34fcf8b9a354afaimage.png)
</center>

This is an extremely useful feature to know about!

# Create our actor to follow the path
There is a _PathFollow2D_ node, which is designed to be a child of the _Path2D_. Please add ![image.png](https://cdn.utopian.io/posts/dd87fbe42cb1ef3a6fe329dbc055ffc6b70bimage.png)

If you look at the 2D view, you'll note that a little box appears, but if you run it, nothing but the path is shown.

The follower requires further children, i.e. the content that is going to be shown on the screen, therefore add a Sprite and set the texture as the Godot Engine icon:

<center>
![image.png](https://cdn.utopian.io/posts/2f8cc450f960566c87e7020ed2d247f6f2adimage.png)
</center>

Try running the Game now:

<center>
![image.png](https://cdn.utopian.io/posts/aa51b2074700719282bff0fac6201fe4b29cimage.png)
</center>

... Yay, the Sprite is shown, but it is stationary! We need to instruct the Sprite to move along the Path. 

Click the _Path2D_ node and look at the Node Inspector:
![image.png](https://cdn.utopian.io/posts/d540bbffaaf017a6ec68fd9bb8cf1681d7b0image.png)

The first two properties are linked and are associated to the position along the path:

1. _Offset_ is the total length of the path in pixels
2. _Unit Offset_ is a fractional value between zero (start of the path) to one (end of the path)

If you change either value, the _Follower_ hence _Sprite_ will move. If you change _Offset_ you get very strange results, as there is actually NO REAL way of determining the length until you set the _Unit Offset_ to one:

<center>
![image.png](https://cdn.utopian.io/posts/74cb3e43e553a6dc691ed9c8de079c4ae59cimage.png)
</center>

As can be seen in the above screenshot, my path is a little over 2824 pixels! However, in my opinion, there are few uses for this option; i.e. it can be used to help calculate speeds and velocities etc. However, using the second property is preferable!

Try setting the _Unit Offset_ property to 0.1, 0.2, 0.3 and so forth and watch how the Sprite moves along the path.

We want to automate the movement, therefore we are going to use the 'Animation Player' to trigger the movement for us! 

> Reminder: ensure you set the _Offsets_ back to zero so that the Follower is at the beginning

Add the _AnimationPlayer_ node to the same level as the Sprite:
![image.png](https://cdn.utopian.io/posts/a209dabd44d6817b98354988eb871a0c4346image.png)

Next, click the _AnimationPlayer_ node and Create a new animation:
<center>
![image.png](https://cdn.utopian.io/posts/f992a50506de3f4237e03af9e26e9302af57image.png)
</center>

I labelled mine _Move_:
<center>
![image.png](https://cdn.utopian.io/posts/d507eb733d2c8cff8262ad3ae14cef433b52image.png)
</center>

Without going into the _AnimationPlayer_ in depth (I will do in the future if there is demand; do ask!) we need to:

 * Set the time length in seconds to 5:
![image.png](https://cdn.utopian.io/posts/75fd358515ef29319f82c76194ba30b3ef9dimage.png)

* Select the _PathFollow2D_ and look at the Node Inspector:
![image.png](https://cdn.utopian.io/posts/d8ec6e3394b58f0a8bdc61b34e7f2817c937image.png)

Note there is a little key to the right of the _Unit Offset_, click it:
<center>
![add key frame.gif](https://cdn.utopian.io/posts/594a32082407a191226573e8922b02cd102fadd_key_frame.gif)
</center>

Then click create and a new keyframe item will appear. 

Enable editing of individual key items by selecting this option:
![image.png](https://cdn.utopian.io/posts/7aa8344870bc35b3157f60befe5341791505image.png)

If you hover over the first point at 0 seconds, its settings are shown as a pop-up:
![Edit keyframe items.gif](https://cdn.utopian.io/posts/0caf1abfd59dee01ca53d8c593306a0e1741Edit_key_frame_items.gif)

If you click the point, its settings are configurable in the window on the right. You may manually set the values here or you can drag the point left or right to change the time to start.

Remember to put this back to 0 seconds and set _Unit Offset_ value to start with 0 (remember its range is zero to one).

What we now need to do is add the end point at 5 seconds! 
<center>
![Add end point.gif](https://cdn.utopian.io/posts/8589bb3fd79a3e82de1e9f05ee6c947009aaAdd_end_point.gif)
</center>

> You may need to watch the above animation several times

* Scroll to the right
* At the 5 seconds point, click in the header and a line will be shown
* Scroll back to the left
* Click the first point and select Duplicate
* Scroll to the right and then click on the timeline for the _Unit Offset_ and the point should be added at 5 seconds
* Check the editor on the right that 5 seconds is correct, or manually change it
* Finally, change the _Unit Offset_ value to 1

Effectively, what you have configured is for the _AnimationPlayer_ to change the _Follower_ _Unit Offset_ from zero to one (start to end) over 5 seconds.

However, if you run the Game, the Follower remains still! Why?

... We need to configure the animation player to 'Autostart' and to 'Loop'
<center>
![Autorun and loop.gif](https://cdn.utopian.io/posts/1afa6b59e3b6e9b618b144011c4131f90767Autorun_and_loop.gif)
</center>

Running the Game should now be successful!

<center>
![following path.gif](https://cdn.utopian.io/posts/5438ed3d44426f0420d124ebe7ef1c8d573ffollowing_path.gif)
</center>

All well and good! However, do you notice the Icon rotates as it moves? Try examining the settings in the _PathFollow2D_ node. Also look for a _Speed_ setting in the _AnimationPlayer_.

> Remember, you ONLY need to set the keyframe points for values that need constant changes

> When the _AnimationPlayer_ starts, it will pick-up the values currently set in the _PathFollow2D_ node, unless it is changed in the keyframe; therefore, you can turn 'Rotate' off in the _PathFollow2D_ and it disables for the entire animation

Have a play with the settings! If you don't succeed, see the second section below.

# Smoothing the path
We are going to return to the Control Points of the _Path2D_ node (as mentioned above) ![image.png](https://cdn.utopian.io/posts/9f0f12837ac1d340e48a5366217814480e82image.png)

Control points are like the lines you see in any graphical application that have Bezier curves; [refer to this BRILLIANT article on Bezier curves](http://devmag.org.za/2011/04/05/bzier-curves-a-tutorial/)

As stated in the first section, the _Path2D_ is fed a list of points. These points are 'Curves' (_Curve2D_ to be exact). You've been manually adding straight curves! By enabling the Control point option, you can now use them![to add a curve to the line](https://en.wikipedia.org/wiki/Tangent):

<center>
![Smoothing of points.gif](https://cdn.utopian.io/posts/ae21f5b226e0f2c24faf8621b861f87e6f78Smoothing_of_points.gif)
</center>

> Click the point to 'bend'

> Drag the line to the desired position

It is very simple and anyone who has used a paint program will understand this! 

However, rushing to use this option BEFORE understanding the others 'might' result in confusion and misunderstanding; I certainly was; especially as only ONE control is provided per point, whereas there are usually more in graphics tools.

Rerun the game:

<center>
![Smooth Running.gif](https://cdn.utopian.io/posts/f4db50a6c99510e57af28b6610d044518214Smooth_Running.gif)
</center>

Smooth movement with nice sweeping turns! This is exactly what I need in my 'Invaders' clone.

Congratulations! If you've understood so far, you now understand the base Concepts that we need for the GDScript coding. I.E.

* A _Path2D_ is formed from a list of curve points 
* Path followers are added as children to the path and are then made to walk it

# Configuring the Rotation and Speed
Before I end this tutorial, for those that didn't manage to alter the Rotation and/or Speed, this is how you do so:

To set the speed, we can configure the _AnimationPlayer_ in two ways:

1. Increase the timeline and move the keyframe points
OR
2. Edit the node in the Node Inspector:
![image.png](https://cdn.utopian.io/posts/5604625a480bf7de8dd3a42ef12e8be057efimage.png)

You can change the _Speed_ property, such as to double or half the time for example! I.E. 

* if you set it to 2, it will play twice as fast, therefore 5 seconds / 2 = 2.5 seconds to navigate the Path

* Change it to 0.5 and it will twice as long, therefore the Follower will take 10 seconds to complete the circuit

Disabling the Rotate can be found in the _PathFollow2D_ node-inspector properties:
![image.png](https://cdn.utopian.io/posts/878836ccd9c37089793d0f56085ea3ee4419image.png)

Just toggle the _Rotate_ property on and off.

There are many other settings in these two nodes that are worth you exploring. These are explained by hovering over the properties OR within the official documentation.

Remember, some of the options exist in both nodes, i.e. they BOTH have a _Loop_ property! Therfore understanding when a property is applicable is also important as well as knowing that these features exist. 

They are all accessible via GDScript.

Try removing the Closed Point, what do you think should happen and what do you actually see happen? Again, I will touch on this in the next tutorial.

# Finally
This concludes this tutorial. 

Yes, I know, it didn't include a SINGLE line of code! 

Its purpose is to explain, by example, how Paths and Followers work. 

Without this understanding, the next tutorial will be much harder to understand. 

I plan to write the second article ASAP; watch this space.

Please do comment and ask questions! I'm more than happy to interact with you.

# Sample Project

I hope you've read through this Tutorial, as it will provide you with the hands-on skills that you simply can't learn from downloading the sample set of code. 

However, for those wanting the code, please download from [GitHub](https://github.com/sp33dy/Godot-v3-Tutorials-Competent).

You should then Import the "Wave formations (part 1)" folder into Godot Engine.

# Other Tutorials

#### Beginners

> * [Install Godot Engine 3.0](https://steemit.com/gamedev/@sp33dy/installing-godot-engine-v3-0-windows)
> * [Installing your First Demo](https://steemit.com/gamedev/@sp33dy/first-demo-godot-engine-v3-0)
> * [Your first Sprite!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-your-first-moving-sprite)
> * [Move your first Sprite!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-move-your-sprite)
> * [Create lots of Sprites!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-create-lots-of-sprites)
> * [Sprite formations!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-sprite-formations)
> * [Smooth Movement!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-smooth-movement#comments)
> * [Invader Graphics!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-invader-graphics)
> * [Player Ship!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-player-ship)
> * [Bullets](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-bullets)
> * [Collision Detection!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-collision-dectection)
> * [Colour use!]()
> * [GUI for score & lives!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-gui-for-score-and-lives)

#### Competent

> * [Custom TileMaps](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-custom-tilemap)
> * [Custom TileMap Scrolling](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-custom-tilemap-scrolling)
> * [Screen Wrapping Sprite](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-generic-screen-wrapping-sprite)
> * [Screen Wrap Node](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-generic-screen-wrapping-node)
> * [Verlet vs RigidBody Physics](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-physics-verlet-vs-rigidbody)
> * [Verlet Chain!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-verlet-chain-v0-01)
> * [RigidBody Chain!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-rigidbody-chain)
> * [RigidBody Rope!](https://steemit.com/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-rigidbody-rope)

#### Expert

> * [HTTPS REST Calls (note: only tested on 2.1.4)](https://steemit.com/utopian-io/@sp33dy/https-rest-calls-crypto-price-monitor)

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@sp33dy/tutorial-godot-engine-v3-gdscript-wave-formations-concepts">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>