Hey guys, before we move on to the next part of the Kivy series and discuss Kivy screens, here’s some info for you.
*****
Table of Contents
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 to Kivy Screens…
Throughout the whole project up to now we’ve been using the term screen a lot. We have the Settings screen, the Race screen, the Bets screen, the Results screen and the Game Over screen. But are they really screens or do we just call them screens?
In Kivy a screen is an object of the Screen class that inherits from RelativeLayout. So, if we want to use screens in our project, our classes need to inherit from the Screen class. Besides, we need a screen manager, so an object of the ScreenManager class to handle the screens inside the app window. A ScreenManager must contain widgets that inherit from the Screen class, no other types are allowed. In this part of the series we’ll create the screens and then, in the next part, we’ll see how to use them with a screen manager.
The Game Over Screen
Now, as you look at the root widgets of our screens, they all inherit from BoxLayout. This means that if we change the base class to Screen, things won’t work for us anymore. Let’s have a look at the Game Over screen first because it’s pretty simple and then we’ll move on to the other screens.
Here’s our gameover.py file:
# File name: gameover.py
...
class GameoverScreen(BoxLayout):
pass
class GameoverApp(App):
...
Let’s now change it so that it inherits from Screen:
# File name: gameover.py
...
# We need the Screen class.
from kivy.uix.screenmanager import Screen
...
# Now the root widget should inherit from Screen instead of BoxLayout.
class GameoverScreen(Screen):
pass
class GameoverApp(App):
...
If you now run the app, everything will fall apart:
This is because we now have a Screen, which actually is a RelativeLayout, and we had a BoxLayout before. The two layouts work differently, hence the disaster. But it’s easy to fix. All you have to do is put the whole code inside the root widget in a BoxLayout. Here’s the kv file after the modification:
# File name: gameover.kv
<GameoverScreen>:
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
# Now the contents of the root widgets will be enclosed in a BoxLayout
# and we will move the properties that we had on the GameoverScreen
# before (when it was still a BoxLayout) to this new BoxLayout.
# Here we only had one property - orientation. So,
# after that we will have a BoxLayout inside the Screen.
# Don't forget to indent the code inside the BoxLayout.
BoxLayout:
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
RedButton:
text: 'Play Again'
pos_hint: {'x': 0, 'center_y': .5}
RedButton:
text: 'Quit'
pos_hint: {'right': 1, 'center_y': .5}
Now if you run the app, you will see all the widgets in their places again:
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 Settings Screen
And now let’s turn the other so-called screens to real Kivy screens. The first step is to import the Screen class. The second step is to make the root widget inherit from the Screen class. And the third step is to move the contents of the root widget in the kv file into another BoxLayout. The one thing to remember is that if there were any BoxLayout properties on the root screen, they must be moved to the new BoxLayout.
So, here’s the Settings screen. First the Python file:
# File name: settings.py
...
# We need the Screen class.
from kivy.uix.screenmanager import Screen
# Configuration
...
# Now the root widget should inherit from Screen instead of BoxLayout.
class SettingsScreen(Screen):
pass
class SettingsApp(App):
...
And here’s the kv file. Remember to indent the code correctly inside the new BoxLayout:
# File name: settings.kv
...
<SettingsScreen>:
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
# Here's the BoxLayout with the previous root widget's properties
# now moved to it.
BoxLayout:
orientation: 'vertical'
padding: 10
spacing: 10
### SETTINGS LABEL ###
...
Now run the app again to see if it works. It should.
Learn the basics of Python, including OOP.
with lots of exercises, easy to follow
The course is available on Udemy.
The Race Screen
And now let’s move on to the next screen, the Race screen. Here’s the Python file:
# File name: race.py
...
# We need the Screen class.
from kivy.uix.screenmanager import Screen
# Configuration
...
# Now the root widget should inherit from Screen instead of BoxLayout.
class RaceScreen(Screen):
pass
class RaceApp(App):
...
And the kv file:
# File name: race.kv
...
<RaceScreen>:
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
# Here's the BoxLayout with the previous root widget's properties
# now moved to it.
BoxLayout:
orientation: 'vertical'
spacing: 10
padding: 10
### INFO, STATS AND BUTTONS ###
...
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.
The Bets Screen
Next let’s modify the code in the Bets screen. Here’s the Python file:
# File name: bets.py
...
# We need the Screen class.
from kivy.uix.screenmanager import Screen
# Configuration
...
# Now the root widget should inherit from Screen instead of BoxLayout.
class BetsScreen(Screen):
pass
class BetsApp(App):
...
And the kv file:
# File name: bets.kv
...
<BetsScreen>:
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
# Here's the BoxLayout with the previous root widget's properties
# now moved to it.
BoxLayout:
orientation: 'vertical'
padding: 10
spacing: 10
### TITLE LABEL ###
...
The Results Screen
And finally the Results screen. Let’s start with the Python file again:
# File name: results.py
...
# We need the Screen class.
from kivy.uix.screenmanager import Screen
# Configuration
...
# Now the root widget should inherit from Screen instead of BoxLayout.
class ResultsScreen(Screen):
pass
class ResultsApp(App):
def build(self):
return ResultsScreen()
if __name__ == '__main__':
ResultsApp().run()
And the kv file:
# File name: results.kv
...
<ResultsScreen>:
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
# Here's the BoxLayout with the previous root widget's properties
# now moved to it.
BoxLayout:
orientation: 'vertical'
padding: 10
### TITLE LABEL ###
...
Before you move on to the next part of the series, make sure all the apps work as before. In the next part of the series we’ll be talking about screen managers.