что такое спрайт лист
Цикл уроков по SDL 2.0: урок 5 — Нарезка листа спрайтов
Это продолжение серии переводов туториалов от Twinklebear, в оригинале доступных тут. Перевод отчасти вольный и может содержать незначительные поправки или дополнения от переводчика. Перевод первых двух уроков — за авторством InvalidPointer, а третьего и четвертого — за k1-801.
Нарезка листа спрайтов
Зачастую в 2D играх используют одно большое изображение для хранения нескольких меньших изображений, например, тайлы в тайлсетах вместо множества маленьких картинок для каждого тайла. Такое изображение называется лист спрайтов и оно очень удобно для работы, так как нам не нужно менять текстуру, которую хотим отрисовать, а лишь указать, какую часть текстуры нужно использовать.
В этом уроке мы увидим, как выбирать части текстуры, используя SDL_RenderCopy, а также немного о том, как обнаружить определенные события нажатия клавиш, которые будем использовать, чтобы выбрать, какой участок текстуры рисовать. На листе спрайтов будут четыре разноцветных круга:
В данном уроке лист спрайтов состоит из множества спрайтов одинакового размера, в таком случае нарезка не представляет трудностей. В противном же случае для спрайтов разного размера, нам бы понадобился файл с метаданными, в котором была бы информация о расположении частей. Для этого урока мы будем использовать 4 спрайта размера 100×100. Код этого урока основан на уроке 4, если у вас еще нет кода, на основании которого вы будете писать, можно взять его с Github.
Выбор части изображения
С помощью SDL очень легко выбрать часть текстуры, которую хотим нарисовать. В уроке 4 оставшиеся параметры SDL_RenderCopy со значением NULL означают координаты прямоугольника, который определяет, какую часть текстуры мы хотим отрисовать. При передаче значения NULL указываем, что нам нужна вся текстура, но мы можем легко добавить параметры прямоугольника и рисовать только часть текстуры. Чтобы это сделать, внесем изменения в функцию renderTexture так, чтобы она могла брать прямоугольную область, но все еще сохраним короткую версию синтаксиса из старой версии для удобства.
Изменяем renderTexture
Чтобы не привязывать все больше и больше параметров к нашей функции renderTexture и при этом сохранять удобство значений по умолчанию, мы разделим ее на две функции. Первая практически идентична вызову SDL_RenderCopy, но предоставляет параметр вырезаемой области со значением nullptr. Эта версия renderTexture будет получать место расположения в виде прямоугольной области, которую можем настроить сами или с помощью одной из наших других специализированных функций renderTexture. Новая базовая функция рендера становится очень простой.
Для удобства напишем другую функцию, где нам не нужно было бы создавать SDL_Rect для расположения, а лишь предоставлять x и y и позволить нашей функции отображения заполнить ширину и высоту текстуры. Мы создадим перегруженную версию renderTexture, которая это сделает с некоторыми настройками для обработки отсечения. Добавим прямоугольник вырезания, как параметр со значением по умолчанию nullptr и в случае, если вырез был передан, будем использовать ширину и высоту выреза вместо ширины и высоты текстуры. Таким образом, мы не будем растягивать маленький спрайт до размера его потенциально очень большого листа спрайтов, когда он отрисовывается. Эта функция является модификацией оригинальной функции renderTexture и выглядит весьма похоже.
Определение прямоугольников отсечения
В нашем случае очень легко посчитать прямоугольники отсечения, используя метод во многом похожий на метод тайлинга из урока 3, однако вместо того, чтобы идти строка за строкой, мы пойдем столбец за столбцом. Таким образом, первый кусок будет зеленым, второй — красным, третий — синим и четвертый — желтым. Идея вычислений такая же, как в уроке 3, но только вместо строк пробегаем столбцы. Так наши координаты по y вычисляются получением остатка при делении индекса тайла на количество тайлов (2), а координата по x делением индекса на количество тайлов. Эти координаты x и y являются индексами x и y, так что мы переводим их в реальные координаты пикселей умножением на ширину и высоту выреза, который для всех тайлов одинаковый (100×100). Наконец, выбираем кусок, чтобы рисовать, в данном случае первый.
Мы также хотели бы нарисовать наши куски в центре экрана, поэтому вычисляем эти координаты x и y, используя ширину и высоту тайла вместо ширины и высоты текстуры.
Если бы вместо этого мы использовали более сложный лист спрайтов с упакованными вместе повернутыми спрайтами разного размера, нам нужно было бы хранить информацию об их расположении и повороте в некотором файле метаданных, чтобы мы могли легко находить части.
Изменение изображений на основе ввода
Чтобы проверить все созданные нами части изображения, добавим обработку ввода с клавиатуры в цикл обработки событий и сделаем выбор отображаемой части с помощью клавиш 1-4. Чтобы определить, произошло ли нажатие клавиши, можно проверить имеет ли событие тип SDL_KEYDOWN и если это так, то мы можем узнать, какая клавиша была нажата, проверяя код клавиши внутри события, используя e.key.keysym.sym. Полный список типов событий, кодов клавиш и остальной информации по SDL_Event доступен на вики.
Когда клавиша нажата, нам нужно поменять значение useClip на номер части изображения, которую мы хотим рисовать. С этими изменениями цикл обработки событий выглядит следующим образом:
Рисуем вырезанное изображение
Последнее, что нужно сделать, это получить нужную часть изображения на экране! Сделаем это, вызвав нашу более удобную версию renderTexture для рисования части изображения без дополнительного масштабирования и передачи части, которую мы хотим использовать (та, что используется в useClip).
Как использовать 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. Мнение администрации Хекслета может не совпадать с мнением автора оригинальной публикации.
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
CSS-спрайты и листы изображений
Дата публикации: 2015-01-20
От автора: В этом уроке мы затронем тему использования CSS-спрайтов, листов спрайтов и листов изображений. В частности мы рассмотрим преимущества использования данных техник перед работой с отдельными изображениями.
Прежде всего, давайте определимся с терминологией. Итак, лист изображений (или карта изображений) – это одна картинка, на которой размещено несколько маленьких картинок (иконок). Вот пример подобного листа изображений:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CSS-спрайт – это одна картинка, на которой размещено несколько маленьких связанных картинок, которые по сути являются вариациями одной картинки. Вот пример CSS-спрайта:
Ну а лист спрайтов – это, соответственно, несколько спрайтов на одной картинке:
Для чего же нужны эти самые CSS-спрайты и листы изображений? Например, мы хотим выводить иконку ВКонтакте в черно-белом цвете, а при наведении изменять ее на цветную. В этом случае мы вполне могли бы использовать 2 картинки (черно-белую и цветную, сменяя их одну другой). Например так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Так будет выведена черно-белая иконка, которая при наведении будет замещаться цветной. Задача вроде бы решена, однако, в этом решении есть несколько недостатков. Первое: при первом наведении на картинку мы можем увидеть «эффект мигания», когда черно-белая картинка пропадает, а цветная появляется через некоторый промежуток времени. Связано это с тем, что в этот промежуток времени цветная картинка загружается с сервера. И здесь мы подошли ко второму недостатку. Поскольку картинка загружается с сервера, то, получается, это дополнительный HTTP-запрос к серверу, который занимает дополнительное время и приводит к первой проблеме.
Эти недостатки легко устраняются с помощью техники CSS-спрайтов, когда мы объединяем несколько изображений в одном и показываем в каждый конкретный момент только часть одного большого изображения.
Вот пример использования CSS-спрайтов:
И стилевое оформление:
Картинка sprite.png является листом спрайтов и на ней размещено 3 спрайта социальных иконок. Каждая иконка имеет размеры 60х60 пикселей и в каждый конкретный момент мы показываем часть большого изображения заданных размеров (60х60 пикселей). Ну а с помощью свойства background-position мы можем указать, какую именно часть изображения нужно показать в обычном состоянии и при наведении на картинку.
В видео версии урока вы найдете больше примеров с детальным объяснением каждого из них.
На этом мы завершим текущий урок. Удачи и до новых встреч!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Похожие статьи:
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии (3)
Спасибо, Андрей, за урок.
Я думаю, что для многих начинающий веб-разработчиков он будет полезным.
Ну, и конечно, сейчас есть огромное количество сервисов (не все идеально выполняют свою работу), которые позволяют автоматизировать процесс создания CSS-спрайтов, выдавая и склеенные изображения и готовые CSS-стили.
Я, например, пару раз пользовался вот этим сервисом: SpritePad
Хороший полезный урок, спрайты бывают нужны когда много рисунков
Экспорт анимаций для мобильных приложений и игровых платформ
Создайте лист спрайтов или атлас текстур и экспортируйте свои анимации для мобильных приложений и игровых платформ. Импортируйте атлас текстур в Unity или на любую другую игровую платформу с помощью подключаемого модуля.
Animate позволяет создавать анимации на основе листа спрайтов или атласа текстур и экспортировать их для мобильных приложений и игровых платформ.
Лист спрайтов
Лист спрайтов — это файл растрового изображения, содержащий меньшие изображения, упорядоченные в виде «плитки». Компиляция нескольких графических объектов в один файл позволяет использовать графику в Animate и других приложениях, загружая только один файл. Это повышает эффективность загрузки изображений, что полезно в случае повышенных требований к производительности, например при разработке игр.
Листы спрайтов можно создать из любого выбранного набора роликов, символов кнопок, графических символов или растровых изображений. Элементы можно выбирать на панели «Библиотека» или в рабочей области (нельзя выбирать элементы из этих двух источников одновременно). Каждое растровое изображение и каждый кадр выбранных символов отображаются на листе спрайтов как отдельные графические объекты. Если выполняется экспорт из рабочей области, любые преобразования (масштабирование, сдвиг и т. д.), примененные к экземпляру символа, сохраняются в выходном изображении.
Атлас текстур
Атлас текстур — это коллекция текстур в виде одного большого изображения или нескольких изображений требуемого размера. Можно оптимизировать игру, создав атлас текстур и используя его в игровом приложении.
В Animate можно создать атлас текстуры из символов, таких как фрагменты роликов, графические объекты или кнопки. Элементы можно выбирать на панели «Библиотека» или в рабочей области (нельзя выбирать элементы из этих двух источников одновременно). Каждое векторное изображение и каждый ключевой кадр выбранных символов отображается как отдельное растровое изображение в атласе текстур. При экспорте объектов рабочей области все преобразования (масштабирование, сдвиг и т. д.), примененные к экземпляру символа, сохраняются в выходном изображении.
Различие между листом спрайтов и атласом текстур
В мобильных приложениях можно использовать либо лист спрайтов, либо атлас текстур в зависимости от потребностей. В следующей таблице приводятся некоторые основные различия между листом спрайтов и атласом текстур.
Производительность в мобильных приложениях
Эффективность загрузки приложения
Высокая, так как отсутствуют вычисления
Низкая, так как выполняется вычисление файла JSON
Занимает больше места
Занимает меньше места
Количество создаваемых файлов
Два файла: один файл растрового изображения и один файл json
Переменная: на основе размера изображения.
Количество создаваемых растровых изображений
В зависимости от количества кадров, используемых в листе спрайтов, также может увеличиваться количество растровых файлов, что приводит к увеличению размера листа спрайтов
В спрайте генерируются только уникальные растровые изображения, благодаря чему уменьшается суммарный размер.
Создание листа спрайтов
Чтобы создать лист спрайтов, выполните следующие действия.
Выделите один или несколько символов в библиотеке или экземпляры символов в рабочей области. Выделение также может содержать растровые изображения.
Щелкните выделенные объекты правой кнопкой мыши и выберите пункт «Создать лист спрайта».
Общий размер листа спрайтов в пикселях. Значение по умолчанию («Автоматический размер») позволяет вместить все включаемые спрайты.
Формат файла изображения, содержащего экспортируемые спрайты. Прозрачность изображения (альфа-канал) поддерживается для 8-битных и 32-битных изображений PNG. В 24-битных изображениях PNG и изображениях JPG прозрачный фон не поддерживается. В общем случае разница в визуальном качестве 8-битных и 32-битных изображений PNG незначительна. Размер 32-битных файлов PNG в четыре раза превышает размер 8-битных файлов PNG.
Отступы от краев листа спрайтов (в пикселях).
Отступы в пикселях между изображениями на листе спрайтов
Способ размещения изображений на листе спрайтов. Этот параметр может принимать два значения:
Внутренний формат для хранения данных изображений. Выберите формат, который наилучшим образом подходит для предполагаемого использования листа спрайтов после экспорта.
Поворот спрайтов на 90 градусов. Данная настройка доступна только для некоторых форматов данных.
Данная настройка обеспечивает экономию места на листе спрайтов за счет обрезания неиспользуемых пикселей каждого символьного кадра, добавляемого на лист.
Выбор этой настройки исключает дублирование повторяющихся кадров выбранных символов на результирующем листе спрайтов.
Экспорт анимации на основе листа спрайтов для мобильных приложений
Создание атласа текстур
Разработчики игр могут использовать Animate для управления анимированными объектами и их экспорта в Unity или на любые другие часто используемые игровые платформы в виде атласа текстур.
Процесс генерирования атласа текстур в Animate и его импорта в Unity представлен на следующей схеме.
Для создания атласа текстур анимации выполните следующие действия.
В Animate можно создать атлас текстур для выбранного символа в Библиотеке или для экземпляра символа в рабочей области.
Выберите параметры экспорта для атласа текстур.
Способ размещения изображений в атласе текстур. Этот параметр может принимать два значения:
Можно выбрать вариант экспорта символа в несколько растровых изображений в зависимости от размера.
Если размер ресурса больше выбранного измерения изображения, появляется предупреждение.
Созданная папка вывода для атласа текстур содержит следующие файлы.
Animation.json
Этот файл содержит сведения об анимации. Идентичные кадры по умолчанию оптимизируются и консолидируются в файле Animation.json.
spritemap.json
spritemap.png
Если говорить об экспортируемом символе, созданный файл будет содержать растровые представления всех уникальных текстур, необходимых для воссоздания анимации.
Созданный атлас текстур можно будет использовать с любой игровой платформой, например Unity. Для обеспечения совместимости импортируемых данных потребуется соответствующий подключаемый модуль.
Импорт атласа текстур в Unity
Можно импортировать созданные в Animate файлы атласов текстур в избранные игровые платформы. Чтобы импортировать файлы атласов текстур, создайте подключаемые модули для соответствующих игровых платформ. В этот выпуск включен образец подключаемого модуля импорта для инструмента Unity.
Импортируйте атлас текстур в Unity, выполнив следующие действия.
Щелкните здесь, чтобы загрузить образец подключаемого модуля для импорта для Unity. Выберите Подключаемый модуль Unity с вкладки Загрузки и укажите номер версии, который требуется загрузить.
Загружая образец, вы принимаете Условия использования и Политику конфиденциальности в сети Интернет.
Воспроизведите проект. Воспроизведение проекта приводит к разделению карты спрайтов на разные спрайты.
Воспроизведите или опубликуйте результаты в зависимости от потребностей.
Можно даже настроить подключаемый модуль, изменив файл WrapperPlugin.cs в соответствии с потребностями.
Подключаемый модуль Unity поддерживает цветовые эффекты для созданных в Animate файлов атласа текстур. Кроме того, подключаемый модуль поддерживает маскирование с помощью слоев. Функция маскирования применяется только начиная с выпуска Unity 2017.
Публикация текстур
Аниматоры могут создавать и экспортировать контент в векторном формате или использовать растровый формат для платформ HTML 5. Для более высокой производительности при работе с анимациями в параметры публикации добавлена возможность их экспорта в качестве атласа текстур.
1. Создайте документ Canvas. Выберите пункт меню Файл > Создать для вывода окна «Новый документ».
2. Щелкните вкладку Дополнительно в верхней части экрана и выберите параметр HTML5 Canvas. Откроется новый FLA-документ.
3. Щелкните Файл > Параметры публикации.Если установлен флажок Экспортировать документ как текстуру на вкладке «Основные», то на вкладке Параметры изображения появятся параметры публикации текстур. По умолчанию в публикацию текстур включены все символы. Чтобы выбрать отдельные символы, щелкните значок параметров рядом.
Хотя этот параметр может увеличить размер ресурсов, он повышает производительность. Кроме того, вы можете увеличить разрешение изображений в два или три раза от исходного для дисплеев HiDPI. Чтобы изменить параметры разрешения, щелкните значок гаечного ключа рядом с функцией Экспортировать документ как текстуру, как показано на снимке экрана ниже. Измените значение параметра «Разрешение», чтобы увеличить его в 2 или 3 раза.
По умолчанию при публикации текстур задается в 2 раза большее разрешение. Кроме того, диапазон для разрешения можно менять от 0,3 до 3.
Публикация текстур применима только к типу документа HTML5 Canvas.
Выбор между векторным или растровым файлом напоминает выбор между размером файла и производительностью. Платформы HTML5 оптимизированы для растрового контента. Таким образом, для сложных фигур лучше предварительно преобразовать векторные изображения в растровые. Для части базового контента все еще можно использовать векторный контент. Эта функция в Animate доступна в диалоговом окне «Частичный выбор символов». Частичный выбор символов позволяет выбрать символы, которые следует преобразовать в растровый контент, а остальные сохранить как векторные объекты.
Чтобы открыть раздел «Частичный выбор символов», щелкните Изменить в диалоговом окне Параметры публикации и выберите символ в списке. По умолчанию выбраны все символы.