Создание и сохранение меню настроек (опций) в Unity

Музыка Музыка

Привет всем!

В этом видео мы научимся создавать меню настроек и сохранять их.

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

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

Для начала нам нужно будет создать в сцене новый UI элемент Canvas.

У меня уже он есть.

Добавлю лишь только то, что нужно будет поменять в инспекторе, в компоненте Canvas Scaler, в UI Scale Mode выставить Scale with Screen Size и поставить свое разрешение экрана.

У меня это 1920 на 1080.

Далее в Canvas создаем новый UI элемент Panel, в котором будут находиться все наши настройки.

Сразу же переименуем его например на Settings, выставим на центр элемента Canvas и придадим нужный размер.

У меня это будет 1400 на 800.

И сделаем цвет фона немного темнее.

Теперь в Settings добавляем новый UI элемент Text.

Придадим ему нужный размер.

Поменяем шрифт, размер шрифта, выставим по центру.

Изменим цвет текста и добавим обводку и тень.

В поле текст напишем, что это у нас будет разрешение экрана.

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

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

Далее все так же в Settings создаем новый элемент Dropdown.

Назовем его например Resolution Dropdown.

Это будет наше выпадающее меню с разрешением экрана.

Меняем размер и цвет.

Обратите внимание, что здесь в инспекторе в компоненте Dropdown Options мы можем ничего не менять, так как все разрешения экрана нам будут показаны автоматически.

Теперь выставим нужные параметры дочерним элементам этого дропдаун меню.

Разместим в нужное место.

Возвращаемся в окно иерархии и создаем в Settings новый UIElement Toggle.

Переименуем его на FullScreenToggle.

Меняем размер его и дочерних элементов.

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

Для этого поменяю ему тип текстуры с Default на Sprite2D and UI.

И соответственно добавлю его в элемент Checkmark в компонент Image в поле Source Image.

Выставим нужный размер, переходим к компоненту Label, придаем нужные параметры.

И в поле Text пишем, что это у нас будет полноэкранный режим.

Перемещаем элемент Fullscreen Toggle в нужное место.

Теперь необходимо создать в Settings пустой объект.

Выбираем Create Empty.

Переименуем его на Resolution Set.

Переместим его, например, вот сюда.

И вставляем в него наш элемент Text.

Элемент Resolution Dropdown.

Таким образом мы сгруппировали в нем все эти три элемента.

Теперь делаем дубликат Resolution Set и назовем его Quality Set.

Переместим его в нужное место.

Находим в нем элемент Fullscreen Toggle и удалим его.

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

Далее выбираем элемент «Resolution Dropdown» и переименуем его на «Quality Dropdown».

Теперь здесь в инспекторе в компоненте «Dropdown Options» записываем параметры настроек, у меня их будет три – низкие, средние и высокие.

Теперь для того, чтобы настроить вот эти вот параметры графики, нужно открыть вкладку Edit, найти там Project Settings и в левой части выбрать пункт Quality.

И здесь будут настройки качества графики.

У меня это Low, Medium и High.

Здесь можно настроить каждый параметр на свое усмотрение.

А также, если вам нужно, можно добавить еще несколько пунктов качества графики, нажав на Add Quality Level.

Итак, закрываем это окно и возвращаемся в окно иерархии.

Выбираем Settings и создаем в нем новый UI элемент Bottom.

Также меняем здесь размер, шрифт, цвет и все, что нам необходимо.

Переименуем его на SaveButton.

В дочернем элементе текст также выставляем нужные параметры.

А в поле текст записываем, что это у нас будет кнопка Сохранить и выставляем ее в нужное место.

Далее делаем дубликат этой кнопки и меняем название на ExitButton.

Выставляем ее в нужное место.

И в дочернем элементе текст, поле текст, записываем, что это кнопка выход.

Итак, с визуальной частью мы закончили.

Теперь переходим к самому главному, к созданию программного кода.

Для этого создаем в нашем проекте новый C-Sharp скрипт, я назову его Settings.

Открываем его.

Вначале запишем, что мы будем использовать пространство имен UnityEngine.ui и UnityEngine.SceneManagement.

Далее удалим ненужный пустой метод Update.

И создадим несколько полей.

Итак, первое поле у нас будет Public.DropDown.ResolutionDropDown.

Следующее поле public-dropdown-quality-dropdown.

И массив resolution-resolutions.

Теперь переходим в тело метода start и сразу же очистим список опций, пишем resolution-dropdown.clearOptions с пустыми скобками.

Далее создаем список опций.

Пишем лист.

В угловых скобках string options равно new list.

В угловых скобках string пустые скобки.

На следующей строке resolutions равно screen.resolutions.

Далее пишем int currentResolutionIndex равно 0.

Это будет число текущего разрешения экрана.

Теперь создаем цикл for, в условии записываем int i равно ноль точка запятой, i меньше resolutions точка land точка запятой, i плюс плюс, в тело цикла записываем string option

равно resolutions в квадратных скобках i точка with здесь применяем конкатенацию строк пишем плюс в кавычках x плюс resolutions в квадратных скобках i

На следующей строке пишем Options.Add в скобках Option.

Далее пишем if в скобках в условии resolutions, в квадратных скобках i, точка width, двойное равно screen, точка current resolution, точка width, два знака end, resolutions, в квадратных скобках i, точка height, двойное равно screen, точка current resolution, точка height.

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

Далее в этом же методе Start записываем ResolutionDropDown.AddOptions в скобках Options.

На следующей строке ResolutionDropDown.RefreshShownValue в пустые скобки.

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

Итак, с методом Start мы закончили, и нам нужно создать еще несколько новых методов.

Первый метод будет для перехода в полноэкранный режим.

Пишем public void, назовем его SetFullScreen, в скобках BullIsFullScreen.

В тело метода записываем screen.fullscreen равно isFullScreen.

Следующий метод будет для переключения разрешения экрана.

Пишем public void, назовем его setResolution, в скобках int, resolutionIndex.

В тело этого метода записываем resolution, resolution, равно resolutions, в квадратных скобках resolution index.

На следующей строке пишем screen.setResolution, в скобках resolution.width, resolution.height,

запятая screen.fullscreen.

Далее создадим метод для переключения качества графики.

Пишем public void, назовем его setQuality в скобках int qualityIndex.

В тело метода пишем qualitySettings.setQualityLevel в скобках qualityIndex.

Теперь создадим метод для кнопки выход.

Пишем public void.

Я назову этот метод exitSettings.

Ставим пустые скобки.

В тело метода записываем sceneManager точка loadScene в скобках в кавычках level.

То есть при нажатии на кнопку выход я буду переходить в уровень который у меня называется level.

У вас соответственно может быть совсем другой функционал этой кнопки.

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

Пишем public void.

Метод назовем saveSettings.

Ставим пустые скобки.

В тело метода записываю playerPrefs.setInt в скобках в кавычках QualitySettingPreference.

запятая QualityDropDown.Value, скобка закрывается, точка с запятой.

На следующей строке PlayerPrefs.SetInt, в скобках в кавычках ResolutionPreference, запятая ResolutionDropDown.Value, скобка закрывается, точка с запятой.

И еще одна строчка здесь, пишем PlayerPrefs.SetInt, в скобках в кавычках FullScreenPreference,

Запятая System точка Convert точка Twint32 в скобках Screen точка Fullscreen скобки закрываются точкой запятой.

И последний метод, который мы должны здесь описать, это метод loadSettings, который мы вызываем в методе start.

Он будет загружать параметры настроек, которые мы сохранили.

Пишем public void loadSettings int currentResolutionIndex.

Тело метода записываем IF в скобках playerPrefs.hasKey в скобках в кавычках QualitySettingPreference скобки закрываются на следующей строке QualityDropDown.value равно playerPrefs.getInt в скобках в кавычках QualitySettingPreference точка запятой.

Далее пишем else .

Здесь тройка обозначает сколько пунктов у нас в меню качества графики.

Пишем следующее условие if в скобках playerPrefs в точках hasKey в скобках в кавычках resolutionPreference скобки закрываются

На следующей строке resolutionDropDown.value равно layerPrefs.setInt .

Далее else resolutionDropDown.value равно currentResolutionIndex.

И последнее условие пишем if в скобках playerPrefs.hasKey в скобках в кавычках fullScreenPreference скобки закрываются.

На следующей строке screen.fullScreen равно

System.Convert.ToBullion.PlayerPrefs.GetInt.FullScreenPreference.

Else.Screen.FullScreen="true".

Итак наш скрипт готов, сохраняем его и возвращаемся обратно в сцену.

Здесь в иерархии выбираем Settings и вставляем в него наш скрипт Settings.

Как мы видим, здесь есть два пустых поля Resolution Dropdown и Quality Dropdown.

Теперь идем в окно иерархии и находим элемент с названием Resolution Dropdown.

Берем и вставляем его в поле с таким же названием Resolution Dropdown.

Также в иерархии находим Quality Dropdown и вставляем его в поле Quality Dropdown.

Теперь в иерархии выбираем элемент Resolution Dropdown и в инспекторе находим OnValueChangedInt32.

Нажимаем на плюс и сюда в пустое поле NonObject вставляем элемент Settings, на котором висит скрипт Settings.

Далее нажимаем No Function Settings и выбираем сверху Set Resolution.

Теперь выбираем элемент FullScreenToggle.

В инспекторе находим OnValueChangedBoolean.

Нажимаем плюс.

и также вставляем в пустое поле Non-Object элемент Settings.

Нажимаем New Function Settings и выбираем сверху Set Fullscreen.

Далее выбираем в иерархии элемент Quality Dropdown.

Находим в инспекторе OnValueChangedInt32.

Нажимаем плюс.

В пустое поле NonObject вставляем элемент Settings.

Нажимаем No Function, Settings и выбираем сверху Set Quality.

Теперь выбираем в иерархии кнопку Save Button.

В инспекторе находим OnClick.

Нажимаем плюс.

Также вставляем в пустое поле NonObject элемент Settings.

Нажимаем Function Settings и выбираем Save Settings.

Далее выбираем в иерархии Exit Button.

Находим OnClick Inspectory.

Нажимаем плюс.

В пустое поле NonObject вставляем Settings.

Нажимаем Function Settings и выбираем Exit Settings.

Итак, теперь все готово.

Нажимаем Play и смотрим, что у нас получилось.

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

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

Для этого выбираем вкладку File, Build Settings.

У меня уже здесь есть готовая сцена с уровнем.

Я лишь добавлю нашу сцену с настройками.

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

Нажимаем Build and Run.

Выбираем папку, в которой будем сохранять проект.

У меня это папка Game.

Ждем некоторое время, пока проект будет готов.

Итак, давайте посмотрим на работу нашего меню настроек.

Переход в полноэкранный режим работает.

Разрешение экрана и качество графики меняется.

Давайте попробуем сохранить настройки.

Нажимаем на выход, переходим в уровень.

Вернемся обратно в меню настроек.

Поменяем разрешение экрана и качество графики.

Сохраняем настройки и переходим обратно в уровень.

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

А на этом у меня все.

Всем удачи.

Пока.