Создание спрайтов онлайн: CSS спрайты — создание и использование, генераторы CSS спрайтов

CSS спрайты — создание и использование, генераторы CSS спрайтов

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

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

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

Вот парочка примеров «подобных конструкций»:

У использования CSS спрайтов есть два основных преимущества:

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

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

В качестве недостатков CSS спрайта можно назвать:

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

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

Создание CSS спрайтов

Давайте разберемся как использовать спрайты CSS. В теории тут все довольно просто.

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

2. Затем в основном CSS файле сайта к нужным элементам (кнопки, иконки, логотипы, div блоки) прописывается атрибут background:url. В скобках указывается относительный URL-адрес нашего CSS спрайта, к примеру, background:url(«image/sprite.png«).

3. Следуещий шаг – указание конкретного места (координат) размещения нужной нам картинки в спрайте. Это делается посредством атрибута background—position (о нем детально уже рассказывали). Через двоеточие следует указать позицию нашей картинки в пикселях относительно верхнего левого угла спрайта, к примеру, background—position: -47px -50px. Здесь задается смешение вправо и вниз.

Если по какой-либо стороне смещение составляет 0 пикселей, то обозначение «px» допускается опустить. Можно также указать сторону явно, если смещение происходит только по ней. К примеру, background-position: left 35px (смещение влево на 35 пикселей).

Залил на Codepen конкретный пример как сделать спрайт CSS для иконки, у которой при наведении меняется стиль оформления:

Генераторы CSS спрайтов

В принципе, создать CSS спрайт можно вручную в фотошопе (это всего лишь картинка). Но зачем «изобретать велосипед», если для реализации этой цели уже придумано большое количество готовых программных решений. В частности, существуют специальные онлайн-сервисы генераторы спрайтов CSS. Один из самых популярных из них — CSS Sprites.

CSS Sprites

На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».

После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.

После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.

Dan’s Tools CSS Sprite Generator

Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.

CSS Sprites

В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).

Итого. В принципе, все нюансы как сделать CSS спрайты и их использовать мы рассмотрели. Генераторы помогут ускорить процесс создания элементов, но можно обойтись и фотошопом. Если будут какие-то вопросы, пишите в комментариях.

Онлайн сервис для создания CSS спрайтов.

Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу

1. Снижаем число подгружаемых файлов для ускорения сайта
2. Создание CSS спрайтов (sprites) из фоновых изображений сайта
3. Вносим изменения в файл CSS при подключении спрайтов

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня, похоже, завершается серия статей, посвященных увеличению скорости загрузки сайта. Как вам, наверное, известно, с недавних пор она является одним из факторов, влияющих на успешность продвижения проекта.

Это уже пятая статья. В предыдущих публикациях для анализа скорости загрузки сайта и получения рекомендаций по ее увеличению, мы воспользовались очень удобным и эффективным инструментом под названием Page Speed. Сегодня же поговорим о таком понятии, как CSS спрайты (sprites).

Снижаем число подгружаемых файлов для ускорения сайта

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

1. Как измерить скорость загрузки сайта и установить Page Speed
2. Как объединить и сжать CSS файлы
3. Как включить Gzip сжатие в .htaccess
4. Снижение числа http запросов и сжатие изображений

Как я говорил в предыдущей статье, для загрузки каждого изображения в браузер пользователя с web сервера, вне зависимости от того, как оно формируется (с помощью тега IMG или же в CSS с помощью свойства «background»), используется отдельный http запрос. Если графики на вашем проекте довольно много, то и количество таких запросов будет неприлично большим.

Например, на начальном этапе развития моего блога сервис Pingdom (на нем можно измерить скорость загрузки, а так же настроить проверку и мониторинг доступности сайта — аптайм) давал такое заключение:

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

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

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

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

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

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

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

Лучшим онлайн сервисом, на мой взгляд, является «Sprites me» — широко известный и популярный в буржунете, но не заслужено обойденный вниманием в рунете. Вам даже не потребуется загружать в него свои фоновые изображения, которые вы желаете объединить.

Этот генератор все сделает за вас — сам просмотрит ваш сайт, даст рекомендации о том, какие именно картинки можно будет объединить в спрайты, а какие нет.

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

Кстати, после того, как я произвел все действия, описанные мною в этой серии статей про увеличение скорости загрузки, в сервисе Pingdom результат уже получился гораздо более приятный глазу:

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

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

После проведения всех описанных в этих пяти статьях мероприятий по повышению скорости загрузки, Page Speed дает моему блогу KtoNaNovenkogo.ru оценку в 93 балла из ста возможных, и при этом отсутствуют строки помеченные красным, что означает практически полное исполнение мною всех основных требований (см. скриншот выше).

Создание CSS спрайтов (sprites) из фоновых изображений сайта

Итак, для начала вам нужно открыть главную страницу сервиса «Sprites me». Дальнейшие действия могут показаться вам не совсем обычными, ибо потребуется перетащить ссылку под таким же названием «Sprites me» с этой страницы в закладки вашего браузера.

Не знаю, насколько корректно работает этот онлайн генератор в различных браузерах, но в Opera он работает без проблем и на ура.

Открываете в боковой панели обозревателя закладки и выбираете папку, куда требуется сохранить ссылку генератора, а затем просто хватаете левой кнопкой мыши надпись «Sprites me» и тащите ее на панель закладок своего браузера.

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

Посмотрите внимательно, в области «Suggested Sprites» для моего блога предлагается создать три спрайта из фоновых изображений моей темы оформления WordPress. В первый будет включено девять графических файлов, а в остальные по два. В самом низу окна генератора в области «Non-Sprited Images» приведены картинки, которые не представляется возможности объединить.

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

Попробовав и так, и эдак поиграться с CSS кодом, я счел за благо при создании первого спрайта просто перетащить из него проблемные изображения в нижнюю область «Non-Sprited Images». После этого проблем с его работой уже не наблюдалось. Как я и говорил — все очень просто и наглядно. Хвала создателям этого онлайн генератора.

Итак, что же нужно сделать для создания спрайта? Да просто щелкнуть по кнопке «make sprite», расположенной в верхнем правом углу каждой области с изображениями, которые при вашем желании могут быть объединены.

После этого генератор на некоторое время задумается, а затем вместо Урлов на отдельных картинок покажет ссылку, по которой вы сможете скачать уже готовый CSS спрайт (все изображения будут объединены в одно). Подведя курсор мыши к этой ссылке вы увидите, как он будет выглядеть:

Для скачивания созданного спрайта щелкните по его Урлу правой кнопкой мыши и выберите из контекстного меню пункт сохранения объекта по ссылке. Затем подключитесь к вашему ресурсу по FTP и копируете графический файл со спрайтом в папку, где хранятся картинки вашего шаблона (хотя можно и в любую другую директорию, ибо это не принципиально).

Точно таким же образом создаете и остальные (просто щелкнув по кнопке «make sprite»), которые вам предлагает создать генератор. Скачиваете полученные файлы спрайтов и заливаете их в папку с картинками на своем ресурсе.

Вносим изменения в файл CSS при подключении спрайтов

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

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

Но тут у вас не должно возникнуть особых трудностей, ибо данный генератор даст вам подробную инструкцию, что именно в вашем файле CSS нужно будет изменить. Для получения этой инструкции вам нужно будет щелкнуть по кнопке «export CSS», расположенной в правом верхнем углу окна «Sprites me».

В результате откроется страница с рекомендациями по внесению изменений именно в ваш style.css для того, чтобы заработали созданные вами объединенные изображения. Будут указаны конкретные CSS свойства, в которые потребуется внести изменения, а так же будут зачеркнуты те, которые потребуется удалить и те, которые нужно будет прописать заместо удаленных.

Но обратите внимание, что в приведенной инструкции путь до графических файлов спрайтов вам нужно будет поменять на свой. Для примера приведу участок кода моего style.css до внесения изменения:

#content .post_bottom{background:#bce3ff url(images/post_bottom.png) no-repeat bottom;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

И после:

#content .post_bottom{background:#bce3ff url(https://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme1.png) no-repeat bottom; background-position: -10px 0px;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

Если в свойстве уже окажется прописанным свойство «background-position», то замените значения в нем на те, которые предлагает данный генератор.

После внесения всех предписанных изменений в style.css обновите открытую в браузере страницу вашего ресурса, удерживая при это нажатой клавишу Shift на клавиатуре (в этом случае статические объекты на вебстранице будут заново запрошены с web сервера).

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

Если перекосы после применения CSS спрайта все же появились, то попробуйте определить их причину, и при невозможности устранения, просто создайте его заново в генераторе, но уже исключив из него те изображения, которые не корректно отображались (перетащите их мышью в область «Non-Sprited Images»).

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Бесплатный редактор для рисования спрайтов и фонов INKSCAPE

Графический редактор Scratch для рисования фонов сцены и костюмов спрайтов достаточно хорош для начинающих. Но у него есть и свои недостатки. Это нормально, так как в реальной практике при разработке игр и создании мультфильмов для рисования используются специализированные редакторы. Это достаточно сложные инструментальные среды. И их многообразие огромно. Хотя, есть и те, которые используются наиболее часто. Мы постараемся рассказать о них тоже в отдельных статьях. Конечно, профессиональные инструменты в основном платные.

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

Один из таких редакторов — INKSCAPE. У него масса достоинств. Вот некоторые из них:

• он бесплатный;
• его набор инструментов достаточно разнообразен и близок к набору инструментов многих профессиональных платных инструментов;
• он поддерживает почти все графические форматы, даже векторный формат .svg, который используется в векторном редакторе Scratch;
• сам редактор векторный (со всеми преимуществами векторного формата), но изображения можно сохранить и в растровый файл. Например, наиболее часто используемый при разработке игр формат .png. Этот формат поддерживает и редактор Scratch;
• его легко скачать и установить на свой компьютер, и он не требует больших компьютерных мощностей;
• пользоваться им можно научиться достаточно быстро;
• это редактор с открытым исходным кодом. А это значит, что он постоянно совершенствуется огромной командой разработчиков, и каждый может внести изменения в код и создать «свой» редактор. Конечно, для этого надо быть профессиональным программистом 😉

Поделитесь в комментариях своим опытом использования INKSCAPE.

База Знаний • MOTR

Ниже приведены два гайда — по созданию .spr-файлов и прилагающихся к ним .act-файлов. Одно неотделимо от другого, молодые Скайуокеры!

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

Создание и компиляция спрайтов для Ragnarok Online v1.0 by Kyoji

Вступление

Спрайты хотят рисовать многие, и это логично. Но откуда узнать, как это делается? Да хотя бы и отсюда…

Содержание
1. Инструментарий (и что вообще потребуется)
2. Photoshop
3. Paint Shop Pro
4. Компиляция спрайта
5. Завершение
6. Альтернативный метод для Photoshop (автор – Meara)

1. Инструментарий

Чтобы создать спрайт, нужна чертова уйма разнообразного софта. Чтоб спрайт при этом смотрелся, нужно дополнительно повкалывать; так что не рассчитывайте схалявить на скорую руку. Вот эта чертова уйма:
1. Photoshop (рекомендуется) или Paint Shop Pro
2. Sprite Encoder (пока нет живой линки; но можно использовать приведенный ниже SPR Conview)
3. «Смотрелка» для спрайтов. Вполне подойдет SPR Conview
4. MS Paint (в зависимости от выбора в п.1)
5. ActOR
// Upd: линки мертвы; рабочая ссылка ниже, в гайде по ActOR.
6. «Библия спрайтов»
7. Распаковщик ресурсов; GRFIO, Pakext, GRF Factory наконец…
добавлено: GRFTool.

2. Photoshop

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

Запустите фотошоп, создайте новый файл. В качестве фона возьмите какой-нибудь дикий цвет, который ни один вменяемый человек использовать не станет. Например, R:255 G:0 B:255. Вообще же это просто должен быть цвет, который в спрайте не используется.

Рисуйте. Мне вас этому тоже учить?

Нарисованное отмасштабируйте и сохраняйте. Формат? GIF. Фотошоп выбросит окошко, в коем нужно в выпадающем меню «Palette» выбрать «Custom». На экране появится эта самая палитра. Выберите самый левый верхний цвет, кликните на фон спрайта, нажмите ОК. Вы вернетесь в предыдущее меню; если есть галочка рядом со словом «Transparency, снимите ее. В выпадающих меню «Option» и «Dither» выставьте «none». Жмите ОК.

Если для этого спрайта нарисованы и другие кадры, для них в выпадающем меню «Palette» выбирайте «previous».

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

3. Paint Shop Pro

Пользовался этой штукой лишь эпизодически; посему могу посоветовать только «поступать так же, как с фотошопом». Отличие в том, что сохранять придется в .bmp.

4. Компиляция спрайта

А вот тут у нас весело… если вы пользовались фотошопом, откройте сохраненный гиф MS Paint’ом. И пересохраните – на этот раз в .bmp (256 цветов).

Теперь открывайте кодировщик спрайтов. Вы увидите два окошка, строку ввода и кучу кнопок. Нажмите Add и покажите программе, где лежит ваш bmp’шник. Если это – единственный кадр спрайта, «добавьте» его пару-тройку раз. Если имеет место последовательность кадров, «добавьте» их в положенном порядке.

Когда все кадры будут загнаны в список, вбейте в строку ввода название спрайта (по умолчанию там «#»). Наберите <имя спрайта>.spr, нажмите Encode. По идее, вы узрите: «Adding: <bmp file path>» и ниже — «RLE OK, Compressed and orig data identical». Если это не так, то попробуйте пересохранить bmp’шник MS Paint’ом, при этом убедившись в том, что гиф был создан корректно и согласно инструкции.

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

5. Окончание

Уф, добрались! Теперь осталось не так много – act-файл для вашего спрайта. Лучше всего работать одной из двух отличных программ – XZVF либо ActOR; по мне, второй лучше.

6. Альтернативный метод для Photoshop

Нам понадобятся Photoshop 7.0 (не пробовал другие версии) и SPR Conview.

Этап первый: создание .bmp

Лично я рисую, использую целую кучу слоев; но вообще это дело личного стиля. Не станем углубляться, ладно?

В общем, вот вы нарисовали все кадры. Теперь нужно убедиться, что они используют одинаковые палитры. По крайней мере, можно найти самый «цветастый» кадр и использовать в спрайте именно его палитру. Делаем так: Image->Mode->Indexed Color
#228

Палитра проиндексируется, и откроется такое окно:
#228

Переключите там палитру с Previous на Exact (если оно не стоит так по умолчанию), промотайте до Custom. Выберите. Вам покажут палитру:
#228

Опытному пользователю фотошопа это окно знакомо. Первый цвет – фоновой — снежно-белый; поэтому использовать его в спрайте нельзя. Остальные – это все цвета, доступные в вашем спрайте, общим числом 256. Итак, нажмите на первый цвет палитры:
#228

Появится окошко Color Picker’а; в принципе тут можно просто щелкнуть на фон спрайта, а можно, скажем, самостоятельно вбить значения красной, синей и зеленой составляющих вашего фонового цвета.

Затем нажмите Save и сохраните палитру в формате ACT или PAL; но сохраняйте подальше от своей папки с Ragnarok Online дабы ничего не запороть. Загружайте эту палитру для всех последующих кадров анимации спрайта.

Чтобы сохранить саму картинку, отправляйтесь в File->Save As. Увидите много интересного:
#228

8-битный битмэп – он нам и нужен, собственно.

Этап второй: конверсия

В общем-то, на картинке все вполне ясно… откройте SPR Conview, затем выберите Convert-> BMP to SPR.
#228

Снимите галочку с «Encode Spr».

Сохраните спрайт.

Готово!

actOR: как, что, каким образом. v 0.1 by Kyoji

Этап первый
Слить и распаковать вот это. Пароль к архиву — 3Q65. В комплекте – чисто для примера — идут голова и тело хантера.

Этап второй
Запустить actor.exe
Появится вот эдакое окошко. На картинке цифрами отмечены:

1. Выбор действия ака анимационного набора. Ходьба, сидение, стрельба; такое вот разделение.
2. Это у нас «указатель направления». Здесь мы выбираем ракурс спрайта; для каждого кадра каждого действия отрисовать придется все ракурсы. Легко не будет, а то.
3. Слайдер для навигации между кадрами. Как можете заметить, в анимации «стояния» аж три одинаковых кадра. То же самое – для каждого ракурса головы.
4. Окно «привязки». Местная фича. Если у вас есть спрайт для головы ref_head.spr и к нему – act-файл ref_head.act, активизируется соответствующий чекбокс. Это же справедливо для спрайтов тел персонажей (если редактируем голову), для спрайтов с гордым именем etc (уж не знаю, что вы туда засунете) и т.п. Также прилагается отдельный указатель ракурсов для привязанных объектов; впрочем, голова крутится вместе с персонажем совершенно самостоятельно.
5. Здесь показывается информация о текущем спрайте, точнее, о текущем кадре/ракурсе/анимационном наборе. Редактируя параметры Xoff и Yoff, можно передвинуть спрайт левее, правее, выше, ниже.
6. Здесь выставляется порядок отрисовки «привязок»; например, если вы рисуете шлем, голову нужно отрисовывать ПОД вашим спрайтом; поставьте ей в качестве Priority – back.

Этап третий

File->Open; actOR возжелает от вас .spr-файл, или как минимум пачку пронумерованных bmp-шек. Обязательно положите по соседству act-файл и назовите его точно так же как спрайт или bmp-шки за изъятием номера. Он загрузится вместе с ними.

Этап четвертый

Редактируйте act-файл, как описано выше; сохраняйте результаты посредством File->Save ACT.

Этап пятый
см. Этап четвертый до готовности.

Создание спрайтов и костюмов. Урок 8 курса «Программирование в Scratch»

В Scratch на вкладке «Костюмы» есть встроенный графический редактор, в котором можно создавать собственные спрайты и их костюмы, а также изменять те, что были добавлены из библиотеки.

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

Первым делом надо создать нового героя. Для этого на панели спрайтов, которая находится под сценой, в меню выбираем пункт «Нарисовать».

После этого здесь появится пустой спрайт, а на холсте вкладки «Костюмы» мы увидим, что ничего не нарисовано.

Пусть нашим героем будет смайлик. Нарисуем его с помощью инструментов «Круг» и «Линия». Также воспользуемся заливкой, чтобы раскрасить.

Костюмы можно переименовывать, как и спрайты.

Чтобы не рисовать второй костюм, продублируем первый. Для этого надо кликнуть по нему правой кнопкой мыши и выбрать в контекстном меню «дублировать».

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

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

Для начала запрограммируем перемещение кота:

Теперь надо как-то узнавать, что кот касается смайла? В разделе «Сенсоры» есть команда «касается цвета …». Если кликнуть по полю с цветом, то появится панелька, где можно выбрать цвет. Чтобы точно определить тот или иной цвет, лучше воспользоваться пипеткой. Ей надо кликнуть по объекту на сцене, касание с которым будет обрабатываться программой.

Однако кто кого касается? Кот смайла или смайл кота? В данном случае разница есть, так как если кот касается смайла, то блок «касается цвета …» должен добавляться коту. Если же смайл касается кота, то блок добавляется смайлу.

Результат взаимодействия спрайтов больше всего отражается на смайле. Ведь это именно он меняет свои костюмы. Значит, команду «касается цвета …» лучше всего добавить ему.

Бросим эту команду в редактор кода смайла, выберем пипетку и наведем ей на кота. Причем так, чтобы выбрать его оранжевый цвет. Ни в коем случае не белый или черный. А только какой-то уникальный цвет кота, характерный только для него.

Поскольку костюм смайла должен меняться случайно, понадобиться команда «выдать случайное от … до …». Итоговый скрипт смайла может выглядеть так:

Команда «передать брысь» внутри блока «если касается цвета» нужна для того, чтобы как только кот коснется смайла, он сразу отскакивал от него. Иначе цикл, который крутится очень быстро, снова зафиксирует касание. Получится, что смайлик от одного касания кота начнет очень быстро менять свои костюмы.

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

Задание

Реализуйте сценарий, в котором при каждом нажатии пробела два спрайта попеременно превращаются друг в друга. Например, при каждом нажатии пробела яблоко превращается в бананы, а бананы – в яблоко.

С. Шапошникова © 2021

Редактор спрайтов Unity Sprite Editor, как с ним работать и чего можно добиться?

Бывают такие ситуации когда текстура спрайта содержит не только один элемент, гораздо удобней объединить несколько изображений связанных друг с другом в одно изображение. Например, изображение может содержать составные части персонажа, бег, прыжок , стрельба , состояние покоя. Для этих целей Unity предоставляет Sprite Editor, который позволяет с извлекать элементы составного изображения.

Убедитесь, что графический объект, который вы хотите отредактировать, имеет тип текстуры, заданный для Sprite (2D и UI).

Для текстур Sprite с несколькими элементами необходимо, чтобы режим Sprite был установлен на Multiple in Inector.

Откройте редактор спрайтов

1. Выберите 2D-изображение, которое вы хотите отредактировать, из Project View

Вы не можете редактировать спрайт, который находится в режиме просмотра из сцены.

2. Нажмите кнопку «Редактор спрайтов» в Инспекторе импорта и отобразится редактор спрайтов.

Установите режим Sprite в Multiple в Inspector Import Text, если ваше изображение имеет несколько элементов.

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

Кроме составного изображения, вы увидите другие элементы управления в редакторе. Слайдер в правом верхнем углу управляет приближением, в то время как кнопка с цветными полосками слева от него изменяет отображение альфа-канала и обычного вида изображения. Самый важный элемент управления это меню Slice в левом верхнем углу, который предоставляет опции для автоматической нарезки элементов изображения. Кнопки Apply and Revert позволяют вам сохранить или отменить сделанные изменения.

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

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

Элементы управления на панели позволяют выбрать имя для спрайта и задать положение и размер прямоугольника по его координатам. Ширина границы, для левой, верхней, правой и нижней, может быть указана в пикселях. Существуют также настройки для оси спрайта, которые Unity использует как начало координат и основную «опорную точку» графического объекта. Вы можете выбрать из нескольких позиций по умолчанию для прямоугольника.

Кнопка Trim рядом с пунктом меню Slice изменит размер прямоугольника так, чтобы он плотно касался края изображения на основе прозрачности. Границы поддерживаются только для системы пользовательского интерфейса, а не для 2D SpriteRenderer.

Автоматическая нарезка

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

Если тип разреза установлен на «Автоматически», редактор попытается угадать границы элементов спрайтов по прозрачности. Вы можете установить пивот по умолчанию для каждого идентифицированного спрайта. В меню «Метод» вы можете выбрать, как работать с существующими выборами в окне. Опция «Удалить существующий» просто заменит все, что уже выбрано, Smart попытается создать новые прямоугольники, сохранив или отредактировав существующие, и Safe добавит новые прямоугольники, не изменив ничего уже на месте.

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

Значения размера пикселя определяют высоту и ширину плиток в пикселях. Если вы выбрали сетку по количеству ячеек, Column & Row определяет количество столбцов и строк, используемых для нарезки. Вы также можете использовать значения смещения, чтобы сдвинуть положение сетки в левом верхнем углу изображения и значения заполнения, чтобы немного вставить прямоугольники спрайтов из сетки. Pivot может быть настроен с одним из девяти предустановленных мест или может быть установлено местоположение пользовательского поворота.

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

Explore — Галерея Pixel Art

  import Felgo 3.0 
 import QtQuick 2.0 
 GameWindow {
 
 Scene {
 
 SpriteSequenceVPlay {
 anchors.centerIn: parent width: 150 height: 150 
 SpriteVPlay {
 frameCount: 2 frameRate: 
 frameWidth: 256 frameRate: 
 : "https:} 
} 
} 
} 
  

  $ git clone git: //github.com/draeton/stitches