Kivy Part 17 – Slugrace – Some Basic Code to Start

In the previous part we created some files, both Python files and kv files. But they were left empty. Now it’s time to start filling them in with some code.

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…

The main.py File

Let’s start with the main.py file. This is the file from which our application will eventually run and it will include all the classes that need to be shared with other files. So, if you need access from more than one file to something, it’s very probable you’ll find it here. For example you will need access to the Player class from the Settings screen, but also from Bets, Results, and so on. So, the Player class will be defined in the main.py file. But we’ll take care of the classes a bit later. Now let’s just add some skeleton code:

# File name: main.py

import kivy
from kivy.app import App

class SlugraceApp(App):
    def build(self):
        pass

if __name__ == '__main__':
    SlugraceApp().run()

If you run this code, no window will be created. The program doesn’t have anything to create. We didn’t specify any widget or layout to be created. But the app will run without errors and this is what will do for now. It doesn’t seem very useful, but this code will be changed drastically very soon.

The settings.py and settings.kv Files

Now, let’s move on to the settings.py file. Although this file will eventually be just part of the whole application, let’s write some code for now so that we can run it as a separate app for now. Here’s the code:

# File name: settings.py

import kivy
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class SettingsApp(App):
    def build(self):
        return BoxLayout()

if __name__ == '__main__':
    SettingsApp().run()

So, as you can see, it will return a BoxLayout. Now let’s write some code in the settings.kv file and put some elements in the layout. Before we do, though, just a quick reminder. By convention if the app’s name and the kv file’s name are the same (the latter being written with a small letter and without the –App part at the end), the two files will be associated automatically. Here the name of the app is SettingsApp and the name of the kv file is settings.kv, so the Python file will know it should load the settings.kv file without explicitely telling it to.

And now, back to the kv file. Here’s the code:

# File name: settings.kv

<BoxLayout>:
    orientation: 'vertical'
    
    ### SETTINGS LABEL ###
    Label:
        text: 'Settings'
        font_size: 28

    ### THE PLAYERS ###
    Label:
        text: 'The Players'

    ### ENDING CONDITIONS ###
    Label:
        text: 'Ending Conditions'

    ### READY BUTTON ###
    Button:
        text: 'Ready'

Remember that this is just the skeleton code for the file. The settings screen, however, is actually going to contain four big areas: the Settings Label area, the Players area, the Ending Conditions area and the Ready Button area. For now we’re using just simple widgets in a vertical BoxLayout to imitate the areas, without any positioning or sizing for now. This should give you just the general idea of what the settings screen should contain. We’ll be filling in the details as we progress with our project.

Anyway, go back to the settings.py file and run the program. You should now see what is to become the settings screen:

Here you can see the four areas and this will do for now. Before we move on, just one remark. To keep the code clear I will use comments with triple # symbols before and after the name of a GUI area, just like in the code above.

The race.py and race.kv files

Now let’s move on to the next file, race.py. Again, let’s treat it as a separate app at this time. The Python file doesn’t differ much:

# File name: race.py

import kivy
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class RaceApp(App):
    def build(self):
        return BoxLayout()

if __name__ == '__main__':
    RaceApp().run()

Here’s the kv file:

# File name: race.kv

<BoxLayout>:
    orientation: 'vertical'
    
    ### INFO, STATS AND BUTTONS ###
    Label:
        text: 'Info, Stats and Buttons'
    
    ### THE TRACK ###
    Label:
        text: 'The Track'
    
    ### THE BETS ###
    Label:
        text: 'The Bets'

I’m keeping it very simple for now, but  you can at least see the main areas. If you run this app you will see the following:

That’s it for now. Here you can see the layouts and widgets in action, although this is still very basic. But don’t worry, things are going to become much more complex sooner than you might think. In the next part we’ll improve the GUIs we created here a bit.