Making a Game - TLC - EP14


Video Tutorial

Aims of this Tutorial

  • Disable the 'End Turn' button until everyone has ended their turn.
  • Add a banner to show that the turn has ended while previewing the turn.
  • Disable the arrows while playing back the plans.

Disable 'End Turn' Button

This is going to require some work the client. We can go into the player script and find the callback for pressing the 'End Turn' button and simply set the disabled property of the button to true. In order to re-enable the button, we are having the server remotely call 'r_end_turn' on our players at the end of the turn. So we can enable it for the the local player by setting the disabled property to false in the if statement.

Add End Turn Banner

First, we need a banner. I made mine in GIMP, but you can use whatever software you like. Firstly, I removed the base layer and created a new one with a transparent background. I then used the text tool to write 'END OF TURN' and used the align tool (under move tool) to move it to the center. I then used the colour select to select the text, grew my selection (under the 'Select' menu option) and used the Fill tool to fill in the borders. Finally, I selected everything on a different, lower layer and selected the gradient tool. I made a gradient in the gradient editor to go from dark blue to transparent dark blue. In the tool options, I gave it a high offset, and picked the rectangle option. I then clicked and dragged from the center to the corner of the box to complete the gradient. Finally, I saved and exported the image as a png into the 'Images' folder into the project directory.

Now, in Godot, I dragged the new banner into the player scene. By enabling 'expand' and changing the type to 'keep aspect (centered)', I could set the anchor to (0,0,1,1) and zeroed out the margins. This makes the banner central and directly on the screen. Now, to make it show up and disappear, we need to animate it. To do that, I added an Animation Player node as a child to the banner. Doing so brings up the animation editor. Create a new animation in there and now we can see all the properties in the inspector have a key icon next to them; this button will create a keyframe at the currect position with the current value. The property we are interested in is 'modulate' on the banner, specifically, the alpha value. We need to take it from 0 to 255, keep it there for a bit and then bring it back down for a total of 4 keyframes. For some reason, I needed to enable play on load to avoid the player being unable to find the animation. Then, after selecting the animation in the player, we can simply call play() on the player in the 'r_end_turn' function.

Disable the Arrows during Playback

This is a very simple modification to the '_physics_process' function. We can simply set the enabled property of the arrow to true when not running the plan and to false when we are running the plan.

This tutorial was a little less interesting than usual, but it is important that we do not end up in technical debt. That is why it is worth just fixing stuff up periodically to make your life easier in the future.