Skip to content
Home » Kivy Part 22 – Slugrace – Results Screen GUI

Kivy Part 22 – Slugrace – Results Screen GUI

Spread the love

In the previous part we created the Bets screen, which will be injected into the lower part of the Race screen at the beginning of each race. After each race it will be replaced by the Results screen, which we still don’t have.

Here’s what it should look like in the final version:

Results screen - final version

Here we again assume that in the Settings screen the 2-player mode has been selected, but there may be up to four players. So, we’re going to create four players in the Results screen and then some of them may be programmatically made invisible like here.

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.

Kivy 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…

There are lots of similarities between this screen and the Bets screen we discussed before. There are the same main parts:

1) The Title Label – it reads Race … Results (with the actual race number in place of the three dots)

2) The Player Results – they are less complex than in the Bets screen

3) The Next Race Button – this is just a simple button

The root Widget of the Results Screen

As usual, let’s start with the Python file, in which we can define our root widget class. Just like before, we’ll use a BoxLayout. Here’s the Python code:

# File name: results.py

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

class ResultsScreen(BoxLayout):
    pass

class ResultsApp(App):
    def build(self):
        return ResultsScreen()

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

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

As the kv file is going to be much like the Bets.kv file, I’m going to handle it in one go. Although it’s pretty lengthy, it’s also very simple and straightforward. We’re going to use the same widgets as before, so we also have to add the appropriate class rules before the root widget. Here’s the kv file:

# File name: results.kv

### CLASS RULES ###

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

<BoldLabel@RegularLabel>:    
    bold: True

<ResultsScreen>:               
    orientation: 'vertical'
    padding: 10    

    ### TITLE LABEL ###
    BoldLabel:  
        text: 'Race 1 Results' # temporarily race number set to 1
        size_hint: (1, None)
        height: 30

    ### PLAYER RESULTS ###   
    BoxLayout:
        orientation: 'vertical'

        # player 1            
        BoxLayout:                        
            RegularLabel:
                text: 'Player 1'
            BoxLayout:                                
                RegularLabel:                    
                    text: 'had'
                    size_hint: (.4, 1)
                RegularLabel: 
                    text: '$1000'                        
            BoxLayout:                
                RegularLabel:                    
                    text: 'bet'
                    size_hint: (.4, 1)   
                RegularLabel:     
                    text: '$300'                                                     
            RegularLabel:
                text: 'on Speedster'         
            BoxLayout:
                RegularLabel:
                    text: '- won' 
                    size_hint: (.5, 1)
                RegularLabel: 
                    text: '$400' 
            BoxLayout:
                RegularLabel:
                    text: 'now has'                    
                RegularLabel: 
                    text: '$1400' 
            RegularLabel:
                text: 'The odds were 2.54'
                

        # player 2            
        BoxLayout:                        
            RegularLabel:
                text: 'Player 2'
            BoxLayout:                                
                RegularLabel:                    
                    text: 'had'
                    size_hint: (.4, 1)
                RegularLabel: 
                    text: '$1000'                        
            BoxLayout:                
                RegularLabel:                    
                    text: 'bet'
                    size_hint: (.4, 1)   
                RegularLabel:     
                    text: '$300'                                                     
            RegularLabel:
                text: 'on Speedster'         
            BoxLayout:
                RegularLabel:
                    text: '- lost' 
                    size_hint: (.5, 1)
                RegularLabel: 
                    text: '$400' 
            BoxLayout:
                RegularLabel:
                    text: 'now has'                    
                RegularLabel: 
                    text: '$600' 
            RegularLabel:
                text: 'The odds were 1.59'
                

        # player 3            
        BoxLayout:                        
            RegularLabel:
                text: 'Player 3'
            BoxLayout:                                
                RegularLabel:                    
                    text: 'had'
                    size_hint: (.4, 1)
                RegularLabel: 
                    text: '$1000'                        
            BoxLayout:                
                RegularLabel:                    
                    text: 'bet'
                    size_hint: (.4, 1)   
                RegularLabel:     
                    text: '$300'                                                     
            RegularLabel:
                text: 'on Trusty'         
            BoxLayout:
                RegularLabel:
                    text: '- won' 
                    size_hint: (.5, 1)
                RegularLabel: 
                    text: '$400' 
            BoxLayout:
                RegularLabel:
                    text: 'now has'                    
                RegularLabel: 
                    text: '$1400' 
            RegularLabel:
                text: 'The odds were 2.24'
                

        # player 4            
        BoxLayout:                        
            RegularLabel:
                text: 'Player 4'
            BoxLayout:                                
                RegularLabel:                    
                    text: 'had'
                    size_hint: (.4, 1)
                RegularLabel: 
                    text: '$1000'                        
            BoxLayout:                
                RegularLabel:                    
                    text: 'bet'
                    size_hint: (.4, 1)   
                RegularLabel:     
                    text: '$300'                                                     
            RegularLabel:
                text: 'on Slowpoke'         
            BoxLayout:
                RegularLabel:
                    text: '- lost' 
                    size_hint: (.5, 1)
                RegularLabel: 
                    text: '$400' 
            BoxLayout:
                RegularLabel:
                    text: 'now has'                    
                RegularLabel: 
                    text: '$600' 
            RegularLabel:
                text: 'The odds were 1.85'
                

    ### NEXT RACE BUTTON ###    
    Button:
        text: 'Next Race'
        size_hint: (None, None)        
        size: 200, 40
        pos_hint: {'center_x': 0.5}

Python Jumpstart Course

Learn the basics of Python, including OOP.

with lots of exercises, easy to follow

The course is available on Udemy.

Don’t worry about the numeric data I used in this code. All the money amounts, like bets, wins and losses, as well as other data like the odds, for example, are just dummy values and will be then calculated programmatically. Here what we only care for is the visual representation of the data.

If you run the Results.py app and then resize the window, you will see the following:

Results screen

It contains all the elements we need.

With all the most important screens in place, so the Settings screen, the Race screen, the Bets screen and the Results screen, we could now move on to adding some pizzazz to them, like colors and graphics, but before we do, in the next part we’ll add one more screen, the Game Over screen. It’s going to be very easy. After that we’ll be left with just one more screen, the Instructions screen. However, we’re not going to see to it now, because I’d like to use the screencasts of the other screens in it, which will only be possible after they reach their final shape.

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.


Spread the love

Leave a Reply