Как сделать фон для игры
Перейти к содержимому

Как сделать фон для игры

  • автор:

Задний фон для игры с помощью шейдера на Defold

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

Для демонстрации создадим новый проект и выполним следующие шаги:

  • Скопировать текстуры в папку images.
  • Скопировать встроенные файлы sprite.material, sprite.fp (fragment program), sprite.vp (vertex program) в папку materials из buildins/materials
  • Добавить game object и model в главную коллекцию
  • Выбрать текстуры для модели.

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

Поставим для go размеры экрана и разместим по середине

Откроем sprite.fp
Шейдер рисует пиксели выбирая их из текстуры texture_sampler по координатам var_texcoord0.xy, каждый пиксель будет умножен на tint для получения цвета и уровня прозрачности.

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

vec2 uv = var_texcoord0.xy * 3.0;
gl_FragColor = texture2D(texture_sampler, uv) * tint_pm;

Это не тот результат, которого мы хотим добиться, потому что мы проходим по координатам uv за пределы текстуры. Для того, чтобы возвращаться в начало, нужно брать значение по модулю. Для этого подходит функция fract(), которая отсекает целую часть.

gl_FragColor = texture2D(texture_sampler, fract(uv)) * tint_pm;

Эти мордашки довольно растянутые, потому что размеры экрана 960х640, разделены на 3 части с сохранением пропорций экрана, но без учета размера текстуры. Зная размеры экрана и желаемый размер текстуры, можно получить количество секций, на которое следует делить поверхность.

lowp float pixels_per_unit = 300;
lowp vec2 resolution = vec2(960,640);
vec2 uv = vec2(
var_texcoord0.x * resolution.x / pixels_per_unit,
var_texcoord0.y * resolution.y / pixels_per_unit );

Теперь выберем текстуры в зависимости от позиции в колонке и ряду

vec4 random_texture(in vec2 uv, in vec3 resolution)
<
vec2
int index = int(id.x + id.y * resolution.x / resolution.z) % 5;

vec4 col = vec4(0);

if (index == 0)
col = texture2D(tex1,uv);
else if (index == 1)
col = texture2D(tex2,uv);
else if (index == 2)
col = texture2D(tex3,uv);
else if (index == 3)
col = texture2D(tex4,uv);
else
col = texture2D(tex5,uv); return col;
>

gl_FragColor = random_texture(uv, vec3(resolution, pixels_per_unit)) * tint_pm;

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

Матрица трансформации масштаба:

mat2 scale(vec2 _scale)

Масштаб применяется следующим образом:
uv = fract(uv) — vec2(0.5);
uv = scale( vec2(_scale) ) * uv;
uv = fract(uv) + vec2(0.5);

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

Подойдет обычный квадрат, который должен быть также масштабирован

float box(vec2 _st, vec2 _size)
<

_size = vec2(0.5)-_size*0.5;
vec2 uv = step(_size,_st);
uv *= step(_size,vec2(1.0)-_st);
return uv.x*uv.y;
>

Там, где квадратная область возвращает цвет, альфа будет 1

vec2 box_uv = fract(uv) — vec2(0.5);
box_uv = scale( vec2(_scale) ) * box_uv;
box_uv = box_uv + vec2(0.5);
float alpha = box(box_uv,vec2(1));

Unity 2D: Как нарисовать фон для игры?

      1. У вас должны быть рисунки (я использую в формате png с прозрачным фоном), из которых будете делать палитру (Tile Pallete), а из палитры фон.
      2. В окне Project создаем папку для рисунков (Sprites), кликаем на правую кнопку — Import New Asset. Рисунке в проекте, с ними дальше можно работать.
      3. Нужно создать сетку для нанесения фона (Tilemap). Переходим в меню GameObject — 2D — Tilemap. В Hierarchy появляется Grid-Tilemap.
      4. Добавляйте сколько хотите слоев, в Inspector — Tilemap Renderer установите порядок слоев:
      1. Открывайте в меню Window — 2D — Tile Pallete (если нет такого пункта, читаем здесь как добавить). Нажимаем Create New Palette. Их можно создавать сколько угодно.
      2. Далее Tile Palette остается открытым, в Project открываем папку с рисунками, которые импортировали в п. 2 и перетаскиваем в Tile Pallete самый мелкий рисунок. Этот рисунок определит масштаб для более крупных рисунков. Далее перетаскиваем остальные рисунки. Например, это может выглядеть так:Зеленая точка слева определяет масштаб. Если бы перенес в палитру сначала футбольное поле, то оно бы уместилось в одну ячейку.
      3. Далее выбираем на каком слое будем рисовать (на рисунке выше Active Tilemap).
      4. Выбираем кисточку, выделяем на Tile Pallete тот кусок, который хотим перенести на слой, и собственно рисуем.
      5. Если, например, нужно раскрасить вокруг футбольного поля все зеленым, то выбираем зеленый пиксель, выбираем прямоугольник (рядом с кисточкой) и выделяем на сцене тот участок, который должен стать зеленым. Это ускоряет раскраску. Нам достаточно выделить область вместо того, чтобы кликать на каждую ячейку.

      Как сделать фон для игры

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

      Фоновый актор определяется с помощью имени, внешности, видимости и трансформации (такой как положение, поворот, масштаб). Он может изменять внешность, видимость и трансформироваться с течением времени.

      Поведение фонов можно настроить с помощью контекстного меню Naninovel -> Configuration -> Backgrounds ; доступные параметры см. в разделе Руководство по конфигурации. Доступ к менеджеру ресурсов фонов можно получить с помощью контекстного меню Naninovel -> Resources -> Backgrounds .

      Если у вас много фонов, и их неудобно назначать через меню редактора, можно просто поместить их в папку Resources/Naninovel/Backgrounds , рассортировав их по папкам, соответствующим идентификаторам акторов. Например, чтобы добавить внешность для фонового актора с ID "MainBackground", сохраните текстуры (спрайты) в папке Resources/Naninovel/Backgrounds/MainBackground , и они автоматически будут доступны в сценариях.

      Вы можете дополнительно организовать ресурсы внешностей с помощью подпапок, если хотите; в этом случае используйте прямой слеш ( / ) при ссылке на них в сценариях Naninovel. Например, текстура внешности по адресу Resources/Naninovel/Backgrounds/MainBackground/Events/CG251 может быть объявлена как Events/CG251 .

      Также можно использовать систему адресируемых ассетов, чтобы вручную распределить ресурсы. Чтобы предоставить доступ к ассету, назначьте адрес, равный пути, который вы использовали бы для его объявления с помощью метода, описанного выше, за исключением опущенной части "Resources/". Например, для объявления внешности "Beach" для фона "MainBackground" назначьте ассету следующий адрес: Naninovel/Backgrounds/MainBackground/Beach . Имейте в виду, что адресируемый провайдер по умолчанию не используется в редакторе; вы можете разрешить его, включив свойство Enable Addressable In Editor в меню конфигурации провайдера ресурсов.

      В сценариях Naninovel фоны в основном контролируются с помощью команды @back :

      Фоны обрабатываются немного иначе, нежели персонажи, чтобы лучше приспособиться к традиционному течению сценария визуальных новелл. Большую часть времени вы, вероятно, будете иметь одного фонового актора в сцене, который будет постоянно менять внешности. Чтобы избавиться от лишнего повторения одного и того же ID актора в сценариях, можно предоставить только внешность фона и тип перехода (необязательно) в качестве безымянного параметра, что автоматически преобразует актора "MainBackground". Если это не так, ID фонового актора может быть конкретно указан с помощью параметра id :

      Запись актора "MainBackground" создается по умолчанию в диспетчере фоновых ресурсов и не может быть переименована или удалена; однако параметры основных фонов (реализация, pivot, PPU и т. д.) могут быть свободно изменены.

      Каждый фон имеет свойство Poses , позволяющее задавать различные именованные состояния ("позы").

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

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

      Спрайтовые фоны ​

      Спрайтовая реализация акторов фона является наиболее распространенной и простой; она использует один спрайтовый

      ассет для представления внешности фона. Источником спрайта может быть изображение в формате .jpg или .png .

      Видео-фоны ​

      Видео-фоны используют ассеты видеоклипов

      ассет для представления внешности фона.

      Видео-фоны могут управляться только графическим интерфейсом редактора.

      Поддерживаемые видеоформаты для каждой платформы см. в разделе документации Unity для видеоресурсов

      Для справки, вот подробные параметры видео фонового видеоклипа, который используется в нашей демо-версии WebGL:

      А вот настройки импорта Unity для этого видеоклипа:

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

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

      Имейте в виду, что на WebGL видеоплеер может работать только в потоковом режиме, поэтому все видеоресурсы будут скопированы в папку Assets/StreamingAssets/Backgrounds при создании проигрывателя WebGL. Папка StreamingAssets также появится в выходном каталоге сборки; убедитесь, что вы сохранили ее при публикации сборки, и убедитесь, что ваш веб-сервер позволяет считывать данные из этой папки.

      Послойные фоны ​

      Послойная реализация позволяет создавать фоны из нескольких спрайтов (слоев), а затем переключать их по отдельности с помощью сценариев Naninovel во время выполнения.

      Чтобы создать префаб послойного фона, используйте контекстное меню ассетов Create -> Naninovel -> Background -> Layered . Войдите в режим редактирования префаба

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

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

      Не забывайте, что безымянный параметр в команде @back ожидает внешность и тип перехода (а не ID и внешность, как в команде @char ), поэтому указывайте выражения в композиции слоёв следующим образом:

      Универсальные фоны ​

      Универсальный фон – это наиболее гибкая реализация фонового актора. Он основан на префабе с компонентом BackgroundActorBehaviour , прикрепленным к корневому объекту. Изменения внешности и все остальные фоновые параметры маршрутизируются как события Unity

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

      Чтобы создать префаб универсального фона по шаблону, используйте контекстное меню ассета Create -> Naninovel -> Background -> Generic .

      Универсальные фоны очень похожи на универсальных персонажей; ознакомьтесь с учебным видео по настройке анимированной 3D-модели в качестве универсального персонажа для одного из возможных примеров использования.

      Фоны сцен ​

      Вы можете использовать сцену Unity

      в качестве заднего плана с реализацией фона сцены.

      Фоны сцен могут управляться только графическим интерфейсом редактора; ресурсы сцен должны храниться в папке проекта Assets/Scenes .

      Первым делом создайте новую (или переместите существующую) сцену в папку Assets/Scenes и убедитесь, что в ней есть хотя бы одна камера

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

      Убедитесь, что объекты сцены расположены в пространстве так, чтобы они не перекрывались объектами из других сцен, которые потенциально могут быть загружены одновременно (например, будучи объявлены в одном сценарии Naninovel). Кроме того, имейте в виду, что в случае, если фоновый объект сцены расположен вблизи начала координат глобального пространства ( x0 y0 z0 ), он может быть визуализирован основной камерой Naninovel; чтобы предотвратить это, сместите все объекты сцены относительно глобального источника, либо используйте Configuration -> Engine -> Override Objects Layer для изоляции связанных с Naninovel объектов с помощью слоёв

      После завершения настройки сцены создайте новый фоновый актор через меню Naninovel -> Configuration -> Backgrounds , выберите реализацию SceneBackground и добавьте ассет сцены к ресурсам актора.

      При назначении ресурсов для актора фона сцены соответствующие ассеты должны автоматически добавляться в настройки сборки

      ; если вы получаете сообщение об ошибке, что ресурс сцены не был добавлен в сборку, попробуйте добавить его вручную.

      Теперь вы можете использовать команду @back для управления созданным фоновым актором сцены, например:

      Как рисовать фоны для игр и мультиков

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

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

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

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

      Продолжение. В принципе, то же самое, что и на первом рисунке: избегайте рисовать в одной плоскости, используйте ассиметрию. Также следите за четким силуетом, чтобы по форме можно было легко опознать объект (4) .

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

      По закону перспективы, параллельные линии сходятся в одной точке на линии горизонта. Существует три вида перспективы:

      1-но точечная (One Point Perspective)

      2-х точечная (Two Point Perspective)

      3-х точечная (Tree Point Perspective)

      Как научится работать с перспективой?

      В этом помогут книги и уроки, которых в интернете очень много. Например,

      При желании все эти материалы можно найти на русском языке.

      Примеры использования перспективы в рисовании фонов я взяла из книжки про Симпсонов — «The-Simpsons-Handbook».

      Этот мультик был сделан не во флеше, а в программе Toon Boom. Но это не столь важно, рисунки фонов отлично иллюстрируют все выше сказанное. И да, перевод мой, поэтому не идеален:)

      1. Кухня Симпсонов

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

      2. Кухня(2)

      Обратите внимание, как детали фона рассказывают нам о персонажах. Блокнотик с отрывными листиками на холодильнике указывает, что Мардж и Гомер – великолепные родители, а стульчик в углу напоминает о том, что там случай от случая отдыхает Барт (видимо, он там в наказание сидит:) Трещина на стенке подтверждает, что Гомер тратит куда больше времени на телевизор, чем на ремонт дома.

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

      3. Гостиная

      Обратите внимание, что линии перспективы на этом фоне сходятся в одной точке под картиной. Это пример 1-но точечной перспективы (one-point perspective). Как зрителя, эта перспектива концентрирует наш взгляд в центре комнаты. Все объекты в этой комнате построены на основе 1-но точечной перспективы.

      4.Таверна Мо

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

      5. Магазинчик комиксов

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

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

      6. Супермаркет

      Фон супермаркета нарисован с использованием 2-х точечной перспективы. Когда мы смотрим на этот рисунок, то наш взгляд опускается на пол. Линия горизонта находится на уровне машины для шейков. Обратите внимание, как линии пола, ящиков с журналами, кассы и пр. сходяться на линии горизонта.

      7. Супермаркет (2)

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

      8. Класс Барта

      Редкий пример 3-х точечной перспективы. Мы смотрим на помещение с высоты сверху вниз, так как линия горизонта находится за пределами рисунка. Использование 3-х точечной перспективы позволяет создать вид с высоты птичего полета. Можно проследить по горизонтальным линиям от двери класса, книжних полок, окон до вершини рисунка. Там находится первая точка, где сходяться линии перспективы. 2-я точка – от обратной стороны доски справа. 3-я точка находится за пределами нижней линии рисунка.

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

      9. Рабочее место Гомера.

      Сложность и детальность изображения прибора только усиливает комичность идеи, что здесь действительно работает Гомер:)

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

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