НТВ плюс 

Как делать спрайты. От теории - к практике! Создаем анимированную птицу из Angry Birds с помощью спрайта. Отлично! Итак, как же это сделать

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

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

Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения . На некоторых машинах (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 - спрайт, который заменяет трёхмерную модель на большом удалении.

Понравилось:
27



Не понравилось: 4

Недоступен ни один перевод.



спрайт

до или после "до" "после" "после"

angry_bird angry.png. index.html


Недоступен ни один перевод.


CSS спрайты - это графика для Вашего Web-сайта, объединённая в один графический файл. "Почему один файл?" - спросите Вы. Дело в том, что такой подход к хранению изображений позволяет повысить производительность веб-страниц, а также хранить графические изображения более организованно. Давайте взглянем на некоторые из лучших практик применения спрайтов. Само название спрайтов может напомнить Вам об игровых спрайтах, ретро игровой консоли и даже браузерных играх, которые так популярны сегодня:


Итак, применимо к Веб-дизайну, спрайт - это всего лишь один большой файл, содержащий несколько изображений для Вашего сайта, экономящий время загрузки и передачи файла по сети. Когда спрайт, к примеру, содержит 20-30 изображений, то это существенно может облегчить нагрузку на сервер, поскольку, если бы эти изображения хранились по отдельности - серверу пришлось бы делать соответственно 20-30 отдельных запросов для получения каждого такого изображения. Благодаря спрайту на сервер идет всего один HTTP-запрос - для получения одного-единственного изображения. Спрайт визуально может выглядеть не совсем "читаемо" для глаза, поскольку его основная задача - лишь собрать разные "куски" Вашего дизайна воедино. Например, спрайт может быть вот таким:

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

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

Приведу еще один пример спрайта. Так хранит элементы графики один известный западный сайт, посвященный дизайну:

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

Различные подходы - создаем спрайт до и после создания сайта

Есть два распространенных подхода при создании спрайт листа - сделать его до или после создания Вашего сайта. Вы можете поместить все изображения в спрайт лист перед созданием сайта. Это то, что мы называем подход "до" . Кроме того, Вы можете создать все изображения в виде отдельных файлов, что делает их редактирование более простым. Как только сайт будет построен, и все изображения подготовлены, Вы можете быстро и легко создать спрайт лист, либо вручную, либо, используя один из нескольких инструментов. Это мы будем называть подход "после" . Если спрайт листы для Вас в новинку или Вы новичок в Веб-дизайне, то Вам больше подойдёт подход "после" . Существует множество утилит, сервисов и программ для помощи при создании спрайтов, большинство из которых распространяются и доступны бесплатно.

Располагаем картинки в спрайте организованно

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

От теории - к практике! Создаем анимированную птицу из Angry Birds с помощью спрайта

Итак, мы познакомились с понятием спрайта в Веб-дизайне, но теория без практики - ничто. Поэтому сейчас мы 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 спрайты для ускорения загрузки сайта. Именно эта технология позволяет существенно повысить скорость загрузки сайта.

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

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

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

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

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

Зачем нужно использовать CSS спрайты

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

Элементы дизайна, которые можно заменить спрайтом

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

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

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

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

Здесь же вы сможете увидеть и рекомендации по созданию спрайтов. А точнее рекомендация генератора CSS спрайтов SpriteMe . С помощью данного генератора можно легко создать нужные спрайты. Но мне он не помог, и поэтому пришлось делать всё самостоятельно.

Как создать CSS спрайты

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

После того, как сервис GTmetrix подсказал вам или вы сами определились какие файлы необходимо объединить в спрайты, — следует приступить к созданию спрайта (заготовки).

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

Сохраняем изображения в отдельной папке

Вот из этих отдельных изображений мы и будем создавать спрайт.

Создаём новое изображение с прозрачным фоном. Размер выбирайте так чтобы уместить все изображения. Ну, к примеру, если у вас все изображения 32х32 и 16х16 пикселей и есть одно 380х150, — вот и делайте своё изображение, так чтобы уместить все эти изображения в одном.

И обязательно сделайте прозрачный фон.

Но даже если Вы ошиблись с размером это всегда можно подправить через пункт меню «Изображение» — «Размер изображения» .

Теперь поочерёдно выставляйте все изображения, которые вы приготовили ранее.

Пункт меню «Файл» > «Открыть изображение» . Откроется изображение, выделите его CTRL+Aи скопируйте в буфер обмена CTRL+C. Перейдите к заготовке и вставьте изображение CTRL+V. И так со всеми изображениями.

Должно получиться нечто подобное.

Теперь следует обрезать всё лишнее. Для этого используйте инструмент «Обрезка» .

Когда заготовка готова, сохраняем её в PNG формате и половина дела готова. Пункт меню «Файл» > «Сохранить» . Не забудьте про формат.

Теперь изображение нужно загрузить на хостинг в папку с изображениями темы:

http://vashdomen/wp-content/themes/vahatema/images/

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

Загрузку файла на хостинг можно сделать через файловый менеджер хостинга, в моём случае это . Или через . Это уже на ваше усмотрение.

А вот теперь начинается самое сложное, нужно заменить изображения шаблона – спрайтом. В качестве примера, возьмём на моём блоге заголовки блоков в сайтбаре и исследуем код элемента. Для этого нужно нажать правую кнопку мыши на нужном элементе и в контекстно-зависимом меню выбрать пункт «Посмотреть код элемента» (для Chrome) или «Исследовать элемент» (для Firefox). Примерно так и для других браузеров.

Исследование элемента в шаблоне

Здесь Вы можете видеть HTML код и CSS стили. То есть вы видите файл, отвечающий за вывод стилей и номер строки где искать класс, отвечающий за данный фрагмент. Из скриншота понятно, что класс sidebar и именно заголовок h2 , расположен в файле style.css на 339 стоке . Вот именно здесь и нужно вводить все необходимые изменения стилей.

Но уже здесь в окне исследования элемента Вы можете поэкспериментировать со стилями и подобрать нужный. После чего вам нужно будет просто перенести эти стили в файл style.css.

Прежде чем приступить к данному шагу, настоятельно рекомендую сделать резервную копию файла style.css.

Теперь ваша задача открыть файл style.css и внести нужные изменения. Вы можете сделать это при помощи Notepad++ (очень удобный редактор, и отображает номер строки) или через редактор в административной панели WordPress.

Итак, открываем административную панель WP– «Внешний вид» > «Редактор» > «style.css» . Так как здесь нет нумерации строк, следует искать нужное место при помощи поиска CTRL+F и вводите искомый CSS класс (в моём случае — sidebar h2).

Внесение изменений в код style.css

Нужно всего лишь изменить название файла изображения и ввести параметры положения относительно оси координат. Если у Вас не так как у меня на скриншоте, то вы должны понимать, что за вывод изображения (фона) отвечает параметр: background: url(‘images/spriteme.png’);

А за позицию изображения отвечает параметр: background-position: -0px -0px; с отрицательными значениями. Первое число это смещение по оси Х, второе – смещение по оси Y.

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

На этом создание CSS спрайтов для сайта закончено. Следуйте инструкциям и у вас всё получится.

В ближайшее время запишу видеоурок, в котором постараюсь подробно показать и рассказать о создании CSS спрайов.

А вот и обещанный видеоурок:

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

На этом у меня сегодня всё. Друзья, всем желаю удачи!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Списка - одна иконка
  • Ссылок - три иконки
  • Формы поиска - одна иконка

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

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

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

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

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

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

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

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

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

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

  • от левого края в 21 пиксель, чтобы текст не заслонял картинку. Потом в качестве фоновой картинки ставим sprites.png. Высота всей картинки со спрайтами в данном случае 110 пикселей и зеленая стрелка находится в самом конце. Высота зеленой стрелки 16 пикселей, то есть стрелка начинается после 94-го пикселя от верха картинки. Это означает что фон мы должны сдвинуть на 94 пикселя вверх. В css коде это написано так «0 -94px», то есть сдвинули на 0 пикселей вправо и 94px пикселя вверх.

    Закончим со списком. Теперь сделаем примерно так же ссылки:

    A{ padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; } a{ padding:0 0 0 20px; background:url("sprites..png") 0 -21px no-repeat; }

    Что означают селекторы a? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://сайт/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку - ссылку на мой блог.

  • Определяем нужную ссылку по href.. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
  • Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
  • Указываем в качестве фонового изображения картинку sprites.png
  • Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»
    • Домашнее задание Спрайты с градиентами

    Теперь посмотрим второй пример.


    На этой картинке изображено окошко. У окна есть заголовок, тело и подвал. У каждого из этих элементов на фоне установлен градиент. Присмотритесь если этого сразу не видно, там есть переход цвета от бледного к насыщенному.

    Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты - 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

    Теперь напишем html код окошка:

    Начинаем применять спрайты. Начнем с заголовка окна:

    #window-header{ height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; }

    В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

    Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

    Точно так же как и заголовок поставим градиент для подвала:

    #window-footer{ height:30px; background: #C0FFC0 url("gradients.png") 0 -60px repeat-x; }

    Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

    С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

    CSS код будет следующий:

    #window-body{ position:relative; } #window-body-gradient{ position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 -30px repeat-x; } #window-body-text{ position:relative; }

    Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

    Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

    Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива - 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

    Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

    Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

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

    В очередной раз продублировал ссылку.

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

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

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

    Если перед вами компьютерная игра на мониторе, то что вы видите перед собой? Графическую оболочку данного проекта, разнообразные текстуры, составленные из крошечных пикселей. Если вы планируете создавать компьютерную игру, то вам предстоит много работать с графикой. Но если вы пока что не замахиваетесь на крупный проект, то от вас не требуется идеальной работы с графическими 3D-редакторами. Здесь вам помогут спрайты для игр, которые вы можете скачать в интернете. Но что же это такое? Как их можно использовать и чем это облегчит вам задачу? Спрайты для игр - это готовые текстуры персонажей, предметов и так далее, которые вы можете загрузить на свой компьютер, а затем использовать в процессе создания игры. Это значит, что вам не нужно будет отрисовывать каждый объект в игре, а также каждую фазу его движения - все это уже будет у вас в готовом виде. Как видите, спрайты для игр действительно значительно могут облегчить вам жизнь.

    Вид спрайтов

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

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

    Как вы прекрасно понимаете, в большинстве случаев вы сможете найти спрайты для игр 2D, так как трехмерные изображения не столь стандартизированы, поэтому понадобится очень много места, чтобы передать все движения одного трехмерного объекта. В то же время работа с двухмерными спрайтами крайне проста. Вам нужно просто загружать спрайты в редактор, в котором вы творите, и склеивать их, создавая эффекты движения. А затем загружать в уровень и наслаждаться результатом.

    Переход от спрайтов к графике

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