How do I make border-radius on sprite/9-patch square box?

0 favourites
From the Asset Store
Over 2700 files with all the colour combinations from a 15 colours palette!
  • Literally the title xD! I want to make my box (default) sprite (Or 9-Patch) to have border radius.

    I used the HTML_Div by Pode but because it’s a HTML element, it’ll stay on top forever. So I scrapped it and make a simple square using 9-Patch. Can anyone tell me how to do border radius?

    Thank you! Merci beaucoup!

  • You mean rounded corners? It's easy:

  • You mean rounded corners? It's easy:

    Ah. I know how to do that but I don't know how to do it WHILE IN GAME (In real-time). I really hope I can do it in-game and not need to import square-rounded corner image and put in 9-patch (It works but not what I want unfortunately :c)

    I hope my explanation is not too weird :p

  • You can add 9patch with rounded corners in the editor and in runtime change its size. Or do you mean you want to change the corner radius? (amount of roundness)

    You can draw a rounded rectangle on a Canvas or Paster object.

  • Or do you mean you want to change the corner radius? (amount of roundness)

    Yeah, this what I meant. I'll take a look into the Paster plugin! Thanks! Although, will it be like HTML element? Which will be always floating on top of everything? If yes, I don't think I can use that now :(

  • OK so I tried the Paster plugin by Rojohound... and I don't really understand how to use it. Is there any guide/documentation or just straight up on how to make a rounded corners? xD Sorryy

  • Sorry, my mistake - you can't do it with Paster, but it's possible with Canvas. (You are using Construct 2, right?)

    construct.net/en/forum/extending-construct-2/addons-29/plugin-canvas-41782

    It's not an easy task - you will need to draw a path with 4 arcs and 4 lines between them.

    I have a demo, but it's for C3 and there I used circled for corners:

    howtoconstructdemos.com/draw-a-rectangle-with-rounded-corners-c3p

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Sorry, my mistake - you can't do it with Paster, but it's possible with Canvas. (You are using Construct 2, right?)

    https://www.construct.net/en/forum/extending-construct-2/addons-29/plugin-canvas-41782

    It's not an easy task - you will need to draw a path with 4 arcs and 4 lines between them.

    I have a demo, but it's for C3 and there I used circled for corners:

    https://howtoconstructdemos.com/draw-a-rectangle-with-rounded-corners-c3p/

    Hey, thanks for that! I'm using C2 unfortunately. But, I just followed your initial advice, which make without Canvas/Paster plugin and just make a rounded-corner on Figma or something and then import it to Construct 2 using 9-Patch. I just made multiple rounded corner :D. I realized I do not need dynamic corner radius. Thanks though!

    And I also found out Canvas plugin make the device slow? I'm planning to release my game into mobile. So that's also half a reason on why I don't want to use that plugin :p. If it's not that slow, I will though!

  • Oh I have a really stupid request... can you upload a screenshot of the events of that Rounded Rectangle using Canvas? That would be really, really helpful! Because I don't even know how to use Canvas nor Paster as of right now huhuhu

  • No, I never heard about Canvas plugin being slow.

    Here is a demo:

    dropbox.com/s/0edm67m11iibco9/RoundedRectangleC2.capx

  • No, I never heard about Canvas plugin being slow.

    Here is a demo:

    https://www.dropbox.com/s/0edm67m11iibco9/RoundedRectangleC2.capx?dl=0

    Oh my god, that's super great!!! I'll make a backup in a minute. But how you make textbox can change the radius? I can't figure that out. I thought just make a simple Variable but then I don't know how to change the radius without creating a new Arc (Is that term right? xd)

  • Oh and by the way, your website is really cool! I found many fun and great things there!

  • But how you make textbox can change the radius? I can't figure that out.

    I told you it's not going to be an easy task.. Not extremely difficult, but tedious. You can use my C3 demo as a reference, but of course some expressions will be different with Canvas.

  • > But how you make textbox can change the radius? I can't figure that out.

    I told you it's not going to be an easy task.. Not extremely difficult, but tedious. You can use my C3 demo as a reference, but of course some expressions will be different with Canvas.

    Well yes and I also told you that I don't have C3. But apparently C3 have a full version for free now! So thanks!

  • You should be able to open that demo even in trial version of C3.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)