[IMAGE: https://steemit-production-imageproxy-thumbnail.s3.amazonaws.com/DQmQ2KnJBHuH1PibeKCeJfYy3WnUasothREFQUNhPnQuzT1_1680x8400] Tutorial
[IMAGE: 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 [IMAGE: 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 [IMAGE: https://www.youtube.com/watch?v=YCKxgVX6vSE], [IMAGE: https://www.youtube.com/watch?v=WYXVtQYzOxg] and even [IMAGE: 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:
https://www.youtube.com/watch?v=F_bd7o7DBEc
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
> * 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.
All the code from this tutorial will be provided in a GitHub repository. 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: 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: 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:
[IMAGE: https://cdn.utopian.io/posts/669392903d4ffe422ae80c70ee311501b355image.png]
When the Path2D node is selected, several icons appear (top left of the following screenshot):
[IMAGE: https://cdn.utopian.io/posts/e6f8f4ae498a5159dbcd1549705beff5610aimage.png]
These allow us to draw our Path, much like my drawing above! Click the add point icon [IMAGE: https://cdn.utopian.io/posts/77b1a18a9abccae31c7e3b989f1c01be2188image.png]
Now click on the 2D View:
[IMAGE: https://cdn.utopian.io/posts/5833dbe83d7f1b2fa1bdd6c25d209ab9e19cimage.png]
A dot appears! Now try clicking to another area:
[IMAGE: https://cdn.utopian.io/posts/51d110d17686edb46b5ccf46ca3e43737006image.png]
Congratulations, you now have the start of your path! Try adding a few more points:
[IMAGE: https://cdn.utopian.io/posts/64d2ac7e804758a9c6dc6c454ad3284439dcimage.png]
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: https://cdn.utopian.io/posts/c6e1e5c34017bfbddb5e88575cfacb5e023fimage.png]
You may now click any point and move it, to reposition as required:
[IMAGE: https://cdn.utopian.io/posts/a9674e4e1bea2acf6a028bcf3cb4656fe13amove_points.gif]
The next Icon is the Select Control Points [IMAGE: 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: 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: 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:
[IMAGE: https://cdn.utopian.io/posts/74234306027ce40159a5ca896c938f3747a8close_path.gif]
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!
[IMAGE: https://cdn.utopian.io/posts/3667cd7ee9a91dca0ec5cc01566b510e724dimage.png]
By clicking this, when you rerun, you should see the path:
[IMAGE: https://cdn.utopian.io/posts/165fc72b256cbfbd59f3f34fcf8b9a354afaimage.png]
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: 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:
[IMAGE: https://cdn.utopian.io/posts/2f8cc450f960566c87e7020ed2d247f6f2adimage.png]
Try running the Game now:
[IMAGE: https://cdn.utopian.io/posts/aa51b2074700719282bff0fac6201fe4b29cimage.png]
... 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: https://cdn.utopian.io/posts/d540bbffaaf017a6ec68fd9bb8cf1681d7b0image.png]
The first two properties are linked and are associated to the position along the path:
- Offset is the total length of the path in pixels
- 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:
[IMAGE: https://cdn.utopian.io/posts/74cb3e43e553a6dc691ed9c8de079c4ae59cimage.png]
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: https://cdn.utopian.io/posts/a209dabd44d6817b98354988eb871a0c4346image.png]
Next, click the AnimationPlayer node and Create a new animation:
[IMAGE: https://cdn.utopian.io/posts/f992a50506de3f4237e03af9e26e9302af57image.png]
I labelled mine Move:
[IMAGE: https://cdn.utopian.io/posts/d507eb733d2c8cff8262ad3ae14cef433b52image.png]
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: https://cdn.utopian.io/posts/75fd358515ef29319f82c76194ba30b3ef9dimage.png] -
Select the PathFollow2D and look at the Node Inspector:
[IMAGE: https://cdn.utopian.io/posts/d8ec6e3394b58f0a8bdc61b34e7f2817c937image.png]
Note there is a little key to the right of the Unit Offset, click it:
[IMAGE: https://cdn.utopian.io/posts/594a32082407a191226573e8922b02cd102fadd_key_frame.gif]
Then click create and a new keyframe item will appear.
Enable editing of individual key items by selecting this option:
[IMAGE: 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:
[IMAGE: 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!
[IMAGE: https://cdn.utopian.io/posts/8589bb3fd79a3e82de1e9f05ee6c947009aaAdd_end_point.gif]
> 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'
[IMAGE: https://cdn.utopian.io/posts/1afa6b59e3b6e9b618b144011c4131f90767Autorun_and_loop.gif]
Running the Game should now be successful!
[IMAGE: https://cdn.utopian.io/posts/5438ed3d44426f0420d124ebe7ef1c8d573ffollowing_path.gif]
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: 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
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[IMAGE: https://en.wikipedia.org/wiki/Tangent]:
[IMAGE: https://cdn.utopian.io/posts/ae21f5b226e0f2c24faf8621b861f87e6f78Smoothing_of_points.gif]
> 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:
[IMAGE: https://cdn.utopian.io/posts/f4db50a6c99510e57af28b6610d044518214Smooth_Running.gif]
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:
- Increase the timeline and move the keyframe points
OR - Edit the node in the Node Inspector:
[IMAGE: 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: 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.
You should then Import the "Wave formations (part 1)" folder into Godot Engine.
Other Tutorials
Beginners
> * Install Godot Engine 3.0
> * Installing your First Demo
> * Your first Sprite!
> * Move your first Sprite!
> * Create lots of Sprites!
> * Sprite formations!
> * Smooth Movement!
> * Invader Graphics!
> * Player Ship!
> * Bullets
> * Collision Detection!
> * Colour use!
> * GUI for score & lives!
Competent
> * Custom TileMaps
> * Custom TileMap Scrolling
> * Screen Wrapping Sprite
> * Screen Wrap Node
> * Verlet vs RigidBody Physics
> * Verlet Chain!
> * RigidBody Chain!
> * RigidBody Rope!
Expert
> * HTTPS REST Calls (note: only tested on 2.1.4)
Posted on Utopian.io - Rewarding Open Source Contributors
