• Stars
    star
    2
  • Language GDScript
  • License
    MIT License
  • Created over 1 year ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Pixel-sized border radius shader for Godot 4

Border radius for Godot 4

This is a border radius shader and a tool script for Godot 4.

Godot 4 border radius

How to use?

Add a BorderRadius node into your node that you want to add border radius:

Alt text

find BorderRadius and add:

Alt text

and set your borders:

Alt text

Use with textures (TextureRect)

You can enable/disable "Use Texture Size" (use_texture_size) property to use actual texture size instead of rect size with TextureRect.

How to use the shader directly?

If you wanna use the border radius shader directly attach it to your node and set following uniforms:

shader_material.set_shader_parameter("canvas_width", size.x)
shader_material.set_shader_parameter("canvas_height", size.y)

shader_material.set_shader_parameter("radius_top_left", radius_top_left)
shader_material.set_shader_parameter("radius_top_right", radius_top_right)
shader_material.set_shader_parameter("radius_bottom_left", radius_bottom_left)
shader_material.set_shader_parameter("radius_bottom_right", radius_bottom_right)

The shader is here:

/*
 * Pixel-sized Border Radius Shader
 * Copyright (C) 2023 Oğuzhan Eroğlu <[email protected]> (https://oguzhaneroglu.com)
 */

shader_type canvas_item;

uniform float radius_top_left = 10.;
uniform float radius_top_right = 10.;
uniform float radius_bottom_left = 10.;
uniform float radius_bottom_right = 10.;

uniform float canvas_width;
uniform float canvas_height;

void fragment() {
	float limit = min(canvas_width, canvas_height) / 2.;
	float width_top_left = (radius_top_left > limit) ? limit: radius_top_left;
	float width_top_right = (radius_top_right > limit) ? limit: radius_top_right;
	float width_bottom_left = (radius_bottom_left > limit) ? limit: radius_bottom_left;
	float width_bottom_right = (radius_bottom_right > limit) ? limit: radius_bottom_right;
	
	float px = canvas_width * UV.x;
	float py = canvas_height * UV.y;
	
	float h;

	if ((px <= width_top_left) && (py <= width_top_left)) {
		h = sqrt(pow(width_top_left - px, 2) + pow(width_top_left - py, 2));
		COLOR.a = (step(h, width_top_left) > 0.) ? COLOR.a: 0.;
	} else if ((px >= canvas_width - width_top_right) && (py <= width_top_right)) {
		h = sqrt(pow(px - (canvas_width - width_top_right), 2) + pow(width_top_right - py, 2));
		COLOR.a = (step(h, width_top_right) > 0.) ? COLOR.a: 0.;
	} else if ((px <= width_bottom_left) && (py >= (canvas_height - width_bottom_left))) {
		h = sqrt(pow(width_bottom_left - px, 2) + pow(py - (canvas_height - width_bottom_left), 2));
		COLOR.a = (step(h, width_bottom_left) > 0.) ? COLOR.a: 0.;
	} else if ((px >= canvas_width - width_bottom_right) && (py >= (canvas_height - width_bottom_right))) {
		h = sqrt(pow(px - (canvas_width - width_bottom_right), 2) + pow(py - (canvas_height - width_bottom_right), 2));
		COLOR.a = (step(h, width_bottom_right) > 0.) ? COLOR.a: 0.;
	}
}

Troubleshooting

BorderRadius node is a tool script. Sometimes Godot editor may stop letting tool scripts update your nodes; it may happen when you do something like moving your tool script node into another node and move it back. In this case, just close your scene tab and open it again.

License

Copyright (C) 2023, Oğuzhan Eroğlu [email protected] (https://oguzhaneroglu.com/)

This work is licensed under the terms of the MIT license. For a copy, see https://opensource.org/licenses/MIT.

More Repositories

1

gdb-frontend

☕ GDBFrontend is an easy, flexible and extensible gui debugger. Try it on https://debugme.dev
JavaScript
2,813
star
2

cebsocket

Lightweight WebSocket library for C.
C
85
star
3

nodes.js

🌌 nodes.js is a nodes/particles animation useable for backgrounds
JavaScript
27
star
4

gdb-frontend-live

GDBFrontendLive is a server that creates GDBFrontend instances and provides online sharable IDEs for each individiual users. 🛸👽🌌
C
24
star
5

jsonic

⭕ Tricky, super fast and dumb JSON library for C/C++
C
20
star
6

virtual-joystick

Virtual Joystick plugin for Godot Engine
GDScript
13
star
7

GodotCarouselMenu

Horizontal carousel menu for Godot 4
GDScript
13
star
8

vegetables

Multiplayer deathmatch shooter game with cute vegetable characters.
GDScript
13
star
9

MoneroSharp

Monero library for C#
C#
12
star
10

react-kitten

React desktop environment for the web. React-ish and highly customizable. 🐱
TypeScript
9
star
11

jquery.datepicker

⌚ a futuristic datepicker for web
JavaScript
9
star
12

libhash

A fast and efficient non-iterating hashmap library
C
6
star
13

node-Win32Volume

Node.js, set volume level or mute functions for Win32 platform.
C++
4
star
14

json-tcp-socket

JSON messaging over TCP sockets for Node.js
JavaScript
3
star
15

pokerunicorn-server

PokerUnicorn Server
C
3
star
16

BigCat

Big number library for Godot Engine (GDScript)
GDScript
3
star
17

3DAudioVisualization

3D audio visualization thing in Godot Engine
GDScript
3
star
18

python-jsonic

Python bindings for Jsonic JSON reader library.
C
2
star
19

CatPong

Low-level multiplayer pong game with pure TCP protocol and SDL2 graphics for the Cat tutorial on meowingcat.io.
C
2
star
20

snake

Snake is a snake game implementation on HTML5.
JavaScript
2
star
21

meow

Quick screen recorder to GIF
JavaScript
2
star
22

HexBinDecConverter

Hexadecimal, Binary and Decimal number converter plugin for Sublime Text 3
Python
1
star
23

semserv

High-performance async semaphore service useable with long string ipc keys stored in memory.
C
1
star
24

WinDrag

Linux Desktop Environments-Like Alt+Drag Window Mover for Windows
C#
1
star
25

catcrypt

Simple RSA public key encryption library for C/C++.
C
1
star
26

sound-level-protect

Maximum sound level protection for headphones on Win32 platform.
C++
1
star