Kivy Part 46 – Slugrace – Transitions

Hey guys, today we’ll be talking about transitions in Kivy. But before we start, 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…

When you switch from one screen to another, the screens slide from right to left. This animation is called a transition. You get it out of the box when you use a screen manager. But what if you wanted the screens to slide in the opposite direction? Or what if you don’t want the transition at all? Finally, what if you would like a different animation?

If you want to learn how to remove the transition completely, or how to change its type to CardTransition, SwapTransition, FadeTransition, WipeTransition, FallOutTransition or RiseInTransition, I describe all these situations in detail in my book.

Here I’m only going to show you how to set a transition direction. Besides, I’m going to address another problem here. Run the app and switch from Settings screen to Race screen:

As you can see, when you switch screens, the background color of the first screen changes to black. It doesn’t look good. We’ll change it so that the background is yellow all the time during the transition.

Transition Direction

Let’s start with changing the direction of the transition. What if we want the screens to slide from left to right? You just have to specify the direction in code. Here’s the settings.kv file:

# File name: settings.kv
#:import settings settings

...

        ### READY BUTTON ###
        RedButton:
            text: 'Ready'
            # Now we not only want to switch to another screen, 
            # but also change the sliding direction.
            on_press: 
                root.manager.current = 'racescreen'
                root.manager.transition.direction = 'right'

Now when you run the app and press the Ready button, the screens will slide from left to right:

This time the Race screen looks bad. We want the background to be yellow at all times, so let’s fix it as next.

Fixing the Background Color

The problem with the background color is that during the transition we see background of the app window, not any of the screens. The default color is black. If we don’t want to see the black color during the transition, we have to set the window’s color to the same color as the background color of the screens. We’ll do it in the main.py file.

First we need to import the Window class that takes care of all sorts of app window configurations and then use the clearcolor property to change the background color.

Now, one important thing: You have to import the Window class only after setting the configuration. Otherwise the configuration won’t be set as expected. A good place to do that is directly before the app is run:

# File name: main.py

import kivy
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager
from kivy.config import Config
from kivy.lang import Builder

# Configuration
Config.set('graphics', 'width', '1200')
Config.set('graphics', 'height', '675') 
Config.set('graphics', 'resizable', '1')

# kv files
Builder.load_file('settings.kv')
Builder.load_file('race.kv')
Builder.load_file('gameover.kv')
Builder.load_file('widgets.kv')

class SlugraceScreenManager(ScreenManager):
    pass

class SlugraceApp(App):
    def build(self):
        return SlugraceScreenManager()    

if __name__ == '__main__':
    # We need the Window class to change the background color.
    from kivy.core.window import Window

    # Now we can change the color to the same shade of yellow
    # as the screens.
    Window.clearcolor = (1, 1, .8, 1)

    SlugraceApp().run()

If you now run the app and press the Ready button, you won’t see the ugly black background anymore:

As you can see, here the screens are still sliding from left to right. You can also experiment with the two vertical directions, up and down. All you have to do is just set the transition direction to ‘up’ or ‘down’ respectively. Finally, let’s change back to ‘left’, which we can do by either setting the transition direction explicitly to ‘left’ or just removing the line of code completely as ‘left’ is the default value. Let’s do the latter.