Спрайт (компьютерная графика)

Спрайты в двухмерной графике

Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения . На некоторых машинах (MSX 1, NES) программная прорисовка приводила к определённым ограничениям , а аппаратные спрайты этого ограничения не имели. Впоследствии с увеличением мощности центрального процессора , от аппаратных спрайтов отказались, и понятие «спрайт» распространилось на всех двумерных персонажей. В частности, в видеоиграх Super Mario и Heroes of Might and Magic вся графика спрайтовая.

К аппаратно ускоренным спрайтам вернулись в середине 1990-х годов - когда развитие мультимедиа и взрывное повышение разрешения и глубины цвета потребовало специализированный процессор в видеоплате. Именно тогда, как обёртка над аппаратным 2D-ускорителем, вышел DirectDraw . DirectX 8 ввёл общий API для двух- и трёхмерной графики, и в современных спрайтовых играх двухмерные спрайты выводятся точно так же, как и трёхмерные - как текстурированный прямоугольник.

CSS-спрайты

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

CSS-спрайты экономят трафик и ускоряют загрузку - браузеру потребуется запрашивать меньше файлов.

Спрайты в трёхмерной графике

Движки первого поколения

В первых трёхмерных играх, например, Wolfenstein 3D () и Doom (), персонажи представлялись в виде двумерных рисунков, изменяющих размер в зависимости от расстояния.

На 3D-акселераторах

На 3D-акселераторах применяется такая техника: объект рисуется в виде плоскости с наложенной на неё текстурой с прозрачными областями. Эта технология применяется в трёх случаях.

Оптимизация

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

• Объекты, присутствующие в сцене в большом количестве и которые, будучи трёхмерными, имели бы большое количество граней и очень сильно влияли бы на производительность - например, публика (рис. 1), трава и т. д.
• Удалённые объекты, которые вблизи рисуются полигональными моделями.

Спецэффекты

Для большей правдоподобности изображения используется большое количество сравнительно маленьких спрайтов (так называемая система частиц).

Живая съёмка

Изредка спрайты применяются для добавления в игру живого фото или видео . Например:

• Живые актёры, например в realMyst (рис. 4).
• Рычаги управления в симуляторах самолётов, поездов и т. д., сфотографированные в реальной кабине.

Стоит заметить, что в некоторых спрайтовых играх, таких, как Rise of the Triad , спрайты фотографировались с актёров, а не с моделей, игрушек или рисунков.

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

Разрушение иллюзии

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

Терминология

• Billboard - спрайт, постоянно повёрнутый лицом к камере (по аналогии с рекламными щитами на автодорогах, которые повёрнуты под наиболее выгодным углом).
• Impostor - спрайт, который заменяет трёхмерную модель на большом удалении.

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

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

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

Что слишком много слов.. покажу пример..

Это спрайт который присутствует на каждой странице данного сайта:

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

Как это сделать? На самом деле все достаточно просто.

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

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

Открываем значит фотошоп и рисуем в нём примерно такой рисунок:

Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет "скакать". Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..

Итак, у нас получилась "двойная" картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.

Он у меня получился таким.. смотрим результат и читаем комментарии в коде:

Такое вот меню получилось:

Думаю, многие читатели задаются вопросом: "А зачем вообще нужны эти спрайты если тоже самое можно сделать с помощью двух отдельных картинок, где одна фон для просто ссылки, а вторая для ссылки с :hover , при этом, не сражаясь с фотошопом и не высчитывая координаты фона для CSS??"

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

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

И полностью она выглядит так:

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

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

Браузер : Здравствуй Сервер! я тут от тебя же, по моему запросу, получаю HTML и CSS документы, так вот в них указано, что у тебя в папке "графика".. должна лежать картинка с названием: "картинка1" скинь а?
Сервер : Привет Браузер, давненько не виделись, сейчас посмотрю.. ага есть у меня такая картинка! Лови!!
Браузер : Спасибо, поймал! Но мне еще нужна "картинка2" в той же папке..
Сервер : Да и такая есть.. отправляю..
Браузер : Загрузил.. но тут еще "картинка3" указана.
Сервер : И не спится же тебе! Держи свою картинку!!
Браузер : Спасибо! Да мне уже саму если честно надоело, но мой пользователь хочет догрузить страницу полностью.. короче у тебя там еще "картинка4" должна быть..
Сервер : Ты меня начинаешь напрягать! На свою картинку!!
Браузер : Извини, но я же не виноват, что здесь столько изображений!!! Нужна "картинка5"!
Сервер : У меня от тебя уже процессор кипит!! Заколебал!! Забирай свою картинку!!
... ... ...

Дальнейший диалог озвучивать не буду, ибо дальше идет нецензурная брань..

К чему вся эта болтовня между сервером и браузером (клиентом) на которую уходит уйма времени и трафика, к тому же нагружает сервер при большом количестве посетителей сайта, если гораздо быстрее и экономичнее сделать один HTTP запрос и получить все 18 картинок в одном пакете!!

Во-вторых: Загрузка второго изображения при использовании псевдокласса :hover происходит лишь только в тот момент когда пользователь навел курсор на ссылку с первым изображением. Если это небольшое изображение типа кнопки из примера выше, то ничего особо страшного не произойдёт - вторая картинка быстро подгрузится и пользователь ничего не заметит.. а если это большая картинка по весу и размеру?? Тогда пользователь будет наблюдать, как она загружается, хотя он психологически был готов к быстрой смене изображений! Еще один плюс спрайтам! … хотя, если честно, одновременно это и минус.. минус в том случае если пользователь в течении сессии так и не навел курсор.. картинка загрузилась, но так ему и не пригодилась.. но поверьте эта "жертва трафика" оправдывает себя практически всегда!

Ну и в-третьих: Как бы Вам это не показалось странным, но это удобно!! Удобно в коде указывать путь к одному и тому же изображению, удобно его править в фотошопе, к примеру, сделать весь сайт поярче или потемнее работая с одним единственном рисунком, удобно хранить, удобно загружать на сервер, да даже в CSS работать с большим спрайтом удобно! - хотя для этого и нужны определённые навыки и привычка..

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

Спрайты – одни из красивейших природных явлений на нашей планете – невероятной величины молнии, которые еще называют «небесными духами».

Спрайты – необычные молнии, которые способны удивить человека не только своей божественной красотой, но и нестандартным, как для молнии, поведением. Мы привыкли, что обычная молния бьет с облаков вниз на землю. Что касается спрайтов, то здесь дело обстоит иначе – они бьют вверх, создавая в небесной сфере потрясающе красивое зрелище.

Впервые спрайты были зафиксированы в 1989 году. Первым их увидел американский астроном-эксперт Джон Уинклер, который почти полвека проработал в NASA. Ученый обнаружил молнии случайно, когда в целях научных изысканий наблюдал за грозой. Впервые увидев эти направленные вертикально вверх молнии, он не поверил собственным глазам. Удивило Уинклера и то, что такой разряд появлялся на необычайно большой, как для обычной молнии, высоте. Направленный вертикально вверх он мог представлять опасность для аппаратов, запускаемых в космос, самолетов и прочих летательных машин. По этой причине Джон Уинклер решил продолжить изучение этого необычного явления.

В ночь с 22 на 23 сентября 1989 года мистер Уинклер, воспользовавшись высокоскоростной кинокамерой, умудрился заснять огромные вспышки света, которые простирались в небе по направлению снизу-вверх. Ученый, пользовавшийся устаревшей аппаратурой, посчитал, что эти молнии возникли на высоте 14 километров, что вполне допустимо и для обычных молний. Впоследствии, когда изучением спрайтов занялись современные научно-исследовательские центры и лаборатории, было доказано, что эти природные явления появляются на высоте не менее 55 км. На такой высоте вы не сможете встретить ни одного небесного разряда, который был бы направлен в сторону земли.

Механизм возникновения спрайтов

Заинтересовавшись данными о спрайтах, которые представил Уинклер сотрудникам NASA, ученые почти сразу же развернули крупномасштабную кампанию по изучению этого природного явления. В первую же ночь исследований они обнаружили около 200 вспышек молний в слоях ионосферы. Вспышки света возникали в основном в пределах 50-130 километров над поверхностью земли. Это зрелище одинаково восхищало и страшило ученых, поскольку в те времена многие из них еще не знали, чего толком можно ждать от спрайтов. Опасения ученых были понятны, так как спрайты имели все шансы на то, чтобы стать прямой угрозой для высотных летательных аппаратов. Чтобы исключить возможность этой угрозы, ученые решили изучить механизм возникновения спрайтов.

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

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

Джеты, спрайты и эльфы

Джеты представляют собой вспышки света, наблюдаемые на наиболее близком расстоянии к земле, от 15 до 30 километров. Именно их, скорее всего, зафиксировал Джон Уинклер, который в 1989 году впервые произвел наблюдение вспышек молний в верхних слоях атмосферы. Джеты имеют трубчатую форму. Обычно они сине-белого или голубого оттенка. Известны случаи появления гигантских джетов, которые били в высоту на расстояние около 70 километров.

Спрайт — редкий вид грозовых разрядов

Спрайты – вид молний, о которых мы говорим в этой статье. Они появляются на высоте от 50 до 130 километров и бьют по направлению к ионосфере. Спрайты появляются через доли секунды после удара обычной молнии. Обычно они возникают группами, а не поодиночке. Длина спрайтов, как правило, держится в пределах нескольких десятков километров. Диаметр группы спрайтов может достигать 100 км в поперечнике. Спрайты – это красные вспышки света. Они быстро появляются и быстро исчезают «Продолжительность жизни» спрайта всего около 100 миллисекунд.

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

Диаметр такой группы может достигать 400 км в поперечнике. Также эльфы могут бить до 100 км в высоту – в самые верхние слои ионосферы. Зафиксировать эльфы крайне сложно, так как «живут» они не дольше пяти миллисекунд. Заснять такое явление можно только при помощи специальных, современных видеоприборов.

Как, где и когда можно наблюдать спрайты

Согласно Географической карте гроз, наибольшими шансами увидеть спрайты обладают жители экваториальной и тропической зоны Земного шара. Именно в этой области случается до 78% всех гроз. Жители России также могут наблюдать спрайты. Пик гроз в нашей стране приходится на июль-август месяц. Именно в это время любители астрономии могут увидеть такое красивое явление как спрайты.

Согласно американскому Справочнику наблюдения за спрайтами и гигантскими джетами, для того, чтобы увидеть спрайты, наблюдатель должен находиться на расстоянии примерно 100 километров от эпицентра грозы. Для того чтобы наблюдать джеты, ему следует навести оптику на 30-35 градусов по направлению к грозовой области. Тогда он сможет наблюдать часть ионосферы на высоте до 50 километров, именно в этой области чаще всего появляются джеты. Чтобы наблюдать спрайты, следует навести бинокль на угол 45-50 градусов, что будет соответствовать области неба на высоте около 80 км – месту, где рождаются спрайты.

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

1. Спрайты, как и молнии, встречаются не только на Земле, но и на других планетах Солнечной системы. Предположительно именно спрайты были зафиксированы космическими исследовательскими аппаратами во время сильных штормов на Венере, Сатурне и Юпитере.
2. Спрайты и эльфы возникают на такой большой высоте из-за сильной ионизации воздуха галактической пылью. На высоте свыше 80 километров проводимость тока в десять миллиардов раз выше, чем в приземных слоях атмосферы.
3. Название «спрайты» происходит от наименования лесных духов, о которых идет речь в комедии Уильяма Шекспира «Сон в летнюю ночь».
4. Спрайты были известны человечеству задолго до 1989 года. Люди высказывали разные гипотезы на счет природы этого явления, в том числе и то, что вспышки света являются инопланетными космическими кораблями. И только после того, как Джону Уинклеру удалось снять кадры спрайтов в ионосфере, ученые доказали, что они имеют электрическое происхождение.
5. Цвет спрайтов, джетов и эльфов разнится от высоты, на которой они появляются. Дело в том, что в околоземной атмосфере сосредоточено больше воздуха, тогда как в верхних слоях ионосферы наблюдается высокая концентрация азота. Воздух горит синим и белым пламенем, азот – красным. По этой причине джеты, которые находятся ниже спрайтов, имеют преимущественно синий цвет, а сами спрайты и, более высокие, эльфы – красноватый оттенок.

Для начала краткое вступление. При загрузке странице браузерам допускается только 2 запроса к серверу (у современных браузеров это число увеличилось до 6). Каждый элемент сайта будь то файл с таблицей стилей, файлы javascript, картинки являются независимыми загрузками, которые требуют отдельного запрос на сервер.

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

Еще давным-давно (2003-2004) было предложено решение этой ситуации с главной целью ускорить загрузку сайта с помощью уменьшения количества запросов к серверу. Это технология получила название "Спрайты".

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

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

Например, вместо 10 картинок грузится одна, но побольше. При грамотном распределение это ускоряет работу сайта. Однако здесь главное не переусердствовать. Не всегда объединение картинок дает преимущество в загрузке сайта.

Пример спрайта CSS

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

Чтобы обратится к нужной стрелке в CSS надо прописать

Вот как это выглядит на странице:

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

Чтобы вырезать значок RSS мы должны написать следующие отступы

background-position : -90px -40px ;

В примере мы подняли изображение на 40 пикселей вверх и на 90 влево.

Плюсы использования спрайтов

• Сокращение количества обращений к серверу
• Если используются динамическое изменение картинки (например, при наведении в элементе меню), то картинка уже будет находится в кэше и поэтому не будет запаздывания на загрузку в нужный момент
• Если фон объединяемых изображений схож, это еще и уменьшить суммарный "вес" изображений

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

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

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

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

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

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

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

Терминология

Чтобы не путаться давайте сразу обозначим термины:
Спрайт - это одна картинка из файла с несколькими изображениями.
Набор спрайтов - это сам файл с несколькими изображениями.

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

Когда стоит использовать спрайты? Ответ в общем то один - спрайты нужно использовать если у вас на странице много мелких изображений. Неважно какие это изображения. Если у вас много градиентов с одинаковым расположением, много кнопок, много иконок и.д. Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

На странице как правило бывают три вида картинок - jpg, png и gif. У всех этих форматов есть два режима загрузки - это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

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

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

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

Примеры использования спрайтов

Спрайты с иконками

В одном спрайте у меня будут иконки для:

1. Списка - одна иконка
2. Ссылок - три иконки
3. Формы поиска - одна иконка

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

В итоге первый пример будет выглядеть так:

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

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

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

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

• Пункт списка
• Еще один пункт списка
• Пункт списка
• Еще один пункт списка,
  но в две строки
• Пункт списка
• Еще один пункт списка

Это html код списка. Теперь применим к нему наш спрайт:

Ul li{ padding:0 0 0 21px; background:url("sprites.png") 0 -94px no-repeat; }

Что мы тут сделали? Сделали отступ в каждом