Python Game Development With Kivy - Tutorial - Part 1
Published Aug. 14, 2020, 6:09 p.m.
Share this post:
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.
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:
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:
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:
Similar postsThere are no similar posts yet.
There are no comments yet.