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

Категория: Что такое?

– Автор: Игорь (Администратор)

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

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

О них и пойдет речь далее.

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

Спрайт это

Спрайт - это изображение (растровое), которое отображают поверх основного фона, без изменения последнего. Таким образом, нет необходимости рисовать под каждое действие полноценную картинку. Отобразили фон, а затем в нужном вам месте отобразили спрайт или несколько. И так для каждой анимации.

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

Примечание: Стоит знать, что нередко атлас спрайтов называют просто спрайтом.

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

Конечно, детализация движений может подразумевать существенно больше кадров (чем 3 в примере), однако загрузить картинку и отобразить нужные области - это быстрее, чем пытаться воссоздавать сложный рисунок с нуля.

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

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

Не сложно догадаться, что обычно спрайты ассоциируют с играми. При чем, чаще всего именно со старыми 2D и некоторыми с псевдо-3D графикой, где ощущения расстояния добивались за счет того, что спрайт уменьшался до нужных пропорций. Тем не менее, спрайты используются и в нынешних играх, так как есть немало элементов, которые проще отобразить как картинку и применить к ним различные фильтры и эффекты, чем полностью производить расчет движения 3D-объекта. Например, очень далекие объекты (относительно игрока), часто повторяющиеся объекты (трава, дым и прочее).

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

CSS-спрайты

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

Для чего это нужно? Когда речь одет об открытии десятка небольших картинок в компьютере, то задержки не столь заметны, как в интернете, где каждая картинка это отдельный HTTP-запрос браузера к сайту. Поэтому, объединив много мелких картинок в один файл, можно сэкономить время и снизить общую нагрузку хостинга. Так же если картинка должна отображаться по действию, например, при наведении курсора мышки на кнопку, то браузер должен еще скачать нужное изображение с веб-сайта. В такие моменты можно видеть, как кнопка мелькает (картинка не загружена - браузер отображает стандартный фон). При использовании спрайтов такого не возникает, так как нужная картинка уже есть в общем загруженном файле.

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

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