chevron_left
Python Game Development With Kivy - Tutorial - Part 1

Python Game Development With Kivy - Tutorial - Part 1

Tags: game , python , tutorial , kivy

Published Aug. 14, 2020, 6:09 p.m.

Share this post:

Facebook sign-in

Welcome everyone to a Python+Kivy tutorial series.

Kivy is a multi-platform GUI development library for Python, that can run on Windows, Mac, Linux, Android and iOS. You can build an app in one location, and use it across basically all devices.

To install Kivy, go to Kivy.org, then go to download, then follow the instructions for your operating system and Python version. 

In this tutorial, we will be making an Indie rocket / asteroids game, that will look something like the following: We will have a controllable rocket, spinning asteroids, score tracking, health, upgrades and so on:

Rocket game

 

Part 1

 

So lets get going.

In this particular part, we will cover loading needed modules, running the app, and building the game menu, which, by the end of it, should look like this:

Game Menu

 

In your working directory, create a file named menu.py and add the following code to it:

from kivy.config import Config

# don't make the app re-sizeable
Config.set('graphics', 'resizable', False)


# our menu and app logic will be between this line and the next

# our menu and app logic will be between this line and previous


# run the client app
if __name__ == '__main__':
    ClientApp().run()

In this particular code, we import the kivy config setting, before anything else, to disable resize options for out app window. In any other app, we wouldn't want to do this. In general, in Kivy you can resize this window and the text just automatically adjusts and is responsive to whatever sizes you throw at it. Kivy does this out of the box, with many different layout options. But since we will develop a game, we either have to handle scaling and resizing for our game assets, or disable it, so the graphics are consistent and we don't run in any errors.

The last part, just launches the application we will write in a second.

Add the following code inside menu.py, between the comment lines:

from kivy.app import App
from kivy.uix.widget import Widget


class ClientApp(App):
    def build(self):
        # this is where the root widget goes
        parent = Widget()  # this is an empty holder for buttons, etc
        Window.clearcolor = (0, 0, 0, 1) # remove any color from widget

        return parent

 

This part will be our root, the base of our app. The ClientApp inherits from kivy main App. Not much will happen here, we will just have the main widget, with no color, to which we will later append our actual menu.

Add the following code above the ClientApp class:

from kivy.uix.button import Button
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.image import Image
from kivy.core.window import Window


class Menu(Widget):
    # this is the main widget that contains the menu

    def __init__(self, **kwargs):
        # this function will override the default behavior of init
        # to call the funсtion that will build our menu
        super(Menu, self).__init__(**kwargs)
        self.menu()

    def menu(self):
        self.clear_widgets()

        self.layout = BoxLayout(orientation='vertical')
        self.layout.width = Window.width/2
        self.layout.height = Window.height/2
        self.layout.x = Window.width/2 - self.layout.width/2
        self.layout.y = Window.height/2 - self.layout.height/2

        startGame = Button(text="Start Game")
        startGame.background_color = [.4, .4, .4, .4]
        self.layout.add_widget(startGame)

        upgrades = Button(text="Upgrades")
        upgrades.background_color = [.4, .4, .4, .4]
        self.layout.add_widget(upgrades)

        quitGame = Button(text="Quit Game")
        quitGame.background_color = [.4, .4, .4, .4]
        self.layout.add_widget(quitGame)


        self.add_widget(self.layout)

 

Now, this is quite a lot of code, but no worries, we will go through each part!

First, we override the __init__ method of the Widget so that an additional method is called when the widget is added. This particular method, wil be the one building our menu.

So, to the menu method. First thing we do is call is clear_widgets. We do this to remove any other widgets from the screen. Of course we have none right now, but we will once we actually implement the game!

Next, we add a box layout, with vertical orientation. This means that our buttons will be vertically stacked. Imagine it as a sort of invisible container. We set the layout width and height to half of the window. Kivy will automatically get this from the Window object! Then, we put the layout in the middle of the window.

Finally, we get to adding some buttons. We instantiate the buttons, and give them a name using the text attribute. We give then a background color, and make them half transparent. You can give them any color in the rgba range, with values between 0 and 1, as color proportion. We don't need to worry about the button size, since Kivy will fill up the parent widget. If we add additional buttons, Kivy will automatically scale the old ones so that all buttons fully fill inside the BoxLayout.

Now, if you run you app, it should look like this:

 

Almost done! Now we just need to add some background image.

Add the following code just above the self.add_widget(self.layout) line:

self.img = Image(source='image.png')
self.img.size = (Window.width*1.5, Window.height*1.5)
self.img.pos = (-Window.width*0.3, -Window.height*0.3)
self.img.opacity = 0.35
self.add_widget(self.img)

Change "image.png" with whatever image you want as background. Keep this image in the same directory as menu.py.

We set image size to be slightly bigger than the Window, so we dont have any empty spots left. Then we center the image inside the app. This value is proportional to the image size, so that Size * Pos = 0.5 (or as close as possible), thus overlapping the center of out image with the center of our app.

All done! Now if you run your app, it should look something like this:

 

If you have any questions please to comment below and I will try to help. Also, if you like this tutorial, feel free to share!

Share this post:

Facebook sign-in

Similar posts
There are no similar posts yet.
0 comments

You have to login to comment.


public