Skip to content

Game shaders: gui component corners #25

@pisanovo

Description

@pisanovo

Description

Applies corner radius to components like in css & Adobe Xd

Should feature modes:

  • Same radius for all corners

    • Inputs:
      • number ( >0 ): the radius applied for each corner
  • Different radius for each corner

    • Inputs:
      • number ( >0 ): the radius for the top-left corner
      • number ( >0 ): the radius for the top-right corner
      • number ( >0 ): the radius for the bottom-right corner
      • number ( >0 ): the radius for the bottom-left corner

My idea for the implementation:
Say the component center pivot is at (u,v), the component dimensions are h (height) w (width) and you want to apply radius r to the bottom-right corner.

  • Loop on the y axis from equation until equation :
    - Loop the x-Axis from equation to equation :
    ---> Set pixel (x,y) to transparent

where z is equation

Adobe Xd reference

image

End result

image

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions