In the previous part we were talking about colors in Kivy. In this part we’ll add some colors in the Slugrace Kivy app.
But before we delve into the topic, 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…
Open the settings.py file and run it. You will see this (after resizing the window):
If you compare this with the final version, you will see that the color of the whole window in the latter is a shade of yellow:
This color is applied to the root widget, so let’s do it now. Open the settings.kv file and draw a yellow rectangle the size of the root widget:
# File name: settings.kv
...
<SettingsScreen>:
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
orientation: 'vertical'
padding: 10
spacing: 10
### SETTINGS LABEL ###
...
If you now run the settings.py app, the background color will be the yellow that we wanted:
But now, with the yellow background color, there is very little contrast between the background and the text. This is because, as you could see before, the text color on our labels was the default white. Let’s change it to something darker. As all our labels are instances of the RegularLabel class or one of its subclasses, let’s set the color in the RegularLabel class rule. Remember, though, that we’re not changing the Color property of the coordinate space context, but just the color property of the label:
# File name: settings.kv
### LABELS ###
<RegularLabel@Label>:
color: .2, .1, 0, 1
text_size: self.size
halign: 'left'
valign: 'center'
...
Now the app looks much better:
Make Awesome Games and Other 3D Apps
with Panda3D and Blender using Python.
Cool stuff, easy to follow articles.
Get the magazine here (PDF).
Coloring the Rounded Rectangles
The rounded rectangles around the main areas of the Settings screen are a shade of brown. There are two locations in the kv file where the rounded rectangles are drawn: one on the Players area and the other on the Ending Conditions area. Let’s find these two locations, and add the Color instruction before the instruction that draws the shape. Let’s set the rgba property to (.2, .1, 0, 1) – this is the shade of brown that we need.
The settings.kv file should look like so:
# File name: settings.kv
### LABELS ###
<RegularLabel@Label>:
color: .2, .1, 0, 1
text_size: self.size
halign: 'left'
valign: 'center'
...
<SettingsScreen>:
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
orientation: 'vertical'
padding: 10
spacing: 10
### SETTINGS LABEL ###
...
### THE PLAYERS ###
BoxLayout:
canvas:
Color:
rgba: .2, .1, 0, 1
Line:
rounded_rectangle: self.x, self.y, self.width, self.height, 10
width: 2
orientation: 'vertical'
padding: 10
spacing: 10
...
### ENDING CONDITIONS ###
BoxLayout:
canvas:
Color:
rgba: .2, .1, 0, 1
Line:
rounded_rectangle: self.x, self.y, self.width, self.height, 10
width: 2
orientation: 'vertical'
size_hint: (1, .4)
padding: 10
spacing: 10
...
And this is what it should look like:
Learn the basics of Python, including OOP.
with lots of exercises, easy to follow
The course is available on Udemy.
The Race Screen
We’re done with the Settings screen for now. Let’s open the other screens, so Race, Bets, Results and Game Over and do the same changes there. In the kv files of the screens that I just mentioned we’ll add the yellow rectangle to the root widget, then change the color of the text on the RegularLabel class and finally change the color of the rounded rectangles. We’ll be using the same colors as in the Settings screens.
Let’s move on to the Race screen. If you run the file now, you will see this:
Here’s the code with all the changes commented:
# File name: race.kv
### CLASS RULES ###
<RegularLabel@Label>:
# a darker color for the text
color: .2, .1, 0, 1
text_size: self.size
halign: 'left'
valign: 'center'
...
<RaceScreen>:
# The yellow rectangle on the root widget.
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
orientation: 'vertical'
spacing: 10
padding: 10
### INFO, STATS AND BUTTONS ###
GridLayout:
...
# Game Info
BoxLayout:
canvas:
# a shade of brown for the rounded rectangle
Color:
rgba: .2, .1, 0, 1
Line:
rounded_rectangle: self.x, self.y, self.width, self.height, 10
width: 2
orientation: 'vertical'
padding: 10
...
# Slugs' Stats
BoxLayout:
canvas:
# a shade of brown for the rounded rectangle
Color:
rgba: .2, .1, 0, 1
Line:
rounded_rectangle: self.x, self.y, self.width, self.height, 10
width: 2
orientation: 'vertical'
padding: 10
...
# Players' Stats
BoxLayout:
canvas:
# a shade of brown for the rounded rectangle
Color:
rgba: .2, .1, 0, 1
Line:
rounded_rectangle: self.x, self.y, self.width, self.height, 10
width: 2
orientation: 'vertical'
padding: 10
...
# Buttons
...
### THE TRACK ###
BoxLayout:
canvas:
# a shade of brown for the rounded rectangle
Color:
rgba: .2, .1, 0, 1
Line:
rounded_rectangle: self.x, self.y, self.width, self.height, 10
width: 2
padding: 10
# track
Label:
# a darker color for the text
color: .2, .1, 0, 1
text: 'TRACK'
# winner
BoxLayout:
orientation: 'vertical'
size_hint: (.18, 1)
Label:
# a darker color for the text
color: .2, .1, 0, 1
text: "The winner is"
...
Label:
# a darker color for the text
color: .2, .1, 0, 1
text: "Trusty"
...
Label:
# a darker color for the text
color: .2, .1, 0, 1
text: 'WINNER'
### THE BETS ###
Label:
canvas:
# a shade of brown for the rounded rectangle
Color:
rgba: .2, .1, 0, 1
Line:
rounded_rectangle: self.x, self.y, self.width, self.height, 10
width: 2
# a darker color for the text
color: .2, .1, 0, 1
text: 'The Bets'
With these changes in place, the Race screen now looks like this (after resizing):
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
And now the Bets screen. It now looks like so:
We don’t have any rounded rectangles here, so the only things we have to take care of are the background color and the text color on the RegularLabel class. Here’s the code with all necessary changes:
# File name: bets.kv
### CLASS RULES ###
<RegularLabel@Label>:
# a darker color for the text
color: .2, .1, 0, 1
text_size: self.size
halign: 'left'
valign: 'center'
...
<BetsScreen>:
# The yellow rectangle on the root widget.
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
orientation: 'vertical'
padding: 10
spacing: 10
...
Now the Bets screen is as yellow as the other screens:
The Results screen
And the the Results screen. It now looks like this:
There aren’t any rounded rectangles here either, so let’s just change the background color to yellow and the color of the text on the RegularLabel class:
# File name: results.kv
### CLASS RULES ###
<RegularLabel@Label>:
# a darker color for the text
color: .2, .1, 0, 1
text_size: self.size
halign: 'left'
valign: 'center'
...
<ResultsScreen>:
# The yellow rectangle on the root widget.
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
orientation: 'vertical'
padding: 10
...
And now it looks like so:
The Game Over screen
Finally, the Game Over screen. Here’s what we have now:
Again, all we have to do is change the color of the background and of the text on the RegularLabel class:
# File name: gameover.kv
### CLASS RULES ###
<RegularLabel@Label>:
# a darker color for the text
color: .2, .1, 0, 1
text_size: self.size
halign: 'left'
valign: 'center'
...
<GameoverScreen>:
# The yellow rectangle on the root widget.
canvas:
Color:
rgba: 1, 1, .8, 1
Rectangle:
pos: self.pos
size: self.size
orientation: 'vertical'
And now it looks like this:
