Как сделать фон в unity

Какие есть способы добавить фоновую картинку в 2Д игре в юнити

Так как я новичок, мне дали тестовое задание, есть игра в которой некоторые обьекты генерируются вне canvas — a, но отображаются в игре и при этом они находятся выше камеры по иерархий, ниже картинка. Но добавленный мной бэкграунд не отображается. Подскажите возможности добавить бэкграун.

Отслеживать
задан 5 сен 2017 в 8:49
845 8 8 серебряных знаков 24 24 бронзовых знака

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Добавьте отдельную камеру на сцену, которая будет рисовать только бэкграунд. Но при этом, если у вас есть еще камеры на сцене, настройте их так, чтобы они перерисовывали ваш бэкграунд, а именно посмотрите в сторону настроек Culling Mask и Background

А также настройте ваш Canvas , чтобы он рисовался в режиме либо Screen Space — Camera либо World Space

Отслеживать
ответ дан 5 сен 2017 в 9:02
4,442 18 18 серебряных знаков 25 25 бронзовых знаков

Не знаю на сколько корректно, но я использовал 2 canvas — a, что на это можете прокоментировать, стойт ли ? и правильно ли это ?

5 сен 2017 в 10:44

@IDontLikeBugs по идее, что 2 нанваса, что 2 камеры — примерно одно и тоже по производительности. Решение с 2 камерами — довольно стандартное для такой ситуации, потому что не требует никаких манипуляций (порядок отрисовки других элементов и их количество не будет влиять на отрисовку бэка). 2 канваса имхо тоже нормально, это легче и удобней, чем делать все в одном, а потом писать скрипты, чтобы все вставало на место после добавления новых элементов. Использование нескольких канвасов — нормальная практика, например, когда UI «встраивается» в окружение мира

5 сен 2017 в 11:07

• c#
• unity3d

Как сделать фон в unity

В этом посте мы рассмотрим как можно применить подход Двигателя на Тёмной Материи для создания бесконечного 2D фона.

Если вы сталкивались с мобильными играми в общественном транспорте, то наверняка могли заметить, что одними из самых популярных в поездке являются игры жанра Endless runner, например, Subway Surfers, а для любителей археологии примером может послужить Электроника ИМ23 “Автослалом”. Основным признаком данного жанра является бесконечно перемещающийся элемента(персонаж или другой объект), который обычно самостоятельно движется вперёд навстречу препятствиям, а управление даётся только для возможности эти препятствия избегать. Бесконечное перемещение подразумевает бесконечное пространство доступное для движения игрока, создание которых является не самой простой задачей, как могло бы показаться на первый взгляд. Этим постом мы открываем цикл, в котором рассмотрим элементы, которые помогут создать такие бесконечные, в каком-то смысле, миры.

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

Проблематика

Первым что приходит в голову, когда вас просят сделать корабль, который перемещается в пространстве, это добавить модель корабля, задать ему вектор скорости, привязать к нему камеру, подложить фон и начать сдвигать корабль вдоль вектора, помноженного на Time.deltaTime . Если откинуть очевидные вещи с ограниченными размерами фона, которые в любом случае придётся решать, главной проблемой бесконечного перемещения окажется координатное пространство Unity, которое привязано к переменным типа float и с увеличением координат точность будет падать. Для более точного описания проблемы вы можете посмотреть вот это видео «64 Bit In Kerbal Space Program».

Dark Matter Engine

Для решения данного вопроса можно использовать подход, с помощью которого работает Двигатель на Тёмной Материи из “Футурамы”. Если коротко описать принцип его действия, то двигатель двигает не корабль, а пространство вокруг корабля. То есть, в нашем случае вместо того чтобы двигать вдоль вектора скорости наш корабль мы будем двигать все объекты вокруг него в противоположном направлении. Таким образом, если наша камера привязана к кораблю, то мы всегда будем оставаться в точке начала координат и наша точность не будет падать из-за увеличения расстояния. Да и в целом для решения вопроса с бесконечным перемещением, выбрать началом координат наше положение выглядит более красивым решением, нежели привязываться к какой-либо другой точке в пространстве.

Задача

Сделать перемещение космического корабля вдоль бесконечного 2D фона. Корабль можно поворачивать вокруг оси Z при помощи клика по правой/левой стороне экрана. Камера всегда будет сонаправлена с вектором движения корабля.

Решение

Я не буду распространять ассеты, которые используются для примера. Найти подходящие вам ресурсы это тоже большая работа и я предлагаю вам в этом потренироваться, если не знаете с чего начать, то можно посетить бесплатный itch.io или поискать в интернете «Free game assets» .

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

1. Добавьте в проект текстуры корабля и фона, для фона необходимо выставить Mesh type — Full rect и Wrap mode — Repeat
   
2. Создайте структуру объектов такого содержания
   
3. Добавьте текстуру для корабля
   
4. Добавьте текстуру для фона, выставите Draw mode — Tiled и Order in Layer = -1
   
5. Создайте скрипт UniverseHandler, добавьте его к объекту Universe

UnevirseHandler.cs

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 

using System; using UnityEngine; public class UnevirseHandler : MonoBehaviour  // Ссылки на объекты сцены [SerializeField] private Camera mainCamera = null; [SerializeField] private GameObject ship = null; [SerializeField] private GameObject space = null; // Радиус возможного обзора камеры private float _spaceCircleRadius = 0; // Исходные размеры объекта фона private float _backgroundOriginalSizeX = 0; private float _backgroundOriginalSizeY = 0; // Направление движения private Vector3 _moveVector; // Скорость поворота в радианах private float _rotationSpeed = 1f; // Вспомогательные переменные private bool _mousePressed = false; private float _halfScreenWidth = 0; void Start()  // Стартовое направление движения _moveVector = new Vector3(0, 1.5f, 0); // Используется для определения направления поворота _halfScreenWidth = Screen.width / 2f; // Исходные размеры фона SpriteRenderer sr = space.GetComponentSpriteRenderer>(); var originalSize = sr.size; _backgroundOriginalSizeX = originalSize.x; _backgroundOriginalSizeY = originalSize.y; // Высота камеры равна ортографическому размеру float orthographicSize = mainCamera.orthographicSize; // Ширина камеры равна ортографическому размеру, помноженному на соотношение сторон float screenAspect = (float)Screen.width / (float)Screen.height; // Радиус окружности, описывающей камеру _spaceCircleRadius = Mathf.Sqrt(orthographicSize * screenAspect * orthographicSize * screenAspect + orthographicSize * orthographicSize); // Конечный размер фона должен позволять сдвинуться на один базовый размер фона в любом направлении + перекрыть радиус камеры также во всех направлениях sr.size = new Vector2(_spaceCircleRadius * 2 + _backgroundOriginalSizeX * 2, _spaceCircleRadius * 2 + _backgroundOriginalSizeY * 2); > void Update()  // Изменение направления движения по клику кнопки мыши if (Input.GetMouseButtonDown (0))  _mousePressed = true; > if (Input.GetMouseButtonUp(0))  _mousePressed = false; > if (_mousePressed)  // Направление поворота определяется в зависимости от стороны экрана, по которой произошёл клик int rotation = Input.mousePosition.x >= _halfScreenWidth ? -1 : 1; // Расчёт поворота вектора направления float xComp = (float)(_moveVector.x * Math.Cos(_rotationSpeed * rotation * Time.deltaTime) - _moveVector.y * Math.Sin(_rotationSpeed * rotation * Time.deltaTime)); float yComp = (float) (_moveVector.x * Math.Sin(_rotationSpeed * rotation * Time.deltaTime) + _moveVector.y * Math.Cos(_rotationSpeed * rotation * Time.deltaTime)); _moveVector = new Vector3(xComp, yComp,0); // Поворот спрайта корабля и камеры вдоль вектора направления float rotZ = Mathf.Atan2(_moveVector.y, _moveVector.x) * Mathf.Rad2Deg; ship.transform.rotation = Quaternion.Euler(0f, 0f, rotZ - 90); mainCamera.transform.rotation = Quaternion.Euler(0f, 0f, rotZ - 90); > // Сдвигаем фон в противоположном движению направлении space.transform.Translate(-_moveVector.x * Time.deltaTime, -_moveVector.y * Time.deltaTime, 0); // При достижении фоном сдвига равного исходному размеру фона в каком-либо направлении, возвращаем его в исходную точно по этому направлению if (space.transform.position.x >= _backgroundOriginalSizeX)  space.transform.Translate(-_backgroundOriginalSizeX, 0, 0); > if (space.transform.position.x  -_backgroundOriginalSizeX)  space.transform.Translate(_backgroundOriginalSizeX, 0, 0); > if (space.transform.position.y >= _backgroundOriginalSizeY)  space.transform.Translate(0, -_backgroundOriginalSizeY, 0); > if (space.transform.position.y  -_backgroundOriginalSizeY)  space.transform.Translate(0, _backgroundOriginalSizeY, 0); > > private void OnDrawGizmos()  // Окружность, описывающая камеру UnityEditor.Handles.color = Color.yellow; UnityEditor.Handles.DrawWireDisc(Vector3.zero , Vector3.back, _spaceCircleRadius); // Направление движения UnityEditor.Handles.color = Color.green; UnityEditor.Handles.DrawLine(Vector3.zero, _moveVector); > > 

1. Выставите в редакторе ссылки на Main camera, Ship и Space
2. Насладитесь результатом

Результат

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

Альтернативные решения

Программирование — это такая область, в которой в целом нет абсолютно правильных решений, перед программистом при решении практически любой задачи открывается довольно большой выбор методов, при помощи которых будут выполняться поставленные условия. В данном случае также можно поступить несколькими способами. Например, можно вместо спрайта сделать объект типа quad и настроив материал, который также использует тайловую структуру управлять её смещением, что избавит нас от перемещения объекта совсем. Если же вернуться к более классическому варианту, то можно скомбинировать обычное перемещение объекта и сдвиг центра координат для всей сцены сразу, по достижению каких-либо пределов.

Заключение

Когда мы задумываемся о создании бесконечных пространств подход Двигателя на Тёмной Материи является основным средством обхода ограничений точности для Unity. Совмещённый с обычными передвижениями сдвиг центра координат тоже можно отнести в эту же группу. Приведённый же пример прекрасно подходит для создания фонов и эффекта параллакса. Однако, работа с более сложными объектами требует иных подходов и для создания реальных неограниченных пространств необходимо ввести множество других механик. Эти вопросы мы рассмотрим в следующих статьях цикла про бесконечные миры. Пока! =)

Спрайты

Спрайты — это двухмерные графические объекты. Если вы привыкли работать в 3D, Спрайты — это, по сути, стандартные текстуры, но существуют специальные приемы комбинирования текстур спрайтов и управления ими для повышения эффективности и удобства во время разработки.

Unity предоставляет заполнитель Создание спрайтов, встроенный редактор спрайтов, класс Визуализатор спрайтов Компонент, позволяющий отображать изображения в виде спрайтов для использования как в 2D-, так и в 3D-сценах. Подробнее
См. в Словарь и Упаковщик спрайтов Средство, которое плотно упаковывает графику из нескольких текстур спрайтов в одну текстуру, известную как атлас. Unity предоставляет утилиту Sprite Packer для автоматизации процесса создания атласов из отдельных текстур спрайтов. Подробнее
См. в Словарь

См. раздел Импорт и настройка спрайтов ниже для получения информации о настройке ресурсов как спрайтов в вашем проекте Unity.

Инструменты для спрайтов

Создание спрайтов

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

Редактор спрайтов

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

Визуализатор спрайтов

Спрайты визуализируются с помощью компонента Sprite Renderer, а не Mesh Renderer Компонент сетки, который берет геометрию из Mesh Filter и визуализирует ее в позиции, заданной компонентом Transform объекта. Подробнее
См. в Словарь , используемый с 3D-объекты 3D-игровые объекты, такие как куб, ландшафт или тряпичная кукла. Подробнее
См. в Словарь . Используйте его для отображения изображений в виде спрайтов для использования как в 2D, так и в 3D сценах Сцена содержит среду. и меню вашей игры. Думайте о каждом уникальном файле сцены как об уникальном уровне. В каждой сцене вы размещаете свое окружение, препятствия и декорации, по сути проектируя и создавая свою игру по частям. Подробнее
См. в Словарь .

Упаковщик спрайтов

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

Импорт и настройка спрайтов

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

Есть два способа добавить спрайты в свой проект:

1. В Finder (Mac OS X) или Проводнике (Windows) на своем компьютере поместите изображение непосредственно в папку Assets вашего проекта Unity. Unity обнаруживает это и отображает в представлении Project вашего проекта.
2. В Unity перейдите в раздел Ресурсы >Импортировать новый ресурс, чтобы открыть Finder (Mac OS X) или Проводник (Windows) на вашем компьютере. Отсюда выберите нужное изображение, и Unity поместит его в представление Project.

Подробнее об этом и важной информации об организации папки Активы см. в разделе Импорт.

Настройка изображения в качестве спрайта

Если режим вашего проекта установлен на 2D, импортируемое изображение автоматически устанавливается как спрайт. Подробнее о настройке режима проекта на 2D см. в разделе Проекты 2D или 3D.

Однако, если режим вашего проекта установлен на 3D, ваше изображение устанавливается как текстура изображение, используемое при рендеринге GameObject, Sprite или элемент пользовательского интерфейса. Текстуры часто применяются к поверхности сетки, чтобы придать ей визуальную детализацию. Подробнее
См. в Словарь , поэтому вам нужно изменить Тип текстуры актива :

1. Нажмите на объект, чтобы открыть его инспектор импорта.
2. Установите для параметра Тип текстуры значение Спрайт (2D и пользовательский интерфейс):

Подробнее о настройках Sprite Тип текстуры см. в разделе Тип текстуры: Sprite (2D и пользовательский интерфейс).

Сортировка спрайтов

Визуализаторы в Unity сортируются по нескольким критериям, таким как порядок слоев или расстояние от камеры. Настройки графики Unity (меню: Правка > Настройки проекта Обширный набор настроек, позволяющих настроить способ Физика, звук, сеть, графика, ввод и многие другие области вашего проекта ведут себя правильно. Подробнее
См. Словарь , затем выберите категорию Графика ) предоставляют параметр под названием Режим сортировки с прозрачностью, который позволяет управлять сортировкой спрайтов в зависимости от того, где они находятся по отношению к камере. В частности, он использует положение спрайта на оси, чтобы определить, какие из них прозрачны по отношению к другим, а какие нет.

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

Доступны четыре параметра Режим прозрачной сортировки:

• По умолчанию — сортировка на основе того, является ли компонент Камера компонентом, который создает изображение с определенной точки обзора в вашем место действия. Вывод либо рисуется на экране, либо фиксируется в виде текстуры. Подробнее
  See in Словарь установлен режим Projection в Перспектива или Орфографика
• Перспектива – сортировка по перспективе. Перспектива сортирует спрайты по расстоянию от положения камеры до центра спрайта.
• Орфографический — сортировка по орфографическому виду. В ортогональном представлении спрайты сортируются по расстоянию вдоль направления взгляда.
• Пользовательская ось — сортировка на основе заданной оси, установленной на оси сортировки с прозрачностью

Если для параметра Режим сортировки с прозрачностью установлено значение Пользовательский, необходимо установить Ось сортировки с прозрачностью:

Если для параметра Режим сортировки с прозрачностью задано значение Пользовательская ось, визуализаторы в виде сцены Интерактивный взгляд на мир, который вы создаете. Вы используете Scene View для выбора и размещения пейзажей, персонажей, камер, источников света и всех других типов игровых объектов. Дополнительная информация
См. в Словарь отсортированы по расстоянию этой оси от камеры. Используйте значение от –1 до 1 для определения оси. Например: X=0, Y=1, Z=0 устанавливает направление оси вверх. X=1, Y=1, Z=0 задает направление оси по диагонали между X и Y.

Например, если вы хотите, чтобы спрайты вели себя так, как показано на изображении выше (те, что выше по оси Y, стоят за спрайтами, которые ниже по оси), установите Режим сортировки с прозрачностью на Пользовательская ось и установите значение Y для Оси сортировки по прозрачности на значение выше 0.

Сортировка спрайтов с помощью скрипта

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

• TransparencySortMode (соответствует Режиму сортировки с прозрачностью)
• TransparencySortAxis (соответствует Оси сортировки прозрачности)

• Режим сортировки прозрачности добавлен в 5.6

Как сделать фоновую музыку в Unity

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

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

Далее нам нужно определиться, какой объект будет воспроизводить музыку. Это может быть абсолютно любой объект. Но лично я буду воспроизводить музыку с помощью моей стандартной камеры, Main Camera. Поэтому, для этого я для своей камеры в окне Inspector создаю новый компонент Audio Source — который отвечает за хранение и воспроизведение аудиофайла.

После добавления компонента Audio Source, нас интересуют три поля:

• В поле AudioClip, необходимо из окна Project, перетащить Ваш аудиофайл.
• В поле Play On Awake поставить галочку, чтобы музыка воспроизводилась сразу после того, как загрузится на сцене игровой объект, к которому прикреплён данный аудиофайл.
• В поле Loop так же поставьте галочку, чтобы после окончания вашего аудиофала, он воспроизводился снова.

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

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

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