Как писать игры на Python с Pygame

Что такое спрайт?

Спрайт — это элемент компьютерной графики, который представляет объект на экране, который может двигаться. В 2D-игре все, что вы видите на экране, — это спрайты. Вы можете анимировать спрайты, заставлять их взаимодействовать друг с другом или передавать управление игроку.

Для загрузки и рендеринга спрайтов в этой игре их необходимо добавить в разделы «Обновление» и «Отображение» игрового цикла. Нетрудно представить, что если в игре много спрайтов, цикл быстро станет большим и запутанным. В Pygame есть решение этой проблемы: группировка спрайтов.

Набор спрайтов — это набор спрайтов, которые могут отображаться одновременно. Вот как создать группу спрайтов в игре:

часы = pygame.time.Clock () all_sprites = pygame.sprite.Group()

Теперь эту возможность можно использовать, добавив в цикл всю группу:

# Обновить all_sprites.update () # Отрендерить screen.fill (ЧЕРНЫЙ) all_sprites.draw (screen)

Теперь при создании каждого спрайта главное, чтобы он был добавлен в группу all_sprites. Этот спрайт будет автоматически нарисован на экране и обновлен в цикле.

Создание спрайта

Можно переходить к созданию первого спрайта. В Pygame все спрайты являются объектами. Если вы не работали с этим типом данных в Python, сначала вам просто нужно знать, что это удобный способ сгруппировать данные и код в одну сущность. Поначалу это может сбивать с толку, но спрайты Pygame — отличная возможность попрактиковаться в работе с объектами и понять, как они работают.

Начнем с определения нового спрайта:

classPlayer (pygame.sprite.Sprite):

класс сообщает Python, что нужно определить новый объект, который будет спрайтом игрока. Его тип — pygame.sprite.Sprite. Это означает, что он будет основан на классе Sprite по умолчанию в Pygame.

Первое, что вам нужно в определении класса, — это специальная функция __init __ (), которая включает код, который будет выполняться при создании нового объекта этого типа. Кроме того, каждый спрайт в Pygame должен иметь два свойства: изображение и прямоугольник.

classPlayer (pygame.sprite.Sprite): def__init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50,50)) self.image.fill (GREEN) self .rect = self.image.get_rect()

Первая строка Pygame.sprite.Sprite .__ init __ (self) требуется в Pygame — запускает встроенный инициализатор класса Sprite. Далее вам нужно определить свойство изображения. А пока сделайте квадрат 50×50 и залейте его ЗЕЛЕНЫМ цветом. Чуть позже вы узнаете, как сделать изображение спрайта красивее с помощью, например, персонажа или космического корабля, а пока достаточно сплошного квадрата.

Далее нам нужно определить прямоугольник спрайта. Это сокращение от прямоугольника. Прямоугольники используются в Pygame для отслеживания координат объекта. Команда get_rect () оценивает изображение изображения и вычисляет прямоугольник, окружающий его.

rect можно использовать для размещения спрайта где угодно. Начнем с создания центрированного спрайта:

classPlayer (pygame.sprite.Sprite): def__init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50,50)) self.image.fill (GREEN) self .rect = self.image.get_rect () self.rect.center = (ШИРИНА / 2, ВЫСОТА / 2)

Теперь, после определения спрайта Player, вам необходимо отрендерить (создать) его, инициализировав экземпляр класса Player. Также нужно добавить спрайт в группу all_sprites.

all_sprites = pygame.sprite.Group () player = Player () all_sprites.add (игрок)

Теперь, если вы запустите программу, в центре окна появится зеленый квадрат. Увеличьте значения WIDTH и HEIGHT в настройках программы, чтобы освободить достаточно места для перехода спрайта к следующему шагу.

Текстуры

CC0textures — 529 PBR-реалистичных текстур, которые можно использовать где угодно и как угодно без ссылок на авторов. Без регистрации. На всякий случай: PBR (Physically-Based Rendering) — это физически правильный рендеринг. Варианты разрешения текстур: 2К, 4К, 8К. Вы также можете скачать исходники в формате .sbsar — для редактирования в программе Substance Designer.

TextureLibt — это коллекция из более чем 6500 текстур для личного и коммерческого использования. Все это работа фотографа. Он вас немного просит: не перепродавать его материалы и по возможности при использовании текстур указывать авторство.

Текстуры — это большой набор текстур разного, но в среднем низкого разрешения (около 1000-1300 пикселей в ширину). Условия: вы можете использовать его в платной игре, но вы не можете продавать сами текстуры (даже после редактирования) и выдавать их за свои собственные.

Как работают спрайты

Спрайты работают напрямую через CSS.

Чтобы отобразить изображение из спрайта, вам необходимо установить элемент в классе HTML и стилизовать этот класс в CSS.

CSS-стили, необходимые для спрайтов :

background: url () — установить путь к изображению (спрайту)

background-position — координаты фрагмента, отображаемого спрайтом

width и height — устанавливает размер (ширину и высоту) отображаемого фрагмента

Пример вывода иконок из спрайта

Я возьму спрайт, который был выше в примере, и сделаю из него меню. Чтобы не зацикливаться на шестидесяти пунктах меню, я возьму пять пунктов, значки которых будут происходить из разных частей спрайта.

Итак, давайте создадим меню со следующим HTML:

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

Вы получите следующий результат:

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

Теперь давайте добавим класс к каждому из элементов. В примере я специально назову класс длинным именем demoSpIcon, чтобы в основных стилях сайта такое имя у меня никогда не выходило, вы можете называть классы как хотите:

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

Для данного класса demoSpIcon мы пишем стили CSS, где:

• немедленно добавьте :: перед псевдоклассом к имени класса
• в качестве фона установите ссылку на спрайт, который выложен выше в качестве примера
• я выбрал размер в консоли браузера, это 38 пикселей в длину и ширину

Регистрируем стили:

.demoSpIcon :: перед {содержанием: »; отображение: блок в линию; ширина: 38 пикселей; высота: 38 пикселей; фон: url (https://inter-net.pro/images/css/sprajt-demo.jpg); вертикальное выравнивание: среднее; }

Получаем результат:

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

Как видите, рядом с элементами появился значок, но все они имеют один и не соответствуют названиям элементов меню.

Дело в том, что из спрайта был взят фрагмент с нулевыми координатами и тогда отображалась первая иконка вверху.

Поскольку все значки в наборе имеют одинаковый размер в спрайте, мы прописали стили через CSS для класса demoSpIcon, который будет повторяться для каждого значка.

Теперь, разделенные пробелом, мы добавляем к каждому элементу класс с индивидуальным именем, координаты которого мы устанавливаем на спрайте:

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

и добавьте стили с соответствующими координатами значка:

.demoSpIcon :: перед {содержанием: »; отображение: блок в линию; ширина: 38 пикселей; высота: 38 пикселей; фон: url (https://inter-net.pro/images/css/sprajt-demo.jpg); вертикальное выравнивание: среднее; } .sprajtGoogle :: before {background-position: 0px -112px;} .sprajtWordpress :: before {background-position: -41px -38px;} .sprajtInstagramm :: before {background-position: -328px -38px;} .sprajtYoutube :: before {background-position: -246px 0px} .sprajtFotogallery :: before {background-position: -451px -148px;}

Результат

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

Как видите, необходимые значки из спрайта отображаются рядом с элементами.

Тогда мы сможем делать то, что хотим. Например, чтобы сделать вертикальное меню горизонтальным, мы добавим класс Horizont к тегу ul и добавим стили в CSS.

В результате получится следующий HTML-макет:

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

И стили CSS теперь будут выглядеть так:

.horizont li {дисплей: встроенный блок; граница: сплошная 1px # 888; отступ: 2px 10px 2px 2px; радиус границы: 4 пикселя; курсор: указатель; } .horizont li: hover {background: # 3e5d75; цвет: #fff; } .demoSpIcon :: before {content: »; отображение: блок в линию; ширина: 38 пикселей; высота: 38 пикселей; фон: url (https://inter-net.pro/images/css/sprajt-demo.jpg); вертикальное выравнивание: среднее; } .sprajtGoogle :: before {background-position: 0px -112px;} .sprajtWordpress :: before {background-position: -41px -38px;} .sprajtInstagramm :: before {background-position: -328px -38px;} .sprajtYoutube :: before {background-position: -246px 0px;} .sprajtFotogallery :: before {background-position: -451px -148px;}

Результат:

• Google
• WordPress
• Instagram
• YouTube
• Фотогалерея

Как видите, у нас есть горизонтальное меню с иконками.

Единственное, чего я пропустил, это ссылки на пункты меню. Я не делал их, чтобы они не мешали. Чтобы добавить ссылки, давайте перерисуем пункты меню следующим образом:

• Google

Как заставить спрайт двигаться?

В игровом цикле вы можете использовать функцию all_sprites.update (), которая выполняет функцию update () всех спрайтов. Чтобы заставить спрайт двигаться, вам нужно установить правила, по которым он будет обновляться.

class Player (pygame.sprite.Sprite): def __init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50, 50)) self.image.fill (ЗЕЛЕНЫЙ) self.rect = self.image.get_rect () self.rect.center = (WIDTH / 2, HEIGHT / 2) def update (self): self.rect.x + = 5

Это означает, что с каждым игровым циклом координата x спрайта будет изменяться на 5 пикселей вверх. Теперь попробуем запустить приложение, чтобы проверить, как оно прячется за экран, доходя до правой стороны.

Мы видим, что спрайт достигает правой стороны и исчезает. Точнее, он оказывается вне досягаемости. Чтобы исправить это, вам нужно заставить спрайт двигаться по кругу. Достигнув правой части экрана, он просто перемещается влево. В основном это делается с помощью элемента управления rect спрайта.

Проще говоря, если левая сторона прямоугольника исчезнет с экрана, вам просто нужно установить значение правой границы на 0.

class Player (pygame.sprite.Sprite): def __init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50, 50)) self.image.fill (ЗЕЛЕНЫЙ) self.rect = self.image.get_rect () self.rect.center = (WIDTH / 2, HEIGHT / 2) def update (self): self.rect.x + = 5, если self.rect.left> WIDTH: self.rect .right = 0

После этого вы увидите, что спрайт начинает двигаться по кругу.

В основном мы выполнили основную задачу, которую ставили перед собой для достижения целей этого урока. Теперь вам просто нужно попрактиковаться в том, как изменять координаты объектов спрайта, перемещать их. Важно помнить, что все элементы, вставленные в методы update (), будут в каждом кадре в игре.

Какое упражнение приходит вам на ум, чтобы закрепить эти знания? Например, попробуйте научить спрайт двигаться не слева направо, как в нашем примере, а вертикально. Или вы можете толкнуть его стенами. Знаний, полученных на этом уроке, должно быть достаточно для достижения одной из этих целей.

Вид спрайтов

Теперь у вас есть базовое представление о том, что такое спрайты для игр, но этого недостаточно, чтобы применить их на практике. Вы должны понимать, что они собой представляют и как их применять при создании игр. Если вы собираетесь использовать спрайты, вам необходимо загрузить их на свой компьютер. В большинстве случаев они будут выглядеть как большой или даже огромный графический файл, в котором десятки или даже сотни маленьких изображений будут размещены на прозрачном фоне. Следовательно, вы можете разрезать этот большой файл на маленькие, чтобы иметь прямой доступ к своим спрайтам. Они могут вам не понадобиться, и вы можете их обрезать, поэтому этот метод намного удобнее, чем загрузка десятков или сотен отдельных изображений. Просто выберите большой файл, отметьте область, и ваш спрайт готов.

Координаты спрайта

Координаты спрайта выбираются через консоль браузера. Для этого наведите курсор мыши на пункт меню, в котором нужно определить координаты, и нажмите правую кнопку мыши.

В меню выберите Element Explorer (Muff Browser) или Просмотреть код (в Google Chrome).

В консоли в поле HTML-кода выберите :: перед псевдоклассом, затем в стилизованном поле мы видим наш класс CSS, отвечающий за отображение координат (положение фона). Выбираем координаты — выбираем координату и с помощью стрелок вверх / вниз на клавиатуре ищем нашу иконку.

Обратите внимание, что для спрайтов принято брать минусовые значения координат. Найдя координаты, скопируйте и вставьте их в CSS

Как создать спрайт?

Теперь вы можете приступить к созданию спрайта. В рассматриваемой нами библиотеке все они являются объектами, потому что Python — объектно-ориентированный язык программирования. Если вы никогда раньше не работали с этим типом данных, то просто поймите, что с помощью объектов удобно группировать объекты и код во что-то уникальное.

Поначалу это может сбивать с толку, но через некоторое время станет ясно, насколько проста логика объектов и как они облегчают жизнь. А Pygame — отличный способ попрактиковаться в объектно-ориентированном программировании.

Что касается спрайтов, то они, как и любой другой объект, обладают всеми характеристиками: наследованием, инкапсуляцией, полиморфизмом. Но об этом стоит поговорить отдельно.

Сначала попробуем определить новый спрайт.

класс игрока (pygame.sprite.Sprite):

Класс сообщает Python, что нужно определить спрайт игрока, который будет действовать как новый объект. Его тип — pygame.sprite.Sprite. Это означает, что он основан на Sprite по умолчанию в Pygame.

При определении класса, прежде всего, вам понадобится специальная функция __init __ (), которая включает инструкции, которые интерпретатор Python будет выполнять при генерации такого объекта. Кроме того, каждый спрайт в Pygame должен иметь два свойства: изображение и прямоугольник.

class Player (pygame.sprite.Sprite): def __init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50, 50)) self.image.fill (ЗЕЛЕНЫЙ) self.rect = self.image.get_rect()

Первая строка Pygame.sprite.Sprite .__ init __ (self) обязательна в Pygame — она ​​включает встроенный инициализатор для класса Sprite. Затем вам нужно установить свойство image. А пока сделайте квадрат 50×50 и залейте его зеленым (то есть зеленым). Чуть позже вы поймете, как изменить внешний вид спрайта с помощью, например, человека или космического корабля, а пока достаточно квадрата.

Итак, вам нужно установить прямоугольник спрайта. Это означает прямоугольник. Они используются в Pygame для понимания координат, в которых расположены определенные объекты. Оператор get_rect () оценивает изображение и вычисляет окружающий прямоугольник.

rect может использоваться для указания любой позиции спрайта, доступной разработчику. Начнем с создания центрированного спрайта:

class Player (pygame.sprite.Sprite): def __init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50, 50)) self.image.fill (ЗЕЛЕНЫЙ) self.rect = self.image.get_rect () self.rect.center = (ШИРИНА / 2, ВЫСОТА / 2

Теперь, когда мы определили проигрыватель спрайтов, нам нужно его создать. Для этого инициализируется экземпляр класса с таким же именем. Также обязательно добавить спрайт в группу с именем all_sprites.

all_sprites = pygame.sprite.Group () player = Player () all_sprites.add (игрок)

Теперь при запуске приложения мы увидим зеленый квадрат в центре. Изменив значения WIDTH и HEIGHT в настройках приложения, вы можете предоставить достаточно места для перемещения этого спрайта на следующем шаге.

3D-графика

Трехмерный контент — одна из уязвимостей в проекте начинающего создателя игр. Нам нужно много хороших вещей, но бюджета нет или его недостаточно. Сейчас я расскажу, где найти качественные шаблоны, в том числе анимированные или полностью готовые к анимации.

Речь идет о бесплатных ресурсах для игр, поэтому в основном мы сосредоточимся на Blender и его сообществе.

BlendSwap

Этот портал — моя первая остановка в поисках пригодного для использования 3D. Здесь собраны всевозможные модели: персонажи, интерьеры, архитектурные сооружения, автомобили, оружие, одежда, еда, готовые сцены и пейзажи. Плюс низкополигональные сетки, риги для скелетной анимации, текстуры и материалы, эффекты на основе частиц, предустановки узлов для Blender, настройки стиля рендеринга, скрипт Python.

Все ресурсы находятся под лицензией Creative Commons. Кроме того, многие энтузиасты выбирают CC0, с которым полностью отказываются от авторских прав.

У сайта есть свои недостатки: с бесплатной учетной записью вы можете загружать не более 20 шаблонов в месяц. Поэтому лучше собрать все понравившееся в одну коллекцию. Один генерируется автоматически — это история ваших лайков. Вторую заполняете сами по любому принципу. Вы можете сосредоточиться на тематике работы или конкретной лицензии.

Если аккаунт не премиум-класса, вам нужно ограничиться двумя коллекциями или добавить все в закладки в браузере.

Только не откладывайте загрузку. После долгого отсутствия на сайте я однажды обнаружил, что мои коллекции опустели из-за неисправности или запланированных административных действий. Из общего списка пустых пользовательских коллекций на сайте я понял, что это огромное явление.

Несколько интересных аккаунтов BlendSwap:

• izuzf: много оружия разных типов и разных эпох, персонажей, в том числе low poly.
• Дарен — персонажи, в том числе полностью оснащенные и лицензированные CC0. Например, здесь.
• вкусная рыба — 3 набора ролевых игр в мультяшном стиле и украшений, а также оружие. Лицензия — CC0.
• Мутте — монстры, зомби, прочие враги и военная техника.

• RedFrost — 47 пресетов Blender Game Engine под лицензией CC0.
• Коллекция JerryJury — 1000 роскошных моделей, с большинством из которых можно делать все, что угодно. Предметы обихода, снаряжение, оружие, боевые роботы, эффекты для Blender.
• Коллекция papasmrfe — много симпатичных персонажей.

Другие сайты с 3D

ShareCG — это сервис, основанный в 2007 году, где любители и профессионалы компьютерной графики загружают свой контент. Помимо бесплатных 3D-моделей, текстур и материалов, есть стоковые фотографии, учебные пособия, скрипты, программы и плагины для CG-творчества, музыки.

Thingverse — это сообщество энтузиастов 3D-печати, где вы можете найти оригинальные модели с лицензиями Creative Commons.

Движение спрайта

Игровой цикл содержит функцию all_sprites.update (). Это означает, что для каждого спрайта в группе Pygame ищет функцию update () и выполняет ее. Чтобы спрайт двигался, вам необходимо определить правила его обновления:

classPlayer (pygame.sprite.Sprite): def__init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50,50)) self.image.fill (GREEN) self .rect = self.image.get_rect () self.rect.center = (WIDTH / 2, HEIGHT / 2) defupdate (self): self.rect.x + = 5

Это означает, что с каждым игровым циклом координата x спрайта будет увеличиваться на 5 пикселей. Запустите программу, чтобы увидеть, как она прячется от экрана, доходя до правой стороны.

Вы можете решить эту проблему, заставив спрайт двигаться по кругу: когда он окажется в правой части экрана, перетащите его влево. Это легко сделать с помощью элемента управления rect спрайта:

Итак, если левая сторона прямоугольника исчезнет с экрана, установите правую границу на 0:

classPlayer (pygame.sprite.Sprite): def__init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50,50)) self.image.fill (GREEN) self .rect = self.image.get_rect () self.rect.center = (WIDTH / 2, HEIGHT / 2) defupdate (self): self.rect.x + = 5if self.rect.left> WIDTH: self.rect x + = 5 if self.rect.left> WIDTH: self.rect right = 0

Теперь вы можете увидеть, как спрайт движется по кругу.

это все. Исследуйте и экспериментируйте, но помните, что все, что вы добавляете в метод update (), будет происходить каждый кадр. Попробуйте научить спрайт двигаться сверху вниз (изменяя координату y) или отталкивая его от стен (изменяя направление, когда он достигает края).

Использование спрайтов

Я думаю, все понимают, что веб-страница, содержащая много изображений, будет долго загружаться, генерируя много запросов к серверу. Использование спрайтов снижает количество запросов к серверу, следовательно, сокращается время загрузки страниц сайта и сокращается трафик, потребляемый пользователем.

Спрайты можно использовать в самых разных местах, но наиболее распространены случаи, когда значки для пунктов меню, различных кнопок и социальных сетей отображаются через спрайт. Кроме того, спрайты можно использовать в анимации, играх и во многих других местах.

Код урока:

# Модель Pygame — скелет для нового проекта Pygame import pygame import random WIDTH = 800 HEIGHT = 650 FPS = 30 # Установить цвета БЕЛЫЙ = (255,255,255) ЧЕРНЫЙ = (0,0,0) КРАСНЫЙ = (255,0,0) ЗЕЛЕНЫЙ = (0,255,0) СИНИЙ = (0,0,255) classPlayer (pygame.sprite.Sprite): def__init __ (self): pygame.sprite.Sprite .__ init __ (self) self.image = pygame.Surface ((50 , 50)) self .image.fill (ЗЕЛЕНЫЙ) self.rect = self.image.get_rect () self.rect.center = (WIDTH / 2, HEIGHT / 2) defupdate (self): self.rect.x + = 5if self.rect.left> WIDTH: self.rect.right = 0 # Создать игру и окно pygame.init () pygame.mixer.init () screen = pygame.display.set_mode ((WIDTH, HEIGHT)) pygame. Display .set_caption («Моя игра») clock = pygame.time.Clock () all_sprites = pygame.sprite.Group () player = Player () all_sprites.add (player) # Игровой цикл запущен = Tru: # Держите цикл в правильном состоянии тактовая частота clock.tick (FPS) # Ввод процесса (события) для события в pygame.event.get (): # contr после закрытия окна if event.type == pygame.QUIT: running = False # Обновить all_sprites.up с помощью te () # Рендеринг screen.fill (ЧЕРНЫЙ) all_sprites.draw (screen) # После рендеринга всего переверните его поверх экрана pygame.display .flip () pygame.quit()