Getting Started with 2D Games Using Tkinter (Part 2): Creating the Game Screen

Source: Dev.to

Creating the Game Screen

In this article we will create the game screen using Tkinter’s Canvas.

1. Prepare a Working Folder

1. Create a working folder and add a file named main.py.
   For details on how to create files, see
   Saving a Program to a File.

2. Inside the working folder create an images directory. All image assets will be stored there.

3. Download the following image and save it as bg_jigoku.png inside the images folder.

   

   (It looks like a familiar kind of hell, doesn’t it?)

Your folder structure should look like this:

working_folder/
 ├─ main.py               # main program file
 └─ images/
     └─ bg_jigoku.png     # background image

From now on, we will write all code in the main.py file.

2. Create a Tkinter Object

Import the tkinter library and create a root window with a title.
Disabling window resizing keeps the game area at a fixed size.

import tkinter

root = tkinter.Tk()                 # Create a Tkinter object
root.title("Hello, Tkinter!!")      # Window title
root.resizable(False, False)       # Disable window resizing

3. Create a Canvas

Define the canvas dimensions with variables W (width) and H (height).
Then create a Canvas widget using those dimensions.

import tkinter

# Canvas width and height
W, H = 480, 320

root = tkinter.Tk()
root.title("Hello, Tkinter!!")
root.resizable(False, False)

canvas = tkinter.Canvas(root, width=W, height=H)
canvas.pack()

If you run the program now, a window of 480 × 320 pixels will appear.

Continue adding code to load the background image, handle fullscreen toggling, and build the rest of the game screen.

Canvas

import tkinter

W, H = 480, 320

root = tkinter.Tk()
root.title("Hello, Tkinter!!")
root.resizable(False, False)

cvs = tkinter.Canvas(width=W, height=H, bg="black")
cvs.pack()

root.mainloop()

From now on we will draw background images and character images on this canvas.

4. Prepare an Initialization Function

We will prepare an initialization function that runs once at the start of the game, and an update function that continuously refreshes the screen. Separating initialization logic from update logic makes the overall code much cleaner.

The pass statement in the init() function means “do nothing” (it will be filled later).

import tkinter

W, H = 480, 320

def init():
    """Initialization function."""
    pass

root = tkinter.Tk()
root.title("Hello, Tkinter!!")
root.resizable(False, False)

cvs = tkinter.Canvas(width=W, height=H, bg="black")
cvs.pack()

init()
update()          # will be defined later
root.mainloop()

5. Prepare an Update Function

Define the frame rate using F_RATE.
The frame rate is how many times the screen is updated per second.
A rate of ~60 fps is ideal, but for this practice we’ll use 30 fps.

F_INTERVAL is the time interval for one frame (in milliseconds).
Inside update() we call root.after(F_INTERVAL, update) to schedule the next update.

import tkinter

W, H = 480, 320

# Frame rate
F_RATE = 30
F_INTERVAL = int(1000 / F_RATE)

def init():
    """Initialization function."""
    pass

def update():
    """Update function."""
    root.after(F_INTERVAL, update)

root = tkinter.Tk()
root.title("Hello, Tkinter!!")
root.resizable(False, False)

cvs = tkinter.Canvas(width=W, height=H, bg="black")
cvs.pack()

init()
update()
root.mainloop()

6. Place the Background Image

Load and place the background image inside init().
The image file is bg_jigoku.png located in the images folder.

The global keyword is required so that the PhotoImage object isn’t garbage‑collected.

# Background image (global variables)
bg_photo, bg_image = None, None

def init():
    """Initialization function."""
    global bg_photo, bg_image

    bg_photo = tkinter.PhotoImage(file="images/bg_jigoku.png")
    bg_image = cvs.create_image(W / 2, H / 2, image=bg_photo)

Complete Code (so far)

import tkinter

W, H = 480, 320

F_RATE = 30
F_INTERVAL = int(1000 / F_RATE)

bg_photo, bg_image = None, None

def init():
    global bg_photo, bg_image
    bg_photo = tkinter.PhotoImage(file="images/bg_jigoku.png")
    bg_image = cvs.create_image(W / 2, H / 2, image=bg_photo)

def update():
    root.after(F_INTERVAL, update)

root = tkinter.Tk()
root.title("Hello, Tkinter!!")
root.resizable(False, False)

cvs = tkinter.Canvas(width=W, height=H, bg="black")
cvs.pack()

init()
update()
root.mainloop()

Coming Up Next…

Thank you for reading!
The next article will be “Using Mouse Events.” Stay tuned!