Основы создания игр на Pygame. Модуль 6. Урок 1

1.

Модуль 6. Урок 1.
Основы создания игр на
Pygame
Ссылка на методичку

2.

Модуль 6. Урок 1. Основы создания игр на Pygame
Обсуждение:
Создание игр

3.

Создание собственных игр
Компания ProTeam решила разработать несколько собственных
коммерческих продуктов — интерактивных игр.
Обсуждение
рабочих задач
Рассмотрим одно из будущих технических заданий — ретро-игру
«Арканоид».
Костя,
старший разработчик

4.

Создание собственных игр
Игра «Арканоид»:
Что нужно знать для её
реализации?
Обсуждение
рабочих задач
Одним из будущих
проектов будет игра
«Арканоид».

5.

Создание собственных игр
Игра «Арканоид»:
2. Возможность управлять спрайтом с
помощью клавиатуры.
Такие требования
предъявляются ко многим
играм…
3. Наличие объектов:
Как их реализовать?
➔ спрайтов-монстров;
➔ спрайтов мяча и платформы.
1. Игрок проигрывает, если мяч оказался за
платформой.
Обсуждение
рабочих задач
1. Заливка фона цветом или картинкой.

6.

Создание собственных игр
Игра «Арканоид»:
1. Заливка фона цветом или картинкой.
2. Возможность управлять спрайтом с
помощью клавиатуры.
Загрузка файлов и
работа с ними.
Обработка событий
клавиатуры.
➔ спрайтов-монстров;
➔ спрайтов мяча и платформы.
1. Игрок проигрывает, если мяч оказался за
платформой.
Распознавание
столкновений.
Обсуждение
рабочих задач
3. Наличие объектов:

7.

Создание собственных игр
Игра «Арканоид»:
1. Заливка фона цветом или картинкой.
2. Возможность управлять спрайтом с
помощью клавиатуры.
Загрузка файлов и
работа с ними.
Обработка событий
клавиатуры.
➔ спрайтов-монстров;
➔ спрайтов мяча и платформы.
1. Игрок проигрывает, если мяч оказался за
платформой.
Для столкновений опять
придётся писать
собственные методы?
А ведь почти у всех
объектов разные
размеры!
Обсуждение
рабочих задач
3. Наличие объектов:

8.

Создание собственных игр
Назначение модуля Turtle — работа с графическими объектами. Вспомним
ограничения прошлых проектов:
➔ Объекты-черепашки были одинакового размера.
Как реализовать новые требования к играм?
Обсуждение
рабочих задач
➔ Они не задавались картинками.

9.

Создание собственных игр
Игра «Арканоид»:
1. Заливка фона цветом или картинкой.
3. Наличие объектов:
➔ спрайтов-монстров;
➔ спрайтов мяча и платформы.
1. Игрок проигрывает, если мяч оказался за
платформой.
Для создания игр
существует специальная
библиотека Pygame.
Зная ООП и Pygame мы
справимся со всеми
заказами!
Обсуждение
рабочих задач
2. Возможность управлять спрайтом с
помощью клавиатуры.

10.

Первый заказ: игра «Вопрос-ответ»
Развлекательная игра выдаёт случайные пары вопросов и ответов.
Q — отобразить случайный вопрос.
Обсуждение
рабочих задач
А — отобразить случайный ответ.

11.

Первый заказ: игра «Вопрос-ответ»
Развлекательная игра выдаёт случайные пары вопросов и ответов.
Обсуждение
рабочих задач
Игра выглядит просто, но требует работы
с прямоугольными областями, текстом и
событиями клавиатуры.

12.

Техническое задание
Цель игры — по запросу пользователя отобразить пару вопрос-ответ.
Требования к игре:
1. При запуске игры появляются прямоугольные области с надписями
«Вопрос» и «Ответ».
2. При нажатии на клавишу Q в первом блоке отображается случайный вопрос.
* В базовой версии игры должно быть не меньше 3 формулировок вопросов и
3 ответов.
Обсуждение
рабочих задач
3. При нажатии на клавишу A во втором блоке — случайный ответ.

13.

Цель рабочего дня —
изучить и применить на практике основы создания игр
с помощью pygame.
изучите возможности библиотеки Pygame для создания
игрового цикла;
научитесь обрабатывать события клавиатуры с помощью
Pygame;
запрограммируете первую игру «Вопрос-ответ».
Обсуждение
рабочих задач
Сегодня вы:

14.

Модуль 6. Урок 1. Основы создания игр на Pygame
«Мозговой штурм»:
Создание игр
с помощью pygame

15.

pygame —
это библиотека для создания игр
Раньше мы работали только со стандартной библиотекой Python.
В pygame есть модули с готовыми инструментами для:
Команда
import pygame
Назначение
Подключение всех возможностей
библиотеки PyGame.
«Мозговой
штурм»
➔ обработки внутриигровых событий;
➔ обработки событий внешнего мира;
➔ настройки игровых таймеров;
➔ настройки интерфейса игры и звуковых эффектов
и др.

16.

Создание игр на Pygame
Вы уже знаете некоторые понятия, связанные с играми, например, спрайт,
сцена и игровой цикл.
«Мозговой
штурм»
Покажите спрайты и
игровую сцену на
скриншоте игры.

17.

Создание игр на Pygame
Сцена — это «фон» игры. То, на чём расположены все объекты.
Спрайт — это любой игровой объект, отличный от сцены.
Прямоугольная область
с текстом
Сцена
«Мозговой
штурм»
Текст может быть и
самостоятельным спрайтом

18.

Создание игр на Pygame
Игровой цикл — это цикл, на каждом шаге которого происходит:
«Мозговой
штурм»
➔ анализ и обработка событий;
➔ отрисовка фона и спрайтов;
➔ отсчёт времени.
Что происходит в игровом цикле игры «Вопрос-ответ»?

19.

Создание игр на Pygame
Игровой цикл — это цикл, на каждом шаге которого происходит:
➔ анализ и обработка событий;
➔ отрисовка фона и спрайтов;
➔ отсчёт времени.
Распознавание и обработка событий
клавиатуры
(если необходимо, перерисовка блоков
с текстом).
Отсчёт времени для «переключения»
кадров.
«Мозговой
штурм»
Обновление сцены для отображения
изменений.

20.

1. Создание заготовки с цветным фоном
В Pygame начало отсчёта располагается в левом верхнем углу окна.
Размер окна определяет разработчик.
«Мозговой
штурм»
(0, 0)

21.

1. Создание заготовки с цветным фоном
Запрограммируем заготовку для игры с фоном, залитым цветом.
500
«Мозговой
штурм»
500
Что нужно знать, чтобы
создать такую сцену?

22.

1. Создание заготовки с цветным фоном
Команда
Назначение
Подключение возможности
использовать команды объектов из
Pygame.
pygame.init()
Создать окно размера:
(ширина, длина).
window.fill(<цвет>)
Залить фон указанным цветом.
«Мозговой
штурм»
window = pygame.display.set_mode((500, 500))
Как задать нужный цвет?

23.

Цветовая палитра RGB (red, green, blue)
Можно использовать цветовую палитру RGB.
Цвета палитры получаются смешением красного, зелёного и синего цветов. Отсутствие
цвета задаётся чёрным цветом.
Нет ни одного из
трёх базовых
цветов — чёрный
цвет.
Ссылка на RGB-калькулятор цветов
«Мозговой
штурм»
Максимальная
насыщенность трёх
базовых цветов —
белый цвет.

24.

Цветовая палитра RGB (red, green, blue)
«Мозговой
штурм»
Пример: красный цвет — (255, 0, 0).
Ссылка на RGB-калькулятор цветов

25.

1. Создание заготовки с цветным фоном
Простейшая заготовка игры с отображением сцены без спрайтов:
import pygame
pygame.init()
back = (255, 255, 255)
mw = pygame.display.set_mode((500, 500))
Если создать и запустить такую программу, то она запустится и
сразу завершит работу! Почему?
«Мозговой
штурм»
mw.fill(back)

26.

1. Создание заготовки с цветным фоном
Простейшая заготовка игры с отображением сцены без спрайтов:
import pygame
pygame.init()
back = (255, 255, 255)
mw = pygame.display.set_mode((500, 500))
В программе отсутствует игровой цикл!
Игра запускается на миг и тут же завершается.
Что нужно добавить, чтобы игра работала постоянно?
«Мозговой
штурм»
mw.fill(back)

27.

1. Создание заготовки с цветным фоном
Простейшая заготовка игры с отображением сцены без спрайтов:
Отображение цветного фона
Игра
продолжается?
Нет
Да
Нет
Нажата кнопка
«Завершить работу»?
Да
Завершить работу
программы
«Мозговой
штурм»
Обновить сцену

28.

1. Создание заготовки с цветным фоном
Примечание. Цвет можно задать с помощью палитры RGB.
Назначение
window = pygame.display.set_mode((500, 500))
Создать окно размера:
(ширина, длина).
window.fill(<цвет>)
Залить фон указанным цветом.
pygame.display.update()
Обновить наполнение окна игры.
clock = pygame.time.Clock()
Создать игровой таймер.
clock.tick(40)
Установить обновление сцены с
частотой ~40 кадров/сек.
«Мозговой
штурм»
Команда

29.

1. Создание заготовки с фоном
Простейшая заготовка игры с отображением сцены без спрайтов:
Подключение модулей Pygame
Создание объекта-сцены
Заливка сцены цветом
Фон может быть белым
Игровой цикл:
Установить частоту кадров ~40 кадров/сек
Обновление сцены
(следующий кадр игрового цикла)
«Мозговой
штурм»
Создание игрового таймера

30.

2. Создание и размещение спрайтов
Подходить к созданию спрайтов можно по-разному.
В Pygame есть инструменты для работы с текстом и прямоугольными
областями. Можно ли из них «собрать» нужный спрайт?
«Мозговой
штурм»
Пусть в игре «Вопрос-ответ» спрайт — это прямоугольник с надписью.

31.

2. Создание и размещение спрайтов
Подходить к созданию спрайтов можно по-разному.
Пусть в игре «Вопрос-ответ» спрайт — это прямоугольник с надписью.
Да, весь функционал можно «собрать» в собственном классе TextArea.
«Мозговой
штурм»
Экземпляр класса TextArea

32.

2. Создание и размещение спрайтов
Команды для работы с прямоугольными областями Rect.
pygame.init()
rect = pygame.Rect(x, y, width, height)
Назначение
Подключение возможности
использовать команды объектов из
Pygame.
Создать прямоугольник в точке (х, y)
ширины width и высоты height.
(x, y) — левый верхний угол фигуры.
pygame.draw.rect(mw, fill_color, rect)
Нарисовать в окне mw
прямоугольник rect и залить
цветом fill_color.
«Мозговой
штурм»
Команда

33.

2. Создание и размещение спрайтов
Команды для работы с текстом.
pygame.init()
font1 = pygame.font.Font(None, 70)
Назначение
Подключение возможности
использовать команды объектов из
Pygame.
Установить шрифт / Создание объекта
Font с параметрами: шрифт — по
умолчанию, кегль — 70.
question = font1.render(
text, True, (255, 215, 0)
)
Создать вопрос с текстом text,
нарисованный шрифтом font1, цветом
(255, 215, 0).
mw.blit(question, (x, y))
Отобразить в окне mw текст text в точке
(x, y).
«Мозговой
штурм»
Команда

34.

Класс TextArea
Класс для спрайта-вопроса и спрайта-ответа:
Создать прямоугольник в точке
(x,y) нужной ширины и высоты
Конструктор
Залить прямоугольник
определённым цветом
«Установить текст»
(текст и его графический вид —
новые поля)
Методы
«Нарисовать
прямоугольник с текстом»
(они уже есть в полях класса)
«Мозговой
штурм»
Класс TextArea

35.

Класс TextArea
class TextArea():
Можно указать значения параметров по умолчанию
def __init__(self, x=0, y=0, width=10, height=10, color=None):
self.rect = pygame.Rect(x, y, width, height)
self.fill_color = color
def set_text(self, text, fsize=12, text_color=BLACK):
self.text = text
def draw(self, shift_x=0, shift_y=0):
pygame.draw.rect(mw, self.fill_color, self.rect)
mw.blit(self.image, (self.rect.x + shift_x, self.rect.y + shift_y))
«Мозговой
штурм»
self.image = pygame.font.Font(None, fsize).render(text, True, text_color)

36.

Класс TextArea
class TextArea():
def __init__(self, x=0, y=0, width=10, height=10, color=None):
self.rect = pygame.Rect(x, y, width, height)
self.fill_color = color
def set_text(self, text, fsize=12, text_color=BLACK):
self.text = text
Можно сразу задать шрифт...
...и отрисовать им нужный текст
def draw(self, shift_x=0, shift_y=0):
pygame.draw.rect(mw, self.fill_color, self.rect)
mw.blit(self.image, (self.rect.x + shift_x, self.rect.y + shift_y))
«Мозговой
штурм»
self.image = pygame.font.Font(None, fsize).render(text, True, text_color)

37.

Класс TextArea
class TextArea():
def __init__(self, x=0, y=0, width=10, height=10, color=None):
self.rect = pygame.Rect(x, y, width, height)
self.fill_color = color
def set_text(self, text, fsize=12, text_color=BLACK):
self.text = text
def draw(self, shift_x=0, shift_y=0):
Координаты прямоугольника уже
известны
pygame.draw.rect(mw, self.fill_color, self.rect)
mw.blit(self.image, (self.rect.x + shift_x, self.rect.y + shift_y))
Текст отображаем по координатам прямоугольника
с небольшим сдвигом.
«Мозговой
штурм»
self.image = pygame.font.Font(None, fsize).render(text, True, text_color)

38.

Ваши задачи:
1. Создать заготовку игры со сценой, залитой цветом, и
игровым циклом.
2. Создать класс для спрайтов-прямоугольников с
надписями.
«Мозговой
штурм»
Если останется время, создай два спрайта для вопроса и
ответа и размести их на сцене!

39.

Модуль 6. Урок 1. Основы создания игр на Pygame
Платформа:
Pygame:
Вопрос-ответ

40.

Выполните задания на платформе
«Pygame: Вопрос-ответ», задача 1
Работаем на
платформе
learn.algoritmika.org

41.

Модуль 6. Урок 1. Основы создания игр на Pygame
«Мозговой штурм»:
Обработка событий
клавиатуры

42.

Обработка событий клавиатуры
Экземпляры класса TextArea управляются с клавиатуры.
По техническому заданию:
1. При нажатии на клавишу Q в первом блоке отображается случайный
вопрос.
Раньше обработка событий реализовывалась через
методы класса Screen.
В Pygame есть свои методы обработки нажатий на
клавиши.
«Мозговой
штурм»
2. При нажатии на клавишу A во втором блоке — случайный ответ.

43.

Обработка событий клавиатуры
Рассмотрим команды для обработки событий клавиатуры.
Команда
Назначение
pygame.event.get()
Набор событий, происходящих на
данном кадре цикла.
event.type / event.key
Тип события / Название события (имеют
выделенные названия).
KEYDOWN — «клавиша опущена».
KEYUP — «клавиша поднята» (не нажата).
«Мозговой
штурм»
Примеры типов событий:

44.

Обработка событий клавиатуры
Рассмотрим команды для обработки событий клавиатуры.
Назначение
pygame.event.get()
Набор событий, происходящих на
данном кадре цикла.
event.type / event.key
Тип события / Название события (имеют
выделенные названия).
for event in pygame.event.get():
if event.type == pygame.KEYDOWN:
if event.key == pygame.K_q:
Действие
«Если среди текущих событий
есть событие с опущенной
клавишей и эта клавиша — Q, то
выполнить действие».
«Мозговой
штурм»
Команда

45.

Случайные вопросы и ответы
По условию при нажатии на клавишу Q должен отображаться случайный
вопрос, а при нажатии на A — случайный ответ.
1. Как хранить формулировки вопросов и ответов?
«Мозговой
штурм»
2. Как выбирать и отображать случайную формулировку?

46.

Случайные вопросы и ответы
Возможное решение проблемы для блока вопросов:
➔ При нажатии на Q сгенерировать случайное число от 1 до 3:
◆ если выпало число 1, установить в блоке формулировку 1;
◆ если выпало 2 — формулировку 2;
◆ если выпало 3 — формулировку 3.
«Мозговой
штурм»
➔ Отрисовать заново блок с изменённым вопросом.
Решение для блока ответов придумай самостоятельно.

47.

Схема игры «Вопрос-ответ»
Подключение модулей Pygame
Создание сцены нужного цвета
Создание игрового таймера
Описание класса TextArea
Создание блоков для вопросов и ответов
Обработка событий клавиатуры:
смена надписей при нажатии на Q и A.
Установить частоту кадров ~40 кадров/сек
Обновление сцены
(следующий кадр игрового цикла)
«Мозговой
штурм»
Игровой цикл:

48.

Ваши задачи:
➔ Дополните игровой цикл обработкой нажатий на Q
и A.
➔ Введите в игру не меньше 3 формулировок
вопросов и ответов.
«Мозговой
штурм»
➔ Запустите и протестируйте игру.

49.

Модуль 6. Урок 1. Основы создания игр на Pygame
Платформа:
Pygame:
Вопрос-ответ

50.

Выполните задания на платформе
«Pygame: Вопрос-ответ», задача 2
Работаем на
платформе
learn.algoritmika.org

51.

Модуль 6. Урок 1. Основы создания игр на Pygame
Завершение
рабочего дня

52.

Для завершения пройдите техническое
интервью:
1. Какая библиотека содержит инструменты для создания игр?
Какие функции вы запомнили?
2. Как создать игру? Что лежит в основе любой игры?
Подведение итогов
рабочего дня
3. Как обработать нажатие на клавишу?
Костя,
Алёна,
старший разработчик
менеджер проектов

53.

Отличная работа!
Дорогие коллеги!
Сегодня вы запрограммировали первую игру на новой
библиотеке Pygame.
Поделитесь с коллегами:
2. Что получилось не так, как хотелось?
3. Что нужно сделать, чтобы в следующий раз избежать
неудачи?
Подведение итогов
рабочего дня
1. Что у вас получилось лучше всего?