Kivy Part 30 – Slugrace – Background Graphics

In the previous part we were adding colors to widgets. But besides colors you can also add images.

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 VertexInstruction class, from which classes like Rectangle or Ellipse inherit, has the source property which you can use to add an image.

In the Slugrace app there’s only going to be one background image that we have to add to the Settings screen. Look at the final version of the screen:

There’s the image with the silhouettes of all four slugs in the Players area. Let’s add it now.

First of all, let’s find the Players area in the settings.kv file. It should look like this:

# File name: settings.kv

...

<SettingsScreen>:
    ...

    ### 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
        
        # Title         
        ...

There already are some canvas instructions, the one that sets the color and the one that draws the rounded rectangle.

Adding an Image to Canvas

In order to add an image, we need some shape to draw it on, like a rectangle. In this case it doesn’t really matter whether we first draw the rectangle with the image and then the rounded rectangle or the other way around, because the two graphical elements don’t overlap anywhere. However, it would matter if for example the rectangle with the image were bigger. Just to keep things orderly, let’s add the rectangle with the image before the instructions that are already there. Let’s just make sure the rectangle has the same position and size as the BoxLayout it’s drawn on. The image that you are going to need is called ‘all slugs.png’ and it’s in the assets folder.

If we were to run the program at this point, the image of the slugs would be very crisp with vivid colors. As you look at the final version of the screen, you can see that the colors are somewhat faded. We could have handled this in an image editor before we even added the asset to the assets folder, but we can still do it here, so, as it seems to be easier and faster to do than the former, let’s do it. If you change the alpha value, the transparency and thus vividness of the image will change. To make this happen, we’ll add another Color instruction before the Rectangle instruction and set the color to (1, 1, 1, .4).

The ‘all slugs.png’ image has a transparent background so the only parts of it that can be influenced the new color are the silhouettes of the slugs.

Here’s the code:

# File name: settings.kv

...

<SettingsScreen>:
    ...

    ### THE PLAYERS ###  
    BoxLayout:
        canvas:
            # Let's change the alpha value to make the colors faded.
            Color:
                rgba: 1, 1, 1, .4

            # Let's add the rectangle with the image.
            Rectangle:
                pos: self.pos
                size: self.size
                source: 'assets/all slugs.png'
                
            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    
        
        # Title         
        ...

And here’s the Settings screen with the background image, slightly resized: