<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

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

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

10 полезных SASS миксинов.

10 полезных SASS миксинов.

Всем привет! Сегодня мы рассмотрим 10 SASS миксинов, которые вам следует использовать в своих проектах.

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

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

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

Чтобы быстро отцентрировать блочный элемент, не беспокоясь о верхних и нижних отступах, которые уже были применены.

@mixin push--auto {
  margin: {
   left: auto;
   right: auto;
  }
}

Псевдо

Когда вы используете ::before и ::after, вы всегда нуждаетесь в этих трех строчках кода. Используя этот миксин, вы сохраните свое время на их написание.

@mixin pseudo($display: block, $pos: absolute, $content: ''){
  content: $content;
  display: $display;
  position: $pos;
}

Смотрите ниже пример использованя миксина без каких-либо аргументов.

div::after {
  @include pseudo;
  top: -1rem; left: -1rem;
  width: 1rem; height: 1rem;
}

Отзывчивое соотношение

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

@mixin responsive-ratio($x,$y, $pseudo: false) {
  $padding: unquote( ( $y / $x ) * 100 + '%' );
  @if $pseudo {
   &:before {
    @include pseudo($pos: relative);
    width: 100%;
    padding-top: $padding;
   }
  } @else {
   padding-top: $padding;
  }
}

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

div {
  @include responsive-ratio(16,9);
}

CSS треугольники

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

@mixin css-triangle($color, $direction, $size: 6px, $position: absolute, $round: false){
  @include pseudo($pos: $position);
  width: 0;
  height: 0;
  @if $round {
    border-radius: 3px;
  }
  @if $direction == down {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $color;
    margin-top: 0 - round( $size / 2.5 );
  } @else if $direction == up {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
    margin-bottom: 0 - round( $size / 2.5 );
  } @else if $direction == right {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $color;
    margin-right: -$size;
  } @else if $direction == left {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $color;
    margin-left: -$size;
  }
}

Стили шрифта

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

@mixin font-source-sans($size: false, $colour: false, $weight: false, $lh: false) {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  @if $size { font-size: $size; }
  @if $colour { color: $colour; }
  @if $weight { font-weight: $weight; }
  @if $lh { line-height: $lh; }
}

Плейсхолдеры

Утомляет устанавливать стили в определенных форматах. Этот миксин сделает это для вас сам.

@mixin input-placeholder {
  &.placeholder { @content; }
  &:-moz-placeholder { @content; }
  &::-moz-placeholder { @content; }
  &:-ms-input-placeholder { @content; }
  &::-webkit-input-placeholder { @content; }
}

Если вы не знаете, как использовать @content, вот пример:

input,
textarea {
  @include input-placeholder {
   color: $grey;
  }
}

Медиа-запросы

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

$breakpoints: (
  "phone": 400px,
  "phone-wide": 480px,
  "phablet": 560px,
  "tablet-small": 640px,
  "tablet": 768px,
  "tablet-wide": 1024px,
  "desktop": 1248px,
  "desktop-wide": 1440px
);
@mixin mq($width, $type: min) {
  @if map_has_key($breakpoints, $width) {
   $width: map_get($breakpoints, $width);
   @if $type == max {
    $width: $width - 1px;
   }
   @media only screen and (#{$type}-width: $width) {
    @content;
   }
  }
}

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

.site-header {
  padding: 2rem;
  font-size: 1.8rem;
  @include mq('tablet-wide') {
   padding-top: 4rem;
   font-size: 2.4rem;
  }
}

Z-index

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

@function z($name) {
  @if index($z-indexes, $name) {
   @return (length($z-indexes) - index($z-indexes, $name)) + 1;
  } @else {
   @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
   @return null;
  }
}
$z-indexes: (
  "outdated-browser",
  "modal",
  "site-header",
  "page-wrapper",
  "site-footer"
);

Когда вы захотите использовать z-index, назовите его так же, как ваш класс, и добавьте в ваш файл переменных/настроек, как ниже. Вы никогда больше не будете иметь проблем с z-index: 9999999;.

.site-header {
  z-index: z('site-header');
}

Аппаратные средства

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

@mixin hardware($backface: true, $perspective: 1000) {
  @if $backface {
   backface-visibility: hidden;
  }
  perspective: $perspective;
}

Truncate

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

@mixin truncate($truncation-boundary) {
  max-width: $truncation-boundary;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Это не все

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

Источник

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

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

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

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

Порекомендуйте эту статью друзьям:

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

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.