Разрушение иллюзии
Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. В зависимости от математического аппарата рендеринга («движка»), разрушение может происходить двумя способами.
«Эффект портрета». Спрайтовый объект постоянно держится к наблюдателю нормалью к поверхности, что приводит к тому, что он визуально «поворачивается» все время к нему «лицом». В небольших пределах это незаметно, но при взгляде, скажем, на монстра сверху он может оказаться «лежащим на спине» на горизонтальном полу и при этом перебирающим ногами, да еще и бегущим в нужном направлении, не меняя более чем странной позы. Для борьбы с этим эффектом применяются наборы из большого числа спрайтов, снятых с разных направлений, которые подменяют друг друга в зависимости от угла наблюдения, но момент перехода от спрайта к спрайту также весьма заметен.
«Эффект Ельцина»[источник не указан 1008 дней]. Назван из-за сходства спрайта с картонными портретами первого президента РФ, предназначенными для фотографий-сувениров и устанавливавшимися в людных местах в 90-е годы, совпавшие с расцветом спрайтовых игр. Возникает, если спрайт не поворачивается нормалью к поверхности к наблюдателю, выдавая «плоскостность» объекта даже при небольших изменениях угла наблюдения. Характерен для аппаратно-рендеримых спрайтов, введенных в полигональный «движок» как вспомогательные.
Терминология
Billboard — спрайт, постоянно повёрнутый лицом к камере (по аналогии с рекламными щитами на автодорогах, которые повёрнуты под наиболее выгодным углом).
Impostor — спрайт, который заменяет трёхмерную модель на большом удалении.
CSS-Спрайты
Спрайт – одно изображение, в состав которого включено некоторое количество более мелких изображений. По структуре, спрайт можно сравнить с мозаикой или пазлом. С помощью специального атрибута, для каждого объекта выбирается часть этой картинки, которая и показывается.
Обзор технологии
CSS Sprites, на самом деле, — всего лишь расширенное использование технологии background, заложенной еще в спецификации CSS1. Все, до чего додумалось прогрессивное человечество за эти годы — это множественный фон у элементов (как он будет совместим с концепцией CSS Sprites еще придется проверить). Основные свойства, которые мы используем для задания фонового изображения.
background-image — основная «рабочая лошадка». Именно за ней будущее в виде data:URI, который в конце концов победит CSS Sprites. Но произойдет это нескоро.
background-repeat — вторая не менее важная составляющая при использовании фонового изображения. Ведь задавая no-repeat для данного свойства, мы намеренно подчеркиваем, что допустимо использование CSS Sprites для «склейки» изображений (по умолчанию используется repeat).
background-position — «волшебная палочка» для CSS Sprites, позволяющая спрятать или показать определенные части фонового изображения.
Кроме заявленных свойств также есть еще несколько (например, background-color), но они к спрайтам имеют посредственное отношение.
Итак, мы можем выставлять источник изображения, правило для его повторения и его начальную позицию. Вроде достаточно?