Зачем и когда использовать спрайты? Что такое спрайты CSS

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

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

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

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

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

Эти 30 иконок помогут вам создать слот-машину в лучших традициях казино Лас-Вегаса.

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

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

Добавьте в вашу экшн-игру или платформер еще одного персонажа, пусть у Frisky Girl появится приятель. Nimble Boy смотрится не менее эффектно, чем она, и тоже включает все необходимые движения и состояния.

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

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

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

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

Добавьте персонажу препятствий и предметов для взаимодействия. Набор спрайтов разнообразит вашу игру и будет удивлять игроков с каждым новым уровнем.

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

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

Понравилось:
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 . Это значит, что наша птица при открытии страницы будет "спать" - это соответствует левому нижнему изображению внутри спрайта - где у неё закрыты глаза. Теперь самое время "нарезать" наш спрайт, т.е. выделить из него отдельные изображения.

Задача "нарезки" спрайта является довольно трудоёмкой - она требует внимательности, чтобы не ошибиться с координатами, определяющими каждое изображение в спрайте. К счастью, на сегодня есть сервисы, которые полностью снимают эту головную боль с дизайнера и верстальщика. Я использую для нарезки и рекомендую Вам сервис 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; }

Теперь, когда мы успешно нарезали спрайт и поместили 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"); }); });

Ну, вот и всё! Наша птица готова и внесла жизнь своей анимацией в страницу! :) Просмотреть демо можно . Скачать архив с примером - внизу статьи.

Теперь, когда мы знаем, как нарисовать много интересных штук, давайте оживим их. Первое, что нужно знать об анимации - это просто рисование одного и того же снова и снова. Когда вы вызываете функцию рисования, то она сразу же добавляет что-то на экран. Если вы хотите анимировать это, просто подождите несколько миллисекунд и нарисуйте это заново. Конечно, вы не хотите сидеть в ожидании пока цикл не прервётся браузером. Вместо этого вы должны нарисовать что-то, затем попросить браузер вызвать это снова через несколько миллисекунд. Самый простой способ сделать это - с помощью функции JavaScript setInterval() . Она будет вызывать вашу функцию рисования каждые N мс.

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

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

requestAnimationFrame становится стандартом, но большинство браузеров поддерживает только свои собственные версии с префиксом. Например, Chrome использует webkitRequestAnimationFrame , а Mozilla поддерживает mozRequestAnimationFrame . Чтобы исправить это, мы воспользуемся скриптом Пола Ириша . Он просто соединяет разные варианты в новой функции: requestAnimFrame .

// setTimeout в качестве запасного варианта window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })();

Попробуем простой пример, в котором мы анимируем прямоугольник на экране.

Базовая анимация прямоугольник с помощью requestAnimFrame (щёлкните для запуска)

Теперь вы заметили проблему. Наша прямоугольник движется по экрану, обновляясь на пять пикселей через каждые 100 миллисекунд (или 10 кадров в сек.), но старый прямоугольник остаётся. И выглядит так, что прямоугольник становится только длиннее и длиннее. Помните, что холст это просто набор пикселей. Если вы установите несколько пикселей, то они будут оставаться там до тех пор, пока не изменятся. Итак, давайте очистим холст в каждом кадре, прежде чем мы нарисуем прямоугольник.

Var x = 0; function drawIt() { window.requestAnimFrame(drawIt); var canvas = document.getElementById("canvas"); var c = canvas.getContext("2d"); c.clearRect(0,0,canvas.width,canvas.height); c.fillStyle = "red"; c.fillRect(x,100,200,100); x+=5; } window.requestAnimFrame(drawIt);

Рисование прямоугольника через очистку фона (щёлкните для запуска)

Это всё, что на самом деле нужно для анимации. Рисовать что-то снова и снова. Попробуем нечто немного более сложное: симулятор частиц. Мы хотим, чтобы некоторые частицы падали вниз по экрану подобно снегу. Для этого мы реализуем классический алгоритм симулятора частиц:

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

Var canvas = document.getElementById("canvas"); var particles = ; function loop() { window.requestAnimFrame(loop); createParticles(); updateParticles(); killParticles(); drawParticles(); } window.requestAnimFrame(loop);

Вначале мы создаём основу симулятора частиц. Это функция цикла, которая вызывается каждые 30 мс. Для структуры данных нам требуется пустой массив частиц и счётчик тактов. На каждой итерации цикла выполняется четыре части.

Function createParticles() { // добавляем частицу, если их меньше 100 if(particles.length < 100) { particles.push({ x: Math.random()*canvas.width, // между 0 и шириной холста y: 0, speed: 2+Math.random()*3, // между 2 и 5 radius: 5+Math.random()*5, // между 5 и 10 color: "white", }); } }

Функция createParticles проверяет, сколько у нас частиц. Если их меньше 100, то создаёт новую частицу. Обратите внимание, что проверка выполняется только каждые 10 тактов. Это позволяет начать с пустого экрана, а затем постепенно наращивать число частиц, а не создавать все 100 с самого начала. Вы можете настроить параметры в зависимости от желаемого эффекта. Я использую Math.random() и другую арифметику чтобы убедиться, что снежинки располагаются в разных местах и не выглядят одинаковыми. Так снег становится более натуральным.

Function updateParticles() { for(var i in particles) { var part = particles[i]; part.y += part.speed; } }

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

Function killParticles() { for(var i in particles) { var part = particles[i]; if(part.y > canvas.height) { part.y = 0; } } }

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

Function drawParticles() { var c = canvas.getContext("2d"); c.fillStyle = "black"; c.fillRect(0,0,canvas.width,canvas.height); for(var i in particles) { var part = particles[i]; c.beginPath(); c.arc(part.x,part.y, part.radius, 0, Math.PI*2); c.closePath(); c.fillStyle = part.color; c.fill(); } }

Наконец рисуем частицы. Опять же это очень просто: очистите фон, нарисуйте круг с текущими координатами, радиусом и цветом частицы.

Теперь это выглядит так.

Симулятор частиц для снега (щёлкните для запуска)

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

Заключительным основным видом анимации является анимация спрайта. Так что такое спрайт?

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

Спрайты хороши для нескольких вещей.

• Во-первых, спрайт это изображение, которое, вероятно, рисуется быстрее, чем векторы, особенно сложные.
• Во-вторых, спрайты чрезвычайно удобны, когда вам нужно рисовать одну штуку снова и снова. Например, в игре Space Invaders у вас есть куча пуль на экране, которые все выглядят одинаково. Гораздо быстрее загрузить спрайт пули один раз и рисовать его снова и снова.
• В-третьих: спрайты быстро загружаются и рисуются как часть листа. Это позволяет загрузить единый файл для всего набора спрайтов гораздо быстрее, нежели полученную кучу отдельных изображений. Спрайты, как правило, также сжимаются лучше. Наконец, используется меньше памяти для хранения одного большого изображения, чем куча более мелких.
• В конце концов, спрайты удобны для работы с анимацией, потому что получаются из таких инструментов рисования, как Фотошоп. Код просто листает изображения и его не волнует, что на картинке. Это значит, что ваш художник может легко обновить графику и анимацию, не касаясь кода.

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

Мы можем нарисовать только этот спрайт, указав координаты исходника:

Context.drawImage(img, // изображение спрайт-листа 65,0,13,13, // исходные координаты (x,y,w,h) 0,0,13,13, // конечные координаты (x,y,w,h));

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

Var frame = tick % 10; var x = frame * 13; context.drawImage(img, // изображение спрайт-листа x,0,13,13, // исходные координаты (x,y,w,h) 0,0,13,13, // конечные координаты (x,y,w,h)); tick++;

Каждый раз при обновлении экран мы вычисляем текущий кадр анимации глядя на счётчик тактов. Операция деления по модулю (%) на 10 означает зациклить кадр от 0 до 9 снова и снова. Затем вычисляется координата х в зависимости от количества кадров. После чего рисуется изображение и обновляется счётчик тактов. Конечно, это может происходить слишком быстро, так что вы можете делить такты по модулю на 2 или 3, чтобы анимация бежала медленнее.

Анимация каждые 10 кадров для детализации (щёлкните для запуска)

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

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

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

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

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

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

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

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

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

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

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

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

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

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