Как быстро и просто создать css-анимацию, используя спрайты

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

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

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

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

В этом вся суть CSS спрайтов.

Как объединить изображения в спрайт

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

Объединение изображений

Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер (50 на 50 пикселей):

Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его «sprite.png«. Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.

Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок (мегафон) расположен в верхних 50 пикселях нового изображения, а второй (смайлик) — в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS:

Позиционирование изображения на странице

В этом примере мы будем использовать рисунки в качестве фоновых изображений, размещенных в элементах div. Мы создадим пустые теги div для отображения изображений. Если на нашей странице нам нужно вывести изображение мегафона, мы используем CSS-класс «megaphone«:

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

Приведенный выше код CSS указывает ширину и высоту изображения мегафона (50 на 50 пикселей), он также вызывает изображение «sprite.png«, которое является объединенным. Часть кода «0 0px» отвечает за отображение спрайта. Указание начинать вывод изображения с «0 0px» означает, что оно должно отображаться с пикселей по оси X и с пикселей по оси Y. Это значит «начинать вывод изображения сверху» и «начинать вывод изображения слева«.

Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей (где расположен мегафон). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта. Мы создадим класс CSS под названием «smile«:

.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: «0 -50px«. Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат (-50px)

Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.

Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом «megaphone«:

<div class="megaphone"></div>

Когда нужно вывести смайлик, мы размещаем div с классом «smile«:

<div class="smile"></div>

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

Вадим Дворниковавтор-переводчик статьи «How to use CSS sprites»

Как пользоваться спрайтами CSS

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

HTML-разметка выглядит следующим образом:

<a href="#" class="facebook"></a>
<a href="#" class="twitter"></a>
<a href="#" class="youtube"></a>
<a href="#" class="instagram"></a>
<a href="#" class="linkedin"></a>
<a href="#" class="tumblr"></a>
<a href="#" class="google"></a>

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

Переходим к 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 пикселей.

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

a.facebook { background-position: left top; }

Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение :

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, а именно присвоением значения свойству :

a:hover {
  background-position-y: bottom;
}

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

Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство ):

a { transition: all 0.2s ease-out; }

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

Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации — transform.

Верстка с использованием CSS спрайтов

Выполнила: Мария Жиленко
Гр. 22304

Петрозаводск
2011

Что это такое?

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

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

С помощью параметра background-position мы позиционируем наше изображение так, чтобы оно выглядело как картинка.
Рассмотрим пример. У нас есть картинка-ссылка и нам нужно, чтобы при наведении указателем мыши на эту картинку она изменялась.
А вот код:

<a href=»#» class=»sprite-demo»> </a>

CSS:

a.sprite-demo { display:block; width:220px; height:30px; background:url(«images/1.png») left top; } a.sprite:hover {background-position:left 30px;}

А вот сама картинка, с помощю которой это сделано:

Причем картинка всего одна.

А зачем нам комбинировать изображения?

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

Уменьшаем количество запросов браузера к веб-серверу. Практика показывает, что от 5% до 38% времени загрузки страницы уходит на загрузку HTML, остальные 62%-95% составляют HTTP запросы (загрузка скриптов, изображений и т.д.). Каждый тэг и фоновый рисунок составляют отдельный запрос

Несложно догадаться, что уменьшение количества HTTP запросов является одним из основных способов оптимизации загрузки и эффективности работы сайта.
Одновременно с тем снижается нагрузка на сервер, что важно при высокой посещаемости сайта.
Устраняем задержку перед отображением второй картинки, т.к. браузеру уже не надо загружать второе изображение после наведения указателем мыши на картинку — оно уже есть.
Уменьшаем общий размер фалов с графикой.
Возлагаем труд по анимации на CSS-движок браузера, а не на JS-движок, т.е

это будет работать даже с выключенными скриптами.

Недостатки

1. Увеличивается время затрачиваемое на дизайн сайта, так как мега спрайты часто требуют продолжительных проверок и выравнивания изображений состояний.
2. Увеличивается затраты на разработку.
3. Могут возникнуть ограничения в использовании потенциальных преимуществ атрибутов title и alt .

1. CSS спрайт Twitter

Спрайт подключается к строчному элементу <span>, который делают блочным (display:block), чтобы задать ширину и высоту. Для каждого элемента через класс прописывается свойство background c необходимыми координатами (background-position). Спрайт сделан сеткой в виде шахматной доски с ячейками 16*16px залитыми фоном.
Такой спрайт удобно поддерживать , т.к. легко высчитываются координаты необходимой картинки, но можно использовать только для блоков с фиксированными размерами.

2. CSS спрайт Facebook

На Facebook спрайты разделяются на типы. На картинке три различных спрайта. Спрайт подключается к строчным тегам <a> <i> <span>. У элементов задана высота и ширина. Для каждого элемента через класс прописывается свойство background-image c необходимыми координатами.
Cпрайты разделены по типам, это позволяет загружать необходимые изображения быстрее, но можно использовать только для блоков с фиксированными размерами

2. CSS спрайт Youtube

Спрайт загружается как фон классу sprite. Когда возникает необходимость в выборе какого-то элемента, происходит выбор изначальной позиции при помощи CSS свойства background-position, а затем применение высоты и ширины.
Выведем логотип YouTube на экран:

<div id=»logo» class=»sprite»> </div>

CSS:

.sprite { background:url(«images/youtube_sprite.png»); } #logo { width:120px; height:52px; background-position:0 0; }

Используя тот же класс sprite, и то же самое изображение создадим изображение, которое будет изменяться при наведении мышки.

YouTube

CSS:

.sprite { background:url(«images/youtube_sprite.png»); } #icon { background-position:-10 -413px; padding:0px 8px; } #icon:hover{ background-position:-10 -431px; }

Подведем итог.

Спрайты — вещь полезная, но при их созданийй надо учитывать, что хороший CSS спрайт должен:

1. легко поддерживаться и расширяться
2. задаваться через единый класс, чтобы не переписывать много раз свойство background-image для элементов
3. иметь возможность задаваться для любого элемента не зависимо от его размеров
4. разбиваться на несколько типовых спрайтов, если картинок слишком много

Как работают спрайты

  Спрайты работают напрямую через CSS.

  Чтобы вывести изображение из спрайта, нужно задать к элементу в HTML class и в CSS задать этому классу стили.

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

— задаём путь к изображению (спрайту)

— координаты выводимого фрагмента из спрайта

и — задаём размер (ширину и высоту) выводимого фрагмента

Пример вывода иконок из спрайта

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

  Итак, создаём меню у которого HTML следующего вида:

Получится следующий результат:

• Гугл
• Вордпресс
• Инстаграмм
• Ютуб
• Фотогалерея

  Теперь добавим к каждому из пунктов класc. В примере я специально назову класс длинным названием demoSpIcon, чтобы у меня в основных стилях сайта такое название больше никогда не вылезло, вы же можете называть классы как вам удобно:

  Для заданного класса demoSpIcon пропишем CSS стили, где:

• сразу к имени класса добавим псевдокласс ::before
• бекграундом зададим ссылку на спрайт который выложен выше как примером
• размер я подобрал в консоле браузера, он равен 38px в длину и ширину

Прописываем стили:

  Получим результат:

• Гугл
• Вордпресс
• Инстаграмм
• Ютуб
• Фотогалерея

  Как видно, возле пунктов появилась иконка, но у всех одна и не соответствует названию пунктов меню.

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

  Так как в спрайте все иконки из набора одинаковые по размеру, мы прописали через CSS для класса demoSpIcon те стили, которые будут повторятся для каждой иконки.

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

и добавим стили с соответствующими координатами иконок:

Результат

• Гугл
• Вордпресс
• Инстаграмм
• Ютуб
• Фотогалерея

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

  Дальше можем делать всё что захотим. Например, чтобы теперь сделать из нашего вертикального меню горизонтальное, мы к тегу ul добавим класс horizont и в CSS пропишем для него стили.

Получится следующий HTML макет:

А стили CSS теперь будут выглядеть так:

Результат:

• Гугл
• Вордпресс
• Инстаграмм
• Ютуб
• Фотогалерея

Как видим — получилось горизонтальное меню с иконками.

  Единственное что я упустил — это ссылки на пунктах меню. Я их не ставил чтобы они не мешали. Чтобы добавить ссылки, переделываем конструкцию на пунктах меню вот так:

функциональность

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

Графические данные для спрайтов становятся доступными с использованием той же процедуры, что и графические данные для нормальной структуры изображения — примерами являются C64 и Amiga , где это делается с помощью доступа к памяти DMA графическим процессором к специальным областям основной памяти. .

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

Чтобы переместить спрайт, достаточно просто изменить его координаты x и y в регистрах управления. Нет сложного вычисления адреса в графической памяти , что также разряжает основной процессор . Графический процессор автоматически вставляет спрайт в указанных координатах при создании следующего изображения. Также возможны анимированные спрайты. Все, что нужно, — это заменить данные графического спрайта в памяти данными следующего отдельного изображения. При необходимости можно просто указать другую область памяти для следующего отдельного изображения.

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

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

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

Спрайты создать эффективную иллюзию , хотя

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

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

Значение для компьютерных игр

Простая игра на C64 с несколькими спрайтами

Появление спрайтов в 1980-х произвело революцию в возможностях компьютерных игр, потому что в то время мощности процессора было недостаточно для перемещения сложных графических данных на экране (см. Также домашние компьютеры , например, C64 , Amiga ). Спрайты были заменены фигурами ( C16 ) или дополнены ( C128 ) или дополнены BOB (Amiga).

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

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

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

Например, спрайты часто используются , чтобы добавить кнопки , значки и другие пользовательский интерфейс элементы для обеспечения программ . Разработчики программного обеспечения могут добавлять действия к спрайтам в пользовательском интерфейсе, например: Например, воспроизведение анимации или изменение текущего вида окна при нажатии на спрайт. Спрайты особенно полезны для добавления пользовательской графики, которые изначально не поддерживается в операционной системе интерфейса программирования . Спрайты также используются во всемирной паутине для кнопок навигации и для визуальной привлекательности веб-страниц . За последние несколько лет таблицы спрайтов стали популярным способом загрузки графики веб- сайтов для веб-разработчиков . Объединив большое количество спрайтов в одно изображение, все спрайты могут быть загружены и кэшированы из браузера пользователя на сервер с помощью одного запроса . Затем изображения отображаются с использованием свойств CSS, которые определяют положение отдельных спрайтов в изображении.

Спрайты изображений-создание списка переходов

Мы хотим использовать изображение спрайта («img_navsprites.gif») для создания списка переходов.

Мы будем использовать HTML список, потому что это может быть ссылка, а также поддерживает фоновое изображение:

Пример

#navlist {    position: relative;}#navlist li {    margin: 0;    padding: 0;    list-style: none;    position: absolute;    top: 0;}
#navlist li, #navlist a {    height: 44px;    display: block;}
#home {    left: 0px;    width: 46px;    background: url(‘img_navsprites.gif’)
0 0;}#prev {    left: 63px;    width: 43px;    background: url(‘img_navsprites.gif’) -47px 0;}#next {    left: 129px;    width: 43px;    background: url(‘img_navsprites.gif’)
-91px 0;}

Пример объяснил:

• #navlist {position:relative;} — положение имеет значение относительно, чтобы разрешить абсолютное позиционирование внутри него
• #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
  — поля и отступы имеют значение 0, list-style удаляется, и все элементы списка имеют абсолютную позицию
• #navlist li, #navlist a {height:44px;display:block;} — Высота всех изображений 44пкс

Теперь начните позиционировать и стиль для каждой конкретной части:

• #home {left:0px;width:46px;} — Расположен на всем пути влево, и ширина изображения 46пкс
• #home {background:url(img_navsprites.gif) 0 0;} — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)
• #prev {left:63px;width:43px;} — Позиционируется 63пкс вправо (#home ширину 46пкс + некоторое дополнительное пространство между элементами), а ширина 43пкс.
• #prev {background:url(‘img_navsprites.gif’) -47px 0;} — Определяет фоновое изображение, 47пкс вправо (#home ширина 46пкс + 1px разделитель линии)
• #next {left:129px;width:43px;}- Позиционируется 129пкс вправо (начало #prev 63пкс + #prev ширина 43пкс + дополнительное пространство), а ширина 43пкс.
• #next {background:url(‘img_navsprites.gif’) -91px 0;} — Определяет фоновое изображение, 91пкс вправо (#home ширина 46пкс + 1px разделитель линии + #prev ширина 43пкс + 1px разделитель линий)

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

Когда стоит использовать спрайты? Ответ в общем то один — спрайты нужно использовать если у вас на странице много мелких изображений

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

Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

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

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

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

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

Применительно к спрайтам это важно знать. Спрайты желательно делать черезстрочными или прогрессивными

Пользователь должен как можно быстрее увидеть картинки пусть и в плохом качестве.

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

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

Использование gulp для автоматической генерации svg спрайтов

Собирать спрайты вручную — очень трудоемкая работа. Поэтому создание svg спрайтов можно автоматизировать. Для этого мы будем использовать gulp и плагин gulp-svg-sprite.

Идея заключается в том, что мы просто перемещаем все свои svg файлы в одну папку, а gulp захватит все эти файлы и сгенерирует спрайт автоматически. Рассмотрим вкратце как это реализовать.

Устанавливаем плагин gulp-svg-sprite:

В файле gulpfile.js создаем таск для генерации спрайта:

В начале мы создаем переменную config с настройками для плагина, в которой говорим, что спрайт будет создаваться через элемент symbol и называется spite.svg. Так же, удаляем ненужные атрибуты и оптимизируем графику.

Далее указываем, что файлы лежат в папке src/img/svgIcons/, а создавать спрайт нужно в папку dist/img/. Плагин автоматически генерирует id для каждого изображения из его имени, по этому иконкам нужно давать осмысленные названия. Дале используем этот спрайт так как мы делали это раньше.

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

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

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

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

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

Оптимизация

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

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

Спецэффекты

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

Живая съёмка

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

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

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

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

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

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

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

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

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

Пишем код для прыжка на другой спрайт в Скретч

Перед началом работы загрузите фон и три спрайта или же нарисуйте спрайты в редакторе. О том, как рисовать персонажи и объекты в scratch читай в моем отдельном материале — Рисуем в редакторе Scratch (статья в стадии написания). В моем случае получилось так:

В представленном скрипте будет прыгать черный квадра. Вначале на 2 объект, а потом на 3 объект и наоборот. Начинаться код будет следующим образом:

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

ВНИМАНИЕ:В Интернете много примеров прыжка с упором на цвет объектов. Если у вас не получилось реализовать прыжок за счет цвет, то этот материал поможет решить проблему

На моих уроках детского программирования дети часто допускают ошибки именно с кодировкой цветов, поэтому прыжок спрайта не касается этой темы совсем! 

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

Разберем показанный выше код. При нажатии на кнопку W помещаем в переменную значение 15. Поменяйте этот параметр и посмотрите, что изменится в поведении спрайта! Далее меняет значение параметра У (вертикальное прямая в плоскости) и тем самым перемещаем спрайт вверх. Помните, что все это делается под циклом: Повторять всегда ! Теперь дорабатываем скрипт для плавного движения объекта вниз и тут же указываем условие до какой степени осуществлять спуск. В примере вторая стадия прыжка будет выполняться до контакта с одним из указанных спрайтов. Поиграйтесь с значением -1 (этот параметр должен быть всегда отрицательным) и посмотрите, как изменится поведение спрайта!

На этом прыжковый урок закончен, но не завершена работа юного программиста. Домашним заданием будет доработка скрипта:

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

Дополнительные полезные материалы по детскому программированию:

1. Простейшая первая игра на скретч: Едущая машинка
2. Начальные примеры мультипликации
3. Некоторые базовые алгоритмы движения спрайтов в играх на scratch
4. Прыгаем в вверх без запрыгивания на другие объекты
5. Игры для смартфона на App Inventor
6. Проекты по Lego WeDo (первого поколения)