Что такое спрайты в информатике
Спрайт (компьютерная графика)
Вы можете помочь улучшить эту статью, добавив ссылки на авторитетные источники.
Не подтверждённая источниками информация может быть поставлена под сомнение и удалена.
Чаще всего — растровое изображение, свободно перемещающееся по экрану. [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, спрайты фотографировались с актёров, а не с моделей, игрушек или рисунков.
Появление шейдеров частично снимает потребность в живой съёмке — многие нюансы фотоизображения уже можно передать полигональными моделями в реальном времени.
Разрушение иллюзии
Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. В зависимости от математического аппарата рендеринга («движка»), разрушение может происходить двумя способами.
Что такое спрайт
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 стили:
То в результате получим вот такого идущего человечка:
*** Авторизируйтесь чтобы писать комментарии.
Спрайты
Слово «спрайт» часто используется в программировании игр для обозначения фигурок героев и предметов. Такие фигурки – это на самом деле рисунки или фотографии, то есть компьютерная графика.
Однако спрайт – не только картинка, это объект, наделенный программным кодом и как следствие свойствами и способностями. Со спрайтом можно взаимодействовать как с виртуальной сущностью, отдавать ей команды и получать от нее данные.
Кот в Scratch – не единственный объект-спрайт. Добавить на сцену другие можно несколькими способами: загрузить картинку с компьютера, нарисовать в самой среде программирования, выбрать из библиотеки. Для всего этого в Scratch предусмотрено специальное меню, которое находится внизу справа на панели спрайтов:
Пока ограничимся тем, что будем выбирать готовые спрайты из библиотеки. Для этого надо нажать лупу. Откроется библиотека, где можно найти подходящего героя.
После клика по нему он появится на сцене. Также на панели спрайтов под свойствами появится его иконка. Рядом с иконкой кота. Свойства объекта, где вы задаете ему имя, положение, размер и поворот, отображаются только для того спрайта, который выделен.
Если вы захотите удалить один из спрайтов, кликните по его иконке под свойствами. Этот спрайт станет выделенным, выбранным, иконка обрамится синим цветом и у нее появится крестик, кликнув по которому можно убрать спрайт из игры.
Когда в Scratch мы собираем блоки в программный код, этот код не существует в прострации сам по себе. Чаще всего он относится к какому-то спрайту. Другими словами, у каждого спрайта свой программный код, своя программа, свое предназначение. Герои могут «общаться» между собой через сигналы, которые посылают друг к другу. Но это другая история.
Сейчас надо запомнить, что когда мы работаем с блоками, следует обращать внимание на то, какой объект выделен. В Scratch появляется подсказка в верхнем правом углу поля редактора кода. Там бледным цветом отображается фигурка выделенного на данный момент спрайта. А значит весь код, который вы видите в рабочей области, относится только к данному герою.
Когда выделяется другой спрайт, то код предыдущего становится невидимым.
Нередко код одного спрайта оказывается похожим на другой. Например, оба героя ходят по сцене, просто с разной скоростью и в разные направления. Собирать два раза почти одинаковую комбинацию блоков – не слишком удачное решение. Проще скопировать программу одного спрайта, добавить ее другому, а потом немного изменить.
В Scratch копировать собранные в программу блоки можно как в пределах одного проекта, так и переносить копию в «рюкзаке» из одного проекта в другой. Рюкзак находится внизу интерфейса среды разработки.
Допустим, у нас есть проект под названием «Проект 1», где мы составили программу движения кота туда-сюда. Мы хотим скопировать этот код в «Проект 2». Тогда мы заходим в первый проект, открываем рюкзак и перетаскиваем сюда конструкцию блоков.
При этом надо помнить правило: переносится участок кода от верхнего блока, за который мы держимся, и блоки, расположенные ниже него. Если вы взялись за блок, расположенный где-то в середине программы, то верхние блоки оторвутся и не будут захвачены.
Положив в рюкзак программу, мы возвращаемся во второй проект. Выделяем спрайт, которому хотим добавить код. Открываем рюкзак и достаем из него нашу программу.
Чтобы скопировать программу одного спрайта на другой в пределах одного проекта, достаточно захватить код и бросить его на иконку другого спрайта, которая расположена под свойствами на панели спрайтов.
Если надо скопировать код в пределах одного спрайта, надо кликнуть по конструкции правой кнопкой мыши и в контекстном меню выбрать «Дублировать».
Также обратите внимание на пункт «Добавить комментарий». Программисты часто пользуются комментариями, чтобы пояснить себе и остальным, что делает та или иная часть программы. Ведь при взгляде на сложный код не всегда сразу можно понять, для чего он, и как все это работает.
Когда на сцене обитают несколько спрайтов, становится важным их положение относительно друг друга, их место на сцене. Как вы уже должны были понять, изучая панель свойств спрайта, положение героя задается координатами, то есть точкой на плоскости.
Хотя работу с фонами мы будем изучать позже, добавим на сцену координатную сетку. Это поможет нам сориентироваться в системе координат Скретча. Чтобы выбрать фон из библиотеки, надо нажать на лупу в меню сцены, которое находится в нижнем правом углу окна, на панели «Сцена».
Откроется библиотека фонов, прокрутите ее в самый низ и выберите фон «Xy-grid». На сцене появится координатная сетка.
Давайте уменьшим размер наших спрайтов раза в два, то есть примерно до 50%, чтобы они не занимали большую площадь сцены, а больше походили на точку. Теперь поиграем с их координатами. Для этого можно менять значения x и y на панели свойств и смотреть, где после этого окажется герой. Или просто перетаскивать мышью спрайт на сцене и смотреть как меняются x и y в свойствах.
Например, если x = 0, y = 150, спрайт окажется в центре по горизонтали и вверху по вертикали. Если x = 200, y = 0, то спрайт окажется справа по горизонтали и в центре по вертикали.
На самом деле не обязательно до запуска программы устанавливать спрайты в нужное место с помощью мыши или панели свойств. Обычно это делают программно, с помощью специальных блоков кода, находящихся в разделе «Движение». Одним из управляющих местоположением блоков является команда «перейти в x: … y: …». Вместо точек указываются желаемые координаты.
Эта команда быстро перебрасывает спрайт в заданную точку, поэтому ее часто используют в начале программы:
В приведенном примере, где бы ни стоял на сцене спрайт до запуска программы, как только будет нажат зеленый флажок, герой тут же окажется в точке (0; 50).
Отметим напоследок про слои. Наше пространство не двумерное, как плоскость, а трехмерное. У нас есть высота, ширина и длина. Хотя Scratch позволяет создавать только двумерные анимации, на самом деле даже в 2D-анимации есть своего рода третье измерение. Это слои.
Пусть по сцене перемещаются два спрайта. Что будет когда их координаты совпадут? Ничего. Они не столкнуться и не затормозят друг друга. Один спрайт пройдет как бы позади другого, а другой – поверх первого. Каждый живет на своем слое плоскости и ему нет дела до другого.
Однако бывает важно, слой какого спрайта расположен выше, то есть впереди. Посмотрите на рисунок:
Слева слой ракеты расположен выше, слоя кота. Справа, наоборот, кот находится над ракетой.
В Scratch изменить очередность слоев можно как мышкой на сцене, так и с помощью блоков кода. Чтобы это сделать первым способом, надо взять тот спрайт, который должен быть над, и кинуть его на спрайт, чей слой должен быть под.
Блоки изменения очередности слоев находятся в фиолетовой секции «Внешний вид». Это команды «перейти на передний/задний фон» и «перейти вперед/назад на … слоя».
Составьте программу, в которой один спрайт постоянно ходит за указателем мыши, а второй – находится в центре сцены и, стоя на одном месте, медленно крутится по часовой стрелке. Слой первого объекта должен быть над слоем второго.
Для выполнения задания потребуются две дополнительные команды – «повернуться к указатель мыши», «повернуть по часовой стрелке на … градусов» (вместо слов «по часовой стрелке» на блоке изображена дуговая стрелка).
Как использовать CSS-спрайты для увеличения скорости загрузки веб-страниц
Спрайты существуют не первый день. Разработчики игр активно используют этот инструмент, чтобы ускорять отображение анимации на экране. В этой статье пойдёт речь об использовании спрайтов для улучшения пользовательского опыта посетителей сайтов.
Что такое спрайты в CSS
Спрайт — изображение, которое является частью сцены в игре. Несколько спрайтов объединяются в одно изображение, которое называется таблицей спрайтов (sprite sheet). После загрузки таблицы в память спрайты последовательно и быстро отображаются на экране. Это создаёт иллюзию анимации. Чтобы пользователь увидел на экране одну сцену, разработчик использует десятки или сотни разных спрайтов.
Пример таблицы спрайтов
Вот главная идея использования спрайтов в CSS: быстрее загрузить одно изображение и показывать его по частям, а не загружать несколько изображений и показывать их по очереди.
CSS-спрайты: быстрый обзор возможностей
CSS-спрайты — технология, которую разработчики применяют для оптимизации веб-страниц. Технология предполагает объединение нескольких небольших изображений с одинаковым разрешением в одно большое изображение, которое также называется таблицей спрайтов. Таблица спрайтов используется, когда нужно показывать пользователям отдельные элементы, которые являются частью большого изображения.
Обычно веб-разработчики включают в таблицу спрайтов логотипы, навигационные стрелки, кнопки и так далее. Такие элементы имеют одинаковое разрешение и часто используются на страницах сайта.
Как спрайты помогают веб-разработчикам
Чаще всего при создании сайтов разработчики хранят и используют изображения как отдельные файлы. Когда пользователь открывает страницу, браузер отправляет отдельный HTTP-запрос, чтобы загрузить и отобразить каждый файл. Это увеличивает время загрузки сайта, так как на странице может быть много отдельных изображений, например, кнопок, иконок, логотипов.
Преимущества спрайтов: один HTTP-запрос против шести
CSS-спрайты позволяют разработчикам объединять часто используемые маленькие изображения в одно большое. Благодаря этому браузер загружает один файл. Чтобы отобразить нужное маленькое изображение, используется смещение в большом изображении.
Преимущества использования спрайтов
Два основных преимущества использования спрайтов:
Как правильно создавать таблицы спрайтов
Чтобы создать таблицу спрайтов, разработчик должен объединить все необходимые элементы в одно изображение. Это можно сделать с помощью редакторов изображений, например, Photoshop или GIMP. Также эту задачу можно решить с помощью онлайн-генераторов CSS-спрайтов, о которых пойдёт речь ниже.
Когда таблица спрайтов готова, разработчик обеспечивает доступ к конкретным элементам. Для этого используются следующие атрибуты:
Как отмечалось выше, таблицы спрайтов можно делать с помощью популярных редакторов изображений. Но есть более простые способы.
Первый: используйте онлайн-генераторы для работы с таблицами спрайтов, например, CSS Sprite Generator. Это бесплатный инструмент. К тому же он автоматически генерирует CSS-код, необходимый для доступа к отдельным элементам. Вы можете корректировать свойства, например, менять отступы и выравнивание.
Для установки Sprity используйте команду:
Для работы со Sprity в командной строке понадобится пакет sprity-cli.
Как правильно работать с CSS-спрайтами
В качестве примера используем таблицу спрайтов, изображённую на иллюстрации.
В таблице есть шесть иконок социальных сетей. В верхнем ряду иконки, которые пользователи видят по умолчанию. В нижнем ряду иконки, которые пользователь видит при наведении курсора.
Если таблица спрайтов создана с помощью описанного выше онлайн-генератора, у разработчика уже есть CSS-код, нужный для доступа к конкретным элементам. Если специалист использовал редакторы изображений, необходимо самостоятельно определить смещение.
Определяем x и y с помощью MS Paint или GIMP
Если у вас есть координаты левой верхней точки нужного спрайта, например, верхней иконки Instagram, вы можете получить доступ к нужному элементу с помощью CSS-кода.
В данном случае используются width и height 125px, так как иконки имеют такое разрешение. Чтобы получить доступ ко второй иконке в верхнем ряду, используем такой код.
Таким способом можно получить доступ к каждому элементу таблицы спрайтов. Вот как выглядит HTML и CSS код целиком.
Шаг 1: указываем нужный HTML-код
В коде ниже мы просто добавляем ссылки на соответствующие ресурсы.
Шаг 2: добавляем стили с помощью CSS
Сначала добавляем стили для общего для всех иконок класса.
Шаг 3: получаем доступ к отдельным элементам верхнего ряда.
Шаг 4: получаем доступ к элементам нижнего ряда
Вместо заключения: присоединяйтесь к гигантам, которые используют CSS-спрайты
В число таких гигантов входят Google, Amazon, Facebook и другие компании с громкими именами. Они активно используют спрайты, чтобы уменьшить количество HTTP-запросов на сессию для одного пользователя. Это очень важно для посещаемых сайтов, на которые заходит много пользователей одновременно.
Адаптированный перевод статьи How to Implement CSS Sprites to Enhance Web-Pages. Мнение администрации Хекслета может не совпадать с мнением автора оригинальной публикации.
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
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-рендеринге [ править ]
