Today we are going to talk about blood overlay effects in shooting games.
Video tutorial
Text tutorial
As you may have noticed, this visual indicator is a great way to show that the player is in low health or currently taking damage. However, the standard way of using a single image at the top of the screen can cause problems when the screen is resized, as the entire image gets stretched and distorted.
To solve this issue, web developers have been using different images according to the size of the screen for a long time. In this tutorial, we will show you how to implement this technique in Godot.
Firstly, we will use a canvas layer node for the root of the screen to ensure that it stays on top of everything. Then, we will add a texture rect node under it and set its anchor to cover the entire area.
Next, we will add a script to the texture rect node and connect the item_rect_changed signal to it. This will trigger the function when there is a change in the screen size.
Inside this function, we will get the height and width of the screen using the view_port, and calculate the aspect ratio of the screen by dividing the width by the height. If the ratio is between 0.8 to 1.2, we will load our square-sized image into the texture. If the ratio is less than 0.8, it means the screen is in portrait mode, so we load the portrait image. Otherwise, if the ratio is greater than 1.2, we know the screen is in landscape mode, so we load the landscape image.
By using this technique, the image will change perfectly and look good for every screen size. Additionally, we can use an animation player to animate the image. For example, we can change its transparency and set it in a loop, creating a dynamic effect.
In conclusion, this tutorial showed you how to use multiple images to keep the image distortion-free, and how you can use it in your game is all up to you. If you found this tutorial helpful, please leave a like and subscribe to our channel for more Godot-related content.
Comments
Post a Comment