Kivy Part 26 – Slugrace – Adding Shapes to the GUI

In the previous part we were talking about adding shapes to the GUI. We know how to draw ellipses, rectangles, lines or borders of shapes. In this part we’ll make use of this knowledge to add some simple shapes to our Slugrace GUI.

Here’s the video version of this article:

But before we delve into the topic, here’s some info for you.

*****

Book Info

I just published my Kivy book, GUI Programming with Python and Kivy. It’s pretty long (over 800 pages) and comprehensive. And, which also counts, easy to read. The book contains lots of illustrations.

This book covers all the basics that you need to know to start programming GUI applications with Python and Kivy. Throughout the book we are building a GUI application from scratch, a fully functional game using all kinds of tools that Kivy has to offer. It’s our Slugrace project, but covered in a much more in-depth manner.

Each part of the book starts with a theoretical introduction of a topic or idea that we then implement in the project. I assume you have no prior knowledge of the Kivy library, but you should have at least some basic knowledge of the Python programming language, including the object-oriented programming paradigm as this is what we will be using a lot in this book.

The book covers all the basic elements of Kivy that you have to know, like widgets, layouts, Kivy ids and properties, graphics, screens, animation, sound. Finally we’ll deploy the app to Windows. It is pretty comprehensive and after you finish it, I’m sure you’ll be able to create your own awesome GUI apps of any kind, not just games.

I hope you will have at least as much fun reading the book as I had writing it.

As far as this Kivy series is concerned, the following parts will contain the most important elements covered in the book. However, some elements will be presented in a simplified way here on my blog or omitted completely.

____________

If you are interested, you can purchase the book in four versions. Here are the links:

1) ebook – pdf version on my website – in full color

Here you can see the description of the book, sample graphics from the book and the full table of contents.

2) ebook – Kindle version on Amazon – in full color

3) paperback version on Amazon – in black and white

4) paperback version on Amazon – in full color

*****

And Now Let’s Move On…

Rounded Rectangles in Settings Screen

Let’s start with the Settings Screen. Let’s add two rounded rectangles (just the borders, without filling them in). Just a quick reminder from the previous article. Here’s the kv code we used to draw a rounded rectangle:

# File name: test.kv

...
                     
        # Shape 4 - The Border of a Rounded Rectangle on a Button
        Button:
            canvas:
                Line:
                    rounded_rectangle: self.x + 100, self.y + 10, 30, 90, 10
                    width: 3 

Now we can use similar code in the settings.kv file. Actually, we’re going to create two rounded rectangles: one around the Players area and one around the Ending Conditions area. Here’s what the screen looks like now, before adding the rounded rectangles (after resizing the window slightly):

And here’s the code to add the two rounded rectangles:

# File name: settings.kv

...
<SettingsScreen>:
    ...

    ### THE PLAYERS ###  
    BoxLayout:
  canvas:
            Line:
                rounded_rectangle: self.x, self.y, self.width, self.height, 10
                width: 2

        orientation: 'vertical'
        padding: 10
        spacing: 10
        
    ...

    ### ENDING CONDITIONS ###
    BoxLayout:
  canvas:
            Line:
                rounded_rectangle: self.x, self.y, self.width, self.height, 10
                width: 2

        orientation: 'vertical' 
        size_hint: (1, .4)   
        padding: 10
        spacing: 10   

    ...

If you now run the code with these changes in place, you will see this (again after resizing the window slightly):

This is just a little bit closer to the final version of the screen, which is supposed to look like this:

Don’t worry about the colors for now. What matters is that we have the two rounded rectangles.

And now let’s add the rounded rectangles to the Race screen.

Rounded Rectangles in Race Screen

Here’s the Race screen as it looks now (after you resize the window a bit):

And now let’s add rounded rectangles around each of the areas:

# File name: race.kv

### CLASS RULES ###
...

<RaceScreen>:
    ...
    
    ### INFO, STATS AND BUTTONS ###
    ...

        # Game Info
        BoxLayout:
            canvas:
                Line:
                    rounded_rectangle: self.x, self.y, self.width, self.height, 10        
                    width: 2
            orientation: 'vertical'
            padding: 10

            ...

        # Slugs' Stats           
        BoxLayout:
            canvas:
                Line:
                    rounded_rectangle: self.x, self.y, self.width, self.height, 10                            width: 2

            orientation: 'vertical'
            padding: 10

            ...

            
        # Players' Stats           
        BoxLayout:
            canvas:
                Line:
                    rounded_rectangle: self.x, self.y, self.width, self.height, 10        
                    width: 2

            orientation: 'vertical'
            padding: 10

            ...

        # Buttons
        ...
    
    ### THE TRACK ###
    BoxLayout:  
        canvas:
            Line:
                rounded_rectangle: self.x, self.y, self.width, self.height, 10            
                width: 2

        padding: 10

        ...
        
    
    ### THE BETS ###
    Label:
        canvas:
            Line:
                rounded_rectangle: self.x, self.y, self.width, self.height, 10            
                width: 2

        text: 'The Bets'

As you can see, in the last piece of code we’re drawing the rounded rectangle on a label. Here’s what we get:

Now we can see the rounded rectangles around the particular areas, but they are a little tight. So, let’s add some spacing and padding:

# File name: race.kv

### CLASS RULES ###

...

<RaceScreen>:
    orientation: 'vertical'
    spacing: 10
    padding: 10
    
    ### INFO, STATS AND BUTTONS ###
    GridLayout:
        cols: 4
        size_hint: 1, .5
        spacing: 10

        # Game Info
                  ...

I added the spacing and padding to the root widget and also increased the spacing to 10 inside the GridLayout where the three panels at the top are shown. Now it looks much better:

Now we’re again just one little step closer to the final version:

As far as drawing basic shapes is concerned, we’re done. There are only going to be the rounded rectangles we just added. In the following parts we’ll be adding other graphical elements. In the next part we’ll add some colors.