Skip to main content

Posts

Showing posts with the label custom UI

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 thi...

Create a Dynamic Full-Screen Particle System in Godot | Leaf Falling Overlay Tutorial

Visual effects, or VFX, are an essential part of game development if you want to keep players engaged. One of the most impressive visual effects you can create is a full-screen particle system, like the beautiful leaf falling overlay shown in this video. In this tutorial, you will learn how to create your own dynamic full-screen particle system in Godot. This method is flexible and will work on any screen size, so you can create stunning effects for your game no matter what device it's played on. To start, you'll need a leaf image and the Godot engine. Resource:  https://github.com/shashank1q/Godot-leaf_falling Open up Godot and create a new scene. Add a Particle2D node to the scene, and set the image in the texture property. Next, set the amount to 20 and the lifetime to 5 seconds in the time section. Uncheck the local coordinate option in the drawing section, and add a new particles material in the process material section. Now set these values to  particles material. Before...

Sprite sheet Mastery in Godot: Learn to Handle Every Type Like a Pro

W elcome to our comprehensive tutorial on using sprite sheets in Godot game engine. In this video, we'll cover all the different types of sprite sheets you'll find on the internet, including splitted sprites, single sprite sheets, uneven items, and defective sprite sheets.  Whether you're a beginner or an experienced developer, this video will help you become an expert in working with sprite sheets in Godot game engine. So, don't miss out and watch this video till the end to learn how to use sprite sheets like a pro and improve your Godot game development skills. Video Tutorial Text Version of Video Split sprites Let's start with the easy one. The first type of sprite sheet you'll come across is "Splitted sprites".  These sprite sheets come with separate images for each frame, like this walking animation with 6 images.  To use them, all you have to do is add an AnimatedSprite node. Then, in the inspector panel, you'll find a "frame" optio...

How to Make Soft UI buttons In Godot under 5 min | Neumorphism

Complete Video Tutorial:    Text Version: To create a neomorphic design, the color of the button must be the same as the background. Then we add a shadow of slightly darker color in the bottom right direction. And a shadow of slightly lighter color in the top left direction. And when we press the button, we are going to switch the shadow colors. That means the lighter color comes down and the darker one goes up. Now, since we can only set the shadow in one direction. So, add one more button under it, and set its layout to full rect. Now, I will use the button in the behind to show the lighter shadow and Button on the front to show the darker shadow. Now select the first button. And inside it, first set the button color to transparent. Because we are only going to use this button for shadow. Now to make edges smooth, I will set the corner radius to 5 in all directions. Then coming to shadows, first we are going to set the shadows color to white. Now, size determines the blur am...

Comic Style Dialog system in Godot

If you want to use this dialog system in your game then download the dialog_box.tscn file and dialog_box.gd and use it directly in your game. but if you want to create the same scene from scratch then, follow the video tutorial and download these font files which is used in this video. Video Tutorial:     How to use downloaded files First add the dialog_box.tscn and dialog_box.gd in your project. Then attach the dialog_box.tscn scene to the node you want to speak dialogs. In this scene I want my player to speak some dialog so, I have attach the dialog_box scene under it. Then you will find an exported variable "arr". you need to click on it and set its size. The size represent how many dialog your player will speak. for example: I have set size to 2, and then I have set two dialogs in it.  Then set the position of the dialog box according to your game and that's it !. you can just play the game and every thing will work fine.

Custom progress bar in godot

No matter what game you are creating you will need to make a progress bar. Progress bar are not just limited to health bars but can be use in many others ways like in showing data or to make a visual timer bar. Not only some basic progress bar but you can also make some custom progress bar in Godot by combining two different progress bar in one, like in this video i have combined linear progress bar and circular progress bar to create a new kind of progress bar. If you have questions like: How to make progress bar in Godot? How to make health bar in Godot ? What type of progress bar are available in Godot ? How to make custom progress bar in Godot ? all these question is answered in this video Here is the tutorial video - I hope this video will help you in your game.

Create a custom text field for user input in Godot

  Hello there, Your wait is over !! I am again here with another Godot Tutorial- Custom text field in Godot. text fields are required in almost every game whether you want to take players name or to get any kind of text from the user. Text Fields are created with the help of 'Line edit' node in Godot, but by default the text field looks awful so, I have shown you how you can customize easily using some images and some basic code. I have also shown you how to implement text field in to your game. I hope you will learn something new from this video. Here is the video tutorial-