Tutorials

Создание простой игры - Часть 2

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

Настройка материалов

Мы сделали графику очень простой для этой игры, поэтому нам не нужно слишком много настроек, но нам придется настроить некоторые Material Asset для мяча, фона и наложения.

Что такое материал?

Material - это тип ассета в PlayCanvas, который описывает, как поверхность 3D-модели выглядит при отображении на экране. Материал определяет цвет поверхности, а также способ взаимодействия поверхности со светом. Например, вы можете настроить материал на гладкий металл или шероховатую резину. В PlayCanvas есть встроенный материал под названием Physical Material, который должен покрыть 90% ваших случаев использования материала. Когда вы станете более продвинутым, можно создать свои собственные материалы, используя код GLSL shader для написания своего собственного.

Cubemap

Прежде чем перейти к материалам, мы настроим наш Cubemap Asset. Cubemap - это ассет, состоящий из 6 текстур на гранях куба. Можно считать это средой вдалеке от вашей сцены. Физические материалы PlayCanvas могут использовать Cubemap для освещения на основе изображений. Это использует цвета в Cubemap для освещения материалов на сцене. Например, в нашей сцене Cubemap имеет синее небо и зеленую травянистую поверхность. Таким образом, наш мяч будет освещен синим светом сверху и зеленым снизу. Подробнее в нашей документации.

Cubemap

Чтобы настроить Cubemap, сначала создайте Cubemap Asset из меню New Asset, назначьте 6 текстур, по одной на каждую грань Cubemap. Когда у вашего Cubemap будут назначены все 6 граней, нажмите кнопку "Prefilter". Предварительная фильтрация необходима для правильной работы Cubemap!

Материал футбольного мяча

Football

Футбольный мяч - это 3D-модель, которую мы импортировали из библиотеки Asset PlayCanvas. Материалы футбольного мяча в основном будут настроены для вас, но вам, возможно, придется внести некоторые простые изменения. Давайте посмотрим на каждую карту, используемую футбольным мячом.

Diffuse

Diffuse

Карта Diffuse определяет цвет поверхности. В данном случае это черно-белый узор футбольного мяча.

Environment

Environment

Мы быстро перейдем к разделу Environment, так как для этого нужно увидеть эффекты изменений Specular. Чтобы настроить Environment, перетащите Cubemap Asset на слот Cubemap в материале.

Specular

Specular

Раздел Specular определяет, как материал взаимодействует со светом. Существует два "рабочих процесса" для Specular: "Metalness workflow" и "Specular workflow", вы можете найти больше информации в нашей документации. Для футбольного мяча мы используем Metalness, поэтому обязательно установите флажок "Use Metalness". Наш футбольный мяч не сделан из металла, поэтому мы двигаем ползунок Metalness вниз до 0. Затем мы используем ползунок Glossiness, чтобы установить, насколько грубым/гладким должен быть материал. Мы установили это примерно на полпути, что придает мячу приятный блеск, но не совсем гладкий.

Normal

Normal

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

Материал фона

Backdrop

Материал фона намного проще, у нас есть только одна текстурная карта.

Emissive

Emissive

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

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

Материал наложения

Overlay

Материал наложения еще проще, чем фон. В этом случае все, что мы делаем, - это устанавливаем цвет от свойства излучения

Emissive

Продолжайте к Части 3.

This site is translated by the community. If you want to get involved visit this page