Спрайт как создать: Генератор спрайтов SVG | SVG спрайты для вашей системы иконок

Разное 

Содержание

Создаём и используем символьный SVG-спрайт

В данной статье посмотрим, как можно просто и быстро создавать и использовать символьные SVG-спрайты

Подписаться на Telegram-канал блога

Что такое SVG

SVG — масштабируемая векторная графика.

Сама по себе технология SVG — это очень объёмная тема — подробнее с ней можно познакомится на MDN Web Docs

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

Аналогичные иконки при масштабировании в формате SVG и PNG

Способы использования SVG-иконок

SVG-иконки можно использовать несколькими способами

1й способ — сохранить SVG-иконку как файл, и подключать как обычное изображение

<img src="img/github. svg" alt=""/>

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

2й способ — открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.

<div>
  <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M319.988 7.973C143.293 7.973 0 151.242 0 327.96c0 141.392 91.678 261.298 218.826 303.63 16.004 2.964 21.886-6.957 21.886-15.414 0-7.63-.319-32.835-.449-59.552-89.032 19.359-107.8-37.772-107.8-37.772-14.552-36.993-35.529-46.831-35.529-46.831-29.
 
 032-19.879 2.209-19.442 2.209-19.442 32.126 2.245 49.04 32.954 49.04 32.954 28.56 48.922 74.883 34.76 93.131 26.598 2.882-20.681 11.15-34.807 20.315-42.803-71.08-8.067-145.797-35.516-145.797-158.14 0-34.926 12.52-63.485 32.965-85.88-3.33-8.078-14.291-40.606 3.083-84.674 0 0 26.87-8.61 88.029 32.8 25.512-7.075 52.878-10.642 80.056-10.76 27.2.118 54.614 3.673 80.162 10.76 61.076-41.386 87.922-32.8 87.922-32.8 17.398 44.08 6.485 76.631 3.154 84.675 20.516 22.394 32.93 50.953 32.93 85.879 0 122.907-74.883 149.93-146.117 157.856 11.481 9.921 21.733 29.398 21.733 59.233 0 42.792-.366 77.28-.366 87.804 0 8.516 5.764 18.473 21.992 15.354 127.076-42.354 218.637-162.274 218.637-303.582 0-176.695-143.269-319.988-320-319.988l-.023.107z"/></svg>
</div>

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

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

Этот способ и рассмотрим подробнее

Создаём и используем символьный SVG-спрайт

Символьный SVG-спрайт — это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке

Для примера скачаем пару SVG-иконок, например, на сайте https://uxwing.com/ с бесплатными иконками

Чтобы автоматически создать SVG-спрайт, воспользуемся онлайн-сервисом https://svgsprit.es/

Просто перетаскиваем все необходимые файлы SVG-иконок на главную страницу https://svgsprit.es/, и внизу страницы автоматически будет сгенерирован код, состоящий из двух частей

Первая часть — символьный SVG спрайт

<svg>
  <symbol xmlns="http://www. w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640">
    <path d="M640.012 121.513c-23.528 10.524-48.875 17.516-75.343 20.634 27.118-16.24 47.858-41.977 57.756-72.615-25.347 14.988-53.516 25.985-83.363 31.866-24-25.5-58.087-41.35-95.848-41.35-72.508 0-131.21 58.736-131.21 131.198 0 10.228 1.134 20.232 3.355 29.882-109.1-5.528-205.821-57.757-270.57-137.222a131.423 131.423 0 00-17.764 66c0 45.497 23.102 85.738 58.347 109.207-21.508-.638-41.74-6.638-59.505-16.359v1.642c0 63.627 45.225 116.718 105.32 128.718-11.008 2.988-22.63 4.642-34.606 4.642-8.48 0-16.654-.874-24.78-2.35 16.783 52.11 65.233 90.095 122.612 91.205-44.989 35.245-101.493 56.233-163.09 56.233-10.63 0-20.988-.65-31.334-1.89 58.229 37.359 127.206 58.997 201.31 58.997 241.42 0 373.552-200.069 373.552-373.54 0-5.764-.13-11.35-.366-16.996 25.642-18.343 47.87-41.493 65.469-67.844l.059-.059z"></path>
  </symbol>
  <symbol xmlns="http://www.
 
 w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640">
    <path d="M319.988 7.973C143.293 7.973 0 151.242 0 327.96c0 141.392 91.678 261.298 218.826 303.63 16.004 2.964 21.886-6.957 21.886-15.414 0-7.63-.319-32.835-.449-59.552-89.032 19.359-107.8-37.772-107.8-37.772-14.552-36.993-35.529-46.831-35.529-46.831-29.032-19.879 2.209-19.442 2.209-19.442 32.126 2.245 49.04 32.954 49.04 32.954 28.56 48.922 74.883 34.76 93.131 26.598 2.882-20.681 11.15-34.807 20.315-42.803-71.08-8.067-145.797-35.516-145.797-158.14 0-34.926 12.52-63.485 32.965-85.88-3.33-8.078-14.291-40.606 3.083-84.674 0 0 26.87-8.61 88.029 32.8 25.512-7.075 52.878-10.642 80.056-10.76 27.2.118 54.614 3.673 80.162 10.76 61.076-41.386 87.922-32.8 87.922-32.8 17.398 44.08 6.485 76.631 3.154 84.675 20.516 22.394 32.93 50.953 32.93 85.879 0 122.907-74.883 149.93-146.117 157.856 11.481 9.921 21.733 29.
 

  
 398 21.733 59.233 0 42.792-.366 77.28-.366 87.804 0 8.516 5.764 18.473 21.992 15.354 127.076-42.354 218.637-162.274 218.637-303.582 0-176.695-143.269-319.988-320-319.988l-.023.107z"></path>
  </symbol>
</svg>

Вторая часть — код использования

<svg>
  <use xlink:href="#twitter"></use>
</svg>
<svg>
  <use xlink:href="#github"></use>
</svg>

Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>SVG</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
    <section>
      <div>
        <div>
          <div>
            <!-- Используем иконку Twitter -->
            <svg>
              <use xlink:href="#twitter"></use>
            </svg>
          </div>
          <div>
            <!-- Используем иконку Github -->
            <svg>
              <use xlink:href="#github"></use>
            </svg>
          </div>
        </div>
      </div>
    </section>
    <!-- Скрытый SVG-спрайт -->
    <svg>
      <!-- Иконка Twitter в SVG-спрайте-->
      <symbol xmlns="http://www.
 
 w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewbox="0 0 640 640">
        <path d="M640.012 121.513c-23.528 10.524-48.875 17.516-75.343 20.634 27.118-16.24 47.858-41.977 57.756-72.615-25.347 14.988-53.516 25.985-83.363 31.866-24-25.5-58.087-41.35-95.848-41.35-72.508 0-131.21 58.736-131.21 131.198 0 10.228 1.134 20.232 3.355 29.882-109.1-5.528-205.821-57.757-270.57-137.222a131.423 131.423 0 00-17.764 66c0 45.497 23.102 85.738 58.347 109.207-21.508-.638-41.74-6.638-59.505-16.359v1.642c0 63.627 45.225 116.718 105.32 128.718-11.008 2.988-22.63 4.642-34.606 4.642-8.48 0-16.654-.874-24.78-2.35 16.783 52.11 65.233 90.095 122.612 91.205-44.989 35.245-101.493 56.233-163.09 56.233-10.63 0-20.988-.65-31.334-1.89 58.229 37.359 127.206 58.997 201.31 58.997 241.42 0 373.552-200.069 373.552-373.54 0-5.764-.13-11.35-.366-16.996 25.642-18.343 47.87-41.493 65.469-67.844l.059-.059z"></path>
      </symbol>
      <!-- Иконка Github в SVG-спрайте-->
      <symbol xmlns="http://www.

  
 
 w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewbox="0 0 640 640">
        <path d="M319.988 7.973C143.293 7.973 0 151.242 0 327.96c0 141.392 91.678 261.298 218.826 303.63 16.004 2.964 21.886-6.957 21.886-15.414 0-7.63-.319-32.835-.449-59.552-89.032 19.359-107.8-37.772-107.8-37.772-14.552-36.993-35.529-46.831-35.529-46.831-29.032-19.879 2.209-19.442 2.209-19.442 32.126 2.245 49.04 32.954 49.04 32.954 28.56 48.922 74.883 34.76 93.131 26.598 2.882-20.681 11.15-34.807 20.315-42.803-71.08-8.067-145.797-35.516-145.797-158.14 0-34.926 12.52-63.485 32.965-85.88-3.33-8.078-14.291-40.606 3.083-84.674 0 0 26.87-8.61 88.029 32.8 25.512-7.075 52.878-10.642 80.056-10.76 27.2.118 54.614 3.673 80.162 10.76 61.076-41.386 87.922-32.8 87.922-32.8 17.398 44.08 6.485 76.631 3.154 84.675 20.516 22.394 32.93 50.953 32.93 85.879 0 122.907-74.883 149.93-146.117 157.856 11.481 9.921 21.733 29.
 
 398 21.733 59.233 0 42.792-.366 77.28-.366 87.804 0 8.516 5.764 18.473 21.992 15.354 127.076-42.354 218.637-162.274 218.637-303.582 0-176.695-143.269-319.988-320-319.988l-.023.107z"></path>
      </symbol>
    </svg>
  </body>
</html>

Добавим стили

Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke. Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться

Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke

fill — заливка иконки

stroke — цвет обводки

Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent, чтобы у иконки не было чёрной заливки по-умолчанию

body {
  background: #121212;
}
. container {
  max-width: 1140px;
  margin: 0 auto;
}
.icons {
  padding: 64px 0;
}
.icons__flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.icons__icon:not(:last-child) {
  margin-right: 24px;
}
.icons__icon svg.icon {
  width: 64px; /* ширина иконки */
  height: 64px; /* высота иконки */
  fill: #3626a7; /* цвет заливки иконки */
  transition: 0.25s; /* плавное изменение цвета при наведении */
}
.icons__icon:hover svg.icon {
  fill: #422ecc; /* цвет заливки иконки при наведении */
}
/* Скрываем блок SVG-спрайта */
.hidden {
  display: none;
}

Получаем следующий результат

Итоги

Использование SVG-иконок имеет несколько преимуществ — возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.

В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки

Буду рад, если статья оказалась полезной

Спасибо за ваше внимание и уделённое время!

SVG-спрайты

В очередной раз, просматривая вакансии на HTML-верстальщика, на предмет поиска темы для новой статьи, в списке требований работодателя, наткнулся на пункт – использовать в верстке SVG-спрайты.

Нам, верстальщикам, не стоит игнорировать требование работодателей, а идти в ногу с современными приёмами в верстке. Что по отдельности обозначают эти модные термины?

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

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

Почему SVG-спрайты – это хорошо?

Почему они так нравятся работодателям и заказчикам? Все дело в скорости загрузки сайта: чем меньше HTTP-запросов к серверу, тем быстрее работает сайт. Чем быстрее работает сайт, тем больше его любят поисковые системы и посетители.

Используя на сайте SVG-спрайты, вы убиваете сразу двух зайцев – получаете меньший вес у графики (SVG формат в разы легче, чем PNG и JPG) и меньше запросов к серверу.

В этом коде целых три HTTP-запроса, на больших экранах появится замыливание и весят иконки в PNG формате больше:

<img src="icons/pinterest.png" alt="">
<img src="icons/twitter.png" alt="">
<img src="icons/facebook.png" alt="">

А здесь один запрос, при масштабирование векторная графика не теряет в качестве и меньше весит.

<svg>
  <use xlink:href="sprite.svg#facebook"></use>
</svg>

Как сделать SVG-спрайт?

  1. Скачиваем на сайте flaticon две иконки pinterest + github, в формате SVG. Теперь нужно два SVG-файла объединить в один.
  2. В редакторе кода создадим sprite.svg и пропишем следующий код.

    3. <svg display="none" xmlns="http://www.w3.org/2000/svg">
      <symbol viewBox="0 0 455.731 455.731">
        <g>
          <path ..здесь код отрисовки pinterest../>
        </g>
      </symbol>
      <symbol viewBox="0 0 512 512">
        <g>
          <path ..здесь код отрисовки github../>
        </g>
      </symbol>
    </svg>
  3. Значения атрибутов viewBox, копируем из pinterest.svg и github.svg.
  4. Открываем содержимое двух скачанных файлов и копируем внушительный код отрисовки иконки, тега path и вставляем между тегами <g></g>. Мы вынесли код иконок в отдельный файл sprite.svg.

    5. Важно: Удаляем из path, инлайн стиль с цветом заливки style=»fill:#FFFFFF;. Иначе, потом мы не сможем поменять дефолтный цвет иконки на свой, в CSS стилях.

  5. Открываем заготовленный HTML файл и вставляем, туда ссылки на id иконок.

    6. <svg>
      <use xlink:href="sprite.svg#pinterest"></use>
    </svg>
    <svg>
      <use xlink:href="sprite.svg#github"></use>
    </svg>

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

SVG-спрайты vs иконочных шрифтов

Чем SVG-спрайты лучше иконочных шрифтов, ведь все иконки можно упаковать в один файл и загружать с одним HTTP-запросом? Перечислим некоторые преимущества:

  • проще управлять позиционированием
  • удобнее делать многоцветные иконки
  • можно делать анимированные иконки

Поддержка браузерами

Формат SVG поддерживается всеми современными браузерами и начиная с
IE 11+.

Пример SVG-спрайта

Код на Github:

ссылка
  • Создано 03.07.2019 10:56:16
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Как подключить svg спрайт

Как подключить svg спрайт в файл в html и css

Есть сгенерированый svg спрайт — sprite. svg c symbol :

Если вставлять прямо в html , то все подключается отлично —

Но если подключать из файла (т.е. когда sprite.svg лежит в images) , то не отображается:

Почему не отображается иконка и как подключить в стили css иконку из спрайта?

Как правило решение проблем с отображением иконок из спрайта можно разделить на три части:

  1. Код иконок и спрайта, — так как вы их не включили в вопрос, трудно сказать что-то определенное. Надеюсь вы добавите коды хотя-бы одной иконки и части спрайта.
  2. Подключение файла спрайта.
  3. Подключение внешней таблицы стилей и стилизация самих иконок.

Подключение файла спрайта

При подключении файла спрайта через тег <img> и background-image внешняя таблица стилей не будет работать, поэтому лучше подключать через тег <object>

Сам файл спрайта необходимо разместить в одной папке с Index file особенно браузер Chrome чувствителен к этому. При вызове отдельной иконки из файла спрайта добавьте еще namespace SVG и внутреннюю таблицу стилей svg

Может это излишне для некоторых браузеров, но вы же наверное хотите кроссбраузерное решение.

Тег <object> добавления файла спрайта в HTML необходимо разместить в листинге выше вызовов иконок, лучше в хедере. Это понятно, иконки должны загрузиться до вызова их в конкретном месте странички.

Svg спрайты

Всем привет! В этой статье мы рассмотрим работу с svg спрайтами, как их создавать и подключать. Для начала разберемся что такое спрайт. Спрайт — это один большой графический файл, в котором объединены несколько небольших изображений. Спрайты были очень популярны, когда в качестве графики использовали растровые изображения. Создавали один большой файл, который содержит иконки, смайлики, логотипы, после чего через фоновое изображение в CSS и позиционирование показывали только ту часть графики, которая необходима. Это делается для уменьшения количества запросов к серверу, тем самым увеличивая скорость загрузки сайта. Svg спрайт аналогичен: в нем все наши svg изображение зашиты в один файл. Но работать с ним нужно немного иначе.

Как сделать svg спрайт

Что бы создать svg спрайт, создаем svg файл, например, sprite.svg. В него поместим корневой элемент svg. Далее вставляем svg код каждого изображения, обрамляя его тегом symbol. Всем элементам symbol назначаем уникальный id:

Как использовать svg спрайты

Что бы вывести любую иконку из svg спрайта, необходимо использовать тег svg, в котором через конструкцию use указываем ссылку на файл и id изображения:

Так же, можно просто скопировать весь svg спрайт в html страницу и использовать элемент use, передавая только id изображения.

CSS стили в svg спрайтах

Основным преимуществом использования svg спрайтов является возможность стилизовать иконки через CSS стили. Мы можем менять размер, цвет, фон иконок, а также — менять стили при наведении. Для этого в спрайте необходимо удалить атрибуты fill, stroke, style, так как они имеют большой приоритет. Далее просто в CSS задавать стили для svg элемента.

Пример использования svg спрайта

Давайте для примера использования svg спрайтов сделаем блок с иконками социальных сетей. Скачаем три svg иконки и сделаем из них спрайт. В итоге получим:

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

Теперь добавим немного стилей:

Здесь мы выравниваем наши иконки по горизонтали, задаем размеры и цвета. Цвет иконки в обычном состоянии и при наведении задаем с помощью свойства fill родительскому элементу, а у самой иконки наследуем это свойство. Таким образом получаем такую верстку:

See the Pen Svg sprite by astupakov (@astupakov) on CodePen.

Использование gulp для автоматической генерации svg спрайтов

Собирать спрайты вручную — очень трудоемкая работа. Поэтому создание svg спрайтов можно автоматизировать. Для этого мы будем использовать gulp и плагин gulp-svg-sprite.

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

Устанавливаем плагин gulp-svg-sprite:

В файле gulpfile.js создаем таск для генерации спрайта:

В начале мы создаем переменную config с настройками для плагина, в которой говорим, что спрайт будет создаваться через элемент symbol и называется spite.svg. Так же, удаляем ненужные атрибуты и оптимизируем графику.

Далее указываем, что файлы лежат в папке src/img/svgIcons/, а создавать спрайт нужно в папку dist/img/. Плагин автоматически генерирует id для каждого изображения из его имени, по этому иконкам нужно давать осмысленные названия. Дале используем этот спрайт так как мы делали это раньше.

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

Каждый раз вставлять спрайт через svg не очень удобно. Если вы используете какой-то html препроцессор, то эту задачу можно упростить, создав некий миксин для вставки спрайта. Рассмотрим такую реализацию на примере шаблонизатора nunjucks.

В nunjucks для подобных задач используются макросы. Для начала создаем отдельный файл для всех макросов _macro.html. В нем создаем макрос svgIcon для вывода изображений из svg спрайта:

Этот макрос принимает 3 параметра:

  • Id изображения;
  • Произвольный класс изображения. По умолчанию значение пустое. Для удобства каждой иконке мы добавляем класс svg-icon;
  • Путь к файлу svg спрайта. По умолчанию принимает значение, которое установили в настройка gulp файла для генерации спрайта.

Далее необходимо импортировать этот файл в основной документ:

Теперь макрос готов к использованию. Ко всем макросам можно обратится через переменную macro. Рассмотрим пару примеров вызова:

В первом примере мы просто выводим иконку, у которой id равно instagram. Во втором варианте добавляется класс social__icon. В третьем примере мы изменяем путь к спрайту.

Заключение

На этом пока все. Мы рассмотрели работу с svg спрайтами. Это очень удобный вариант работы с графикой и обладает рядом преимуществ:

Создаём и используем символьный SVG-спрайт

SVG — масштабируемая векторная графика.

Сама по себе технология SVG — это очень объёмная тема — подробнее с ней можно познакомится на MDN Web Docs

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

Аналогичные иконки при масштабировании в формате SVG и PNG

Способы использования SVG-иконок

SVG-иконки можно использовать несколькими способами

1й способ — сохранить SVG-иконку как файл, и подключать как обычное изображение

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

2й способ — открыть файл SVG-иконки в текстовом редакторе, скопировать код иконки и вставить его в необходимую часть HTML.

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

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

Этот способ и рассмотрим подробнее

Создаём и используем символьный SVG-спрайт

Символьный SVG-спрайт — это просто коллекция символьных SVG-иконок, собранных в одном, обычно скрытом, специальном блоке

Для примера скачаем пару SVG-иконок, например, на сайте https://uxwing.com/ с бесплатными иконками

Чтобы автоматически создать SVG-спрайт, воспользуемся онлайн-сервисом https://svgsprit.es/

Просто перетаскиваем все необходимые файлы SVG-иконок на главную страницу https://svgsprit.es/, и внизу страницы автоматически будет сгенерирован код, состоящий из двух частей

Первая часть — символьный SVG спрайт

Вторая часть — код использования

Создадим HTML разметку, в которую добавим сгенерированный символьный SVG-спрайт и сразу используем иконки в необходимых местах

Добавим стили

Прежде чем задавать цвет иконки в CSS, необходимо убедиться, что у кода иконки в SVG-спрайте отсутствуют свойства fill и stroke . Если эти свойства присутсвуют в коде иконки, то необходимо их удалить, так как приоритет CSS свойств будет ниже, чем у inline-стилей, и значения, указанные в CSS будут игнорироваться

Чтобы через CSS задать цвет для SVG-иконки, используем свойства fill и stroke

fill — заливка иконки

stroke — цвет обводки

Если иконка состоит только из обводки, то чаще всего для свойства fill необходимо указать значение transparent , чтобы у иконки не было чёрной заливки по-умолчанию

Получаем следующий результат

Итоги

Использование SVG-иконок имеет несколько преимуществ — возможность масштабирования без потери качества, плавное изменение цвета, меньший вес, нет необходимости дублировать иконки, если они отличаются по цвету, размеру.

В статье рассмотрели как быстро и просто создать символьный SVG-спрайт и оптимально использовать SVG-иконки

Быстрое создание и использование спрайтов SVG

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

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

См. демонстрацию в реальном времени

Перейти к руководству

Зачем использовать SVG?

Расширен как Масштабируемая векторная графика , SVG — это формат векторного изображения на основе XML с расширенной поддержкой анимации и раскрашивания.

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

  1. Они легкие — на самом деле очень легкие по сравнению с иконочными шрифтами и графикой PNG
  2. Они имеют неограниченные возможности с цветом, размером и анимацией — намного больше, чем иконочные шрифты.
  3. Современные веб-браузеры полностью поддерживают SVG
    4. .

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

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

Если вы помните спрайты в формате PNG 2005–2015 годов, вы уже знаете, о чем я говорю.

Я отказался от PNG, когда услышал об иконочных шрифтах, которые были популярны в 2012-2013 годах. Позже я обнаружил, что загружать множество иконок, которые я никогда не буду использовать на веб-сайте, с помощью иконочного шрифта было довольно глупо.

Только тогда SVG оказались в центре внимания — в 2015–2016 годах о них говорили все. Далее в этой статье приведены шаги по созданию быстрых и легких систем значков с использованием спрайт-листов SVG.

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

На мой взгляд, Adobe Illustrator — лучшая альтернатива для создания SVG-графики для вашего использования, позже мы можем слепить их в один спрайт, а затем обсудить его использование.

Идите вперед и создайте его так же, как я создал рисунок ниже, и экспортируйте его в формате SVG.

Я создал несколько образцов графики в Illustrator, чтобы продемонстрировать их вам в виде спрайта SVG.

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

Star.svg 
  viewBox="0 0 95 95"  >
  <определения>
    
  
  Звезда
Цветок.svg 
  viewBox="0 0 95 95"  >
  <определения>
    
  
  Цветок
     48,35а14.29,14.29,0,0,0,3.3,14.62А14. 3,14.3,0,0,0,3.19,64.15а14.89,14.89,0,0,0,11.48,10А14.41,14.41,0,0,0,20.52,88а15.42,15.42,0,0 ,0,15,34,1,59,15,28,15,28,0,0,0,26,49,51,15,42,15,42,0,0,0,15,38-1,14,43,14,43,0,0,0,6,41-13,61А15, 15,0,0,0,96,65.92a14.31,14.31,0,0,0-3-14.69A14.31,14.31,0,0,0,96.9,36.75" transform="translate(-2.5 - 2.5)"/>
8-конечная звезда.svg 
  viewBox="0 0 95 95"  >
  <определения>
    
  
  8-конечная звезда

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

Окончательный шаблон спрайта SVG

Взгляните на код SVG ниже. Мы объединили все три изображения в один файл с помощью тега SVG .

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

 

  
  <символ  viewBox="0 0 95 95 ">
       9005
  

  
  <символ  viewBox="0 0 95 95 ">
       29,14.29,0,0,0,3.3,14.62А14.3,14.3,0,0,0,3.19,64.15а14.89,14.89,0, 0,0,11,48,10А14,41,14,41,0,0,0,20,52,88а15,42,15,42,0,0,0,15,34,1,59,15,28,15,28,0,0,0,26,49,51, 15,42,15,42,0,0,0,15,38-1,14,43,14,43,0,0,0,6,41-13,61А15,15,0,0,0,96,65,92a14.31,14.31,0,0,0-3-14.69A14.31,14.31,0,0,0,96.9,36.75" transform="translate(-2.5 -2.5)"/> 
  

  
  <символ  viewBox="0 0 95 95 ">

Пара вещей, на которые следует обратить внимание:

  • viewBox закодирован в файлах, экспортируемых Illustrator, и в основном определяет положение и размер нашей графики.
  • Идентификаторы фрагментов ( icon-star , icon-flower и т. д.), указанные в теге , помогают нам в дальнейшем найти конкретный значок/графику.

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

 
<символ viewBox="0 0 95 95">
  ...

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

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

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

 
  <использовать xlink:href="/path/to/sprite.svg#icon-star">

И вот как ты это делаешь.

Быстрая демонстрация того, что мы создали

Создание спрайта SVG из шрифтов Icon

Как насчет создания спрайта из ваших любимых иконочных шрифтов, таких как FontAwesome, LineIcons, Entypo и других?

Загрузка, затем установка значков шрифтов по одному на ваш компьютер, а затем использование Illustrator для создания SVG-графики для каждого значка по отдельности было бы утомительной задачей. И вот приходит IcoMoon как наш спаситель, который легко конвертирует SVG из шрифтов Icon для вас.

  1. Чтобы начать работу с IcoMoon, зайдите в приложение IcoMoon и начните добавлять пакеты значков, из которых вы хотите получить значки SVG. Когда у вас есть несколько пакетов значков в вашей библиотеке, начните выбирать значки из сетки, как показано ниже:
  2. Сделав выбор, убедитесь, что вы установили флажок « Плитки (CSS Sprite) » в настройках приложения.
  3. Наконец, нажмите кнопку загрузки, чтобы экспортировать необходимые файлы и получить их в заархивированном архиве.
  4. Извлеките загруженный заархивированный архив и найдите сгенерированный файл SVG в папке «sprite» внутри.

Этот созданный спрайт SVG нуждается в некоторой доработке. Просто замените вложенные теги на теги , удалите ненужную информацию, такую ​​как атрибуты высоты, ширины, x и y, и все готово.

Живая демонстрация IcoMoon SVG Sprite

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

Как заставить спрайт двигаться в Scratch (для начинающих 8+)

С чего начать

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

Чтобы продолжить, сначала выполните следующие действия:

  1. Создайте учетную запись на веб-сайте Scratch.
  2. Прочитайте нашу статью Что такое кодирование Scratch, чтобы узнать больше о том, как использовать блоки Scratch.
  3. Создайте новый проект и начните читать!

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

Что такое движение?

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

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

Заставляя персонажей ходить или перемещаться в играх, они могут больше взаимодействовать с вашим миром.

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

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

Движение спрайта

Шаг 1. Выберите спрайт.

Чтобы начать программировать в Scratch, нам нужно создать нечто, называемое спрайтом . Каждый объект в проекте Scratch является спрайтом. Эти спрайты — персонажи в вашей игре, которые могут перемещаться и выполнять код. Создавая сценарии для выполнения спрайтов, мы можем давать им команды и говорить им делать все, что захотим!

На данный момент единственным спрайтом в нашем проекте является Scratch Cat , который присутствует в каждом проекте по умолчанию. Если вы хотите создать новый спрайт, вы можете нажать кнопку Choose a Sprite , расположенную в правом нижнем углу экрана. Если вы просто хотите заставить кошку двигаться, вы можете перейти ко второму шагу.

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

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

Scratch предлагает широкий выбор спрайтов, с помощью которых вы можете настроить свой проект.

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

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

Шаг 2. Запрограммируйте спрайт.

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

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

Код с прослушивателем событий для простого перемещения вправо.

Вот что этот код говорит простым языком:

«Когда вы нажимаете клавишу со стрелкой вправо, укажите вправо, затем продвиньтесь на 10 шагов вперед».

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

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

▶ Совет: Чтобы ускорить этот процесс, щелкните правой кнопкой мыши существующий код и выберите Дублировать . Это создаст копию этих блоков, что означает, что вам не нужно много перетаскивать.

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

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

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

Обратите внимание, что для каждого направления различаются две вещи:

  1. Блоки запускаются при нажатии разных клавиш. Например, наш персонаж перемещается вверх при нажатии клавиши со стрелкой вверх и вниз при нажатии клавиши со стрелкой вниз.
  2. Точка в блоках направления задает разные направления. Числа в этих блоках — это градусы, каждое из которых представляет одно из основных направлений (вправо/влево/вверх/вниз). Когда эти блоки работают, они говорят нашему спрайту указывать определенное направление.

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

▶ Эксперимент:

  • Попробуйте изменить число внутри блока шагов перемещения. Как это влияет на движения вашего персонажа?
  • Вместо блоков «перемещение» вы можете использовать блоки change x и change y . Попробуйте заменить все ваши ходовые блоки на изменений x / изменений y блоков!

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

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

Исправление ошибок

Что-то тут не так. Несмотря на то, что наш спрайт движется правильно, с его внешним видом происходит что-то странное.

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

Когда мы нажимаем клавишу со стрелкой влево, наш спрайт ежа переворачивается вверх ногами! Вы можете обнаружить, что то же самое происходит с вами, когда вы пытаетесь двигаться влево. Не бойтесь, это то, что случается со всеми в Scratch. И есть простой способ это исправить.

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

Из-за этого мы должны изменить стиль вращения нашего спрайта . Во-первых, просто нажмите на настройку «Направление» в меню спрайтов.

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

Затем убедитесь, что выбрана средняя опция, как на скриншоте ниже. Это изменит стиль вращения спрайта с «все вокруг» на «влево/вправо».

Нажмите на настройку в середине, «Влево/вправо», чтобы убедиться, что спрайт переворачивается обратно.

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

Что дальше: более продвинутое движение

Движение — основа почти каждой игры в Scratch. Теперь, когда у вас есть управляемый персонаж, вы можете создавать все, что захотите!

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

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

Если вас устраивает этот простой стиль передвижения, вы также можете:

  • Ознакомьтесь с нашим учебным пособием «Как создать скретч-игру», чтобы создать собственную игру на основе проекта, который вы начали здесь.
  • Изучите другие типы движений с помощью нашего руководства «Как сделать прыжок с помощью Царапины».
  • Найдите больше пошаговых руководств по проектам Scratch в нашем блоге.

Продолжайте учиться: уроки кодирования на языке Scratch для детей

Преподаватель Juni обучает ученика языку Scratch.

Для структурированного обучения Scratch Juni Learning предлагает основанные на проектах курсы Scratch Coding для детей 8-11 лет, чтобы они могли начать программировать. Наша учебная программа Scratch готовит учащихся к полному освоению среды Scratch и готовит их к программированию на более продвинутых текстовых языках, таких как Python.

  • Game Superstar (Курс Scratch Level 1: знакомит с основами информатики, такими как создание и проектирование собственных игр Scratch.
  • Game Master (Курс Scratch Level 2: охватывает более сложные концепции, такие как вложенные циклы, сложные условные операторы, клонирование и многое другое в рамках подготовки к изучению более продвинутых языков программирования.

Ознакомьтесь с нашими онлайн-курсами по программированию для детей или поговорите с консультантом Juni, позвонив по телефону (650) 263-4306 или отправив электронное письмо по адресу [email protected] .

Джордж Оуэн учится в Калифорнийском университете в Лос-Анджелесе по специальности лингвистика и компьютерные науки. В настоящее время он работает инструктором по информатике в Juni Learning, преподает Scratch, Python и Java. Он надеется объединить свою страсть к лингвистике с алгоритмами анализа данных, чтобы создавать полезные и удобные приложения. В свободное от программирования время Джордж любит изучать теорию игр, рисовать и ходить в походы.

Sprites — Thunkable Docs

Sprites

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

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

Спрайт Тип — это категория спрайтов, которую вы можете добавить в свое приложение. Например, в видеоигре у вас может быть тип спрайта главного героя и типы спрайтов препятствий.

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

Пример: разные типы спрайтов

Группы спрайтов с одинаковым поведением должны принадлежать к одному типу спрайтов. В приведенном ниже примере WallType является типом спрайта, и в приложении есть несколько спрайтов этого типа (например, стены).

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

Добавление типов спрайтов в приложение

Чтобы добавить тип спрайтов в приложение, щелкните рабочую область холста.

Вы автоматически перейдете на вкладку Canvas.

Под деревом компонентов, где вы видите меню компонентов на вкладке «Дизайн», вы увидите меню «Тип спрайта».

Вы можете нажать «Добавить тип спрайта», чтобы добавить новый тип спрайта в свое приложение.

Свойства типа спрайта

Описание

Тип данных

Список изображений

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

Файлы изображений

Высота изображения

3 90 sp.

Число

Ширина картинки спрайта.

Число

Изменение угла спрайта. Угол измеряется в направлении по часовой стрелке и измеряется в градусах, например. установка угла на 30 повернет ваш спрайт на 30 градусов по часовой стрелке

Число

Управление глубиной спрайтов на экране и перекрытием спрайтов. Спрайты с более высоким значением Z будут перекрывать спрайты с более низким значением Z.

Число

Непрозрачность

Изменение непрозрачности спрайта, где 100% — максимальная непрозрачность, а 0 — максимальная прозрачность

Число

Отскок

скорость этого спрайта с оправиться с. Отскок, равный 100, означает, что спрайт отскочит назад с той же скоростью, что и при столкновении. Отскок 200 заставит спрайт отскакивать с удвоенной скоростью.

Номер

— это перетаскиваемое

Toggle, может ли игрок перетаскивать The Sprite Type

True/False

проходит через

Toggle, проходит ли тип Sprite через другие Sprites

True/False

IS Static

Toggle. Местоположение типа спрайта фиксировано

True/False

Игнорировать гравитацию

Переключить, влияет ли на спрайт гравитация сцены

True/False

Фиксированное вращение

Включение или выключение возможности изменения угла типа спрайта

Истина/ложь

Рисование

Включение или отрисовка линии спрайта при его перемещении Drawing is true

Drawing Width

Ширина линии, рисуемой при Drawing true

См. также

Подробнее о свойствах гравитации рабочей области можно прочитать здесь.

Добавление спрайтов в ваше приложение

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

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

Выберите тип спрайта и перетащите его на холст, чтобы создать экземпляр типа спрайта. Это одиночный Sprite .

В приведенном ниже GIF-файле есть холст со спрайтом, который называется Sprite1. В меню «Тип спрайта» также есть тип спрайта, который называется Sprite_Type1. Когда Sprite перетаскивается из Sprite_Type1 и помещается на Canvas, мы видим новый Sprite, названный Sprite_2.

Свойства спрайта

Описание

Тип данных

Выбор изображения

Выберите изображение из списка изображений, определенного в типе спрайта, для отображения в файлах SpriteImage

Выберите из меню

пиксель спрайта по оси X сцены, где левая сторона равна 0

число

Расположение верхнего левого пикселя спрайта по оси Y сцены, где вершина равна 0

Номер

Где Спрайт находится в глубине Холста. Спрайт с более высоким значением Z появится перед спрайтом с более низким значением Z.

Номер

Высота

Высота картинки спрайта.

Число

Ширина картинки спрайта.

Число

Изменение угла спрайта. Угол измеряется в направлении по часовой стрелке и измеряется в градусах, например. установка угла на 30 повернет ваш спрайт на 30 градусов по часовой стрелке

Число

Непрозрачность

Изменение непрозрачности спрайта, где 100% — максимальная непрозрачность, а 0 — максимальная прозрачность

Число

Отскок

скорость этого спрайта с оправиться с. Отскок, равный 100, означает, что спрайт отскочит назад с той же скоростью, что и при столкновении. Отскок 200 заставит спрайт отскакивать с удвоенной скоростью.

Номер

Выбор сцены

Сцена, частью которой является спрайт.

Выберите из списка

. Получите перетаскивание

Toggle, может ли игрок перетаскивать The Sprite Type

True/False

проходит через

Toggle, проходит ли Sprite Type через другие Sprites

True/False

IS STATIC

Включение или выключение фиксации положения типа спрайта

True/False

Игнорирование гравитации

Включение или отключение влияния гравитации сцены на спрайт

True/False

Фиксированное вращение

Переключатель, можно ли изменить угол типа Sprite

True/False

Рисунок

Toggle, как тип Sprite рисует линию, так как он перемещает

True/False

Рисунок

Переключение цвета линии, нарисованной при истинном рисовании

Ширина рисования

Ширина линии, нарисованной при истинном рисовании

Число

ствол дерева), внешний вид Древесного спрайта меняется.

No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *