Border & CornerRadius #8381

togetherwithasteria · 2023-04-14T04:34:37Z

Objective

Merge Add Border and CornerRadius components to bevy_ui #3991 into Bevy main. The old PR was made for 0.6.0 and the author hasn't updated the PR ever since it was blocked.
Fixes Add proper border support for UI nodes #5924, hopefully for once and for all.

Solution

Fix all merge conflicts and migrate the API.

Changelog

Everything in the original PR, plus
Added corner and corner_radius properties to ButtonBundle
Fixed the not working button example
Added a warning to CornerRadius, which will be discussed more down in this text.

Migration Guide

As we added the corner and corner_radius properties to ButtonBundle, this might break the API for people who don't use ..default(), but that seems rare. You can set it to a value you like or use Default::default() as usual.

…sual-features # Conflicts: # crates/bevy_ui/src/render/pipeline.rs

Move some work from fragment shader to vertex shader Add branching to skip complexity when there's no rounding or border Remove softness since we're not using it

# Conflicts: # examples/ui/button.rs # examples/ui/ui.rs

…antume/bevy Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

This reverts commit ba125bf.

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

alice-i-cecile · 2023-04-14T05:13:03Z

Breaking change here is totally fine, but we should note it just in case :)

togetherwithasteria · 2023-04-14T05:32:05Z

Breaking change here is totally fine, but we should note it just in case :)

Okay! It's just the new fields in ButtonBundle!

IceSentry · 2023-04-14T06:22:08Z

Can you update the Migration guide section to not say the As mentioned earlier part?

We auto generate the full migration guide based on that section and it wouldn't be useful for a user to read this.

mockersf · 2023-04-14T06:37:33Z

there is also #7795 for borders in UI

togetherwithasteria · 2023-04-14T09:08:00Z

there is also #7795 for borders in UI

Yes, I'm aware of that. I wonder how to merge that with this honestly.

togetherwithasteria · 2023-04-14T09:10:52Z

Can you update the Migration guide section to not say the As mentioned earlier part?

We auto generate the full migration guide based on that section and it wouldn't be useful for a user to read this.

Done!! ^_^

ickshonpe · 2023-04-14T10:01:01Z

#3991 had a couple of problems iirc:

I used it to do the rounded buttons for https://ickshonpe.itch.io/pillars and there were some compatibility issues. On some systems, it just rendered flat grey rectangles instead of the buttons.
It only renders uniform borders. I tried for a little while to get non-uniform borders working with it but couldn't quite get them right.
It doesn't support different coloured edges. That shouldn't be difficult to add though.

#7995 is pretty simple, it should be easy to combine them but needs non-uniform border support.

JMS55 · 2023-04-22T19:29:10Z

crates/bevy_ui/src/render/ui.wgsl

+    if (in.radius > 0.0 || in.border_width > 0.0) {
+        var distance = distance_round_border(in.point, in.size * 0.5, in.radius);
+
+        var inner_alpha = 1.0 - smoothstep(0.0, 0.0, distance);


Suggested change

var inner_alpha = 1.0 - smoothstep(0.0, 0.0, distance);

var inner_alpha = 1.0 - smoothstep(0.0, 1.0, distance);

I believe this should be 1.0, otherwise you're not getting any anti-aliasing. Something still looks off though, the transition between straight edges/corners is too sharp.

Ah, I see!

Though, it looks a bit cool, if only it's more consistent between all corners.

@JMS55 this is fixed now, but it's great if I could get assistance with the sharp transition issue.

I don't have many experiences with rendering, unfortunately.

togetherwithasteria · 2023-04-27T08:34:23Z

I'm really sorry. I haven't been able to look into this PR for the last few weeks.

I used it to do the rounded buttons for https://ickshonpe.itch.io/pillars and there were some compatibility issues. On some systems, it just rendered flat grey rectangles instead of the buttons.

Ah, what systems are they?

togetherwithasteria · 2023-04-27T08:38:55Z

It only renders uniform borders. I tried for a little while to get non-uniform borders working with it but couldn't quite get them right.

What was the problem?

ickshonpe · 2023-04-27T23:40:48Z

I'm really sorry. I haven't been able to look into this PR for the last few weeks.

I used it to do the rounded buttons for https://ickshonpe.itch.io/pillars and there were some compatibility issues. On some systems, it just rendered flat grey rectangles instead of the buttons.

Ah, what systems are they?

It was a while ago and only a small sample size but the problems were with the wasm build for some linux users.

ickshonpe · 2023-04-28T00:08:27Z

It only renders uniform borders. I tried for a little while to get non-uniform borders working with it but couldn't quite get them right.

What was the problem?

I think what I struggled with was getting the radii of the corners of the inner and outer rectangles to match perfectly when the border edges had non-uniform thicknesses.

Dimchikkk · 2023-05-11T19:32:30Z

Would be amazing to start making pretty ui with corner radius in bevy 0.11, how far is it from completion? :)

togetherwithasteria · 2023-06-03T05:48:09Z

Would be amazing to start making pretty ui with corner radius in bevy 0.11, how far is it from completion? :)

It should be okay to be used in a private fork, but I believe this needs some reviews first before being merged.

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

alice-i-cecile · 2023-06-14T23:45:03Z

Completed in #7795 :) Thanks a ton for this regardless: it was helpful to see another take on the problem.

oceantume and others added 28 commits February 19, 2022 12:19

Add Border and BorderRadius components to bevy_ui

538283c

Change UI example to showcase new Border component

6d3a6c0

Change Button example to showcase new BorderRadius component

ccfb526

Add support for border and border radius to UI renderer

de272c9

Rename border radius to corner radius

0b96248

Refactor ui renderer to be smaller and simpler

3d2370b

Refactor UI renderer to pass node information via a uniform buffer

a94f9e8

Run cargo formatter on all files

2489b1e

Fix issue raised by clippy

7412b56

Merge branch 'main' of github.com:oceantume/bevy into ui-nodes-new-vi…

893b17d

…sual-features # Conflicts: # crates/bevy_ui/src/render/pipeline.rs

Tweak UI shader code for optimization and clarity

dd13202

Move some work from fragment shader to vertex shader Add branching to skip complexity when there's no rounding or border Remove softness since we're not using it

Merge branch 'main' into ui-nodes-new-visual-features

26b7eb6

# Conflicts: # examples/ui/button.rs # examples/ui/ui.rs

Merge branch 'ui-nodes-new-visual-features' of https://github.com/oce…

e3064f5

…antume/bevy Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

Port PR code to 0.10.0's

97abed1

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

Merge branch 'main' of https://github.com/bevyengine/bevy

8e52dcf

don't clear the ui uniforms twice

fd67eac

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

fix ui

cee29ff

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

remove entity.rs

a25cda2

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

aa

ff1cad2

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

Fix syntax errors in ui.wgsl

0536325

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

Fix things

3902bef

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

aa

2b9ccd2

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

Merge branch 'bevyengine:main' into ui-renderer-0.11.0

ff2293c

Merge branch 'bevyengine:main' into ui-renderer-0.11.0

dd86c32

Switch to Iced's border radius code

ba125bf

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

Revert "Switch to Iced's border radius code"

cbeaf92

This reverts commit ba125bf.

Add corner radius and border to ButtonBundle

e500f33

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

move the corner_radius to the one with the actual background color

97d15e0

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

alice-i-cecile added C-Enhancement A new feature A-Rendering Drawing game state to the screen labels Apr 14, 2023

alice-i-cecile added A-UI Graphical user interfaces, styles, layouts, and widgets C-Breaking-Change A breaking change to Bevy's public API that needs to be noted in a migration guide labels Apr 14, 2023

togetherwithasteria changed the title ~~UI renderer~~ Border & CornerRadius Apr 14, 2023

JMS55 reviewed Apr 22, 2023

View reviewed changes

JMS55 added this to the 0.11 milestone Apr 22, 2023

nicoburns mentioned this pull request Jun 2, 2023

Editor-Ready UI #254

Open

togetherwithasteria marked this pull request as ready for review June 3, 2023 05:46

togetherwithasteria added 3 commits June 11, 2023 04:48

Merge floral-main to ui-renderer-0.11.0

9d8eca7

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

fix the import

34eaeb0

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

fix aliasing

ee52a03

Signed-off-by: Natalia Asteria <fortressnordlys@outlook.com>

togetherwithasteria requested a review from JMS55 June 11, 2023 12:45

togetherwithasteria mentioned this pull request Jun 12, 2023

Ui Node Borders #7795

Merged

alice-i-cecile closed this Jun 14, 2023

ickshonpe mentioned this pull request Jun 27, 2023

UI Node Border Radius and Shadows #8973

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Border & CornerRadius #8381

Border & CornerRadius #8381

togetherwithasteria commented Apr 14, 2023 •

edited

alice-i-cecile commented Apr 14, 2023

togetherwithasteria commented Apr 14, 2023 •

edited

IceSentry commented Apr 14, 2023

mockersf commented Apr 14, 2023 •

edited

togetherwithasteria commented Apr 14, 2023

togetherwithasteria commented Apr 14, 2023

ickshonpe commented Apr 14, 2023

JMS55 Apr 22, 2023 •

edited

togetherwithasteria Jun 10, 2023

togetherwithasteria Jun 11, 2023

togetherwithasteria commented Apr 27, 2023

togetherwithasteria commented Apr 27, 2023

ickshonpe commented Apr 27, 2023 •

edited

ickshonpe commented Apr 28, 2023

Dimchikkk commented May 11, 2023

togetherwithasteria commented Jun 3, 2023 •

edited

alice-i-cecile commented Jun 14, 2023

	var inner_alpha = 1.0 - smoothstep(0.0, 0.0, distance);
	var inner_alpha = 1.0 - smoothstep(0.0, 1.0, distance);

Border & CornerRadius #8381

Border & CornerRadius #8381

Conversation

togetherwithasteria commented Apr 14, 2023 • edited

Objective

Solution

Changelog

Migration Guide

alice-i-cecile commented Apr 14, 2023

togetherwithasteria commented Apr 14, 2023 • edited

IceSentry commented Apr 14, 2023

mockersf commented Apr 14, 2023 • edited

togetherwithasteria commented Apr 14, 2023

togetherwithasteria commented Apr 14, 2023

ickshonpe commented Apr 14, 2023

JMS55 Apr 22, 2023 • edited

Choose a reason for hiding this comment

togetherwithasteria Jun 10, 2023

Choose a reason for hiding this comment

togetherwithasteria Jun 11, 2023

Choose a reason for hiding this comment

togetherwithasteria commented Apr 27, 2023

togetherwithasteria commented Apr 27, 2023

ickshonpe commented Apr 27, 2023 • edited

ickshonpe commented Apr 28, 2023

Dimchikkk commented May 11, 2023

togetherwithasteria commented Jun 3, 2023 • edited

alice-i-cecile commented Jun 14, 2023

togetherwithasteria commented Apr 14, 2023 •

edited

togetherwithasteria commented Apr 14, 2023 •

edited

mockersf commented Apr 14, 2023 •

edited

JMS55 Apr 22, 2023 •

edited

ickshonpe commented Apr 27, 2023 •

edited

togetherwithasteria commented Jun 3, 2023 •

edited