Work with images¶
The pyagme.image module provides methods for loading and saving images. The method load() loads an image from the file system and returns a Surface object. The method convert() optimizes the image format and makes drawing faster:
Download the image bird.png to the same folder where your program resides:
The method get_rect() returns a Rect object from an image. At this point only the size is set and position is placed at (0, 0). We set the center of the Rect to the center of the screen:
To recapitulate, we are working with 3 objects:
- screen is the Surface object representing the application window
- img is the Surface object of the image to display
- rect is the Rect object which is the bounding rectangle of the image
To display the image we fill the screen with a background color (GRAY). Then we blit the image, draw a red rectangle around it and finally update the screen:
Move the image with the mouse¶
At the beginning of the programm we set a boolean variable moving to False. Only when the mouse button is pressed, and when the mouse position is within the image (collidepoint) we set it to True:
When the mouse button is released, we set it to False again:
When the mouse moves, and the flag moving is True, then we move the image by the amount of relative movement (event.rel):
This is the whole code:
Rotate and Scale the image¶
The pygame.transform module provides methods for scaling, rotating and flipping images. As we are going to modify the image img we keep the original image in a variable called img0:
In order to show the image rectangle, we add a green border to the original image:
Then we place the place the image in the center of the screen:
First we define the global variables scale and angle:
We use the R key to increment rotation by 10 degrees and (decrement if the SHIFT key is pressed). The function rotozoom() allows to combine rotation and scaling. We always transform the orignial image (img0). Repeated rotation or scaling of an image would degrade its quality:
We use the S key to increment the scale by 10% (decrease if the SHIFT key is pressed):
As the image is transformed the bounding rectangle changes size. It must be recalulated and placed at the center again:
Reset the image to the original¶
We use the O key to reset the image to its original state:
Flip the image¶
We use the H key to flip the image horizontally:
and the V key to flip the image vertically:
Detect edges with the Laplacian¶
The fonction laplacien(img) allows to detect the outline of the image:
The fonction scale2x(img) doubles the size of a pixel:
Transform the image with the mouse¶
In this section we show how to use the mouse to scale and rotate an image. At the beginning we import the math module:
At the beginning we store the initial mouse position:
When the mouse moves we update the mouse position mouse and calculate the x, y coordinates from the center of the image. We also calculate the center-mouse distance d
The atan2(y, x) math function allows to find the rotation angle. We need to transform radians in degrees. From the distance mouse-center we calculate the scale argument:
To finally draw the transformed image we first fille the whole screen background (GRAY), blit the transformed image, surround it with a red rectangle.
In order to give visual feedback for the mouse action when transforming an image, we
draw a green line between the center of the image and the mouse position,
Создание игр на Python 3 и Pygame: Часть 2
Во второй из пяти частей туториала, посвящённого созданию игр с помощью Python 3 и Pygame, мы рассмотрим класс TextObject , используемый для рендеринга текста на экране. Мы создадим основное окно, в том числе и фоновое изображение, а затем научимся отрисовывать объекты: кирпичи, мяч и ракетку.
Класс TextObject
Класс TextObject предназначен для отображения текста на экране. Можно сделать вывод, что с точки зрения дизайна он должен быть подклассом класса GameObject , потому что тоже является визуальным объектом и его тоже иногда нужно двигать. Но я не хотел вводить глубокую иерархию классов, при которой весь отображаемый Breakout текст оставался на экране неизменным.
Класс TextObject создаёт объект шрифта. Он рендерит текст на отдельную текстовую поверхность, которая затем копируется (рендерится) на основную поверхность. Интересный аспект TextObject заключается в том, что у него нет какого-то фиксированного текста. Он получает функцию text_func() , вызываемую каждый раз, когда он рендерится.
Это позволяет нам обновлять отображение жизней и очков в Breakout, просто создав функцию, возвращающую текущие жизни и очки, а не отслеживать то, какие текстовые объекты отображают очки и жизни и обновлять их текст при каждом их изменении. Это удобный трюк из функционального программирования, и в крупных играх он позволяет поддерживать удобство и аккуратность программы.
Создание основного окна
Игры на Pygame выполняются в окнах. Можно даже сделать так, чтобы они выполнялись в полноэкранном режиме. Сейчас я расскажу, как отобразить пустое окно Pygame. Вы увидите многие элементы, которые мы обсуждали ранее. Сначала вызывается init() Pygame, а затем создаются основная поверхность рисования и таймер.
Затем выполняется основной цикл, который постоянно заполняет экран однотонным серым цветом и вызывает метод таймера tick() с частотой кадров.
Использование фонового изображения
Обычно однотонный цвет фона выглядит не очень интересно. Pygame очень хорошо работает с изображениями. Для Breakout я нашёл любопытную фотографию настоящего космоса, сделанную НАСА. Код очень прост. Сначала он перед основным циклом загружает фоновое изображение с помощью функции pygame.image.load() . Затем вместо того, чтобы заливать экран цветом, он выполняет блиттинг (копирование битов) изображения на экран в позицию (0,0). В результате на экране отображается изображение.
Отрисовка фигур
Pygame может рисовать всё, что угодно. В модуле pygame.draw есть функции для отрисовки следующих фигур:
- прямоугольника (rect)
- многоугольника (polygon)
- круга (circle)
- эллипса (ellipse)
- дуги (arc)
- отрезка (line)
- отрезков (lines)
- сглаженного отрезка (anti-aliased line)
- сглаженных отрезков (anti-aliased lines)
Отрисовка кирпичей
Кирпичи — это просто прямоугольники. В Pygame есть функция pygame.draw.rect() , получающая поверхность, цвет и объект Rect (левую и верхнюю координату, ширину и высоту) и рендерящая прямоугольник. Если дополнительный параметр ширины больше нуля, то он отрисовывает контур. Если ширина равна нулю (значение по умолчанию), то рисует сплошной прямоугольник.
Стоит заметить, что класс Brick является подклассом GameObject и получает все его свойства, но также имеет и цвет, который обрабатывает самостоятельно (потому что могут существовать игровые объекты, имеющие несколько цветов). Поле special_effect мы пока рассматривать не будем.
Отрисовка мяча
Мяч в Breakout — это просто круг. В Pygame есть функция pygame.draw.circle() , получающая цвет, центр, радиус и дополнительный параметр ширины, который по умолчанию равен нулю. Как и в функции pygame.draw.rect() , если ширина равна нулю, то отрисовывается сплошной круг. Ball тоже является подклассом GameObject.
Так как мяч всегда движется (в отличие от кирпичей), он также имеет скорость, которая передаётся для обработки базовому классу GameObject . Класс Ball имеет небольшое отличие — параметры x и y обозначают его центр, а параметры x и y, передаваемые базовому классу GameObject являются верхним левым углом ограничивающего прямоугольника. Чтобы преобразовать центр в верхний левый угол, достаточно вычесть радиус.
Отрисовка ракетки
Ракетка — это ещё один прямоугольник, двигающийся влево и вправо в ответ на нажатия игроком клавиш со стрелками. Это значит, что положение ракетки в разных кадрах может отличаться, но в процессе отрисовки это просто прямоугольник, который должен рендериться в текущей позиции, какой бы она ни была. Вот как выглядит соответствующий код:
Заключение
В этой части мы узнали о классе TextObject и о том, как рендерить текст на экране. Также мы познакомились с тем, как рисовать объекты: кирпичи, мяч и ракетку.
В третьей части мы узнаем, как работает обработка событий и как Pygame позволяет нам перехватывать события и реагировать на них (нажатия клавиш, движение мыши и нажатия кнопок мыши). Также мы рассмотрим такие элементы игрового процесса, как движение мяча, задание его скорости и перемещение ракетки.
Pygame tutorial 2 – loading images
After talking about surfaces in the last post (Pygame tutorial n. 1), we talk now about using images instead of simple colored area. These object we are going to create are surfaces too, the difference is that we can have any images on them and then we can show them on the screen (the main) surface with blit.
How to load an image
How to show the image
Once you created the screen = pygame.display.set_mode((400, 400)) main surface, for example, you can blit on it the image with
(0, 0) is a tuple that is where the image top left corner will be. At 0,0 means that it will be at the top left of the window.
Using a color as background
In case you want a color as background of the window
You will have a blue color. This is good also to clean the window when you run games or animations. This will clear all the window, if you put this in the while loop. We will see this in another post.
The code with the example
This code will let you show an image. If you just call show() the image will be displayed at its original size. If you call it with 1 as parameter (show(1)), the image will ne stretched to fit the size of the screen.
Как вывести изображение в pygame
Для работы с pygame следует инициализировать необходимые модули, проще всего инициализировать все: pygame.init()
Существует несколько вариантов инициализации окна pygame:
Создание рабочей области окна
Создание окна требуемого размера.
Создание окна исходя из размеров фона
Работа с прямоугольниками и текстом
Прямоугольники служат для выбора части поверхностей, для получения размеров областей и др. Конструктор простейшего прямоугольника выглядит так:
У объекта класса Rect есть множество методов, названия говорят за себя:
[‘bottom’, ‘bottomleft’, ‘bottomright’, ‘center’, ‘centerx’, ‘centery’, ‘clamp’, ‘clamp_ip’, ‘clip’, ‘collidedict’, ‘collidedictall’, ‘collidelist’, ‘collidelistall’, ‘collidepoint’, ‘colliderect’, ‘contains’, ‘copy’, ‘fit’, ‘h’, ‘height’, ‘inflate’, ‘inflate_ip’, ‘left’, ‘midbottom’, ‘midleft’, ‘midright’, ‘midtop’, ‘move’, ‘move_ip’, ‘normalize’, ‘right’, ‘size’, ‘top’, ‘topleft’, ‘topright’, ‘union’, ‘union_ip’, ‘unionall’, ‘unionall_ip’, ‘w’, ‘width’, ‘x’, ‘y’]
Из этих атрибутов я выделю centerx и centery:
Прозрачность (Альфа-канал)
Для загрузки изображения из png файла с альфа каналом следует использовать следующую строчку:
Для получения изображения с прозрачным фоном мы редактируем png, удаляем фон, затем сохраняем файл без сохранения цвета прозрачности.
Создание прозрачности для сложных поверхностей, полигонов и прочего
Моё решение было следующим:
Немного меняю исходное изображение для того чтобы чёрный цвет не превратился в прозрачный, затем накладываю чёрную маску на изображение, говорю, что чёрный цвет становится прозрачным.
Выделение части поверхности
Мой стандартный use-case использования части поверхности (subsurface) — это копирование части фона для создания эффектов движения, анимации: