Что такое спрайт
CSS и спрайты. Для чего нужны, какие бывают и как пользоваться спрайтами. Научитесь ставить координаты для составных элементов спрайта и выводить.
Современный веб одним из приоритетов ставит скорость и оптимизацию сайтов.
Так одним из методов оптимизации является использование на сайте изображений называемых спрайтами.
Что такое спрайт, когда, зачем и как их используют, я постараюсь вам объяснить в этой записи.
Спрайт это
Спрайт — это одно изображение, которое объединяет в себе два и более изображений.
Если мы рассмотрим спрайт который я привёл выше в качестве примера, то он состоит из 60-ти иконок. Всего одним запросом спрайт загружается в браузер вместо 60-ти (если загружать каждую иконку по отдельности), а при помощи CSS мы можем вывести любую из иконок входящую в спрайт в нужном нам месте, при чём можем выводит одну и ту же иконку много раз.
Использование спрайтов
Думаю всем понятно, что веб-страница содержащая много изображений, будет загружаться долго, генерируя при этом много запросов к серверу. Использование спрайтов уменьшает количество запросов серверу, в результате снижая время загрузки страницы сайта и сокращая потребляемый пользователем трафик.
Спрайты можно использовать в самых разных местах, но наиболее распространённые случаи когда через спрайт выводят иконки для пунктов меню, разные кнопки и соцсети. Так же спрайты можно использовать в анимациях, играх и ещё много где.
Как пример на этом сайте можно посмотреть форум, где иконки разделов форума это и есть кусочки одного изображения спрайта.
Как работают спрайты
Спрайты работают напрямую через CSS.
Чтобы вывести изображение из спрайта, нужно задать к элементу в HTML class и в CSS задать этому классу стили.
Обязательные для спрайтов стили CSS :
Пример вывода иконок из спрайта
Я возьму спрайт который был выше в примере и сделаю из него меню. Чтобы не липить шестьдесят пунктов меню, возьму пять пунктов, иконки которых будут из разных участков спрайта.
Итак, создаём меню у которого HTML следующего вида:
Получится следующий результат:
Теперь добавим к каждому из пунктов класc. В примере я специально назову класс длинным названием demoSpIcon, чтобы у меня в основных стилях сайта такое название больше никогда не вылезло, вы же можете называть классы как вам удобно:
Для заданного класса demoSpIcon пропишем CSS стили, где:
Как видно, возле пунктов появилась иконка, но у всех одна и не соответствует названию пунктов меню.
Всё дело в том, что из спрайта был взят фрагмент с нулевыми координатами и поэтому вывелась первая верхняя иконка.
Так как в спрайте все иконки из набора одинаковые по размеру, мы прописали через CSS для класса demoSpIcon те стили, которые будут повторятся для каждой иконки.
Теперь через пробел добавим к каждому пункту по классу с индивидуальным названием, к которым зададим координаты на спрайте:
и добавим стили с соответствующими координатами иконок:
Как видим теперь возле пунктов отображаются нужные иконки из спрайта.
Дальше можем делать всё что захотим. Например, чтобы теперь сделать из нашего вертикального меню горизонтальное, мы к тегу ul добавим класс horizont и в CSS пропишем для него стили.
Получится следующий HTML макет:
А стили CSS теперь будут выглядеть так:
Координаты спрайта
Координаты спрайта подбираются через консоль браузера. Для этого наводим курсор мышки на пункт меню где нужно определить координаты и жмём правую кнопку мышки.
В меню выбираем Исследовать элемент (браузер мазила) или Просмотреть код (в гугл-хром).
Обратите внимание что для спрайтов принято брать минусовые значения координат. После того как координаты нашли, копируем и вставляем их в CSS
Анимация из спрайта
Так же спрайты используют для анимации.
Например возьмём вот такую картинку-спрайт, которая состоит из шести фрагментов
Теперь в HTML вставим div с айдишником marsch
и пропишем следующие CSS стили:
То в результате получим вот такого идущего человечка:
*** Авторизируйтесь чтобы писать комментарии.
Спрайт (компьютерная графика)
Вы можете помочь улучшить эту статью, добавив ссылки на авторитетные источники.
Не подтверждённая источниками информация может быть поставлена под сомнение и удалена.
Чаще всего — растровое изображение, свободно перемещающееся по экрану. [1] Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. То есть легче всего воспринимать спрайт как перемещающуюся в пространстве проекцию какого-то объёмного тела так, что разница незаметна.
Содержание
Происхождение термина
Слово «спрайт» придумал в 1970-е годы кто-то из Texas Instruments: их новая микросхема TMS9918 могла аппаратно отображать небольшие картинки поверх неподвижного фона. [2]
Спрайты в двухмерной графике
Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения. На некоторых машинах (MSX 1, NES) программная прорисовка приводила к определённым ограничениям, а аппаратные спрайты этого ограничения не имели. Впоследствии с увеличением мощности центрального процессора, от аппаратных спрайтов отказались, и понятие «спрайт» распространилось на всех двумерных персонажей. В частности, в видеоиграх Super Mario и Heroes of Might and Magic вся графика спрайтовая.
CSS-спрайты
Применяются в вебе. Несколько изображений располагаются в одном графическом файле. Для того, чтобы вырезать из файла нужный кусок, применяется CSS — отсюда название технологии.
CSS-спрайты экономят трафик и ускоряют загрузку — браузеру потребуется запрашивать меньше файлов.
Спрайты в трёхмерной графике
Движки первого поколения
В первых трёхмерных играх, например, Wolfenstein 3D (1992) и Doom (1993), персонажи представлялись в виде двумерных рисунков, изменяющих размер в зависимости от расстояния.
На 3D-акселераторах
На 3D-акселераторах применяется такая техника: объект рисуется в виде плоскости с наложенной на неё текстурой с прозрачными областями. Эта технология применяется в трёх случаях.
Оптимизация
Спрайты могут применяться для оптимизации графического ядра, когда отрисовка трёхмерной детализованной модели слишком накладна и может привести к сильному падению скорости рендеринга. Таковыми являются:
Спецэффекты
Некоторые спецэффекты (например, огонь) выполняются спрайтами, так как полигональный огонь плохо смотрится. Сравните, например, взрывы в Quake 2 (рис. 2) и Unreal Tournament (рис. 3).
Для большей правдоподобности изображения используется большое количество сравнительно маленьких спрайтов (так называемая система частиц).
Рисунок 1.
Спрайтовая публика в Rally Trophy
Рисунок 4.
Живой актёр в трёхмерном кабинете в realMyst.
Живая съёмка
Изредка спрайты применяются для добавления в игру живого фото или видео. Например:
Стоит заметить, что в некоторых спрайтовых играх, таких, как Rise of the Triad, спрайты фотографировались с актёров, а не с моделей, игрушек или рисунков.
Появление шейдеров частично снимает потребность в живой съёмке — многие нюансы фотоизображения уже можно передать полигональными моделями в реальном времени.
Разрушение иллюзии
Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. В зависимости от математического аппарата рендеринга («движка»), разрушение может происходить двумя способами.
Sprite (компьютерная графика)
Системы с аппаратными спрайтами включают TI-99 / 4A (1979), семейство 8-битных Atari (1979), Commodore 64 (1982), Nintendo Entertainment System (1983), Amiga (1985), Sega Genesis (1988) и аркады. игры 1970-х и 1980-х годов. Оборудование различается количеством поддерживаемых спрайтов, количеством, которое может отображаться в каждой строке развертки (часто меньшее число), размером и цветом каждого спрайта, а также специальными эффектами, такими как масштабирование или сообщение о перекрытии с точностью до пикселя.
Процессоры в современных компьютерах, игровых консолях и мобильных устройствах достаточно быстры, поэтому растровые изображения могут быть составлены без специального аппаратного обеспечения; В качестве альтернативы, современные графические процессоры могут выполнять композицию огромного количества масштабированных, повернутых, сглаженных и частично полупрозрачных изображений параллельно с процессором.
СОДЕРЖАНИЕ
История [ править ]
Термин « спрайт» впервые был использован в графическом смысле одним из разработчиков процессора видеодисплея (VDP) Texas Instruments 9918 (A ). [9] Термин был получен из того факта, что спрайты, а не часть данных растрового изображения в буфере кадра, вместо этого «плавали» сверху, не затрагивая данные в буфере кадра ниже, во многом как призрак или « спрайт ». К этому времени спрайты достигли уровня, когда полные двумерные формы можно было перемещать по экрану по горизонтали и вертикали с минимальными затратами на программное обеспечение.
Системы с аппаратными спрайтами [ править ]
Это базовые спецификации оборудования и не включают дополнительных методов программирования, таких как использование растровых прерываний для перепрофилирования спрайтов в середине кадра.
Использование в 3D-рендеринге [ править ]
Синонимы [ править ]
Спрайтовая графика: руководство по созданию спрайтов от А до Я
Спрайтовая графика — одна из старейших технологий для анимации персонажей. Спрайтами называют картинки в 2D-играх, из которых состоят игровые персонажи, монстры, движущиеся объекты и др.
Первая спрайтовая графика датируется началом 80-х годов. Но самое интересное, что она до сих пор пользуется популярностью при создании 2D-игр, браузерных игр, а иногда и в 3D-играх, когда нужно анимировать удаленный объект или создать анимацию, на которой не зациклено внимание игрока. Например:
огонь после отдаленного взрыва,
с технической стороны спрайты имеют меньш ий вес, чем 3D-объект;
создать спрайт легче, чем 3D-объект;
при помощи спрайтовой графики можно достаточно быстро анимировать любой нарисованный объект с меньшими усилиями;
Спрайтовая графика
Один спрайт — это неподвижная картинка. Несколько быстро сменяющихся картинок из одной серии создают анимацию, то есть спрайтовую анимацию. Самой узнаваемой спрайтовой анимацией является 8-битный Марио ; в состав его анимации входило всего 12 картинок:
2 для левого прыжка,
2 для правого прыжка,
4 для передвижения влево,
4 для передвижения вправо.
Создание спрайтов
Спрайтовая графика создается в три этапа:
Необходимо создать изображения для анимации.
Далее эти изображения нужно объединить в одном кадре и наладить из них анимацию.
Расположить анимацию на экране.
GameM ak er Studio, который является не просто редактором для спрайтов, но и полноценным движком для 2D-игр;
для полноценных 2D-игр можно использовать соответствующие игровые движки;
для бра у зерных игр используют HTML5, JavaScript и CSS;
можно использовать знания Java или C++;
Заключение
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Sprite (компьютерная графика)
Системы с аппаратными спрайтами включают аркадные видеоигры 1970-х и 1980-х годов; игровые консоли, такие как Atari VCS (1977), ColecoVision (1982), Nintendo Entertainment System (1983) и Sega Mega Drive / Genesis (1988); и домашние компьютеры, такие как TI-99 / 4A (1979), семейство 8-битных Atari (1979), Commodore 64 (1982), MSX (1983), Amiga (1985) и X68000(1987). Оборудование различается количеством поддерживаемых спрайтов, количеством, которое может отображаться в каждой строке развертки (часто меньшее число), размером и цветом каждого спрайта, а также специальными эффектами, такими как масштабирование или сообщение о перекрытии с точностью до пикселя.
Процессоры в современных компьютерах, игровых консолях и мобильных устройствах достаточно быстры, поэтому растровые изображения могут быть составлены без специального аппаратного обеспечения; В качестве альтернативы, современные графические процессоры могут выполнять композицию огромного количества масштабированных, повернутых, сглаженных и частично полупрозрачных изображений параллельно с процессором.
Аркадные системы
Домашние системы
Термин « спрайт» впервые был использован в графическом смысле одним из разработчиков процессора видеодисплея (VDP) Texas Instruments 9918 (A ). [14] Этот термин впервые использовал Дэнни Хиллис из Texas Instruments в конце 1970-х годов. [15] Термин был получен из того факта, что спрайты, а не часть данных растрового изображения в буфере кадра, вместо этого «плавали» сверху, не затрагивая данные в буфере кадра ниже, во многом как призрак или « спрайт ». К этому времени спрайты достигли уровня, когда полные двумерные формы можно было перемещать по экрану по горизонтали и вертикали с минимальными затратами на программное обеспечение.
Это базовые спецификации оборудования и не включают дополнительных методов программирования, таких как использование растровых прерываний для перепрофилирования спрайтов в середине кадра.
