Створення головного меню з анімацією

Вітаю. Сьогодні ми навчимося робити головне меню з анімацією.

Що нам знадобиться:

Розпакована гра STALKER: Call of Pripyat;
Adobe Photoshop з DDS-плагіном від nVidia або будь-який інший графічний редактор здатний правити альфа-канали і відкривати .dds файли (у статті я використовую Photoshop);
Будь-який відео-конвертер, який здатний переконвертувати в .ogm формат;

Розгляд оригінального меню.

Почнемо зі створення основного статичного зображення меню.
Відкриваємо файл ui_actor_main_menu.dds який розташований у папці gamedata\textures\ui . І бачимо звичайне статичне зображення, хоча в головному меню вода пускає хвилі та пташки літають.

Ось що ми бачимо:

Переходимо в керування каналами і натискаємо на Alpha 1 і бачимо, що на місцях, де мають літати пташки, і вода ворушиться чорні плями. Які говорять про те, що зображення у цих місцях прозоре.

Файли, які повинні програватися в цих чорних дірах, лежать за адресою gamedata\textures\ui і називаються video_voroni_crop.ogm і video_water_crop.ogm , координати їх розташування на екрані прописані у файлі ui_mm_main.xml за адресою gamedata\configs\ui .

Файлы которые должны проигрываться в этих черных дырах лежат по адресу gamedata\textures\ui и называются video_voroni_crop.ogm и video_water_crop.ogm, координаты их расположения на экране прописаны в файле ui_mm_main.xml по адресу gamedata\configs\ui.

Підготовка статичного меню.

Передбачається, що у вас уже є готова текстурка і відеофайли. І залишилося тільки підредагувати альфа-канал і прописати розташування відео, щоб вони правильно відображалися.
Я взяв файл із зображенням трактора, як відео взяв ui_mm_rug02.ogm, на ньому зображено стрічечку, що висить у ділянці заднього колеса трактора. А на задній план я взяв відео ui_mm_main_back_crop.ogm, воно, звісно, не так добре вписується, ну гаразд.

 

Ось місця, де буде анімація

Отже, виділяємо на нашому меню місця, де відбуватиметься анімація (уважно подивіться на своє відео та визначте, скільки потрібно виділяти, а то вийде, що частину анімації не видно, а це вже не якісно виконана робота). Після того як виділили, переходимо на альфа-канал і зафарбовуємо виділене в чорний (якщо до цього ви не зафарбували колишні чорні місця на альфа-каналі в білий, то не біда, просто інвертуйте виділення і зафарбуйте.

 

Ось що в мене вийшло після редагування альфа-каналу

Тепер заміряємо координати. У мене вийшли: для бинта (277,475), для фону (326,0). Після зняття координат, зберігаємо нашу текстуру.

 

Налаштування збереження

Редагування ui_mm_main.xml

Відкриємо файл ui_mm_main.xml блокнотом (я використовую Notepad++). Нас цікавить тільки ця строка:

		<auto_static x="500" y="130" width="432" height="160" stretch="1">
			<texture width="432" height="160">ui\video_voroni_crop</texture>
		</auto_static>

Розглянемо уважніше:

<auto_static x="500" y="130" width="432" height="160" stretch="1">

Перші дві координати відповідають за розташування відео на екрані, другі дві - розмір дірки на альфа-каналі.

<texture width="432" height="160">ui\video_voroni_crop</texture>

Перша частина - роздільна здатність відеоролика, друга частина - розташування ролика, що включає папку і назву без розширення (.ogm) Підставляємо свої координати, у мене вийшло ось що:

	<background width="1024" height="768">
		<auto_static x="277" y="475" width="128" height="256" stretch="1">
			<texture width="128" height="256">ui\ui_mm_rug02</texture>
		</auto_static>
		<auto_static x="326" y="0" width="876" height="400" stretch="1">
			<texture width="876" height="400">ui\ui_mm_main_back_crop</texture>
		</auto_static>
	    <auto_static width="1024" height="768">
	      <texture>ui_inGame2_background</texture>
	    </auto_static>
	</background>

Зберігаємо. Заходимо в гру та насолоджуємося 🙂