Спрайт (компьютерная графика). Что такое спрайты? Спрайты с градиентами
Понравилось:
27
Не понравилось: 4
Недоступен ни один перевод.
спрайт
до или после "до" "после" "после"
angry_bird angry.png. index.html
Недоступен ни один перевод.
CSS спрайты - это графика для Вашего Web-сайта, объединённая в один графический файл. "Почему один файл?" - спросите Вы. Дело в том, что такой подход к хранению изображений позволяет повысить производительность веб-страниц, а также хранить графические изображения более организованно. Давайте взглянем на некоторые из лучших практик применения спрайтов. Само название спрайтов может напомнить Вам об игровых спрайтах, ретро игровой консоли и даже браузерных играх, которые так популярны сегодня:
Итак, применимо к Веб-дизайну, спрайт - это всего лишь один большой файл, содержащий несколько изображений для Вашего сайта, экономящий время загрузки и передачи файла по сети. Когда спрайт, к примеру, содержит 20-30 изображений, то это существенно может облегчить нагрузку на сервер, поскольку, если бы эти изображения хранились по отдельности - серверу пришлось бы делать соответственно 20-30 отдельных запросов для получения каждого такого изображения. Благодаря спрайту на сервер идет всего один HTTP-запрос - для получения одного-единственного изображения. Спрайт визуально может выглядеть не совсем "читаемо" для глаза, поскольку его основная задача - лишь собрать разные "куски" Вашего дизайна воедино. Например, спрайт может быть вот таким:
Спрайты используют большинство современных сайтов, и всем известный ВКонтакте - не исключение. Например, так он хранит в одном файле "кусочки" интерфейса - а именно всем знакомые иконки:
Существенным моментом использования CSS-спрайтов является то, что серверу надо отправить только один графический файл, содержащий все Ваши изображения, а не множество отдельных изображений - и через CSS можно отобразить любой маленький сегмент из этого графического файла в качестве фона для элемента. Некоторые думают, что по отдельности картинки быстрее грузятся, но это не так. Загружая один графический файл с множеством картинок, мы посылаем только один запрос на сервер, а при загрузке большого количества картинок - мы отправляем больше запросов на сервер. Объединение изображений в один файл позволяет не только значительно снизить количество HTTP-запросов, но и уменьшить общий размер файла изображения.
Приведу еще один пример спрайта. Так хранит элементы графики один известный западный сайт, посвященный дизайну:
Вы можете спросить - когда лучшим образом подготавливать спрайт? Для этого есть два разных подхода.
Различные подходы - создаем спрайт до и после создания сайтаЕсть два распространенных подхода при создании спрайт листа - сделать его до или после создания Вашего сайта. Вы можете поместить все изображения в спрайт лист перед созданием сайта. Это то, что мы называем подход "до" . Кроме того, Вы можете создать все изображения в виде отдельных файлов, что делает их редактирование более простым. Как только сайт будет построен, и все изображения подготовлены, Вы можете быстро и легко создать спрайт лист, либо вручную, либо, используя один из нескольких инструментов. Это мы будем называть подход "после" . Если спрайт листы для Вас в новинку или Вы новичок в Веб-дизайне, то Вам больше подойдёт подход "после" . Существует множество утилит, сервисов и программ для помощи при создании спрайтов, большинство из которых распространяются и доступны бесплатно.
Располагаем картинки в спрайте организованноПри создании спрайта в Photoshop, желательно сразу все изображения размещать организованно и в какой-то определенной, выбранной Вами последовательности, чтобы потом работать с ними было легко и просто. Старайтесь всегда округлять место под каждое изображение спрайта до ближайших 10 пикселей, или оставлять больше пространства вокруг них, если они все одинакового размера. Когда дело дойдет до написания CSS-стиля, Вам не придется записывать измерения координат, и Вы будете менее склонны забывать числа с координатами нужных изображений. Вот пример удачного размещения разных изображений в одном спрайте:
Итак, мы познакомились с понятием спрайта в Веб-дизайне, но теория без практики - ничто. Поэтому сейчас мы c Вами создадим наш первый спрайт и научимся делать простую анимацию на HTML-странице. Наш пример будет основан на персонаже из игры Angry Birds - это забавная красная птичка. Для начала подготовим изображение-спрайт в формате.PNG, содержащее 4 фазы анимации птицы:
Создадим где-нибудь на диске каталог angry_bird - туда мы будем помещать файлы нашего примера. Сохраняем спрайт с птичками в этот каталог и называем файл angry.png. Следующим шагом - создаём в этом же каталоге файл с именем index.html - это будет наша тестовая страничка с анимацией. Далее откроем этот файл в редакторе и поместим туда следующий код:
Урок сайт - Демонстрация работы со спрайтами $(document).ready(function() { // здесь будет код на jQuery, создающий анимацию });
Немного поясню, что мы сейчас сделали. Во-первых, мы задали нашему HTML-документу кодировку UTF-8 , а значит, должны сохранить наш index.html в этой кодировке. Можно задать и другую, например, windows-1251 , - для нашей задачи это не принципиально. Далее, мы подключили к документу файл стиля style.css (его пока нет в нашем каталоге angry_bird , его создадим чуть позже). Также мы задали ссылку на внешний скрипт и подключили библиотеку jQuery - с помощью jQuery мы будем осуществлять динамическую смену картинок нашей птицы и менять её "фазы" из спрайта. Также мы подготовили внутренний JavaScript-блок, куда дальше поместим код, делающий анимацию птицы. Ну, и наконец, - основное тело документа содержит единственную гиперссылку, внутри которой DIV-блок, и у него ID задан в качествеbirdImage , а класс по умолчанию -bird-sleeping . Это значит, что наша птица при открытии страницы будет "спать" - это соответствует левому нижнему изображению внутри спрайта - где у неё закрыты глаза. Теперь самое время "нарезать" наш спрайт, т.е. выделить из него отдельные изображения.
Нарезаем спрайт, используя сервис SpriteCow.ComЗадача "нарезки" спрайта является довольно трудоёмкой - она требует внимательности, чтобы не ошибиться с координатами, определяющими каждое изображение в спрайте. К счастью, на сегодня есть сервисы, которые полностью снимают эту головную боль с дизайнера и верстальщика. Я использую для нарезки и рекомендую Вам сервис http://spritecow.com . Суть сервиса проста и очень удобна - мы мышью выделяем каждую картинку птицы, а SpriteCow выдает нам готовый CSS-код с координатами. Всё, что нам останется сделать - это просто задать 4 стиля для каждой фазы птицы! Зайдя на сайт, видим 2 кнопки - "Open Image" и "Show Example". Нам нужна первая кнопка, жмём на неё:
В открывшемся диалоге - выбираем наш файл спрайта angry.png, после чего видим, как наш спрайт загрузился на сайт. Далее нам необходимо определить цвет фона, для этого жмём на панели инструментов "Pick Background" и указываем на белую область нашего спрайта - это позволит правильно вырезать каждую фазу птицы:
Выделяем первое изображение и получаем автоматически для него CSS-код:
Теперь, самое время создать в нашем каталоге angry_bird файл стилей style.css . Туда последоватьльно вставляем 4 сгенерированных куска CSS-кода, только вместо стандартного класса.sprite , предлагаемого нам SpriteCow назовём наши стили более понятно. Также, поскольку изображение спрайта у нас хранится прямо в корне каталога, удалим из свойстваbackground ненужный элемент пути - imgs/. У меня вышло так:
/* "обычная" птица. Левое верхнее изображение в спрайте */ .bird-normal { background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; } /* "Счастливая" птица. Правое верхнее изображение в спрайте */ .bird-happy { background: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; } /* "Спящая" птица. Левое нижнее изображение в спрайте */ .bird-sleeping { background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; } /* "Злая" птица. Правое нижнее изображение в спрайте */ .bird-angry { background: url("angry.png") no-repeat -118px -120px; width: 97px; height: 94px; }
Последний шаг - пишем код на jQuery, создающий анимацию.
Теперь, когда мы успешно нарезали спрайт и поместили 4 стиля для каждого изображения в наш файл style.css , нам остается написать код на jQuery, который будет добавлять анимацию при наведении на нашу гиперссылку и при щелчке по ссылке. Как мы помним, по умолчанию у нас задан классbird-sleeping , т.е. наша красная птичка будет "спать" при открытии документа:)
Вся анимация будет строиться на 3-х методах jQuery:
- hover - обработчик наведения курсора на ссылку и "ухода" курсора с ссылки. Когда будем наводить курсор, птица будет "просыпаться" - т.е. класс станетbird-normal
- mousedown - обработчик нажатия левой кнопки мыши на ссылке. При этом птица будет становиться "счастливой" - т.е. DIV-блоку будет присваиваться классbird-happy
- mouseup - обработчик отпускания левой кнопки мыши. При отпускании птица будет становиться "злой" - т.е. DIV-блоку присваивается классbird-angry
Итак, вставляем следующий код в место, которое мы подготовили во внутреннем блоке JavaScript, размещенном на странице:
$(document).ready(function() { // здесь будет код на jQuery, создающий анимацию $("#birdImage").hover(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"); }, function() { $(this).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-sleeping"); }); $("#birdImage").mousedown(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).addClass("bird-happy"); }).mouseup(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $(this).removeClass("bird-happy"); $(this).addClass("bird-angry"); }); });
Готово! Тестируем анимацию
Ну, вот и всё! Наша птица готова и внесла жизнь своей анимацией в страницу! :) Просмотреть демо можно . Скачать архив с примером - внизу статьи.
До того, как в CSS появился псевдокласс:hover , создание ролловера - элемента, который меняет свой вид при наведении курсора - реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии:hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.
Из-за этого может возникать небольшая задержка при появлении картинки в первый раз. И хотя при всех последующих наведениях курсора этой задержки уже нет, многие разработчики задумались над тем, как устранить эту проблему. Например, с помощью JavaScript можно обеспечить загрузку всех фоновых изображений заранее. Но есть способ, который не требует знаний языка программирования, и заключается он в использовании спрайтов.
Что такое спрайты CSSCSS-спрайт - это один графический файл, который содержит много различных изображений. В нем могут быть собраны, к примеру, все графические элементы интерфейса, такие как иконки, кнопки и прочее. Также в спрайты часто объединяют фоновые картинки вместе с их вариациями для состояния:hover . Типичные примеры спрайтов:
Спрайт, в котором собраны все используемые иконки
Спрайт со значками соцсетей и их вариациями для:hover
- CSS-спрайт содержит в себе фоновые изображения для различных состояний элементов, и загружается он целиком при загрузке веб-страницы. Это исключает подтормаживание ролловера при первичном наведении курсора на элемент.
- Сокращается количество обращений к серверу. Ведь для загрузки каждой маленькой иконки требуется отдельный запрос, а чем меньше обращений, тем лучше. Для загрузки спрайта понадобится всего один запрос на сервер.
- Еще одно преимущество хранения множества картинок в спрайте заключается в том, что если у них похожая палитра цветов, то одно большое изображение будет весить меньше, чем отдельные маленькие картинки в сумме.
- Всё это в целом положительно влияет на скорость загрузки сайта.
В классическом случае спрайты создаются в редакторе изображений. Мелкие картинки последовательно размещаются на большом полотне (нередко с прозрачным фоном), которое затем сохраняется как графический файл.
Ручной способ создания спрайтов - занятие довольно долгое. Поэтому, когда использование спрайтов стало набирать обороты, появились онлайн-сервисы по автоматическому созданию спрайт-листов, например, Spritegen , RetinaSpriteGenerator и другие. Вы загружаете необходимые изображения в отдельных файлах на сайт, и для вас генерируется спрайт, который вы сразу можете скачать на компьютер.
Как пользоваться спрайтами CSSТеперь пора узнать, как использовать CSS-спрайты на практике. Мы покажем вам небольшой пример с использованием спрайта, содержащего значки социальных сетей (мы показывали его выше). В обычном состоянии ссылки значок соцсети будет цветным (верхний ряд спрайта), а при наведении курсора он будет становиться серым (как в нижнем ряду).
HTML-разметка выглядит следующим образом:
Для ссылки на каждую соцсеть мы создали свой класс. Поскольку это тестовый пример, то мы не тратим время на заполнение атрибутов href - вместо ссылок на настоящие сайты мы поставили заглушки. Внутрь тега мы ничего не помещаем, потому что за внешний вид ссылок будут отвечать их фоновые изображения со значками соцсетей.
Переходим к CSS. Первым делом запишем общие стили для всех ссылок:
A { background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }
Следующие две строки - высота и ширина каждого элемента . Каким образом определялись эти значения? Здесь мы отталкивались от размеров значков в спрайте. Высота каждой иконки равна 98 пикселям, а ширина - 100 пикселей. Далее мы будем позиционировать фоновую картинку для каждой ссылки, подстраивая фон таким образом, чтобы значок ровно вписался в «окошко» ссылки размером 98×100 пикселей.
A.facebook { background-position: left top; }
Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top:
A.twitter { background-position: -100px top; }
Аналогичное действие мы проделаем для остальных ссылок, прибавляя к каждому последующему горизонтальному позиционированию еще 100 пикселей, тем самым сдвигая спрайт всё больше и больше влево. Получится такая картина:
A.youtube { background-position: -200px top; } a.instagram { background-position: -300px top; } a.linkedin { background-position: -400px top; } a.tumblr { background-position: -500px top; } a.google { background-position: -600px top; }
Результат работы данного кода показан на скриншоте ниже:
Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y:
A:hover { background-position-y: bottom; }
В нашем случае этот стиль можно записать один для всех ссылок, и он будет работать правильно. Однако в других ситуациях, когда элементы в спрайте расположены в другом порядке, вам может понадобиться писать больше кода.
Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):
Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition):
A { transition: all 0.2s ease-out; }
Итак, теперь вы знаете, что такое спрайты CSS и чем они могут быть полезны. Помимо предотвращения задержек при загрузке фоновых картинок, использование спрайтов помогает снизить нагрузку на сервер. Кроме того, это удобный способ хранить все графические элементы интерфейса в одном месте.
Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации -
Слово спрайт (англ. sprite - фея, призрак) впервые было использовано мультипликаторами Диснея в несколько ином качестве, мультипликаторы для более быстрого и удобного создания и "оживления" мульт героев сначала рисовали все фазы их движения на прозрачных плёнках, а затем накладывали эти плёнки на основной фон - сцену, и получали кадры мультика, тем самым экономя время, деньги и нервы художников.. эти самые плёнки они и называли спрайтами.
Потом термин спрайт внедрился в компьютерную графику и особо широкое распространение получил в компьютерных играх - но это тоже не совсем то о чем я хочу Вам поведать.. Сегодня я хочу Вам рассказать о так называемых CSS-спрайтах..
Итак, под спрайтами в CSS принято называть одно изображение, которое состоит из нескольких "частей", которые показываются как бы по отдельности в зависимости от действий пользователя..
Что слишком много слов.. покажу пример..
Это спрайт который присутствует на каждой странице данного сайта:
Просто в "спокойном" состоянии Вам показывается одна его часть, а при наведении курсора другая.
Как это сделать? На самом деле все достаточно просто.
В данном примере для блока с фиксированными размерами мы в качестве фона загружаем "двойное" изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую "часть" фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.
Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:
Открываем значит фотошоп и рисуем в нём примерно такой рисунок:
Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет "скакать". Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..
Итак, у нас получилась "двойная" картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.
Он у меня получился таким.. смотрим результат и читаем комментарии в коде:
CSS спрайты
body {background-color: #020}
h1 {font-size:24px; color: #ddd}
/* Создаём отдельный класс для ссылок с кнопками */
a.sprite {
display:block; /* Ссылки будут блоками. */
width:175px; /* Ширина блока 175 пикселей по ширине нашей "двойной" картинки */
height:40px;
/* Высота блока 40
- это половина
высоты нашей двойной картинки */
background:url("sprite.png"); /* делаем картинку фоном (зная, что будет видна только половина картинки) */
margin:3px; /* "зазоры" между кнопками */
text-align:center; /* текст по центру */
line-height:40px; /* Расстояние между строками 40 пикселей чтобы текст был по центру кнопки */
font-size:18px; /* шрифт 18 пикселей */
color:#ddd; /* цвет серенький ближе к беленькому */
text-decoration:none /* ссылки этого класса подчеркивать не будем */
}
/* Стиль ссылки при наведённом курсоре */
a.sprite:hover {
background-position:0 -40px; /* ВСЯ ФИШКА ЗДЕСЬ! сдвигаем фон на 40 пикселей вверх, отрицательным значением background-position, тем самым показываем вторую часть изображения где наша кнопка активна */
color: #fff /* цвет беленький */
}
Такое вот меню получилось:
Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4
Думаю, многие читатели задаются вопросом: "А зачем вообще нужны эти спрайты если тоже самое можно сделать с помощью двух отдельных картинок, где одна фон для просто ссылки, а вторая для ссылки с :hover , при этом, не сражаясь с фотошопом и не высчитывая координаты фона для CSS??"
Во-первых: Скорость загрузки изображений увеличивается в разы!! Несмотря на то что "двойная" картинка весит столько же, сколько и две отдельно взятых маленьких "одинарных", загрузка одной большой картинки происходит быстрее, так как браузером не создаются дополнительные HTTP запросы серверу.
Помните, когда я Вам показывал свой логотип-спрайт, говорил что слукавил? Так вот моё лукавство заключается в том, что данная картинка содержит в себе не две логических части изображения, а восемнадцать!!
И полностью она выглядит так:
То есть практически вся графика, которую Вы видите на этом сайте, на самом деле приходит к Вам в виде одного единственного изображения! CSS файл показывать не буду, я его сам боюсь..)),
Так вот HTTP запросы.. если бы изображений вместо одного было 18ть то диалог браузера с сервером выглядел бы примерно так:
Браузер
: Здравствуй Сервер! я тут от тебя же, по моему запросу, получаю HTML и CSS документы, так вот в них указано, что у тебя в папке "графика".. должна лежать картинка с названием: "картинка1" скинь а?
Сервер
: Привет Браузер, давненько не виделись, сейчас посмотрю.. ага есть у меня такая картинка! Лови!!
Браузер
: Спасибо, поймал! Но мне еще нужна "картинка2" в той же папке..
Сервер
: Да и такая есть.. отправляю..
Браузер
: Загрузил.. но тут еще "картинка3" указана.
Сервер
: И не спится же тебе! Держи свою картинку!!
Браузер
: Спасибо! Да мне уже саму если честно надоело, но мой пользователь хочет догрузить страницу полностью.. короче у тебя там еще "картинка4" должна быть..
Сервер
: Ты меня начинаешь напрягать! На свою картинку!!
Браузер
: Извини, но я же не виноват, что здесь столько изображений!!! Нужна "картинка5"!
Сервер
: У меня от тебя уже процессор кипит!! Заколебал!! Забирай свою картинку!!
... ... ...
Дальнейший диалог озвучивать не буду, ибо дальше идет нецензурная брань..
К чему вся эта болтовня между сервером и браузером (клиентом) на которую уходит уйма времени и трафика, к тому же нагружает сервер при большом количестве посетителей сайта, если гораздо быстрее и экономичнее сделать один HTTP запрос и получить все 18 картинок в одном пакете!!
Во-вторых: Загрузка второго изображения при использовании псевдокласса :hover происходит лишь только в тот момент когда пользователь навел курсор на ссылку с первым изображением. Если это небольшое изображение типа кнопки из примера выше, то ничего особо страшного не произойдёт - вторая картинка быстро подгрузится и пользователь ничего не заметит.. а если это большая картинка по весу и размеру?? Тогда пользователь будет наблюдать, как она загружается, хотя он психологически был готов к быстрой смене изображений! Еще один плюс спрайтам! … хотя, если честно, одновременно это и минус.. минус в том случае если пользователь в течении сессии так и не навел курсор.. картинка загрузилась, но так ему и не пригодилась.. но поверьте эта "жертва трафика" оправдывает себя практически всегда!
Ну и в-третьих: Как бы Вам это не показалось странным, но это удобно!! Удобно в коде указывать путь к одному и тому же изображению, удобно его править в фотошопе, к примеру, сделать весь сайт поярче или потемнее работая с одним единственном рисунком, удобно хранить, удобно загружать на сервер, да даже в CSS работать с большим спрайтом удобно! - хотя для этого и нужны определённые навыки и привычка..
Ладно, решайте сами использовать спрайты или нет.. а моё дело маленькое, просто так сказать довести информацию до Вашего сведения.. возникнут дополнительные вопросы жду Вас на
Спрайт (компьютерная графика)
Спрайты в двухмерной графикеИзначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения . На некоторых машинах (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 - спрайт, который заменяет трёхмерную модель на большом удалении.
Спрайт - это не только вредный напиток, но и весьма полезная 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 файл со всеми вашими картинками, он сам разместит их на одном общем спрайте и выдаст его вместе с уже оформленным и просчитанным файлом стилей.