Как сделать свой спрайт

Добавил пользователь Евгений Кузнецов
Обновлено: 04.10.2024

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

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

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

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

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

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

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

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

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

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

Первое, что нужно в определении class — специальная функция __init__() , включающая код, который будет запущен при создании нового объекта этого типа. Также у каждого спрайта в Pygame должно быть два свойства: image и rect .

Первая строка, Pygame.sprite.Sprite.__init__(self) требуется в Pygame — она запускает инициализатор встроенных классов Sprite . Далее необходимо определить свойство image . Сейчас просто создадим квадрат размером 50х50 и заполним его зеленым ( GREEN ) цветом. Чуть позже вы узнаете, как сделать image спрайта красивее, используя, например, персонажа или космический корабль, но сейчас достаточно сплошного квадрата.

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

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

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

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

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

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

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

Так, если левая сторона rect пропадает с экрана, просто задаем значение правого края равное 0:

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

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

Код урока:

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

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

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

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

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

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

Костюмы можно переименовывать, как и спрайты.

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

Таким образом, создадим смайлу несколько костюмов, изменяя только его улыбку.

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

Для начала запрограммируем перемещение кота:

Теперь надо как-то узнавать, что кот касается смайла? В разделе "Сенсоры" есть команда "касается цвета …". Если кликнуть по полю с цветом, то появится панелька, где можно выбрать цвет. Чтобы точно определить тот или иной цвет, лучше воспользоваться пипеткой. Ей надо кликнуть по объекту на сцене, касание с которым будет обрабатываться программой.

Однако кто кого касается? Кот смайла или смайл кота? В данном случае разница есть, так как если кот касается смайла, то блок "касается цвета …" должен добавляться коту. Если же смайл касается кота, то блок добавляется смайлу.

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

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

Поскольку костюм смайла должен меняться случайно, понадобиться команда "выдать случайное от … до …". Итоговый скрипт смайла может выглядеть так:

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

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

Реализуйте сценарий, в котором при каждом нажатии пробела два спрайта попеременно превращаются друг в друга. Например, при каждом нажатии пробела яблоко превращается в бананы, а бананы – в яблоко.

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

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

Для тех, кто не в теме, то спрайт выглядит так.

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

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

Итак, я создал простенький спрайт иконок в Фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.

HTML разметка

Теперь нужно набросать HTML разметку. Ничего необычного. Ненумерованный список. Подписывайтесь на обновления.

CSS разметка

Задаем стили контейнера:

Описываем стили для текста и ненумерованного списка, который флоатим по левому краю (стандартная процедура для менюшек и подобных элементов).

Теперь начинается самое интересное. Зададим общие стили для ссылок.

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим… Зададим фоновое изображение первой ссылке.

На фон ссылки я ставлю большое изображение (спрайт нарисованный в Фотошопе). Но за счет того, что у ссылок заданный размер 59х59 px, то показывается лишь часть от общей картинки.

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

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

А для того, чтобы картинка меняла положение — изменил координаты отображения.

Свойство transition — используется для задания скорости изменения положения. Я поставил 0,3 секунды.

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

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

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

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

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

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

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

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

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

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

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

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

Как отобразить иконку из 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-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

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

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

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

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

Читайте также: