The basic GUI layout

We will start out game by creating a top-level window as in the simple program we ran previously. However, this time, we will use two nested widgets: a container frame and the canvas where the game objects will be drawn, as shown here:

With Tkinter, this can easily be achieved using the following code:

import tkinter as tk

lives = 3
root = tk.Tk()
frame = tk.Frame(root)
canvas = tk.Canvas(frame, width=600, height=400, bg='#aaaaff')
frame.pack()
canvas.pack()
root.title('Hello, Pong!')
root.mainloop()

Through the tk alias, we access the classes defined in the tkinter module, such as Tk, Frame, and Canvas.

Notice the first argument of each constructor call which indicates the widget (the child container), and the required pack() calls for displaying the widgets on their parent container. This is not necessary for the Tk instance, since it is the root window.

However, this approach is not exactly object-oriented, since we use global variables and do not define any new classes to represent our new data structures. If the code base grows, this can lead to poorly organized projects and highly coupled code.

We can start encapsulating the pieces of our game in this way:

import tkinter as tk

class Game(tk.Frame):
    def __init__(self, master):
        super(Game, self).__init__(master)
        self.lives = 3
        self.width = 610
        self.height = 400
        self.canvas = tk.Canvas(self, bg='#aaaaff',
                                width=self.width,
                                height=self.height)
        self.canvas.pack()
        self.pack()

if __name__ == '__main__':
    root = tk.Tk()
    root.title('Hello, Pong!')
    game = Game(root)
    game.mainloop()

Our new type, called Game, inherits from the Frame Tkinter class. The class Game(tk.Frame): definition specifies the name of the class and the superclass between parentheses.

If you are new to object-oriented programming with Python, this syntax may not sound familiar. In our first look at classes, the most important concepts are the __init__ method and the self variable:

In the preceding snippet, we introduced the if __name__ == '__main__' condition, which is present in many Python scripts. This snippet checks the name of the current module that is being executed, and will prevent starting the main loop where this module was being imported from another script. This block is placed at the end of the script, since it requires that the Game class be defined.

See the chapter1_01.py script, which contains this code. Since no external assets are needed, you can place it in any directory and execute it from the Python command line by running chapter1_01.py. The main loop will run indefinitely until you click on the close button of the window, or you kill the process from the command line.

This is the starting point of our game, so let's start diving into the Canvas widget and see how we can draw and animate items in it.