<MyRusakov.ru />

Программирование на C++ в Unreal Engine 5

Программирование на C++ в Unreal Engine 5

Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.

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

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

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

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

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

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

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

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

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

Какая тема Вас интересует больше?

Веб-дизайн за пять минут

Веб-дизайн за пять минут

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

Что необходимо для этого сделать?

Содержание

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

Написанный контент, как и пункт, который вы сейчас читаете, составляет более 90% веб-страницы. Стилизация этого текстового контента будет иметь большое значение.

Предположим, вы уже доработали контент, который хотите опубликовать, и просто создали пустой файл style.css, каково первое CSS-правило, которое вы можете написать?

Центрирование

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

После стилизации текстовых блоков, как насчет стилизации самого текста?

body
 {
   margin: 0 auto;
   max-width: 50em;
 }

Семейство шрифтов

По умолчанию шрифт браузера имеет значение «Times», которое может выглядеть некрасивым. Переход на шрифт без засечек, таких как «Helvetica» или «Arial», может значительно улучшить внешний вид вашей страницы.

body
 {
   font-family: "Helvetica", "Arial", sans-serif;
 }

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

Хотя текст становится более привлекательным, давайте сделаем его более читаемым.

Межстрочный интервал

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

body
 {
   line-height: 1.5;
   padding: 4em 1em;
 }

 h2
 {
   margin-top: 1em;
   padding-top: 1em;
 }

Давайте применим более тонкие изменения.

Цвет и контраст

Черный текст на белом фоне может быть излишне строгими. Выбор более мягкого оттенка черного для основного текста делает страницу более удобной для чтения.

 body
 {
  color: #555;
 }

И чтобы сохранить нужный уровень контрастности, давайте выберем более темный оттенок для важных слов

 h1,
  h2,
  b {
   color: #333;
  }

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

Баланс

Для исправления баланса страницы требуется несколько дополнительных касаний:

 code,
  pre
{
   background: #eee;
  }

 code
{
   padding: 2px 4px;
   vertical-align: text-bottom;
 }

 pre
{
   padding: 1em;
 }

На этом этапе вам может потребоваться выделить вашу страницу – сделать ее уникальной.

Основной цвет

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

a
{
   color: #e81c4f;
}

Но чтобы сохранить баланс, нам понадобятся дополнительные цвета.

Дополнительные цвета

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

  body
{
   color: #566b78;
  }

 code,
 pre
{
   background: #f5f7f9;
   border-bottom: 1px solid #d8dee9;
   color: #a7adba;
 }

  pre {
   border-left: 2px solid #69c;
  }

Изменив оттенки, почему бы не изменить шрифт ...

Пользовательский шрифт

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

Например, можно использовать «Roboto» из бесплатной службы Google Fonts:

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body
{
   font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 }

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

Улучшим наш заголовок хорошим фоновым изображением.

header
{
   background-color: #263d36;
   background-image: url("header.jpg");
   background-position: center top;
   background-repeat: no-repeat;
   background-size: cover;
   line-height: 1.2;
   padding: 10vw 2em;
   text-align: center;
 }

Добавим логотип

header img
{
   display: inline-block;
   height: 120px;
   vertical-align: top;
   width: 120px;
 
}

Поиграемся со стилями текста.

  header h1  
{
   color: white;
   font-size: 2.5em;
   font-weight: 300;
 }

  header a  
{
   border: 1px solid #e81c4f;
   border-radius: 290486px;
   color: white;
   font-size: 0.6em;
   letter-spacing: 0.2em;
   padding: 1em 2em;
   text-transform: uppercase;
   text-decoration: none;
   transition: none 200ms ease-out;
   transition-property: color, background;
  }

  header a:hover  
{
   background: #e81c4f;
   color: white;
  }

И вуаля!

Мы разработали достойную страницу всего за несколько минут, следуя основным принципам веб-дизайна. Осталось только одно последнее:

Изучить CSS с помощью моего курса Вёрстка сайта с нуля 2.0

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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