Заставочный экран / лого для игры

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


Заставка на основе картинки

Создаем новую сцену и добавляем GameObject -> UI -> Image, и переименуем картинку в BG, это будет фон. Чтобы быстро перейти к редактированию нужного элемента, нажмите на переключатель 2D в окне редактирования, затем двойной клик по нужному объекту. Продолжим, надо перекрасить наш фон в черный, установить пресет и сбросить стороны по нулям, как показано на скриншоте ниже:


Окей фон готов.

Продолжим. Дублируем фон Ctrl+D, цвет устанавливаем обратно в белый и настраиваем:

Заставочный экран / лого для игры

Параметр Height может быть разным, это не имеет значения, так как он регулируется через скрипт.

Добавляем к нашему лого Source Image, то есть, заранее нарисованную картинку логотипа (импортированную как Sprite).

Важно! Ваш рисунок должен быть с соотношением сторон 16:9, рекомендуется разрешение 1920х1080.

Добавляем к лого компонент Audio Source и аудио клип с вашей музыкальной темой заставки, уберите галочку Play On Awake.

Создаем C# скрипт SplashSprite и вешаем его на лого:

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class SplashSprite : MonoBehaviour
{
	public string startMenu = "MainMenu";
	public float fadeSpeed = 0.5f;
	private bool start;
	private Image rend;
	private AudioSource _audio;
	private RectTransform _rect;

	void Start()
	{
		start = true;
		Cursor.visible = false;

		_rect = GetComponent<RectTransform>();
		_audio = GetComponent<AudioSource>();
		rend = GetComponent<Image>();

		_rect.sizeDelta = new Vector2 (0, (Screen.width/16)*9);

		rend.color = Color.clear;
		_audio.Play ();
	}

	void Update()
	{
		if (start) 
		{
			rend.color = Color.Lerp(rend.color, Color.white, fadeSpeed * Time.deltaTime);
		}
		else
		{
			rend.color = Color.Lerp(rend.color, Color.clear, fadeSpeed * Time.deltaTime);
		}
		if (rend.color.a >= 0.95f)
		{
			if(!_audio.isPlaying) start = false;
		}
		if (rend.color.a <= 0.1f && !start || Input.anyKeyDown) 
		{
			_audio.Stop ();
			Cursor.visible = true;
			Application.LoadLevel(startMenu);
		}
	}
}

Изображение растягивается по горизонтали в зависимости от разрешения экрана. Скрипт устанавливает разрешение изображения по вертикали, относительно соотношения сторон 16:9. Иначе говоря, если у монитора разрешение соответствует такому-же соотношению сторон, то картинка будет на весь экран, если нет, то будут черные полосы сверху и снизу. По поводу аудио, имейте ввиду, что переход в затемнение и загрузка сцены startMenu, происходит только после того, когда аудио проиграется до конца.



Заставка на основе видео
Данный метод только для платформы Windows!

Вам необходимо установить QuickTime.

Важно!
Видео файл должен быть:
Формат .mov, .mp4 или OGG Theora (предпочтительней).
Соотношение сторон 16:9, рекомендуемое разрешение 1920х1080.

Создайте новую сцену с таким-же фоном как описано выше. Теперь, вместо дублирования, добавим элемент GameObject -> UI -> Raw Image и его нужно настроить также как и предыдущее лого. Не забудем прицепить и Audio Source с такими-же настройками.

Вешаем новый С# скрипт SplashMovie:

using UnityEngine;
using System.Collections;

public class SplashMovie : MonoBehaviour {

	public MovieTexture logoMovie;
	public string startMenu = "MainMenu";
	private AudioSource _audio;
	private RectTransform _rect;
	private bool start;

	void Start () 
	{
		start = true;
		Cursor.visible = false;

		_audio = GetComponent<AudioSource>();
		_rect = GetComponent<RectTransform>();

		_rect.sizeDelta = new Vector2 (0, (Screen.width/16)*9);

		logoMovie.Play ();
		_audio.Play ();
	}

	void Update () 
	{
		if(!logoMovie.isPlaying && start || Input.anyKeyDown)
		{
			logoMovie.Stop ();
			_audio.Stop ();
			start = false;
			Cursor.visible = true;
			Application.LoadLevel(startMenu);
		}
	}
}

Импортируйте видео файл Вашего лого и разложим всё по полочкам:


Сцена готова! :bully:

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

Комментариев 3

Офлайн
talib1996 12 октября 2019
А як зробити щоб не можна було пропускати заставку кліком мишки чи клавіатури?
Офлайн
Light 13 октября 2019
talib1996, убрать из кода это
|| Input.anyKeyDown
Офлайн
IVladoss Вчера, 23:35
Привет! С картинкам у меня получилось все как по маслу! А вот с видео не идет. Как ты импортировал видео? Когда я видео импортирую у меня не появляется значок "воспроизвести" а просто картинка. Может ты когда импортирувал видео, изменил что-то перед тем как закидывать видео в скрипт и забил об этом написать. Я импортировал в формате .mp4 c расширением 1920х1080.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
  • Яндекс.Метрика