Уроки по css css3 часть 11 спрайты

Image Sprites — Simple Example

Instead of using three separate images, we use this single image («img_navsprites.gif»):

With CSS, we can show just the part of the image we need.

In the following example the CSS specifies which part of the «img_navsprites.gif»
image to show:

Example

#home
{
 
width: 46px;
  height: 44px;
 
background: url(img_navsprites.gif) 0 0;
}

Example explained:

  • — Only defines a small transparent image
    because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
  • — Defines the portion of the image we want to use
  • — Defines the background image and its position (left 0px, top 0px)

This is the easiest way to use image sprites, now we want to expand it by
using links and hover effects.

Текстуры

СС0textures — 529 реалистичных PBR-текстур, которые можно использовать где и как угодно без ссылок на авторов. Без регистрации. На всякий случай: PBR (Physically-Based Rendering) — это физически корректная визуализация. Варианты разрешения текстур: 2K, 4K, 8K. А еще можно скачать исходники в формате .sbsar — для редактирования в программе Substance Designer.

TextureLibt — коллекция из 6500+ текстур для личных и коммерческих целей. Все это работы одного фотографа. Он просит вас о малости: не перепродавать его материалы и, по возможности, при использовании текстур указывать авторство.

Texture — большая коллекция текстур разного, но в среднем невысокого разрешения (примерно 1000–1300 пикселей по ширине). Условия: можно использовать в платной игре, но нельзя продавать сами текстуры (даже после редактирования) и выдавать их за свои.

Особенности использования спрайтов

Когда стоит использовать спрайты? Ответ в общем то один — спрайты нужно использовать если у вас на странице много мелких изображений

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

Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

На странице как правило бывают три вида картинок — jpg, png и gif. У всех этих форматов есть два режима загрузки — это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

Итого. Изображение может появиться на странице сразу, а может появиться с задержкой

Применительно к спрайтам это важно знать. Спрайты желательно делать черезстрочными или прогрессивными

Пользователь должен как можно быстрее увидеть картинки пусть и в плохом качестве.

Но! Если финальный файл со всеми спрайтами будет слишком большой, то несмотря на всю прогрессивность и черезстрочность посетителю придется ждать даже частичную загрузку файла. Поэтому я не рекомендую использовать большие наборы спрайтов. Если файл большой то полностью теряется весь смысл спрайтов — ускорять работу сайта. С большими наборами спрайтов пользователю придется ждать столько же, если не больше, как и при использовании обычных раздельных изображений.

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

Как объединить изображения в спрайт

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

Объединение изображений

Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер (50 на 50 пикселей):

Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его «sprite.png«. Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.

Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок (мегафон) расположен в верхних 50 пикселях нового изображения, а второй (смайлик) — в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS:

Позиционирование изображения на странице

В этом примере мы будем использовать рисунки в качестве фоновых изображений, размещенных в элементах div. Мы создадим пустые теги div для отображения изображений. Если на нашей странице нам нужно вывести изображение мегафона, мы используем CSS-класс «megaphone«:

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

Приведенный выше код CSS указывает ширину и высоту изображения мегафона (50 на 50 пикселей), он также вызывает изображение «sprite.png«, которое является объединенным. Часть кода «0 0px» отвечает за отображение спрайта. Указание начинать вывод изображения с «0 0px» означает, что оно должно отображаться с пикселей по оси X и с пикселей по оси Y. Это значит «начинать вывод изображения сверху» и «начинать вывод изображения слева«.

Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей (где расположен мегафон). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта. Мы создадим класс CSS под названием «smile«:

.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: «0 -50px«. Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат (-50px)

Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.

Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом «megaphone«:

Когда нужно вывести смайлик, мы размещаем div с классом «smile«:

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

Данная публикация представляет собой перевод статьи «How to use CSS sprites» , подготовленной дружной командой проекта Интернет-технологии.ру

Русскоязычные сообщества игроделов

Для начала пройдемся по группам VK:

GGDev — новости игровой индустрии, уроки и статьи для разработчиков, обсуждение жанров и игровых механик, стримы мероприятий. Реклама своих проектов строго запрещена — админы говорят, что в этом «фишка» группы. 6000 подписчиков.

Инди игры | Indie Games — группа для продвижения ваших инди-проектов, а формально — паблик Indie-раздела на портале Game.ru. Участники могут предлагать свои материалы, но публикует что-либо только админ. Зато в обсуждениях подписчики делятся трейлерами и скриншотами, новостями и мнениями, ищут людей в команду.

Unity3D & CG / Unity 3D — группа взаимопомощи Unity-разработчиков. Основная масса публикаций — это вопросы участников по разным аспектам работы над игрой. Причем сообщество очень живо откликается и помогает, что и делает группу интересной. Более 32 000 участников.

Игровая вселенная — публикует познавательные материалы для игроделов и gamedev-вакансии. Подписчиков — 24 000.

Last Indie Standing — обсуждение инди-игр и их разработки, 5–10 постов в день. Иллюстрированные заметки по гейм-дизайну, новости, конкурсы, видео лекций и конференций. Около 4000 подписчиков.

GameDev — Создание игр — группа с лозунгом «Научим запускать однообразные провальные проекты». 🙂 Основа ленты — ссылки на познавательные материалы (в основном с Хабра). Реже появляются анонсы мастер-классов и конференций по играм. Участников — 7000.

Обязательно загляните в «Лигу разработчиков видеоигр» на Pikabu! Кстати, там вы можете встретить преподавателей GeekBrains, но об этом в другой раз. А пока предлагаю полистать красочные посты в ленте Лиги или даже написать туда о вашем проекте.

Новости, советы, конкурсы

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

GameDev — сайт + форум для любителей и профессионалов игростроя, где можно узнать, чем сейчас живут разработчики игр в СНГ и ближайшем зарубежье. Регулярные обзоры новинок, обучающие статьи, анонсы главных мероприятий и ежедневное общение с увлеченными людьми — все это подстегивает развивать свой проект.

GCUP — портал, целиком посвященный созданию игр. Здесь собрана огромная база игровых движков и конструкторов. А еще тут — уроки, новости, утилиты и бурлящий форум, где выкладывают и обсуждают новые игры, набирают людей в команду, задают вопросы и делятся опытом.

DTF — информационное сообщество типа Pikabu, но более узкой направленности. Пользователи публикуют и обсуждают статьи про IT и сферу развлечений, в том числе игры и их разработку. Еще тут есть раздел вакансий для разработчиков, гейм-дизайнеров, художников и других спецов, участвующих в создании и раскрутке игр.

Уф… На этом все. Спасибо, что дочитали! Если нашли интересное — не забудьте добавить в закладки! 🙂 

Мы упустили что-то важное и замечательное? Забыли упомянуть ваш любимый инструмент разработчика или сайт с игровыми ресурсами? Пожалуйста, дополните наш список — будем признательны за подсказки и обратную связь

Стоковые изображения

Stock Graphic Designs, раздел Freebies — наборы профессионально исполненных векторных изображений для коммерческого и личного пользования. Форматы: Ai (Adobe Illustrator) и EPS.

Рixabay, Pexels и Unsplash — я поставила их в один ряд, потому что эти три банка фотографий очень похожи. Они держатся на материалах от участников сообщества и на заимствованиях с аналогичных сайтов. Все бесплатно, в том числе для коммерческих проектов.

Поиск по DeviantArt

На портале DeviantArt, где обитают любители визуального искусства, среди тонн авторского контента можно найти бесплатные спрайты, 3D-модели и фотографии. Особенно много здесь фанатов аниме и пиксель-арта. Но далеко не все полезное попадает в раздел Resources & Stock Images. Вот несколько советов, которые экономят время на поиск ресурсов.

Примеры:

Game-Art — группа целиком посвящена игрострою. Здесь можно посмотреть, что делают другие, показать свои арты и концепты, запросить критику участников, а еще — скачать игровые ресурсы из раздела Resources & Tutorials. Будьте внимательны: не все можно использовать в коммерческих проектах. О правовых нюансах еще скажу ниже.

Clear-Cut — изображения объектов и персонажей на прозрачном фоне в форматах PNG и PSD. Здесь и аккуратные вырезки из фотографий, и рендеры 3D-моделей.

Safe-Stock-Resources — большой фотосток с изображениями людей и природы. Отличный опорный материал для создания фонов и персонажей. Заявленная цель группы — собрать надежных авторов, чей контент можно использовать, не боясь, что он был где-то украден.

NoCreditStock — наборы материалов, которые можно использовать без упоминания автора.

Digital-Art-Club/Stocks and resources — бесплатные материалы и уроки по Digital Art.

Ориентируйтесь по хештегам.

Залежи бесплатного добра вы найдете по тегам #unrestricted, #commons, #freetouse, #freesprites, #freebackgrounds, #freeresource, #freebies и другим

Экспериментируйте и обращайте внимание на теги к работам, которые вам нравятся

Просматривайте чужие коллекции.

Сайт подсказывает подходящие в колонке справа, когда вы ищете по тегам.

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

Ищите работы с лицензией Creative Commons через Google.

Введите в поисковик: 

«This work is licensed under a Creative Commons» site:deviantart.com

В списке результатов перейдите на вкладку «Картинки». Получилось! Если что-то нравится — переходим на страницу изображения и уточняем лицензию и авторство непосредственно под картинкой или под заголовком License в блоке справа.

Помните: у большинства групп на DeviantArt нет единых правил пользования изображениями. Каждый участник сам придумывает, что можно и нельзя делать с его работами. Я видела художницу, которая разрешает брать спрайты для коммерческих проектов только при условии, что вы пришлете ей бесплатную копию своей игры 🙂 

Хорошая практика: если вы что-то взяли, упомяните автора в титрах и пришлите ему ссылку на игру либо скриншоты. Пусть полюбуется, как вы использовали его материалы.

Проблема белого квадрата

Вы успешно загрузили текстуру, правильно определили спрайт, и … всё то, что вы видите на экране это белый квадрат. Почему?

Это распространенная ошибка. Когда вы устанавливаете текстуру для спрайта, то всё что на самом деле происходит, это сохранение в спрайте указателя на экземпляр текстуры. Таким образом, если текстура уничтожается или перемещается в другое место в памяти, спрайт будет иметь неверный указатель текстуры.

Эта проблема возникает, когда вы пишете что-то наподобие этого:

sf::Sprite loadSprite(std::string filename)
{
 sf::Texture texture;
 texture.loadFromFile(filename);

 return sf::Sprite(texture);
} // ошибка: здесь уничтожается текстура

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

Как, где и когда можно наблюдать спрайты

Согласно Географической карте гроз, наибольшими шансами увидеть спрайты обладают жители экваториальной и тропической зоны Земного шара. Именно в этой области случается до 78% всех гроз. Жители России также могут наблюдать спрайты. Пик гроз в нашей стране приходится на июль-август месяц. Именно в это время любители астрономии могут увидеть такое красивое явление как спрайты.

Спрайты, свечение неба и галактика Андромеды над городом Ларами, Вайоминг, США.

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

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

Интересные факты

  1. Спрайты, как и молнии, встречаются не только на Земле, но и на других планетах Солнечной системы. Предположительно именно спрайты были зафиксированы космическими исследовательскими аппаратами во время сильных штормов на Венере, Сатурне и Юпитере.
  2. Спрайты и эльфы возникают на такой большой высоте из-за сильной ионизации воздуха галактической пылью. На высоте свыше 80 километров проводимость тока в десять миллиардов раз выше, чем в приземных слоях атмосферы.
  3. Название «спрайты» происходит от наименования лесных духов, о которых идет речь в комедии Уильяма Шекспира «Сон в летнюю ночь».
  4. Спрайты были известны человечеству задолго до 1989 года. Люди высказывали разные гипотезы на счет природы этого явления, в том числе и то, что вспышки света являются инопланетными космическими кораблями. И только после того, как Джону Уинклеру удалось снять кадры спрайтов в ионосфере, ученые доказали, что они имеют электрическое происхождение.
  5. Цвет спрайтов, джетов и эльфов разнится от высоты, на которой они появляются. Дело в том, что в околоземной атмосфере сосредоточено больше воздуха, тогда как в верхних слоях ионосферы наблюдается высокая концентрация азота. Воздух горит синим и белым пламенем, азот – красным. По этой причине джеты, которые находятся ниже спрайтов, имеют преимущественно синий цвет, а сами спрайты и, более высокие, эльфы – красноватый оттенок.

https://youtube.com/watch?v=rn0My2ivh2U%2520frameborder%3D

Image Sprites — Hover Effect

Now we want to add a hover effect to our navigation list.

Tip: The selector can be used on all elements,
not only on links.

Our new image («img_navsprites_hover.gif») contains three navigation images
and three images to use for hover effects:

Because this is one single image, and not six separate files, there will be no
loading delay
when a user hovers over the image.

We only add three lines of code to add the hover effect:

Example

#home a:hover {  background: url(‘img_navsprites_hover.gif’) 0 -45px;}#prev a:hover {  background: url(‘img_navsprites_hover.gif’) -47px
-45px;}#next a:hover {  background: url(‘img_navsprites_hover.gif’) -91px
-45px;}

Example explained:

#home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} — For all three hover images we specify the same background position, only 45px further down

CSS-спрайты: что это, почему это полезно и как их использовать?

Вы слышали об этом, но…

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

Думаю CSS-спрайты — это расширение этой техники. Разница в том, что вместо двух или трёх изображений, скомбинированных в одно, вы можете использовать сколько угодно картинок в одной. Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.

Зачем комбинировать эти изображения? Разве не быстрее загружать маленькие?

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

Ниже представлена цитата из статьи «Performance Research, Part 1»:

Время загрузки популярных сайтов.
  Время на загрузку HTML Время на загрузку остальных компонентов
Yahoo! 10% 90%
25% 75%
MySpace 9% 91%
MSN 5% 95%
ebay 5% 95%
Amazon 38% 62%
YouTube 9% 91%
CNN 15% 85%

Каждое изображение на странице, будь оно в теге img или background-image в вашем CSS-файле — это отдельный http-запрос на сервер.

Отлично! Итак, как же это сделать?

Давайте начнём с примера. В представленном CSS для каждого элемента используется своё изображение:

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

Таким образом мы уменьшили количество запросов на сервер на 9, и объём загружаемой информации почти на 8 Кбайт. Но это маленький пример, представьте что будет на реальном сайте.

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

Как однажды сказал Чак Норрис: «Все великие вещи требуют большой самоотверженности». Я конечно не уверен ему ли принадлежат эти слова, но это в любом случае хороший совет 🙂 Но к счастью для вас, существует множество веб-сервисов, которые помогают реализовать спрайты без особых усилий. Я остановлюсь на одном — это SpriteMe.

SpriteMe

SpriteMe — это закладка. После того как вы разместите её на панели закладок, отправляйтесь на свой сайт, а затем нажимайте на неё. Откроется окошко в правой части вашего сайта.

Сверху вы увидите список всех фоновых изображений текущей страницы сайта. Ниже список изображений, которые, вероятно, невозможно использовать как спрайты, а также причины. Если вы думаете иначе, вы можете перетащить ссылки из одного списка в другой. После того, как вы собрали необходимые изображения в верхнем списке, вам остаётся нажать на кнопку «Make Sprite». Всё! Ваши картинки собраны в одну и вы можете её сразу посмотреть

Для текущей версии сайта это изображение может выглядеть так:

И наконец, SpriteMe также позволяет экспортировать CSS. Нажмите на соответствующую кнопку (export CSS) и вы увидите необходимый код. Например:

.link2article {
	background-image: url(/Content/images/Theme/more.png);
	background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/spriteme1.png);
	background-position: -10px -156px;
}
.articlefooter {
	background-image: url(/Content/images/Theme/comments_bg.png);
	background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/spriteme1.png);
	background-position: 490px -265px;
}

Перечёркнутые строки — это строки из вашего CSS, а ниже предложенные.

Что не может быть спрайтом?

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

Загрузка текстуры

Перед созданием любого спрайта, нам нужна готовая текстура. В SFML класс для работы с текстурами называется sf::Texture. Поскольку единственная роль текстуры после её загрузки заключается в нанесении её на графический объект, то почти все методы этого класса связаны с загрузкой и обновлением.

Наиболее распространённый способ загрузки текстуры — это загрузка из файла изображения лежащего на диске. Осуществляется это функцией loadFromFile():

sf::Texture texture;
if (!texture.loadFromFile("image.png"))
{
 // ошибка...
}

Иногда функция loadFromFile() терпит неудачу по не очевидной причин. Сначала проверьте сообщение об ошибке выводимое в стандартный вывод (проверьте консоль). Если сообщение гласит unable to open file (не удалось открыть файл), убедитесь что рабочий каталог (это каталог относительно которого и будут интерпретироваться все пути к файлам) именно там где вы предполагаете: когда вы запускаете приложение из проводника, рабочим каталогом является папка с приложением, но когда вы запускаете вашу программу через IDE (Visual Studio, Code :: Blocks, …), то рабочий каталог иногда устанавливается в папку с проектом, как правило это легко изменить в настройках проекта.

Аналогично вы можете загрузить некоторый файл изображение из памяти (loadFromMemory()), из пользовательского входного потока (loadFromStream())  или из уже загруженного изображения (loadFromImage()). Последняя из этих функций загружает текстуру из объекта класса sf::Image. Этот класс является служебным и помогает управлять изображениями (изменять пиксели, создавать альфа-канал, и т.д.) Пиксели изображения класса  sf::Image находятся в системной памяти, это гарантирует, что операции над ними будут производится быстрее, чем над пикселями текстуры, которые находятся в видеопамяти и которые долго получать и обновлять, но очень быстро можно нарисовать.

SFML поддерживает большинство из распространённых форматов файлов изображений. Полный перечень указан в API документации.

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

// загружаем прямоугольник 32x32 начало которого в точке (10, 10)
if (!texture.loadFromFile("image.png", sf::IntRect(10, 10, 32, 32)))
{
 // ошибка...
}

Класс sf::IntRect это простой и удобный тип, олицетворяющий прямоугольник. Конструктор класса принимает левый верхний угол и размеры прямоугольника.

Если вы не хотите загружать текстуру из изображения, а хотите обновить их немедленно из массива пикселей, вы можете создать пустую текстуру и обновить её потом.

// создаём пустую текстуру 200x200
if (!texture.create(200, 200))
{
 // ошибка...
}

Заметьте, в этот момент содержимое текстуры не определено.

Для обновления пикселей существующей текстуры, вы должны использовать функцию update(). Она может принимать различные ресурсы в качестве аргументов.

// обновление текстуры из массива пикселей
sf::Uint8* pixels = new sf::Uint8; // * 4 т.к. пиксели имеют четыре компоненты (RGBA)
...
texture.update(pixels);

// обновление текстуры из sf::Image
sf::Image image;
...
texture.update(image);

// обновление текстуры из текущего содержимого окна
sf::RenderWindow window;
...
texture.update(window);

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

Кроме того, текстура имеет два свойства, которые влияют на визуализацию.

Первое из них — это сглаживание текстуры

Сглаживание текстуры делает её пиксели менее видимыми (более размытыми), что может быть важно при масштабировании

texture.setSmooth(true);

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

Второе свойство позволяет повторять текстуру в пределах одного спрайта.

texture.setRepeated(true);

Это будет работать только если прямоугольник спрайта больше чем текстура, в противном случае эффекта не будет.

Джеты, спрайты и эльфы

Голубой джет

Джеты представляют собой вспышки света, наблюдаемые на наиболее близком расстоянии к земле, от 15 до 30 километров. Именно их, скорее всего, зафиксировал Джон Уинклер, который в 1989 году впервые произвел наблюдение вспышек молний в верхних слоях атмосферы. Джеты имеют трубчатую форму. Обычно они сине-белого или голубого оттенка. Известны случаи появления гигантских джетов, которые били в высоту на расстояние около 70 километров.

Спрайт — редкий вид грозовых разрядов

Спрайты – вид молний, о которых мы говорим в этой статье. Они появляются на высоте от 50 до 130 километров и бьют по направлению к ионосфере. Спрайты появляются через доли секунды после удара обычной молнии. Обычно они возникают группами, а не поодиночке. Длина спрайтов, как правило, держится в пределах нескольких десятков километров. Диаметр группы спрайтов может достигать 100 км в поперечнике. Спрайты – это красные вспышки света. Они быстро появляются и быстро исчезают «Продолжительность жизни» спрайта всего около 100 миллисекунд.

Эльф

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

Диаметр такой группы может достигать 400 км в поперечнике. Также эльфы могут бить до 100 км в высоту – в самые верхние слои ионосферы. Зафиксировать эльфы крайне сложно, так как «живут» они не дольше пяти миллисекунд. Заснять такое явление можно только при помощи специальных, современных видеоприборов.

Image Sprites — Create a Navigation List

We want to use the sprite image («img_navsprites.gif») to create a navigation list.

We will use an HTML list, because it can be a link and also supports a background image:

Example

#navlist {  position: relative;}#navlist li {  margin: 0;  padding: 0;  list-style: none;  position: absolute;
  top: 0;}
#navlist li, #navlist a {  height: 44px;  display: block;}
#home {  left: 0px;  width: 46px;  background: url(‘img_navsprites.gif’)
0 0;}#prev {  left: 63px;  width: 43px;  background: url(‘img_navsprites.gif’) -47px 0;}#next {  left: 129px;  width: 43px;  background: url(‘img_navsprites.gif’)
-91px 0;}

Example explained:

  • #navlist {position:relative;} — position is set to relative to allow
    absolute positioning inside it
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
    — margin and padding are set to 0, list-style is removed, and all list items
    are absolute positioned
  • #navlist li, #navlist a {height:44px;display:block;} — the height of all
    the images are 44px

Now start to position and style for each specific part:

  • #home {left:0px;width:46px;} — Positioned all the way to the left, and
    the width of the image is 46px
  • #home {background:url(img_navsprites.gif) 0 0;} —
    Defines the background
    image and its position (left 0px, top 0px)
  • #prev {left:63px;width:43px;} — Positioned 63px to the
    right (#home width 46px + some extra space between items), and
    the width is 43px.
  • #prev {background:url(‘img_navsprites.gif’) -47px 0;} — Defines the background
    image 47px to the right (#home width 46px + 1px line
    divider)
  • #next {left:129px;width:43px;}- Positioned 129px to
    the right (start of #prev is 63px + #prev width 43px +
    extra space), and the width is 43px.
  • #next {background:url(‘img_navsprites.gif’) -91px 0;} —
    Defines the background
    image 91px to the right (#home width 46px + 1px
    line divider + #prev width 43px + 1px line divider )
Ссылка на основную публикацию