Indie Devs: Best Practices: Page 2 - Godot Community Forums

Indie Devs: Best Practices

TwistedTwigleg

(Moved to the tutorials category)

Nerdzmasterz

Hello again! Let's pick on the locks next.

What? No, I'm not breaking into anything. Let's just make these things work! :p

So, what does the lock node need to do?

The locks need to:

block the player

need to be removed if the player has a key

need to remove a key from the player upon detecting one

So first off, if the the lock needs to block the player, and it doesn't move, so what sort of node do we need?

A StaticBody2D, of course.

So let's add a new scene, and set the root as a StaticBody2D, and add the Sprite and the collision shape.

Okay, now we name the node Lock.

So, the StaticBody2D will block the player, so check that off the list.

What else do we need?

must be removed if the player has a key...

How does the player have a key?

Well, what do we know about the keys in the player's inventory?

Don't need to be seen

Owned only by the player

Only serve as an amount in the game.

This sounds like a number variable that should go in the Player script.

Perhaps this is about the most brilliant comment I made, I know, but this way of thinking can help you decide on how to handle different aspects of your games.

So, we save the Lock scene, go back inside the player script, and add var keys = 0.

Now, we can replace the print function with:

Save and run.

It didn't do anything.

Actually, if you still had the print function, you would see this in the Output:

Now we just have to delete the key from the game.

We do this with queue_free(). Add queue_free belowkeys += 1.

Wait, the player left and the camera moved?

What happened is, instead of calling the key to disappear, you told the player to disappear.

But how to get tell the key to disappear?

Note that the function we are using has a parameter. What happens when we tell the code to queue_free the area?

The key disappears!

Okay, so now how do we tell the door to go away when the player touches it? It's in the same situation as the key, in that there will be many of them.

Before I give you the challenge, there is something about if statements that you need to know.

if statements do not always check if two things have the same value. What if you want to check if you have more of something in one value over the other?

This is done by swapping == with >.

To check if something is less than, we use <.

To check if something is not equal to something else, we can use !=.

One of these symbols will be needed to check if you have any keys.

So my challenge for you is to add Lock to a group called "lock". After that, identify which symbol you need in the if statement.

Oh, and you have to figure out what signal you will need.

I will give you one hint- the code all goes into the player script.

Now for a reality check:

I understand that it is not "best practice" to put everything in one code. In real life, you actually have a script only do one specific thing, like player movement is on one, player animation is on another, and so on. However, this is only your second tutorial, so don't worry about it for now. Over time, we will make many scripts and set them up properly. :)

Nerdzmasterz

Now, just a quick overview of the last section, in case any of you were confused. The assignment was a lot. In real programming, you will occasionally have to deal with trying to figure out what feels like a million things at once.

How do you break it all down?

Well, we've already have dealt with StaticBody2Ds. Now what do we know from experience?

Other physics bodies react to it.

It is not an area.

This means that the signal to use on colliding with it would be body something.

Now what sort of body is it?

So far, we have either body_entered(body) or body_shape_entered(body_rid)

Okay, so which do we use?

First off, what is body_shape_entered, and what is RID...?

Ewww... This signal has a lot of parameters, some of which we have never even used before. Do we even need all these?

Let's try body_entered(body) first.

In the Area2D inside the player, connect the signal body_entered(body) to the player.

Now, we did put the Lock in group "lock", right? How did we do this with the keys, again?

Now this is a nice, we can almost copy/paste from this function- we just have to switch area to body, and change the group name!

Okay... Now, which symbol do we need?

if we have a key... do something.

so, try...

That is my challenge for you this time.

Eh, actually, that's kinda boring, right...?

Let's do something fun after trying to figure out all that by ourselves.

I'll tell you what... the games you have look great, but they're a little bland, right?

So, Another thing you can do is find a nice floor image, maybe some decorations for the game to suit the style you have, and let your imagination run wild!

Nerdzmasterz

Alright as we have all our images, there is something you should be aware of about them. Each one of them has a special license. If you want to actually use those assets for a real product, you will have to abide by these license, just as you have to abide by the license for using Godot: https://godotengine.org/license

So, the challenge for you in this very short section, you need to locate the license for all of those images you have grabbed.

This is probably the most boring part of the whole project, so at least it's over. :)

Nerdzmasterz

Hello, world-wide-web, how is everyone?

Another thing I wanted to talk about is, what do you do it you want to animate a character? Say your character is several different images. How do we deal with that?

The easiest way is to use an animated sprite.

...

How do we animate sprites?

I'm glad you asked.

If you open up a sprite node, you will see a tab in the inspector titled "Animation". Let's see what that is.

HFrames? VFrames? What is a Frame, even?

Just for the fun of it, increase the HFrames property. What happens?

Mine got chopped in half? What is it doing?

Simply put, it is dividing the sprite based on the amount of frames each sprite has. HFrames divides it vertically, and VFrames divides it horizontally.

Why wouldn't VFrames divide vertically, and HFrames divide horizontally?

I don't know, I didn't design Godot. I just write tutorials about it. :)

However, what if we want to show a different frame? Well, let's mess with the Frames property.

Okay, so the frames will select the next frame in the sprite, based on the amount of HFrames andVFrames.

But what if your animations are a number of images, not just one image with animations?

We could simply change the texture over time, but who wants to do that?

Lets type in our browser, "Godot animated sprite".

The first thing that pops up is something called Animated Sprite in the docs. What does that say?

Great! There's a node for that!

So, let's add a new scene, and search for an animated sprite...

Now hold up. An animated sprite only plays animations. It cannot detect collision or cause collision. It is useful for decorations that you are okay with trampling over, but that's as far as it goes.

Because of this, it might be a better idea to use a body or an area.

Remember when I said I would use the lock sprite for my door? The reason is because, as you saw it, it is a group of images.

Because of this, I will use my door node for this section. If you have another item that animates, you can use that.

I will remove the sprite and add an animated sprite in its place.

Great! Now, how do we animate with it?

What does the inspector show?

The first thing that pops up is Frames. Click on the box next to that, what is that?

A thing that says New SpriteFrames? we've seen frames in a sprite before. Let's click on that as it sounds promising.

Nothing happened.

Click on the new SpriteFrames.

Now, what in the world is all this?

Well, this panel is where you add your images for your animations. Lets say you have an idle animation. In this panel, you can drag and drop the images for the idle animations right into this panel.

We can drag and drop as many images as we want into this panel, and even reuse the same ones as many times as we need for a smooth animation.

Now, what if I need a new animation?

Inside this new panel, there is a section called Animations, and has a little scroll with a plus arrow, and a trash bin. By the looks of it, the plus scroll adds an animation, and the trash bin removes a selected animation.

So, let's add the plus button and name the new animation. Now, we can add images to the new animations.

So, what if my images are on one image?

Well, first off, what other properties do we have in this panel?

Hover over each one with the mouse to see what it does.

One of these properties, when hovered over, says "Add Frames from a Sprite Sheet.

What is a Sprite Sheet?

A quick online search will show you images with multiple animations in them.

This property is what we need.Select it, and then select the sprite sheet that needs animated.

Now, we notice that the images are all divided in a weird way. How do we fix that?

At the top left, we see Horizontal and Vertical... and it has numbers, sort of like HFrames and VFrames.

So, let's use Horizontal and Vertical to divide it so that the images are divided correctly.

Now what?

Now select the frames that you need for your specific animation. I need all of mine, so I will use the button at the top-right that says Select/Clear All Frames. Then click on the button that says it will add the amount of your selected frames.

Great! We see the images, but... the animation isn't playing.

Let's click on the AnimatedSprite again, and check out the properties again.

One of the properties is called Playing... click on that, what does that do?

Now the animations are playing! However, the speed is a bit off, and the animations keep playing. For some animations constantly playing, that's fine, but I don't want my door to keep opening and closing.

Let's work on fixing that first.

What other properties does this panel have...

Loop. What happens if I turn that off?

Hey, the animation now only plays once!

However, now what about the speed-wait. Right above Loop, there is a thing called speed. That must change the speed of the animation.

So, now my challenge for you is to set your animations up the way you want them to play. I will see you in the next one.

Nerdzmasterz

Our game is looking great, but, what if we want something to happen when the animation is finished playing? Ie, I want my door to open before I go to the next scene. How do we do that?

How do we tell the code to do something when something takes place?

Signals!

Do animated sprites have signals?

Yes, they do:

For my version of this game, I need the signal animation_finished, so I will connect it to my door.

However, how do we tell the code to play an animation?

When you want the animation to play, you first have to call the animated sprite through code, like this:

Wait a minute, aren't you supposed to cast Animated sprite as a variable, and have it called in ready()?

Technically, yes, but I am only calling mine once in the code.

After that... play?

At the end of the animated sprite, type play():

Now, play is asking for a string variable. This string is the name of the animation that needs to be playing, I suppose, so, in quotation marks, type in the name of your animation.

That's my challenge for you this time- make an animation play.

Nerdzmasterz

Hello, beginner indie devs! How are you? Can I get a high-five?

No?

Okay.

So, we have a game that has amazing graphics and animations, right? It looks fantastic! However, if you haven't noticed, our game is still a bit... quiet?

Let's change that

Going back to this site, it also has a lot of different kinds of audio samples which you can download. Check the licenses before download, however, as this is very important- and not just for the sake of learning.

https://opengameart.org/

We are not going to just build a game to learn how to program. When we are done here, we are going to export the game on Itch.io, and I will do this for my game and show you how to do this as well.

Who doesn't love a little fame as a programmer? =)

What is nice about this site in particular is that you can actually go to the left side of the site, and select which licenses you want your assets to have. If you want straight-up CC0, which, IMO, has the least restrictions, you can deselect every other license in that list.

So, I started with just the ambience sound for my game, which is under the CC0 license. Now, this will be the simplest audio for the game, the background sound, so how do we play music?

There's a node for that! =)

It's the AudioStreamPlayer, so let's open up a new scene, and search for it. Now, this is a 2D game, so we want AudioStreamPlayer2D.

In the inspector panel the first thing we see for this is Stream. Let's put our audio into the Stream box. And, we can listen to it by selecting the paying toggle. However, what we want is the Autoplay toggle. Why? Because playing plays it in the editor, not the game. Autoplay, however, plays it in-game automatically.

Now one last thing for this short audio tutorial.

Let's say the audio is supposed to loop, but it is only playing once. What do you do?

If you run into this trouble, select the audio you want to stream, and at the top-left corner there is a tab called Import.

In this tab, you will see some properties. To loop a sound, you must check that, when it was imported, loop was toggled on. If it was not, you simply toggle it on and click on Reimport.

Now, how do we make sound effects that are not ambience, like a sound for opening a door, or grabbing a key?

That's in the next one.

For now, my challenge for you is to find any type of audio- and make sure you check the licenses- and add it to an AudioPlayer2D. Also, if it must loop, then make sure that it does so. I will see you in the next one, and if there is anything in particular you want to see in this tutorial, feel free to PM me, and I will work on implementing it. :)

Nerdzmasterz

Hello, again, Indie devs!

Hello, so sorry about the quick bug fix problem in the previous version of this page! I hate bugs. I just want to squish all of them! :p

So, how do we pay different scenes at once? Do we use a node for each scene?

That might work, but... what if you had a sound for losing, one for winning, one for each player pickup, another for shooting lasers, another for explosions, and one for each enemy- and one for each boss, one for each weapon, and the...?

Not the best idea.

What can we do?

Well, we already have two audio stream players... one for the ambience/music, another for the sound effects... Can we use the sound effects ones for multiple sounds?

Yes, we can! We have to set the stream to the audio stream player, and then have it play the sound. How can we do that?

Well, first off, we have to set the stream to a sound. What does that mean? Obviously you set the sound for the player, but how?

You use the codeset_stream()

This set_stream takes a parameter, but what do we use to access the audio?

It's path. However, there is a step before you simply plug it in.

This step is to use load(), and then put the path in the load parentheses.

It might be easier to see it in code... but where do we go from here?

Well, what triggers these sounds? The player. We could attach a signal to the player, but... the player is the only one that is going to even use the sound, so why not add the audio stream player as its child, like this?

Now, as it is a child of the player, we can use get_node("AudioStreamPlayer2D") to grab it. After that, what?

add set_stream() to the end of it. next line, get_node(player's_name).play(), like so:

Now, let's talk a little bit about something I have already mentioned once before: not adding everything in one code.

In this example, here, we can see that the player code is getting very big, very fast. This is why it is not the best practice to pile everything in one code. While this is a tutorial intended to show you the proper way of doing things, I also need it to show you the issues you can easily come across and even create for yourself. Suppose you leave this for a year, and come back. You gave two audio stream players, which one is this pointing to? Also, if you write a document in your player and hand this to someone else, they will be less inclined to even look at it.

Now, my challenge for you is to finish the audio in your game. If you have anything you want to see in the game which isn't here already, pm me and I will try to implement it in. I will see you in the next one.

Nerdzmasterz

So earlier, I talked about why you should have one script do one thing. So, does this mean we need to animate the player with the animated sprite?

Yes, of course! That would be an easy start in the right direction.

So, what might our animations for this maze game be?

Idle Walk.

Simple enough. Now, how do we animate something when the player moves? Signals?

Not exactly, there is an easier way to do this. =)

If you look back at the player, under get_input(), it shows what inputs cause the player to move. We can use those exact same inputs for our code in the animation player.

Let's add a script to the Animated Sprite, and copy/paste get_input. We also need to use func _process(delta) for this.

Now, we can remove everything about velocity, and move_and_slide, the animated sprite is not detecting collision. What do we need the code?

play("whatever_animation), like this:

Now... what about if we want it to stop?

Let's look back at the player's get_input(). What else does it have on it?

velocity = Vector2()...

What is that?

If you remember from our test, it kept the player from constantly moving. How?

Vector2() means Vector2(0, 0). If we are not pressing any buttons, velocity will always be 0, 0. This is why the character stops.

So, can we use it? I mean, the Animated sprite is the child, not the parent...

Normally, you would use a signal to get to a parent, but there is another way. Since I want to show you whatever I can, the other method is to write get_node(), and with the Player selected, drag it into those parentheses and see what you get.

Ignore the error for now. This is the child calling its parent directly through ode. Yes, they often use signals for this instead, but this was to show you that you can do it.

Now, how to check the velocity?

Every node grabbed in code can have all of their variables, functions, and whatever else used. You could add .velocity == Vector2(0, 0) right in.

Now we need to finish the if statement with play("idle_animation_name").

And you're done!

However, there is an even easier way to do this! :o

Here's my challenge for you in this round: You have all of the information on how to do this in this post. What can you do to basically turn all of this into two simple if statements?

I will see you in the next one.

Nerdzmasterz

Hello, world!

...

I wasn't saying it because it was some intro video.

So, anyways, one thing that I wanted to share with you this time was lighting. I mean, the games look great, don't they? With all the sound and graphics?

However, it's a maze, and the player right now can see through walls and such- it's just a bit weird.

So let's change that.

For this, you will need some light masks. I made some a while back for one game and put them under the CC0 license, so here you go, use them however you want.

https://godotforums.org/discussion/29891/light-masks#latest

Now, what are light masks? Well, let's go into the player and add a Light2D node. In the inspector, you will see something called texture. That is where you put your light mask.

Now, I am only going to use the round one, but you can use either or both.

Now if you save and press play, you will notice things are not lit in your game! However, the walls shouldn't glow. Can we keep certain things from lighting up?

Yes, using the LightOccluder2D.

(And yes, I know I haven't done much to my game yet, I've been busy explaining things to you guys. :) )

So, what we need to do is go into whatever nodes you don't want to light up, in my case, the walls. Now, we only have to do this to the main Wall node, the rest of the copies will gain this ability automatically. So let's add a LightOcclude2D.

Nothing happened.

Of course not, we didn't tell it how it is shaped yet.

In the inspector panel, go to the empty box next to Occluder and click on new OccluderPolygon2D, and then select it.

Next, make sure that you are using this cursor-shaped tool before proceeding, otherwise it will not work:

Now, click on the edge of the sprite of the object you want occluded, and carefully work your way around the shape. You might want to use the snapping tools, which are at the top of the editor.

After that's done, save all and hit the play button!

Wait, you say you everything is still bright?

In the Light2D of the player, there is a tab called Shadows. Click on that, and toggle shadows on.

There, that looks better!

So now, my challenge for you is to add lights to your game. Note that the light2D has a color property- you can change the color of your light! Have fun, and I will see you in the next one.

Nerdzmasterz

Hello, everyone. I don't know about you, but... isn't the maze still sort of bright, even with the occlusion?

So very quickly, I am going to tell you about a node that you can use to change that, and that is the CanvasModulate. So, let's go into, say, your first maze, and add one in.

And, the most obvious thing you will see in the inspector is called Color, and it is currently white.

It's not really a challenge, but I would like you to just play with it and have a feel for how it changes your game. :)

Nerdzmasterz

Alright. At this point... I'm not going to give you something new to learn, at least in this post- and there will be more learning ones to come.

Right now, I just want you to step back, and look at everything we have already gone over...

For a little maze game.

This is why I said that I wouldn't show you how to make some huge game. This was a lot of effort that you have put into the game we are making already- and a big game will be worse.

With all that being said, we are still not done.

The good news? All that's left is a few finishing touches, and you will finally be able to release your game into the wild.

Give yourselves a pat on the back. You're doing amazing if you were able to come this far! =)

Nerdzmasterz

Just a little break from me for a while.

https://youtu.be/1XlcpXURJEI

Nerdzmasterz

Hello, again, indies!

Really quick, I wanted to talk about how to rotate the player. Maybe you don't have a character that needs this, but mine does unless I want him to look this way while he's going left or right:

I don't want that. How can we fix this issue?

Let's look at the player's animated sprite, as that's what is in charge of player animation.

FlipH and FlipV? What does that do? Let's try one.

Okay, all that really did was flip his hair the other way. What else do we have?

We have the values under Transform... and in that list, we have Position, Rotation Degrees, and Scale...

Rotation Degrees? What's that?

Let's move its slider and find out.

Nice!

Now, can we use the rotation degrees in code?

If you actually barely type rotation_degrees in the code, you will see it pop up.

Go ahead, and play with it!

Now, this works fine if we use, say 0, 90, 180, and -90 when we go left, right, up, and down... How do we set the character to look sideways for diagonals?

Let's look back at the code.

Input.is_action_pressed allows them to move in any of the four main directions... Is there a way to use that knowledge to make the player look at an angle while moving in a diagonal?

That's my challenge for you this time. I will see you in the next one.

Nerdzmasterz

As I was working on my game, I couldn't help but notice the gray background. I mean, it looks as "Blah" as my old project name. :p

How do we fix this?

If you go to Project -> Project Settings, there is a tab called Rendering. Almost at the very bottom of that, there is a button titled Environment. The first thing that pops up is Default Clear Color.

I have changed the color to black:

Finally, you can now get rid of that boring, gray color! =)

Nerdzmasterz

I know I said that my last few videos are going to finish up this game, but very quickly, there is something else I should show you.

I just saw a question on the forums, asking how to change the text in the editor. How do you change the editor, and customize it? In case you haven't noticed, mine is not blue and white.

So, how do you do that?

Under Editor -> Editor Settings, there is a tab called Interface. Under that, there is a tab called Theme. If you click on that, you will see Settings for Base Color, and Accent Color. You can change those around to suit your needs/wants.

Now, for the crazy part.

If you want to change the text, go farther down. There is a Text Editor button. If you click on Highlighting, you will find a massive selection of different things you can change.

So go ahead, and customize your game engine to your heart's content.

Nerdzmasterz

Remember when I said order of operation matters? Here is another example of that.

In case somebody hasn't figured out how to shorten the script on the animated sprite, it's surprisingly easy.

in func _process(delta): in the player, we have this code:

So what?

So, what the code is doing when you use one of those inputs, it changes the value of velocity.

For this, you might want to add comments to remind you which direction you need to go in the script.. You could get lost very easily. :)

Now, we could do something like this for each diagonal:

	if Input.is_action_pressed("ui_down") and Input.is_action_pressed("ui_left"):
		rotation_degrees = -45

However, who wants to write all that out four more times?

Let's look back at the player code again. From this code, we can see that velocity.x is equal to 1 when we go right, and -1 when we go left. Additionally, velocity is set to 1 when going down, and -1 when going up.

This seems a bit backwards, doesn't it? This means that the positive numbers do not go right and up as in a grid in math, but right and down.

However, we can still use that information.

However, you have to be a little careful here. if you check if velocity.x or velocity.y is 1, it will never happen.

Why?

Because you will only get the velocity after it has been normalized().

Instead, let's us a new Vector2() in the player script called dir to represent direction.

Next, to check if we are moving in a direction, we can pass code like this into the animated sprite:

And it works!

This will also work for diagonals!

Now here's my next challenge- set the player to move in a certain direction based on diagonals.

Now, before you get all irritated and say things like, "I don't know what numbers I need to use for my diagonals, and I told you I hate math, and blah, blah, blah--"

Yeah, before all that... :)

I have already done your math homework for you!

The numbers you need are -135, -45, 45, and 135.

I will see you in the next one.

Nerdzmasterz

Okay, now for some real stuff that involves the game.

Now, this part is totally optional, you can skip this entire challenge if you want, but I'm going to go over the Timer node.

Now, as you can see here, I have already set up a very basic UI system, and I actually already attached it to the player, here is how it is set up, it is nothing fancy.

So, basically, a I have it doing right now is displaying "Time Left: 60". However, I need it to subtract 1 from the time left after each real second.

How do we do that?

With Timeout!

Connect the signal from the timer called Timeout to the Control script, and inside the script add this line of code to it.

Now let's press play...

...And the words are huge, and hidden by the CanvasModulate!

Don't worry.

To fix the problem with the big CM, we go into the player and select the Control node. From there, we go into the label, and then the inspector.

Visibility... What does that do?

It doesn't look like it would be helpful. All the colors are set to white, and the visible toggle is enabled.

Huh.

What about... Material?

It has two things on it, what do they mean? What is CanvasItemMaterial vs... Shader?

A shader is something we have to code... Let's see if CanvasItemMaterial spares us of that. Let's create a new Material, and see what it is.

The only thing here that says anything about light is the Light Mode. Let's see...

It has Normal, Unshaded, and Only Light settings.

We have no light, so let's try unshaded.

Okay, so now, I will resize my letters and put them in the top-left corner of the screen, and then see if the timer is doing its thing, after I toggle the Autoplay button on.

Okay, so, if you want your game to be timed, go ahead, and make your own timer, and set it up however you like. I will see you in the next one.

Nerdzmasterz

Hello, indie devs! Who's ready to do some more coding!

I know this is getting long, so I will try to make the last few sections quick. :)

I have re-vamped my game with new graphics and a better player. Additionally, I swapped out the label with a progress bar which will serve as the oxygen level, as the game now has you exploring a space craft that was on a mission which went horribly wrong:

However, how do we make progress bars?

First off, this one was from Itch.io and was free, but use whatever health bar you want. I set it up exactly as I did with the label for the canvas shader so we can see it.

I have also changed the code on the Control node which is in charge of the countdown:

However, if one set this up exactly as I did, like so:

The oxygen sprite, which is the blue one in the middle, is not lining up with the scale- everything is shrinking from the center.

This is because, if you go into the inspector for the sprite, under Offset, we see a toggle called centered. Turn that off. You will have to re-position the sprite, but now it should work just fine.

So, my challenge for you is to add a progress bar- it could be an XP system, a health system, whatever, and play with it to see how you can make it do what you want.

Wait, XP system? Why?

This is because we are also going to implement taps and enemies. The enemies will have a basic AI system using a very simple state machine (a special thanks to @fire7side for this concept). State machines are not that complex, unless you need them to be. However, we have to set up a few more things before that. So, I will see you in the next one.

Nerdzmasterz

Alright, who enjoys adding the exact same music to every single level you make?

... Crickets?

Okay, so how do we fix that?

If you go to Project -> Project Settings, you will notice a tab called Autoload. Click on that, and then click on the little file tab, and select your music. Then click on add. It should look something like this when you're done:

Now you can sefely remove/not add the music/ambience into the levels.

« Previous Page Next Page »