Урок 8

ГРАФІЧНИЙ
ІНТЕРФЕЙС В ІГРАХ.
ГРА-КЛІКЕР
«БОМБА»

Зміст
Графічний інтерфейс.....................................................3
Розробка гри «Бомба»................................................ 17

Матеріали уроку було прикріплено до даного PDF-файлу.

Щоб отримати доступ до матеріалів уроку, відкрийте його
в програмі Foxit PDF Reader.

2
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

Графічний інтерфейс
Під час розроблення програм ми постійно робили
підказки для користувача, у такий спосіб створюю-
чи текстовий інтерфейс програми.
Але сьогодні важко уявити повноцінну програму,
яка б не використовувала графічні елементи у своїй ро-
боті. Навіть більше, програми зазвичай цілковито пра-
цюють на графічному інтерфейсі (GUI). Такий різновид
інтерфейсу дає змогу швидко й легко орієнтуватись у
програмі внаслідок його інтуїтивної зрозумілості. Тому
нам, як програмістам, просто необхідно додати це
вміння до свого списку навичок.
Для роботи в цьому напрямку є безліч бібліотек, але
стандартне рішення Python – бібліотека tkinter. Саме
з нею й будемо працювати. А для початку процесу озна-
йомлення імпортуємо її:

import tkinter as tk

Як бачите, для більш зручної роботи можна пере-

назвати імпортовані дані. Створимо об’єкт вікна, класу
Tk, який зазвичай поміщають у змінну root:

root = tk.Tk()

А щоби побачити вікно, необхідно наприкінці коду

програми викликати метод mainloop() (див. вiдео 1 на
стор. 4):

3
Урок 8

import tkinter as tk

root = tk.Tk()
root.mainloop()

Вiдео 1

Змінимо назву вікна, викликавши метод title(),

всередину якого передамо рядок із новою назвою.
Додатково налаштуємо розміри вікна, скористав-
шись методом geometry(), що приймає всередину ря-
док такого вигляду (рис. 1):

4
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

Рисунок 1

Заповнимо відповідні дані й виконаємо код (вiдео  2):

import tkinter as tk

root = tk.Tk()
root.title("First Window")
root.geometry("600x400+500+200")
root.mainloop()

Вiдео 2

5
Урок 8

Змінимо іконку вікна, знайдемо її в просторі інтер-

нету. Розширення файлу має бути .ico, в іншому випад-
ку зображення не завантажиться. Покладемо його до
директорії проєкту й викличемо метод iconbitmap(),
передавши рядок із назвою файлу (вiдео 3).

import tkinter as tk

root = tk.Tk()
root.title("First Window")
root.geometry("600x400+500+200")
root.iconbitmap("like.ico")
root.mainloop()

Вiдео 3

Погляньте на отримане вікно, якщо підвести до

його краю курсор, стрілка перетвориться і вікно можна
6
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

буде масштабувати. Але часто для збереження вигляду

й функціоналу необхідно блокувати масштабування.
Цьому зарадить метод resizable(), у який передамо
два значення False. Перше заблокує масштабування за
шириною, друге – за висотою (вiдео 4):

import tkinter as tk

root = tk.Tk()
root.title("First Window")
root.geometry("600x400+500+200")
root.iconbitmap("like.ico")
root.resizable(False, False)

root.mainloop()

Вiдео 4

7
Урок 8

Звісно, блокувати можна окремо кожне з них. А в

досягненні проміжного результату допоможуть мето-
ди minsize() та maxsize(), у котрі треба передати
мінімальні та максимальні значення ширини й висоти
(вiдео 5):

import tkinter as tk

root = tk.Tk()
root.title("First Window")
root.geometry("600x400+500+200")
root.iconbitmap("like.ico")
root.minsize(400,300)
root.maxsize(700,500)

root.mainloop()

Вiдео 5

8
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

Тепер, вміючи працювати з вікном, почнемо на-

повнювати його змістом.
А першим елементом, який до нього потрапить, є
етикетка. Створимо його, записавши:

label_1 = tk.Label()

Зверніть увагу, що всі елементи мають бути створе-

ні до запуску вікна методом mainloop().
Код набуде такого вигляду:

import tkinter as tk

root = tk.Tk()
root.title("First Window")
root.geometry("600x400+500+200")
root.iconbitmap("like.ico")

label_1 = tk.Label()

root.mainloop()

Але якщо виконати такий код, то знову побачимо

пусте вікно. Необхідно наповнити параметри етикетки.

Запам’ятайте, майже всі розглянуті нижче атрибу-

ти є стандартними й характерними для більшості
об’єктів бібліотеки tkinter.

9
Урок 8

Додамо параметр text:

label_1 = tk.Label(text = "Hello")

Та навіть цього не достатньо, щоби вивести новий

об’єкт на екран, адже треба дати команду на його роз-
міщення у вікні, чому зарадить метод pack(). Додамо
його й дістанемо код, котрий одразу й запустимо (див.
вiдео 6 на стор. 11):

import tkinter as tk

root = tk.Tk()
root.title("First Window")
root.geometry("600x400+500+200")
root.iconbitmap("like.ico")

label_1 = tk.Label(text = "Hello")

label_1.pack()

root.mainloop()

Аналогічно до text, є такі основні атрибути:

■■ font – відповідає за шрифт; передаємо кортеж, що
містить у собі від одного до трьох складників (див. вiдео 7):
Перший параметр – рядок із назвою шрифту.
Другий – ціле число, розмір шрифту.
Третій  – тип шрифту (жирний, напівжирний, кур-
сив).

10
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

Вiдео 6

Вiдео 7

■■ bg (від англ. background) – відповідає за колір фону.

Передайте його назву рядком (див. вiдео 8 на стор. 12):

11
Урок 8

Вiдео 8

■■ Змінити колір тексту можна з допомогою атрибу-

та fg (від англ. foreground), у який так само передається
рядок із кольором (вiдео 9):

Вiдео 9

■■ width, height – ширина і висота об’єкта в сим-

волах (див. вiдео 10).
А щоби побачити весь перелік стандартних і спеці-
альних атрибутів, натисніть клавішу Ctrl, не відпускаю-
чи її наведіть курсор на об’єкт та натисніть ліву клавішу
12
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

миші. У такий спосіб можна «провалитися» в модуль, де

й оголошено створення класу об’єкта.

Вiдео 10

■■ Для більш зрозумілої роботи наступних атрибутів,

видалимо атрибути довжини та ширини. На їхньому місці
пропишемо padx, pady, встановивши відповідні значення
в 85 і 50. Саме на таку кількість пікселів відступить текст
від краю об’єкта (вiдео 11):

Вiдео 11

13
Урок 8

■■ Змінимо значення щойно введених атрибутів на

значення 20. Повернемо ширину й висоту разом із їхніми
попередніми значеннями. Пропишемо атрибут anchor,
у який треба передати рядок із першою буквою назви
сторони світу:
"n" (від англ. North – північ) – підніме текст угору;
"s" (від англ. South – південь) – опустить текст до
низу;
"w" (від англ. West – захід) – текст буде розміщено
зліва;
"e" (від англ. East – схід) – розмістить текст справа.
Крім того, ви можете комбінувати сторони між со-
бою. Стандартно цей атрибут має значення "center",
що несе в собі центральне розміщення тексту (вiдео 12):

Вiдео 12

■■ relief – створює рамку навколо об’єкта, яка імітує

рельєфність.
14
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

Передати значення можна як рядок або константи

бібліотеки:

RAISED='raised'
SUNKEN='sunken'
FLAT='flat'
RIDGE='ridge'
GROOVE='groove'
SOLID = 'solid'

Поекспериментуйте та оберіть той, який найбільше

вам подобається.
А відрегулювати ширину цієї рамки допоможе атри-
бут bd, у який передаємо значення в пікселях (вiдео 13):

Вiдео 13

15
Урок 8

■■ Атрибут justify дає змогу вирівняти текст, пере-

давши одне зі значень (вiдео 14):
LEFT='left' – вирівнювання за лівим краєм;
TOP='top' – вирівнювання за верхнім краєм;
RIGHT='right' – вирівнювання за правим краєм;
BOTTOM='bottom' – вирівнювання за нижнім
краєм.

Вiдео 14

Але що робити, якщо маємо не одне вікно? Як

вказати, куди саме потрібно вивести об’єкт? Допо-
може атрибут master, у який передаємо назву вікна
(вiдео 15):
16
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

Вiдео 15

Розробка гри «Бомба»

Час залучити отримані навички та створити гру-
клікер. А під час розроблення познайомимось ще з
кількома об’єктами й методами.
Правила нашої гри досить прості – гравцю треба як
можна частіше натискати на кнопку, щоби бомба не ви-
бухнула. Чим довше протримається гравець, тим більше
балів здобуде.
Як і зазвичай, почнемо розроблення з імпорту біб-
ліотеки:
import tkinter as tk

17
Урок 8

Створимо змінні bomb, score і press_return.

Перша імітуватиме таймер, у другій зберігатиметься
рахунок гравця, третя – триматиме значення True або
False, відповідаючи за початок і кінець гри:

bomb = 100
score = 0
press_return = True

Створимо вікно для гри, додавши:

root = tk.Tk()
root.title("Game")
root.geometry("600x600+500+400")
root.iconbitmap("bomb.ico")

Додамо етикетки з інструкцією гри, таймером бом-

би та рахунком гравця (рис. 2):

Рисунок 2

label = tk.Label(root, text='Press [enter] to

start the game', font=('Comic Sans MS', 12))
label.pack()

18
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

fuse_label = tk.Label(root, text=f'Fuse:

{str(bomb)}', font=('Comic Sans MS', 14))
fuse_label.pack()

score_label = tk.Label(root, text=f'Score:

{str(score)}', font=('Comic Sans MS', 14))
score_label.pack()

А щоби гра була цікавішою, створимо імітацію про-

цесу горіння ґнота бомби. Для цього анімування знадо-
бляться чотири зображення бомби з різною довжиною
ґнота (рис. 3–6).

Рисунки 3–6

19
Урок 8

Для їхнього залучення, кожній із них створимо осіб-

ний об’єкт PhotoImage, записавши:
img_1 = tk.PhotoImage(file="1.gif")
img_2 = tk.PhotoImage(file="2.gif")
img_3 = tk.PhotoImage(file="3.gif")
img_4 = tk.PhotoImage(file="4.gif")

Зверніть увагу, що розширення зображень має

бути .gif, .pgm або .ppm. Але, як ви вже знаєте, їх необ-
хідно розмістити у вікні. Для цього створимо об’єкт-
етикетку, куди як атрибут image передамо об’єкт стар-
тового зображення бомби, ґніт якої найдовший (рис. 7).

Рисунок 7

20
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

Коли таймер буде спливати, зображення змінювати-

меться і гравець бачитиме процес горіння ґнота:
bomb_label = tk.Label(image=img_1)
bomb_label.pack()

Оголосимо функції, що реалізують логіку гри:

def update_display():
pass

def is_alive():
pass

def update_bomb():
pass

def update_score():
pass

def start():
pass

Розглянемо, що будуть реалізовувати функції:

■■ update_display() – оновлює вікно, поміщаючи нові
дані;
■■ is_alive() – перевіряє, чи не закінчилася гра;
■■ update_bomb() – реалізує таймер гри;
■■ update_score() – змінює рахунок гравця;
■■ start() – запускає процес гри.
21
Урок 8

Основа гри майже готова, лишається додати кнопку,

яку має натискати гравець для продовження часу гри:

click_button = tk.Button()

Але кнопка має виконувати дії. Тому перед оголо-

шенням кнопки пропишемо функцію, яка виконувати-
меться під час її натискання:

def click():
global bomb
if is_alive():
bomb += 1

Як видно, поки гра йде, після натискання кнопки до

таймера додається одиниця. Залучити функцію до кноп-
ки можна, прописавши її назву до спеціального атрибу-
та command. Крім того, треба задекорувати клавішу й
розмістити у вікні:

click_button = tk.Button(root, text='Click me',

bg='black', fg='white', width=15,font=('Comic
Sans MS', 14), command=click)
click_button.pack()

За умовою, гравець натискає клавішу Enter, що при-

зводить до запуску гри. Реалізувати такий функціонал
допомагає метод bind() об’єкту вікна, вхідними пара-
метрами для якого слугують рядок із форматуванням

22
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

'<назва клавіші>', що має бути натиснена для ви-

клику функції, та назва цієї функції:

root.bind('<Return>', start)

Останнім рядком, звісно, є сам виклик вікна:

root.mainloop()

Отже, зараз маємо такий код:

import tkinter as tk

bomb = 100
score = 0
press_return = True

root = tk.Tk()
root.title("Game")
root.geometry("600x600+500+400")
root.iconbitmap("bomb.ico")

label = tk.Label(root, text='Press [enter] to

start the game', font=('Comic Sans MS', 12))
label.pack()

fuse_label = tk.Label(root, text=f'Fuse:

{str(bomb)}', font=('Comic Sans MS', 14))
fuse_label.pack()

23
Урок 8

score_label = tk.Label(root, text=f'Score:

{str(score)}', font=('Comic Sans MS', 14))
score_label.pack()

img_1 = tk.PhotoImage(file="1.gif")
img_2 = tk.PhotoImage(file="2.gif")
img_3 = tk.PhotoImage(file="3.gif")
img_4 = tk.PhotoImage(file="4.gif")

bomb_label = tk.Label(image=img_1)
bomb_label.pack()

def update_display():
pass

def is_alive():
pass

def update_bomb():
pass

def update_score():
pass

def start(event):
pass

def click():
pass

24
 Графічний інтерфейс в іграх. Гра-клікер «Бомба»

click_button = tk.Button(root, text='Click me',

bg='black', fg='white', width=15, font=('Comic
Sans MS', 14), command=click)
click_button.pack()

root.bind('<Return>', start)
root.mainloop()

Поглянемо на проміжний результат (вiдео 16):

Вiдео 16

25
Урок 8

Сьогодні ми попрацювали з графічним інтерфейсом

та бібліотекою tkinter. Познайомилися та створили
різноманітні графічні об’єкти, а отримані навички
залучили для розроблення захопливої гри-клікера.

26
Графічний інтерфейс в іграх. Гра-клікер «Бомба»

27
Урок 8
ГРАФІЧНИЙ ІНТЕРФЕЙС
В ІГРАХ. ГРА-КЛІКЕР «БОМБА»

© Комп’ютерна Академiя ШАГ

www.itstep.org

Усі права на фото-, аудіо- і відеотвори, що охороняються авторським правом і

фрагменти яких використані в матеріалі, належать їх законним власникам. Фраг-
менти творів використовуються в ілюстративних цілях в обсязі, виправданому
поставленим завданням, у рамках учбового процесу і в учбових цілях, відповідно
до законодавства про вільне використання твору без згоди його автора (або іншої
особи, яка має авторське право на цей твір). Обсяг і спосіб цитованих творів
відповідає прийнятим нормам, не завдає збитку нормальному використанню
об’єктів авторського права і не обмежує законні інтереси автора і правовласників.
Цитовані фрагменти творів на момент використання не можуть бути замінені аль-
тернативними аналогами, що не охороняються авторським правом, і відповідають
критеріям добросовісного використання і чесного використання.
Усі права захищені. Повне або часткове копіювання матеріалів заборонене.
Узгодження використання творів або їх фрагментів здійснюється з авторами і
правовласниками. Погоджене використання матеріалів можливе тільки якщо
вказано джерело.
Відповідальність за несанкціоноване копіювання і комерційне використання
матеріалів визначається чинним законодавством України.