Что такое спрайт в информатике

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

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] Термин был получен из того факта, что спрайты, а не часть данных растрового изображения в буфере кадра, вместо этого «плавали» сверху, не затрагивая данные в буфере кадра ниже, во многом как призрак или « спрайт ». К этому времени спрайты достигли уровня, когда полные двумерные формы можно было перемещать по экрану по горизонтали и вертикали с минимальными затратами на программное обеспечение.

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

Источник