Бесплатные ресурсы для ваших игр

Введение

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


Использование спрайтов

Не сложно догадаться, что обычно спрайты ассоциируют с играми. При чем, чаще всего именно со старыми 2D и некоторыми с псевдо-3D графикой, где ощущения расстояния добивались за счет того, что спрайт уменьшался до нужных пропорций. Тем не менее, спрайты используются и в нынешних играх, так как есть немало элементов, которые проще отобразить как картинку и применить к ним различные фильтры и эффекты, чем полностью производить расчет движения 3D-объекта. Например, очень далекие объекты (относительно игрока), часто повторяющиеся объекты (трава, дым и прочее).

Однако, игры это далеко не все варианты применения спрайтов. Они так же зарекомендовали себя в сфере создания веб-сайтов.

Как пользоваться спрайтами CSS

Теперь пора узнать, как использовать CSS-спрайты на практике. Мы покажем вам небольшой пример с использованием спрайта, содержащего значки социальных сетей (мы показывали его выше). В обычном состоянии ссылки значок соцсети будет цветным (верхний ряд спрайта), а при наведении курсора он будет становиться серым (как в нижнем ряду).

HTML-разметка выглядит следующим образом:

<a href="#" class="facebook"></a>
<a href="#" class="twitter"></a>
<a href="#" class="youtube"></a>
<a href="#" class="instagram"></a>
<a href="#" class="linkedin"></a>
<a href="#" class="tumblr"></a>
<a href="#" class="google"></a>

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

Переходим к CSS. Первым делом запишем общие стили для всех ссылок:

a {
  background-image: url(https://goo.gl/1t18Rz);
  background-repeat: no-repeat;
  height: 98px;
  width: 100px;
  display: inline-block;
  margin-right: 10px;
}

Первая строка содержит ссылку на спрайт. По факту, мы задали одно фоновое изображение для всех ссылок. Вторая строка отменяет дублирование фона — здесь оно не потребуется.

Следующие две строки — высота и ширина каждого элемента . Каким образом определялись эти значения? Здесь мы отталкивались от размеров значков в спрайте. Высота каждой иконки равна 98 пикселям, а ширина — 100 пикселей. Далее мы будем позиционировать фоновую картинку для каждой ссылки, подстраивая фон таким образом, чтобы значок ровно вписался в «окошко» ссылки размером 98×100 пикселей.

Первая наша ссылка имеет класс . Зададим позиционирование для ее фона. Иконка Facebook находится точно в левом верхнем левом углу спрайта, поэтому определить ее позицию будет легко — :

a.facebook { background-position: left top; }

Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение :

a.twitter { background-position: -100px top; }

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

a.youtube { background-position: -200px top; }
a.instagram { background-position: -300px top; }
a.linkedin { background-position: -400px top; }
a.tumblr { background-position: -500px top; }
a.google { background-position: -600px top; }

Результат работы данного кода показан на скриншоте ниже:

Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения свойству :

a:hover {
  background-position-y: bottom;
}

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

Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство ):

a { transition: all 0.2s ease-out; }

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

Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации — transform.

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

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

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

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

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

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


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

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

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

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

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

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

Использование CSS спрайтов для создания эффектов при наведении

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

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

Как здесь:

Наведи на меня!

Для решения этой проблемы делаем следующее:

  1. 1.Подготавливаем спрайт с двумя картинками

  2. 2.Задаем верхнее изображение в качестве фона

    PHP

    .smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile.png)no-repeat; /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }

    1 2 3 4 5 6

    .smile{

    width75px;/*ширина блока*/

    height75px;/*высота блока*/

    backgroundurl(imagessmile.png)no-repeat;/*задаём фоновую картинку*/

    background-position0px0px;/*начальная позиция блока*/

    }

  3. 3.Задаём смещение фона при наведении

    PHP

    .smile:hover { background-position: 0px -80px; }

    1 2 3

    .smilehover{

    background-position0px-80px;

    }

    Получится вот так:

    Наведи на меня!
  4. 4.Для интереса можно ещё задать CSS свойство:

    PHP

    transition: all 0.5s ease;

    1 transitionall0.5sease;

    Его добавляем и к селекторам .smile и .smile:hover и получаем довольно интересный эффект при наведении, а заодно и наглядно видим как происходит смещение фона.

В итоге получится так:

Наведи на меня!

В общем полезная штука эти CSS спрайты, но готовить и редактировать их довольно сложно!

К счастью, для облегчения этой задачи существуют специальные онлайн генераторы спрайтов.

Спрайты Изображений — Эффект Hover

Теперь мы хотим добавить эффект hover к нашему списку навигации.

Наше новое изображение («img_navsprites_hover.gif») содержит три рисунка для навигации и три рисунка, необходимых для hover-эффектов:

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

Мы добавляем всего три строчки кода для реализации hover-эффекта:

Объяснение примера:

  • Поскольку пункт списка содержит ссылку, мы можем использовать псевдо-класс :hover
  • #home a:hover{background: transparent url(images/img_navsprites_hover.gif) 0 -45px;} — Для всех трех hover-изображений мы указываем ту же самую фоновую позицию,  только со сдвигом вниз на 45px

Спрайты Изображений — Создание Списка Навигации

Мы хотим использовать спрайт изображенгий («img_navsprites.gif») для создания списка навигации.

Мы будем использовать HTML список, т.к. в нем можно использовать ссылки, а также он поддерживает фоновое изображение:

Объяснение примера:

  • #navlist{position:relative;} — позиция устанавливается в относительную чтобы реализовать абсолютное позиционирование внутри нее
  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} — поля и отступы устанавливаются в 0, стиль списка (list-style) удаляется , и все пункты списка абсолютно позиционированы
  • #navlist li, #navlist a{height:44px;display:block;} — высота всех изображений равна 44px

Теперь начинаем позиционировать и оформлять каждую специфическую часть:

  • #home{left:0px;width:46px;} — Размещается слева и ширина изображения устанавливается в 46px
  • #home{background:url(images/img_navsprites.gif) 0 0;} — Определяет фоновый рисунок и его положение (left 0px, top 0px)
  • #prev{left:63px;width:43px;} — Размещается правее на 63px (ширина #home 46px + некоторое дополнительное пространство между элементами), и ширина устанавливается в 43px.
  • #prev{background:url(‘images/img_navsprites.gif’) -47px 0;} — Определяет фоновое изображение на 47px правее (ширина #home 46px + 1px ширина разделятеля (вертикальной линии между рисунками)
  • #next{left:129px;width:43px;}- Размещается правее на 129px (начало #prev равно 63px + ширина #prev 43px + дополнительное пространство), и ширина устанавливается в 43px.
  • #next{background:url(‘images/img_navsprites.gif’) no-repeat -91px 0;} — Определяет фоновый рисунок на 91px правее (ширина #home 46px + 1px вертикальный разделитель + ширина #prev 43px + 1px вертикальный разделитель )

Описание

Спрайт (Sprite) — это безалкогольный газированный напиток со вкусом лимона от компании Coca-Cola.

История


The Coca-Cola Company является лидером по продаже газированных напитков. Знаменитая троица компании — кока-кола, фанта и спрайт, который начали изготавливать для конкуренции с 7Up от известной компании PepsiCo.

Производство спрайта началось относительно недавно. В 1961 г. напиток впервые попробовали жители нескольких городов штата Джорджия, спустя всего одну неделю спрайт стал известен еще в 6 городах, а в 1992 году и в России.

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

Разновидности

The Coca-Cola Company производит несколько разновидностей спрайта:

  • лимон и лайм;
  • цитрусовый;
  • имбирный;
  • энергетический с кофеином;
  • грейпфрутовый;
  • с натуральным зеленым чаем;
  • диетический.

Состав

  • вода;
  • сахар либо подсластитель аспартам;
  • диоксид углерода;
  • лимонная кислота;
  • цитрат натрия;
  • натуральные ароматизаторы;
  • бензоат натрия (консервант).

Польза

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

Вред и ограничения

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

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

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

А также не рекомендуется к употреблению детям и женщинам во время беременности и кормления грудью.

Применение

Употребляют спрайт как самостоятельный напиток или добавляют в различные коктейли. Самый популярный — «текила бум», когда смешивают спрайт и текилу, встряхивают, а затем выпивают до дна. Не менее известными являются «безалкогольный мохито» и «клубничный мохито».

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

Калорийность 29.0кКал

Энергетическая ценность продукта (Соотношение белков, жиров, углеводов):

Белки: 0.1г. ( &Tilde; 0,4 кКал)

Жиры: 0.0г. ( &Tilde; 0 кКал)

Углеводы: 7.0г. ( &Tilde; 28 кКал)

Энергетическое соотношение (б|ж|у): 1% | 0% | 96%

Что такое CSS спрайты?

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

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

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

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

Вид спрайтов

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

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

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

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

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

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

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

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

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

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, а ниже предложенные.

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

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

Спрайт это

Спрайт — это изображение (растровое), которое отображают поверх основного фона, без изменения последнего. Таким образом, нет необходимости рисовать под каждое действие полноценную картинку. Отобразили фон, а затем в нужном вам месте отобразили спрайт или несколько. И так для каждой анимации.

Атлас спрайтов — это набор изображений (спрайтов), объединенных в один файл. Чаще всего, в атласе находятся различные варианты действий (проекций) одного и того же объекта. К примеру, если посмотреть на рисунок чуть выше, то там изображены герои из игрушек с разными кадрами.

Примечание: Стоит знать, что нередко атлас спрайтов называют просто спрайтом.

Суть оптимизации здесь заключается в том, что вся нужная графика для анимации объекта содержится в одном файле в виде готовых изображений (проще загружать, не нужны математические расчеты и прочее). Единственно, что необходимо, так это отображать нужную область картинки при соответствующем действий. Простой пример, персонаж идет в сторону — по очереди отображаются 3 разных области с картинки (в одной персонаж стоит неподвижно, в другой одна нога впереди, в третьей другая нога впереди).

Конечно, детализация движений может подразумевать существенно больше кадров (чем 3 в примере), однако загрузить картинку и отобразить нужные области — это быстрее, чем пытаться воссоздавать сложный рисунок с нуля.

Примечание: Интересный факт. Чтобы добиться эффекта прозрачности, основную область спрайта красили в один из неиспользуемых цветов. Затем при отображении указывался код этого цвета и все пиксели с таким цветом просто не рисовались поверх фона.


С этим читают