Skip to main content

Dynamic Blood Overlay Effects in Godot

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.


Thank you for reading, and we will see you in the next one!

Comments

Popular posts from this blog

Complete 2D player movement, Beginner to Pro in Godot

 Have you ever wondered why these games feel so good to play? If your answer is visuals then ,  No the key component is their controls. The character movement feels natural, and they move exactly how you want. A good character movement will always make the player feel that they are in total control of the character.  So, you are wondering how to achieve this?  Well, there are some tricks that professional developers use to make their control better. And today we are goanna see what they are and how you can do it in Godot. VIDEO TUTORIAL COMPLETE CODE: extends KinematicBody2D var velocity : Vector2 export var max_speed : int = 1000 export var gravity : float = 55 export var jump_force : int = 1600 export var acceleration : int = 50 export var jump_buffer_time : int = 15 export var cayote_time : int = 15 var jump_buffer_counter : int = 0 var cayote_counter : int = 0 func _physics_process(_delta): if is_on_floor(): cayote_counter = cayote_time if not is_on_floor(): if cayot

Background Loading in Godot | DICODE

Video Tutorial       

Improve your jumping! | Type of jumps in Godot

Wall jump, Wall climbing, Wall sliding and double jump are some of the most common mechanics for a plat-former game. And on top of that they are super easy to create in Godot. So in this Godot tutorial, I have tried to implement all these things in the simplest way possible. I would highly recommend you to watch the 2-D movement video first, because I am adding wall jumps and other stuff in that same script. So, watch it at 1.5x speed! to get an overview. VIDEO TUTORIAL TEXT TUTORIAL Double Jump For this, create a variable jump_counter. This will keep track of how many jumps we have done, while we're in the air. So by default it will be 0. var jump_counter : int = 0 <------- var jump_buffer_counter : int = 0 var cayote_counter : int = 0 Now if you remember, in the previous video, when we are pressing the jump button. We are setting the jump_buffer_counter. So, when we are not on the ground, we will check if buffer_counter > 0 This will be true, only when we have pressed th