[SOLVED] Round corners in new GUI

[nananame]

Is there a way to give a rectangle rounded corners in the new GUI? Some simple way like border radius in css or drawing or anything?

Basically, I wonder if I can do something like:

Code: Select all

frame:
	background Solid("#ffffff")
	xsize 50
	ysize 50
	corner-radius 10

Or any code to that effect. This would do away with the need for images for many buttons and such.

[Divona]

Basic Ren'Py draw function is rather limited. Can't even draw a circle. You will have to stick with the image for round corners, I'm afraid.

Here is the List of Transform Properties.

For more advance drawing, I would suggest look at Creator-Defined Displayables. Here is a thread about drawing shapes using CDD: viewtopic.php?p=224710

Even though "canvas.ellipse" doesn't seem to work... give out "error. Not implemented.".

[nananame]

Thanks for the info. It seem some shapes (like ellipse or arc) aren't implemented. So I played around for a while and, using a polygon and 4 circles I managed to create a rounded rectangle. Yay me!

However, while this works nice and I can now create any size rounded rectangle of any colour easily, I am having some trouble using an event (as described in the documentation link) to change the colour (so as to make it appear the rounded rectangle can change colour on hover). If I keep at it I might find a solution (or perhaps someone already has one?) but I have a conundrum now - I would eventually use a couple of buttons on one screen (not a problem in itself), and I would want an event for every one of them (I see this as a problem, they might mix)...but even if I managed to get through all this - would all this actually lower the performance more than having images with rounded corners?

[Divona]

Here is a quick CDD button that changes color when a mouse hovers above it:

Code: Select all

init python:

    class myButton(renpy.Displayable):
        def __init__(self, xpos=0, ypos=0, width=160, height=160 **kwargs):
            super(myButton, self).__init__(**kwargs)

            self.color = "#000"

            self.xpos = xpos
            self.ypos = ypos
            self.width = width
            self.height = height

        def render(self, width, height, st, at):
            render = renpy.Render(config.screen_width, config.screen_height)
            canvas = render.canvas()

            canvas.rect(self.color, [self.xpos, self.ypos, self.width, self.height])

            return render

        def event(self, ev, x, y, st):
            color = self.color

            if (x > self.xpos and y > self.ypos and x < (self.xpos + self.width) and y < (self.ypos + self.height)):
                color = "#fff"
            else:
                color = "#000"

            if color != self.color:
                self.color = color
                renpy.redraw(self, 0)
                
screen button_test():
    
    add "#252730"
    
    add myButton(20, 20, 160, 160)
    add myButton(300, 50, 64, 64)
    
label start:

    call screen button_test
    
    return

Actually, call it button wouldn't be quite right as it's still lacking event check for mouse input. Well, you can use this combination with Button...

Personally, I would rather use imagebutton than code all this just to draw shapes on screen. I doubt performance wise would be any different or even noticeable on the modern machines. Like they say, spend time finish a game rather than spend months optimised unfinished product.

[nananame]

Thanks for all your effort Divona!

In the end I got my answer -> you can create a rounded rectangle if you combine a few shapes. I also think the best way to have it change colour on hover is to use the background and hover_background button properties. Just tried it and it works great - once the displayable has been defined all I need is a simple line of code. Whether to use this or images is, of course, another question.