I am trying to create UI image element that would have rounded corners. I have reviewed this thread Round Corners in Image - #3 by gtg-nitesh
but there is just said you should use 9-sliced image not how to use it. Any suggestions?
Project link: PlayCanvas 3D HTML5 Game Engine
Check this manual page on how to get started with 9-sliced sprites:
https://developer.playcanvas.com/en/user-manual/2D/9-slicing/
Hi @Leonidas Yes i have checked on that and created 9-sliced image but don’t know how to achieve these rounded corners then.
So, yes a step by step guide is missing, some steps that may help you in brief:
- You need a graphic with rounded edges.
- Create a sprite from your graphic using the Sprite Editor:
https://developer.playcanvas.com/en/user-manual/2D/sprite-editor/
- Use the green/blue handlers in the Sprite editor to arrange the areas that should be 9-sliced.
- At the end use the
New Sliced Sprite from Selectionbutton to create your 9-sliced sprite. You can use it in your element/sprite components.
1 Like