Что такое спрайт? Значение термина CSS-спрайт
Спрайты (css-спрайты) – представляют собой представление большого количества небольших картинок путем создания одной большой. Это значительно экономит время загрузки страницы и ресурсы хостинга, так как запрос идет на одну картинку, а не на все.
Процесс создания спрайта заключается в составлении одной картинки из нескольких. Делается это обычно в графическом редакторе, например Photoshop.
При составлении спрайта нужно делать расстояние между картинками, чтобы легче было высчитывать позицию фона.
Пример спрайта
Помогло? Делись!
Реклама:
Представляем
систему управления сайтами
NetCat
CMS NetCat — профессиональная коммерческая система управления Интернет-сайтами, один из лидеров на российском рынке веб-разработок.
Наша компания является сертифицированным партнером и рекомендуемым разработчиком сайтов на NetCat во Владивостоке.
В настоящее время большинство новых сайтов мы создаем на основе ее программной платформы.
Спрайт
Лист спрайтов Соника из «Sonic the Hedgehog». Подписано: извлекли Grim и Bonzai, указывать их при использовании.
Спрайт — плоское изображение, использующееся в видеоиграх для составления графики сцены. Технически спрайтом называется любое плоское (двухмерное) изображение, однако в обиход это слово вошло во времена ретро-компьютеров и классических консолей, поэтому часто под спрайтом понимают именно изображение с большими пикселями и с ограниченной палитрой. В этих рамках художники ранних видеоигр должны были создавать узнаваемую и яркую графику игры. Соответствующий художественный стиль сейчас называется пиксель-артом, и рисование спрайтов — пикселизованных картинок персонажей и объектов — одно из его ключевых направлений.
Авторы, увлекающиеся созданием спрайтов с нуля или модификацией существующих, называются спрайтерами.
Форматы [ править ]
На этот раздел есть перенаправление: sprite sheet .
Современные спрайты, а также извлечённые из ретро-игр спрайты сохраняют в GIF или PNG. Изображения, в которых цветов не больше 256, можно без потерь хранить с цветовым сжатием. Изображения, в которых цветов больше, сохраняют в полноцветный либо 32-битный PNG с прозрачностью в альфа-канале. Иногда спрайты сохраняют в BMP, хотя это не принято, поскольку этот несжатый формат занимает гораздо больше места на носителе.
Современные игры хранят спрайты в форматах DDS и BMP, хотя иногда ресурсы спрятаны в архивы, часто зашифрованные. Файл DDS может хранить спрайты с высоким качеством (альфа-канал, тысячи цветов, глубина цвета до 128 бит) и быть аналогичен PNG максимального качества кроме степени сжатия. Преимущество DDS в том, что он позволяет сжимать и разжимать «на лету», в отличие от других форматов, требующих приложения дополнительных вычислительных ресурсов, отнимая их от игры.
Для анимации может использоваться несколько спрайтов, которые игра показывает по очереди. Извлечённые из игры спрайты для анимации оформляют в «лист спрайтов» (sprite sheet) или собственно в анимированный файл GIF либо APNG. Прозрачность, кроме альфа-канала, может быть обозначена цветом, не встречающимся на самом спрайте — в особенности кислотным цветом, который явно не должен быть частью изображения. Также иногда отличается белый цвет такого оттенка, который не встречается в самом спрайте. Это необходимо для того, чтобы при применении спрайта легко выделить и обработать прозрачность.
Дэнди [ править ]
На Famicom (NES/Дэнди) используются спрайты тайлами 8×8 (8×16) [1] (в отличие от современных игр, где спрайты любого произвольного размера), и во многих играх так называемые спрайты персонажей и бэкграунда состоят из нескольких тайлов. Спрайт на ноги, тело, голову и тд. Также спрайты на Дэнди чёрно-белые и раскрашиваются отдельно отдельной палитрой в три цвета (плюс цвет фона, а всего палитр четыре — палитра окрашивается тайлы блоками по 16×16). Например, кусты и облака в Super Mario Bros это один и тот же спрайт, в разных палитрах. И так объект собранный из тайлов может иметь визуально больше цветов, чем даёт отдельная палитра, и легче анимироваться.
Применение [ править ]
Спрайты применяются как в двухмерных играх, так и в трёхмерных. В трёхмерных они могут показываться в 3D-сцене (тогда заметно, что освещение и ракурс не влияют на спрайт либо же он сменятся резко), в виде текстурной аппликации или в экранном интерфейсе. Часто именно первый вариант называют спрайтом в контексте трёхмерных игр.
Поскольку спрайты — не только технология, но и художественный стиль (пиксель-арт), они применяются и за рамками видеоигр. Ими оформляют сайты, из них составляют рисунки и в особенности из них делают веб-комиксы. Такие комиксы называются 8-битными или 16-битными в зависимости от того, под какую эпоху видеоигр они стилизованы. Компоновка комикса из спрайтов проще по сравнению с рисованием комикса с нуля в сколько-нибудь сложном стиле, поэтому спрайтовые комиксы широко распространены. Бывают и спрайтовые комиксы из оригинальных спрайтов или же вносящие в заимствованные спрайты существенные изменения (особенно в выражения лиц).
Извлечению спрайтов из игр посвящены целые сетевые сообщества, такие как SpriterResource. Полученные спрайты и листы спрайтов обычно подписаны исполнителем (риппером, от «rip» — извлечение, снятие спрайта), позволяющим использовать спрайты как угодно с указанием благодарности рипперу или без таковой.
Галерея [ править ]
 Лист спрайтов Конкера из игры «Conker’s Bad Fur Day» на N64. |
 Лист спрайтов Бэбс из игры «Tiny Toons Adventures: Buster Busts Loose» на SNES. |
Спрайт (компьютерная графика)
Спрайт (англ. Sprite — фея; эльф) — графический объект в компьютерной графике.
Чаще всего — растровое изображение, свободно перемещающееся по экрану. [1] Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. То есть легче всего воспринимать спрайт как перемещающуюся в пространстве проекцию какого-то объёмного тела так, что разница незаметна.
Происхождение термина
Слово «спрайт» придумал в 1970-е годы кто-то из Texas Instruments: их новая микросхема TMS9918 могла аппаратно отображать небольшие картинки поверх неподвижного фона. [2]
Спрайты в двухмерной графике
Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения. На некоторых машинах (MSX 1, NES) программная прорисовка приводила к определённым ограничениям, а аппаратные спрайты этого ограничения не имели. Впоследствии с увеличением мощности центрального процессора, от аппаратных спрайтов отказались, и понятие «спрайт» распространилось на всех двумерных персонажей. В частности, в видеоиграх Super Mario и Heroes of Might and Magic вся графика спрайтовая.
К аппаратно ускоренным спрайтам вернулись в середине 1990-х годов — когда развитие мультимедиа и взрывное повышение разрешения и глубины цвета потребовало специализированный процессор в видеоплате. Именно тогда, как обёртка над аппаратным 2D-ускорителем, вышел DirectDraw. DirectX 8 ввёл общий API для двух- и трёхмерной графики, и в современных спрайтовых играх двухмерные спрайты выводятся точно так же, как и трёхмерные — как текстурированный прямоугольник.
CSS-спрайты
Применяются в вебе. Несколько изображений располагаются в одном графическом файле. Для того, чтобы вырезать из файла нужный кусок, применяется CSS — отсюда название технологии.
CSS-спрайты экономят трафик и ускоряют загрузку — браузеру потребуется запрашивать меньше файлов.
Спрайты в трёхмерной графике
Движки первого поколения
Спрайтовые персонажи в Doom. Обратите внимание на два совершенно одинаковых трупа.
В первых трёхмерных играх, например, Wolfenstein 3D (1992) и Doom (1993), персонажи представлялись в виде двумерных рисунков, изменяющих размер в зависимости от расстояния.
На 3D-акселераторах
На 3D-акселераторах применяется такая техника: объект рисуется в виде плоскости с наложенной на неё текстурой с прозрачными областями. Эта технология применяется в трёх случаях.
Оптимизация
Спрайты могут применяться для оптимизации графического ядра, когда отрисовка трёхмерной детализованной модели слишком накладна и может привести к сильному падению скорости рендеринга. Таковыми являются:
- Объекты, присутствующие в сцене в большом количестве и которые, будучи трёхмерными, имели бы большое количество граней и очень сильно влияли бы на производительность — например, публика (рис. 1), трава и т. д.
- Удалённые объекты, которые вблизи рисуются полигональными моделями.
Спецэффекты
Некоторые спецэффекты (например, огонь) выполняются спрайтами, так как полигональный огонь плохо смотрится. Сравните, например, взрывы в Quake 2 (рис. 2) и Unreal Tournament (рис. 3).
Для большей правдоподобности изображения используется большое количество сравнительно маленьких спрайтов (так называемая система частиц).
Что такое спрайт и как его использовать на сайте
Спрайт — это не только вредный напиток, но и весьма полезная css – фишка, которая позволит улучшить состояние вашего сайта, а также даст массу новых идей в плане ее использования.
Речь идет об известном методе объединения всех служебных картинок типа кнопок, иконок, частей фона и даже лого в одно большое изображение, которое как раз и называется спрайтом (css sprite).
Зачем нужен спрайт на сайте?
Во-первых, это позволяет корректно отображать все ваши декоративные изображения. Имеются в виду не картинки в статьях, а непосредственно дизайн сайта. Особенно это актуально для кнопок-ролловеров
Если для такой кнопки использовать два отдельных изображения, то браузер сначала загрузит лишь первое. И когда вы наведете указатель мыши на эту кнопку, то можете заметить задержку в появлении второго изображения, так как она будет подгружаться лишь после вашего действия. Так уж устроены браузеры.
Во-вторых, спрайт позволяет упростить оформление файла стилей в плане адресации картинок фона. По сути, картинка будет всем задана одна и та же, то есть сам спрайт. Вам останется лишь правильно указать для каждой детали сайта правильные координаты и видимую часть этой большой картинки.
Ну и в-третьих, это просто красиво, упорядоченно и современно.
Принцип работы спрайта на сайте
Итак, в чем суть метода. Мы имеем одну большую картинку, на которой все детали дизайна размещены кучно. Вот, к примеру, спрайт всем известного Амазона (фрагмент):
А теперь вспоминаем начальные титры нашего старого советского фильма про Шерлока Холмса и доктора Вастона. Там, если вы помните, на кучу перемешанных букв наводили черный трафарет с прорезями и через них становился виден вполне читаемый текст.
Спрайт работает по тому же принципу. Из всей кучи тесно размещенных изображений выбирается одно, чтобы отобразить одну конкретную деталь:
Как выбирается? Легко и просто!
Любое изображение на спрайте имеет свои размеры по ширине и высоте. И также любое из них расположено в строго определенном месте. Значит, зная размеры картинки и ее координаты, можно легко указать браузеру, где ее искать и что конкретно показывать:
.button width: 180px;
height: 20px;
background: url(sprite.png) no-repeat;
background-position: 0 -80px;
>
Данная запись означает, что для кнопки с классом .button заданы размеры по ширине и высоте и указано фоновое изображение, в качестве которого и выступает сам спрайт. Ключевым моментом здесь является последняя строчка правил:
background-position: 0 -80px;
Она как раз и указывает браузеру координаты нужной части изображения. Координаты задаются для левого верхнего угла выбранной части изображения. Первое число означает расстояние по горизонтали, второе — по вертикали.
Если взять за исходную нулевую точку верхний левый угол всего спрайта, то становится очевидным сам принцип. Мы просто отсчитываем нужно количество пикселей до выбранной части изображения и подставляем их в указанную выше строку правил.
Как создать спрайт для сайта?
В нашем случае выбранная часть находится у левого края спрайта (0 по горизонтали), и на 80 пикселей вниз от верхнего края спрайта.
Указав в качестве второго значения отрицательное число, мы тем самым как бы «подтягиваем» весь спрайт на 80 пикселей вверх. А так как ранее мы строго задали размер видимого изображения 180х20 пикселей, то будет виден не весь спрайт, а только нужная нам кнопка:
Координаты всех изображений на спрайте можно заранее выписать, воспользовавшись линейками в фотошопе.
Если лень возиться, то можно попробовать воспользоваться специальным сервисом — спрайт-генератором. Скармливаете ему ZIP файл со всеми вашими картинками, он сам разместит их на одном общем спрайте и выдаст его вместе с уже оформленным и просчитанным файлом стилей.