Kivy Part 23 – Slugrace – Game Over Screen GUI

In the previous parts we created all the basic screens, or, to be precise, separate apps at this point. In particular, we have the Settings screen, the Race screen, the Bets screen and the Results screen. There’s one more screen to make, at least for now, the Game Over screen.

This is the screen that you will see when the game is over and it will display a message with information about the winner. There will be also two buttons, which you can use to either restart or quit the game. The screen in the final version should look something like this:

This GUI is pretty simple, we’re going to use a subclass of BoxLayout as the root widget.

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 root Widget

So, here’s the Python code:

# File name: gameover.py

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

class GameoverScreen(BoxLayout):
    pass

class GameoverApp(App):
    def build(self):
        return GameoverScreen()

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

Well, there’s nothing new or unexpected here.

Your Panda3D Magazine

Make Awesome Games and Other 3D Apps

with Panda3D and Blender using Python.

Cool stuff, easy to follow articles.

Get the magazine here (PDF).

The kv File

Also, the kv file is pretty simple. We’ll need some labels and some buttons. I’m going to use the BoldLabel class, which I defined before, but I will overwrite the font_size property to make the text larger. I will also overwrite the halign property, which is inherited from RegularLabel, to center the widget. All I need to do in order to use the BoldLabel is add it to the class rules above the root widget. Here’s the full kv code:

# File name: gameover.kv

### CLASS RULES ###

<RegularLabel@Label>:
    text_size: self.size
    halign: 'left'
    valign: 'center'

<BoldLabel@RegularLabel>:    
    bold: True

<GameoverScreen>:    
    orientation: 'vertical'
    
    BoldLabel:
        font_size: 100
        text: 'Game Over'
        halign: 'center'

    BoldLabel:
        font_size: 40
        text: "There's only one player with any money left."
        halign: 'center'

    BoldLabel:
        font_size: 30
        text: "The winner is Player 2, having started at $1000, winning at $999"
        halign: 'center'
    
    # The buttons
    BoxLayout: 
        spacing: 50            
        pos_hint: {'center_x': .5, 'center_y': .5} 
        size_hint: None, None
        size: 450, 200            
        Button:
            text: 'Play Again'
            pos_hint: {'x': 0, 'center_y': .5}             
            size_hint: (None, None)        
            size: 200, 40
        Button:
            text: 'Quit'
            pos_hint: {'right': 1, 'center_y': .5}            
            size_hint: (None, None)        
            size: 200, 40

Python Jumpstart Course

Learn the basics of Python, including OOP.

with lots of exercises, easy to follow

The course is available on Udemy.

It all looks very familiar, I’m sure. Now run the gameover.py file and resize the window slightly. This is what you should get:

Naturally, the text is fixed and doesn’t reflect the actual result of the game, but we’re talking about just the GUI here. Now, with all the basic screens in place, let’s make them look more like the images from the final versions that we’ve been using to illustrate what we are aiming at. As you can see they are graphically more pleasing to the eye. In the next parts we’re going to learn how to add colors and graphics to our Kivy app.

Blender Jumpstart Course

Learn the basics of 3D modeling in Blender.

step-by-step, easy to follow, visually rich

The course is available on Udemy and on Skillshare.