Геймдев за 7 дней. 6 День

05.05.2020
Posted in blog-article
05.05.2020 admin

Геймдев за 7 дней. 6 День

Сегодня немного о графике! День 6

Игровая графика

Привет еще раз. Сегодня мы создадим искусство! А точнее – графику.

Какие виды изображений нам нужны? Давайте посмотрим.

1.Объекты

2.Пользовательский интерфейс

3.Фон

Теория игровой графики

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

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

1) Если персонаж умирает, потому что игрок не знал, что нельзя трогать то, что изображено на рисунке.

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

3)Если игрок впадает в недоумение, потому что не может понять, что элемент на стене — это телепорт, который должен перенести его на следующий уровень.

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

С другой стороны, когда всё понятно, игроку остаётся чистая механика без разгадывания внутриигровых тайн. А вы бы предпочли, чтобы ваши игроки интуитивно догадывались, что они могут и не могут делать? Или находились «в материале» с первого запуска?

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

Итак, давайте начнем этот урок с просмотра картинки, которую я привожу в качестве примера отличной прорисовки. Её стиль похож на то, что я хочу получить с помощью своего Beaver Mark I. (Это из AngryBirds 2, © Rovio Entertainment Corporation.)

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

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

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

Давайте попробуем отыскать эти приёмы на изображении Angry Birds.

1. Фон почти белый, что выделяет более тёмный передний план.

2. Взаимодействующие объекты (свиньи, ящики, лес) выделены. Это создает контраст между объектами и фоном.

3. Взаимодействующие объекты окрашены более насыщенными цветами, чем лишенные очертаний травяной и каменный пол.

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

5. Персонаж игрока — это темная капля в мире ярких объектов.

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

7. Символы выполнены очень просто и являются одноцветными, в то время как окружающие объекты обладают текстурой.

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

Объект — это свет и тень. В реальном мире все стороны объекта имеют различное световое значение. С какой бы стороны ни был направлен источник света, точка его преломления имеет самое яркое значение.

Чем дальше от источника света находится сторона объекта, тем менее яркой она будет. Посмотрим на три объекта на картинке выше.

Первый — это куб, который я сделал из трех фигур.

Второй — фотография подарка.

Третий — платформа из Angry Birds 2.

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

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

Кроме того, в реальном мире свет и тень будут перемещаться тогда, когда персонаж вращается. Но поскольку на рисунке изображена теневая часть символа, а поворот на 180 градусов обращает его лицо к солнцу, это нормально.

Дополнительное программное обеспечение

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

Как только вы установили программу, откройте ее и создайте новый образ, нажав на пустую область в середине. Выберите Custom Document и установите Width на 1920 и Height на 1080.

Я предпочитаю создавать весь игровой экран в одном документе. Это помогает мне оценить, подходят ли друг к другу созданные элементы.

Фон

Создание фонового изображения начинается с базы. Выберите инструмент «Заливка» и ярко-синий цвет.

Затем щелкните на изображение инструментом заливки. Блок заполнится синим цветом. Затем нам понадобится инструмент «Кисть». Перейдите к настройкам кисти и выберите Airbrush_Soft.

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

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

Сохраните созданную картинку, выбрав «Сохранить как» в меню «Файл». Установите тип файла PNG. Когда Krita спросит вас о «Сжатии», можете установить его на 1. Это немного увеличит вес файла, но в дальнейшем не повлияет на скорость загрузки игры.

Персонаж

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

Очень важно также следить за сохранением читабельности изображения. Игрок всегда должен знать, где именно на экране находится персонаж, и, желательно, полностью видеть детали его внешности. Чтобы это предусмотреть, я собираюсь полностью снизить масштаб до минимума, чтобы весь холст стал крошечным прямоугольником (шириной от 13 до 16 см, если приложить к экрану линейку).

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

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

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

Вернёмся к работе. Прежде всего, я нашел в интернете несколько подходящих картинок-референсов.

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

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

В настройках кисти, рядом с аэрографом, есть Basicpreset. Выберите его.

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

Увеличьте изображение и начните аккуратно закрывать промежутки между кругами. Если вам нужно что-то стереть, вы можете перейти в режим «Ластик», нажав кнопку в верхней части экрана. Затем нажмите на неё повторно, чтобы вернуться в режим рисования.

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

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

Добавим немного света. Создайте поверх слоя бобра новый слой. Затем выберите оба слоя. Для этого щелкните один из них правой кнопкой мыши, выберите «Группировать» и «Быстрая группа». Нажмите на верхнем слое на маленький символ альфа. Теперь вы можете быть уверены, что ваш рисунок не выйдет за пределы содержимого нижнего слоя.

Выберите предустановку «Аэрограф» еще раз и установите размер около 30 пикселей. Возьмите белый цвет и нарисуйте несколько бликов по верхней границе бобра. Затем возьмите черный цвет и добавьте несколько теней.

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

Теперь уменьшите непрозрачность слоя примерно до 30%. Это смягчит тень на изображении.

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

Теперь отключите фоновый слой, нажав рядом с ним на значок глаза. Выберите группу слоев бобра, перейдите в меню «Изображение» и выберите «Обрезать до текущего слоя». Сохраните персонажа как новое изображение PNG. После сохранения вернуться к размеру нормального холста вам поможет команда «Отмена».

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

Когда вы все закончите, вернитесь в Unity и импортируйте в проект новые изображения. Для этого перейдите в меню «Активы» и нажмите «Импорт новых активов». Найдите файлы на вашем диске, выберите их все и нажмите Import.

Теперь откройте PlayerCircle и на вкладке Inspector найдите компонент Sprite Renderer. Под ним вы обнаружите поле спрайтов. Нажмите на маленький кружок рядом с полем и измените изображение игрока.

Сделайте то же самое с прямоугольниками, которые у нас символизировали препятствия, внутри HoopObstacle. Возможно, вам придется подстроить размер коллайдеров. Мои спрайты оказались слишком большими для крошечных коллайдеров, которые у меня уже были в игре. Я решил эту задачу с помощью изменения размеров X и Y Box Collider 2D, а затем масштабирования объектов.

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

Вот и все. В нашей игре появилась графика!

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

Просто для работы вам потребуется немного больше усилий. Впереди всего один день обучения!

 

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

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

Contact

Давайте работать вместе!

Пишите нам и найдем точки соприкосновения, может станем партнерами, а может поможем вам зайти в нашу чудесную нишу

Вы разработчик?

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

Новичок?

Поможем быстро войти в нишу, не тратя годы на понимание

Давно в нише?

Рады будем пообщаться как на темы whitehat, так и blackhat тематики ^_^ + всегда есть что обсудить по поводу рекламных сетей

ПИШИ В TELEGRAM!

Contact