Компьютерная индустрия в последние годы поднялась очень и очень высоко. Если раньше компьютерные игры были всего лишь развлечением для узкого круга любителей, то сейчас это нечто большее. В них могут играть люди всех возрастов, создаются проекты, которые соответствуют даже самым тонким вкусам. А самое главное, появились невероятные возможности, о которых раньше нельзя было и подумать, поэтому сейчас компьютерные игры могут быть практически неотличимы от реальности в плане графики и физики, они могут погружать пользователя в неизведанные миры, позволяя ему проживать невероятные истории и являться в них ключевым персонажем. Но при этом некоторые люди не хотят ограничиваться самим процессом "играния" - их увлекает процедура создания игр. Однако большинство таких мечтателей так и остаются на уровне фантазий, потому что считают, что данный процесс слишком сложный. На самом деле все не так, что подтверждается огромным количеством инди-разработчиков, которые сейчас производят множество проектов без больших бюджетов и поддержки издателей. Просто нужно начинать с малого и постепенно идти вперед. Из данной статьи вы узнаете, что такое спрайты для игр и как их использовать, чтобы затем начать создавать свои собственные проекты.
Если перед вами компьютерная игра на мониторе, то что вы видите перед собой? Графическую оболочку данного проекта, разнообразные текстуры, составленные из крошечных пикселей. Если вы планируете создавать компьютерную игру, то вам предстоит много работать с графикой. Но если вы пока что не замахиваетесь на крупный проект, то от вас не требуется идеальной работы с графическими 3D-редакторами. Здесь вам помогут спрайты для игр, которые вы можете скачать в интернете. Но что же это такое? Как их можно использовать и чем это облегчит вам задачу? Спрайты для игр - это готовые текстуры персонажей, предметов и так далее, которые вы можете загрузить на свой компьютер, а затем использовать в процессе создания игры. Это значит, что вам не нужно будет отрисовывать каждый объект в игре, а также каждую фазу его движения - все это уже будет у вас в готовом виде. Как видите, спрайты для игр действительно значительно могут облегчить вам жизнь.
Теперь вы имеете общее представление о том, что такое спрайты для игр, но этого будет недостаточно, чтобы их использовать на практике. Нужно разобраться, что они конкретно собой представляют и как их применить в создании игр. Если вы собираетесь воспользоваться спрайтами, то вам нужно их скачать на компьютер. В большинстве случаев они будут выглядеть как большой или даже огромный графический файл, в котором на прозрачном фоне будут располагаться десятки или даже сотни маленьких изображений. Соответственно, вы сможете нарезать этот большой файл на маленькие, чтобы иметь прямой доступ к вашим спрайтам. Возможно, некоторые из них вам не понадобятся, и вы сможете их вырезать, так что такой способ намного удобнее, чем скачивание десятков и сотен отдельных изображений. Вы просто выбираете большой файл, отмечаете область, и у вас готов спрайт.
Как вы прекрасно понимаете, в большинстве случаев вы сможете найти спрайты для игр 2D, так как трехмерные изображения не столь стандартизированы, поэтому понадобится очень много места, чтобы передать все движения одного трехмерного объекта. В то же время работа с двухмерными спрайтами крайне проста. Вам нужно просто загружать спрайты в редактор, в котором вы творите, и склеивать их, создавая эффекты движения. А затем загружать в уровень и наслаждаться результатом.
Вы не сможете всю жизнь использовать спрайты для создания игр, так что если вы ставите перед собой амбициозные цели, вам нужно либо учиться работать с либо искать помощника, который владеет этим навыком.
Спрайт (компьютерная графика)
Изначально под спрайтами понимали небольшие рисунки, которые выводились на экран с применением аппаратного ускорения . На некоторых машинах (MSX 1, NES) программная прорисовка приводила к определённым ограничениям , а аппаратные спрайты этого ограничения не имели. Впоследствии с увеличением мощности центрального процессора , от аппаратных спрайтов отказались, и понятие «спрайт» распространилось на всех двумерных персонажей. В частности, в видеоиграх Super Mario и Heroes of Might and Magic вся графика спрайтовая.
К аппаратно ускоренным спрайтам вернулись в середине 1990-х годов - когда развитие мультимедиа и взрывное повышение разрешения и глубины цвета потребовало специализированный процессор в видеоплате. Именно тогда, как обёртка над аппаратным 2D-ускорителем, вышел DirectDraw . DirectX 8 ввёл общий API для двух- и трёхмерной графики, и в современных спрайтовых играх двухмерные спрайты выводятся точно так же, как и трёхмерные - как текстурированный прямоугольник.
Применяются в вебе. Несколько изображений располагаются в одном графическом файле. Для того, чтобы вырезать из файла нужный кусок, применяется CSS - отсюда название технологии.
CSS-спрайты экономят трафик и ускоряют загрузку - браузеру потребуется запрашивать меньше файлов.
В первых трёхмерных играх, например, Wolfenstein 3D () и Doom (), персонажи представлялись в виде двумерных рисунков, изменяющих размер в зависимости от расстояния.
На 3D-акселераторах применяется такая техника: объект рисуется в виде плоскости с наложенной на неё текстурой с прозрачными областями. Эта технология применяется в трёх случаях.
Спрайты могут применяться для оптимизации графического ядра, когда отрисовка трёхмерной детализованной модели слишком накладна и может привести к сильному падению скорости рендеринга. Таковыми являются:
Для большей правдоподобности изображения используется большое количество сравнительно маленьких спрайтов (так называемая система частиц).
Изредка спрайты применяются для добавления в игру живого фото или видео . Например:
Стоит заметить, что в некоторых спрайтовых играх, таких, как Rise of the Triad , спрайты фотографировались с актёров, а не с моделей, игрушек или рисунков.
Появление шейдеров частично снимает потребность в живой съёмке - многие нюансы фотоизображения уже можно передать полигональными моделями в реальном времени.
Наблюдение спрайта под несоответствующим углом приводит к разрушению иллюзии. В зависимости от математического аппарата рендеринга («движка»), разрушение может происходить двумя способами.
Где-то неделю назад один из моих подписчиков попросил меня рассказать о CSS спрайтах , что это такое вообще и с чем их едят. Поэтому сегодня я решил написать эту статью, в которой расскажу, что такое CSS спрайты и где их используют .
CSS спрайт - это комбинированное изображение, в котором находится много различных картинок, и с помощью свойства background-position мы выставляем нужную картинку в нужном месте. Допустим, у нас есть кнопка, и эта кнопка меняет свой вид при наведении на неё курсора мыши. Можно сделать, например, 2 картинки и затем подставлять в качестве фона кнопки ту или иную картинку. Но недостаток данного способа очевиден: в 2 раза больше файлов, примерно в 2 раза больше размер, следовательно, в 2 раза больше время загрузки, чем 1 изображение. И вот техника CSS спрайтов позволяет создать всего лишь одну картинку, в которой будут сразу 2 фона кнопки.
Чтобы стало понятнее, давайте решим эту задачу. У нас имеется изображение, допустим, высотой 20 пикселей и шириной 100 пикселей. Кнопка имеет ширину 50 пикселей и высоту 20 пикселей. В одной картинке мы помещаем изображения обоих состояний (друг за другом). HTML-код будет таким:
Кнопка
И CSS-код :
A {
background: url("button.jpg") no-repeat left top; // Фон кнопки
display: block; // Сделать блочным элементом
height: 20px; // Высота кнопки
width: 50px; // Ширина кнопки
text-decoration: none; // Убрать черту подчёркивания
}
a:hover {
background-position: right top; // Меняем позицию фона, чтобы было смещение изображения
}
Вот таким хитрым образом можно в одной картинке хранить множество изображений. Подчеркну, что именно множество изображений, а не только 2 . Иногда чуть ли не весь сайт состоит из одной картинки, в которой находятся все используемые изображения. Не считаю, что это очень хорошо, но зато будет минимальное количество файлов изображений и минимальный размер загружаемой страницы, что всегда хорошо.
Слово спрайт (англ. sprite - фея, призрак) впервые было использовано мультипликаторами Диснея в несколько ином качестве, мультипликаторы для более быстрого и удобного создания и "оживления" мульт героев сначала рисовали все фазы их движения на прозрачных плёнках, а затем накладывали эти плёнки на основной фон - сцену, и получали кадры мультика, тем самым экономя время, деньги и нервы художников.. эти самые плёнки они и называли спрайтами.
Потом термин спрайт внедрился в компьютерную графику и особо широкое распространение получил в компьютерных играх - но это тоже не совсем то о чем я хочу Вам поведать.. Сегодня я хочу Вам рассказать о так называемых CSS-спрайтах..
Итак, под спрайтами в CSS принято называть одно изображение, которое состоит из нескольких "частей", которые показываются как бы по отдельности в зависимости от действий пользователя..
Что слишком много слов.. покажу пример..
Это спрайт который присутствует на каждой странице данного сайта:
Просто в "спокойном" состоянии Вам показывается одна его часть, а при наведении курсора другая.
Как это сделать? На самом деле все достаточно просто.
В данном примере для блока с фиксированными размерами мы в качестве фона загружаем "двойное" изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую "часть" фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.
Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:
Открываем значит фотошоп и рисуем в нём примерно такой рисунок:
Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет "скакать". Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..
Итак, у нас получилась "двойная" картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.
Он у меня получился таким.. смотрим результат и читаем комментарии в коде:
Думаю, многие читатели задаются вопросом: "А зачем вообще нужны эти спрайты если тоже самое можно сделать с помощью двух отдельных картинок, где одна фон для просто ссылки, а вторая для ссылки с :hover , при этом, не сражаясь с фотошопом и не высчитывая координаты фона для CSS??"
Во-первых: Скорость загрузки изображений увеличивается в разы!! Несмотря на то что "двойная" картинка весит столько же, сколько и две отдельно взятых маленьких "одинарных", загрузка одной большой картинки происходит быстрее, так как браузером не создаются дополнительные HTTP запросы серверу.
Помните, когда я Вам показывал свой логотип-спрайт, говорил что слукавил? Так вот моё лукавство заключается в том, что данная картинка содержит в себе не две логических части изображения, а восемнадцать!!
И полностью она выглядит так:
То есть практически вся графика, которую Вы видите на этом сайте, на самом деле приходит к Вам в виде одного единственного изображения! CSS файл показывать не буду, я его сам боюсь..)),
Так вот HTTP запросы.. если бы изображений вместо одного было 18ть то диалог браузера с сервером выглядел бы примерно так:
Браузер
: Здравствуй Сервер! я тут от тебя же, по моему запросу, получаю HTML и CSS документы, так вот в них указано, что у тебя в папке "графика".. должна лежать картинка с названием: "картинка1" скинь а?
Сервер
: Привет Браузер, давненько не виделись, сейчас посмотрю.. ага есть у меня такая картинка! Лови!!
Браузер
: Спасибо, поймал! Но мне еще нужна "картинка2" в той же папке..
Сервер
: Да и такая есть.. отправляю..
Браузер
: Загрузил.. но тут еще "картинка3" указана.
Сервер
: И не спится же тебе! Держи свою картинку!!
Браузер
: Спасибо! Да мне уже саму если честно надоело, но мой пользователь хочет догрузить страницу полностью.. короче у тебя там еще "картинка4" должна быть..
Сервер
: Ты меня начинаешь напрягать! На свою картинку!!
Браузер
: Извини, но я же не виноват, что здесь столько изображений!!! Нужна "картинка5"!
Сервер
: У меня от тебя уже процессор кипит!! Заколебал!! Забирай свою картинку!!
... ... ...
Дальнейший диалог озвучивать не буду, ибо дальше идет нецензурная брань..
К чему вся эта болтовня между сервером и браузером (клиентом) на которую уходит уйма времени и трафика, к тому же нагружает сервер при большом количестве посетителей сайта, если гораздо быстрее и экономичнее сделать один HTTP запрос и получить все 18 картинок в одном пакете!!
Во-вторых: Загрузка второго изображения при использовании псевдокласса :hover происходит лишь только в тот момент когда пользователь навел курсор на ссылку с первым изображением. Если это небольшое изображение типа кнопки из примера выше, то ничего особо страшного не произойдёт - вторая картинка быстро подгрузится и пользователь ничего не заметит.. а если это большая картинка по весу и размеру?? Тогда пользователь будет наблюдать, как она загружается, хотя он психологически был готов к быстрой смене изображений! Еще один плюс спрайтам! … хотя, если честно, одновременно это и минус.. минус в том случае если пользователь в течении сессии так и не навел курсор.. картинка загрузилась, но так ему и не пригодилась.. но поверьте эта "жертва трафика" оправдывает себя практически всегда!
Ну и в-третьих: Как бы Вам это не показалось странным, но это удобно!! Удобно в коде указывать путь к одному и тому же изображению, удобно его править в фотошопе, к примеру, сделать весь сайт поярче или потемнее работая с одним единственном рисунком, удобно хранить, удобно загружать на сервер, да даже в CSS работать с большим спрайтом удобно! - хотя для этого и нужны определённые навыки и привычка..
Ладно, решайте сами использовать спрайты или нет.. а моё дело маленькое, просто так сказать довести информацию до Вашего сведения.. возникнут дополнительные вопросы жду Вас на
Вы действительно понимаете что это такое? Название слегка вводит в заблуждение, потому что спрайты, в данном случае, это не маленькие картинки, а одно большое изображение. Вы, конечно же, встречались с CSS-трюком, в котором для переключения состояния кнопки использовалось одно изображение, которое просто сдвигалось.
Думаю CSS-спрайты - это расширение этой техники. Разница в том, что вместо двух или трёх изображений, скомбинированных в одно, вы можете использовать сколько угодно картинок в одной. Термин "спрайт" пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.
Нет, это не так. Совсем недавно все разрезали картинки, делали так называемые слайсы, чтобы страница загружалась быстрее. Эта техника создавала видимость того, что страница грузится быстрее, за счёт того, что с сервера подгружалось сразу много кусочков одного изображения, и отображались они почти одновременно. На каждый слайс создавался отдельный http-запрос, и чем больше таких запросов, тем менее эффективна ваша страница.
Ниже представлена цитата из статьи "Performance Research, Part 1 ":
В таблице 1 для популярных сайтов показано, что время на загрузку html-разметки варьируется между 5% и 38%. Остальное время (от 62% до 95%) уходит на создание http-запросов для того чтобы подгрузить остальные части документа (например изображения, скрипты и стилевые файлы). Проблема в том, что браузеры могут одновременно качать только в два или четыре потока, в зависимости от версии http и самого браузера. Наш опыт показывает, что сокращение числа http-запросов имеет наибольшее влияние на сокращение времени отклика и зачастую является самым простым способом увеличить производительность.
Каждое изображение на странице, будь оно в теге img или background-image в вашем CSS-файле - это отдельный http-запрос на сервер.
Давайте начнём с примера. В представленном CSS для каждого элемента используется своё изображение:
#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url("image1.gif")}
#nav li a:hover.item1 {background-image:url("image1_over.gif")}
#nav li a.item2 {background-image:url("image2.gif")}
#nav li a:hover.item2 {background-image:url("image2_over.gif")}
...
Используя технику CSS-спрайтов мы реально можем облегчить наш пример. Вместо 10-ти различных картинок, мы можем сделать одну большую, в которой есть все необходимые нам изображения. Теперь наш CSS будет выглядеть так:
#nav li a {background-image:url("image_nav.gif")}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
...
Таким образом мы уменьшили количество запросов на сервер на 9, и объём загружаемой информации почти на 8 Кбайт. Но это маленький пример, представьте что будет на реальном сайте.
Как однажды сказал Чак Норрис: "Все великие вещи требуют большой самоотверженности". Я конечно не уверен ему ли принадлежат эти слова, но это в любом случае хороший совет:) Но к счастью для вас, существует множество веб-сервисов, которые помогают реализовать спрайты без особых усилий. Я остановлюсь на одном - это 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, а ниже предложенные.
В качестве спрайта не может быть повторяющийся фон. Спрайты используются для простых блочных элементов. Например иконки - главные кандидаты на использование их в спрайтах.
