Rounded Rectangle?

  • Hello!

    How do I draw a rounded rectangle?

    Either with events or scripts will work for me.

    I tried it with scripts but many times things will not work if I try using the normal javascript syntax.

    Thank you in advance. :)

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Thank you for the reply. I already saw the post. Does it mean I need to draw the 9 patches as a sprite and set it up in a complicated way?

    I would have liked to avoid this, as I hate spriting and I would prefer code. :D

  • If the radius of curved corners stays the same, you can use a single 9patch object. If the radius should scale with the rectangle, then you need to draw it on DrawingCanvas, or compose of several sprites, or maybe draw with JS somehow.

    I hate spriting and I would prefer code. :D

    I love spriting, spriting is great! :)

  • It is planned for the use as an UI element. And I do not know the radius yet. So I would really love if someone could have an example on how to use drawingcanvas eventing or javascript.

    I found things like

    function roundRect(x, y, w, h, radius) { var canvas = document.getElementById("canvas6"); var context = canvas.getContext("2d"); var r = x + w; var b = y + h; context.beginPath(); context.strokeStyle="green"; context.lineWidth="4"; context.moveTo(x+radius, y); context.lineTo(r-radius, y); context.quadraticCurveTo(r, y, r, y+radius); context.lineTo(r, y+h-radius); context.quadraticCurveTo(r, b, r-radius, b); context.lineTo(x+radius, b); context.quadraticCurveTo(x, b, x, b-radius); context.lineTo(x, y+radius); context.quadraticCurveTo(x, y, x+radius, y); context.stroke(); }

    in the Javascript documentation. But many times when I try to use plain Javascript I get errors when testing the game.

    When I use this with roundRect(700, 600, 200, 200, 10) I get "Cannot read property 'getContext' of null".

  • I may be wrong, but I don't think it's possible to directly draw on canvas in C3. If you are planning to do everything with Javascript, you should probably look at some other engine. The beauty and power of construct is in its plugins and behaviors, scripting is more like a supplementary feature.

    Example of drawing rounded rectangle with DrawingCanvas:

    dropbox.com/s/1nymmxwn7tugslk/RoundedRectangle.c3p

  • Wow super awesome! I was exactly looking for something like this. Thank you very much. :)

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