Что значит преобразовать спрайт

Что такое спрайты и как с ними работать

Ссылка на проект занятия (lesson 9.flowballs.zip): https://github.com/selfedu-rus/pygame

Представьте, что мы делаем игру, в которой множество подвижных объектов, с которым взаимодействует пользователь. Как в этом случае правильно спроектировать программу на Pygame, чтобы эффективно обрабатывать движения и взаимодействия? Для этого была специально создана ветка:

для работы со спрайтами. Вообще в игровом процессе спрайт – это любой подвижный объект. И когда таких объектов много, то класс:

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

Для начала создадим базовый каркас приложения. Он вам уже знаком и выглядит следующим образом:

Давайте теперь добавим сюда подвижный объект в виде падающего сверху шарика. Для этого мы воспользуемся классом Sprite и на его основе создадим новый класс Ball для обработки падающих шариков. Этот класс мы объявим в отдельном файле ball.py, чтобы сохранить модульность нашей программы:

Значит, здесь мы определяем наш собственный класс Ball, наследуя его от базового класса Sprite. В результате, мы расширяем функциональность этого базового класса, определяя в конструкторе два обязательных свойства:

• image – графическое представление спрайта (ссылка на Surface);
• rect – положение и размер спрайта.

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

Отлично, это мы сделали. Теперь в основном модуле подключим этот файл и создадим шар через класс Ball:

После этого в главном цикле реализуем движение шара b1:

И при запуске программы увидим как шар в виде медведя падает вниз. Давайте для красоты добавим еще фон. Сначала загрузим его:

а, затем, в главном цикле будем перерисовывать вместо вызова fill(BLACK):

Получим такой вид игрового процесса:

Далее, смотрите, вот это изменение координат спрайта непосредственно в главном цикле – не лучшая практика. Лучше определить метод update() непосредственно в классе Ball:

А в конструктор добавим параметр speed:

После этого, создаем шарик, указывая три параметра:

и вызываем метод update в главном цикле:

Мы здесь дополнительно передаем высоту окна, чтобы метод update «знал» когда останавливать падение шарика.

Отлично, это мы сделали. Но представим теперь, что у нас одновременно падают несколько шариков. Тогда их нужно сначала создать, например, вот так:

А, затем, в главном цикле перерисовывать:

Группы спрайтов

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

Для создания группы используется класс:

и, далее, с помощью метода add мы добавляем в группу наши спрайты:

Обратите внимание, метод add может добавлять как отдельный спрайт, так и несколько спрайтов. Затем, в главном цикле для прорисовки всей группы достаточно вызвать метод:

Здесь sc – это поверхность, на которой рисуется группа спрайтов. И, далее, с помощью метода update() группы выполняется вызов такого же метода у каждого спрайта:

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

Если графически представить работу группы, то это можно изобразить в виде следующей коллекции спрайтов:

И при вызове метода balls.update(H) группы происходит последовательный вызов этого же метода у спрайтов, принадлежащих этой группе.

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

Это позволит только единожды загружать необходимые изображения, а не каждый раз при создании нового шара. И, далее, определим вспомогательную функцию для создания нового шара:

Смотрите, мы здесь в конструктор передаем немного другие параметры: вместо пути к изображению – ссылку на слой с нарисованным шаром, а последний параметр – ссылка на группу, к которой добавляется шар. Причем, добавление реализуем непосредственно в классе Ball. Так как он унаследован от базового класса Sprite, то у Ball есть метод add(), который позволяет добавлять спрайт в указанную группу. И есть методы kill() и remove(), которые удаляют спрайт из группы:

Мы воспользуемся этим функционалом и перепишем класс Ball в следующем виде:

Смотрите, при создании объекта спрайт сначала добавляется к группе, а когда шар долетает до земли, то удаляется из группы. И так как на объект нет других ссылок, то он автоматически уничтожается сборщиком мусора языка Python.

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

и определим таймер, который каждые 2000 мс (то есть, 2 сек) будет генерировать событие USEREVENT:

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

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

Вот так осуществляется групповая работа со спрайтами в Pygame.

Видео по теме

Что такое Pygame? Каркас приложения, FPS | Pygame #1

Рисование графических примитивов | Pygame #2

Как обрабатывать события от клавиатуры | Pygame #3

Как обрабатывать события от мыши | Pygame #4

Создание поверхностей (Surface) и их анимация. Метод blit | Pygame #5

Класс Rect. Его роль, свойства и методы | Pygame #6

Как рисовать текст различными шрифтами | Pygame #7

Как работать с изображениями. Модули image и transform | Pygame #8

Что такое спрайты и как с ними работать | Pygame #9

Как делать контроль столкновений | Pygame #10

Добавляем звук в игровой процесс. Модули mixer и music | Pygame #11

© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта

Источник

Руководство по спрайтам изображений в CSS

Спрайты — это двумерные изображения, которые состоят из объединения небольших изображений в одно большое с определенными координатами X и Y.

Чтобы отобразить одно изображение из объединенного, вы можете использовать CSS-свойство background-position , определяющее точное положение отображаемого изображения.

Преимущество использования CSS Image Sprite

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

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

Сокращение количества HTTP-запросов оказывает существенное влияние на сокращение времени отклика; это делает веб-страницу более отзывчивой для пользователя.

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

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

Весь процесс создания этого примера объясняется ниже.

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

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

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

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

Как отобразить иконку из Image Sprite

Теперь подробнее. Используя CSS, мы можем отобразить только ту часть изображения, которая нам нужна.

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

Теперь мы должны определить класс для каждого элемента, который мы хотим отобразить. Например, для отображения значка Internet Explorer в виде спрайта изображения будет использоваться код CSS.

Теперь возникает вопрос, как мы получили эти значения пикселей для background-position ? Давайте разберемся. Первое значение — горизонтальное положение, а второе — вертикальное положение фона.

Поскольку верхний левый угол значка Internet Explorer касается левого края, его горизонтальное расстояние от начальной точки, т. е. верхний левый угол спрайта изображения, равен 0 , и, поскольку он расположен на 5-й позиции, его вертикальное расстояние от начального точка спрайта изображения равна 4 x 50px = 200px , потому что высота каждой иконки равна 50px .

Просто поиграйте со значением свойства background-position из следующих примеров, и вы быстро узнаете, как оно работает.

Создание меню навигации с использованием CSS Image Sprite

В предыдущем разделе мы узнали, как отобразить отдельную иконку из спрайта изображения.

Здесь мы будем использовать то же изображение спрайта, чтобы создать ваше меню навигации.

Основная HTML-разметка для навигации

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

Применение CSS на навигации

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

Шаг 1: Сброс структуры списка

По умолчанию неупорядоченные списки HTML отображаются с маркерами. Нам нужно удалить маркеры по умолчанию, установив атрибут list-style-type в значение none . Так же определим несколько свойств типографики для повторяющихся элементов .

Шаг 2. Настройка общих свойств для каждой ссылки

На этом этапе мы установим все общие CSS-свойства, которыми будут обладать ссылки, color , background-image , display , padding и т.д.

Шаг 3: Установка состояния по умолчанию для каждой ссылки

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

Например, иконка Firefox находится в начальной точке, то есть в верхнем левом углу спрайта изображения, поэтому нет необходимости сдвигать фоновое изображение. Следовательно, вертикальное и горизонтальное положение фона в этом случае будет равно 0 . Аналогично, вы можете определить background-position для других иконок внутри спрайта изображения.

Шаг 4: Добавление состояний наведения для ссылок

Добавление состояний наведения имеет тот же принцип, что и добавление вышеуказанных ссылок. Просто переместите их верхний левый угол в начальную точку (то есть в верхний левый угол) спрайта изображения, как мы делали выше. Вы можете просто рассчитать background-position , используя следующую формулу:

Вертикальная позиция в режиме наведения = Вертикальная позиция в нормальном состоянии — 50px

Готово! Вот окончательный код HTML и CSS после объединения всех шагов:

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по свойству opacity в CSS

Руководство по таблицам в CSS

Руководство по свойству margin в CSS

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник

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

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

Современный веб одним из приоритетов ставит скорость и оптимизацию сайтов.

Так одним из методов оптимизации является использование на сайте изображений называемых спрайтами.

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

Спрайт это

Спрайт — это одно изображение, которое объединяет в себе два и более изображений.

Основная идея использование спрайтов — это сократить количество запросов к серверу, тем самым уменьшив время загрузки страницы сайта. А уже при помощи CSS можно вывести любой фрагмент из спрайта в нужном нам месте. При этом размер у объединённого изображения (у спрайта) будет меньше, чем сумма размеров исходных картинок.

Если мы рассмотрим спрайт который я привёл выше в качестве примера, то он состоит из 60-ти иконок. Всего одним запросом спрайт загружается в браузер вместо 60-ти (если загружать каждую иконку по отдельности), а при помощи CSS мы можем вывести любую из иконок входящую в спрайт в нужном нам месте, при чём можем выводит одну и ту же иконку много раз.

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

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

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

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

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

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

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

Обязательные для спрайтов стили CSS :

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

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

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

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

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

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

Получится следующий результат:

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

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

• сразу к имени класса добавим псевдокласс ::before
• бекграундом зададим ссылку на спрайт который выложен выше как примером
• размер я подобрал в консоле браузера, он равен 38px в длину и ширину

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

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

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

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

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

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

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

Получится следующий HTML макет:

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

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

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

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

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

В меню выбираем Исследовать элемент (браузер мазила) или Просмотреть код (в гугл-хром).

В консоле в поле HTML-кода выделяем псевдокласс ::before после чего в поле со стилями видим наш CSS класс отвечающий за вывод координат (background-position). Подбираем координаты — выделяем координату и стрелками вверх/вниз на клавиатуре ищем нашу иконку.

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

Анимация из спрайта

Так же спрайты используют для анимации.

Например возьмём вот такую картинку-спрайт, которая состоит из шести фрагментов

Теперь в HTML вставим div с айдишником marsch

и пропишем следующие CSS стили:

То в результате получим вот такого идущего человечка:

*** Авторизируйтесь чтобы писать комментарии.

Источник