Создание HUD. Здоровье, энергия, боезапас

Материал из CryWiki Russia

Перейти к: навигация, поиск
О статье
АвторDr Ars
СложностьСредняя
ТребованияAdobe Flash CS4/CS5.
Дата добавления28/04/12


Содержание

Создание HUD. Здоровье, энергия, боезапас.

Индикаторы здоровья

Итак, в этой статье мы научимся создавать свой собственный HUD для Crysis. Пока что только правый нижний блок (Здоровье, энергия, боеприпасы).

Начнём с того, что запустим Adobe Flash. Перед вами появится окно с выбором дальнейших действий. Нажимаем "Файл ActionScript 2.0" в колонке "Создать".

Скрин1.jpg

Перед вами появилось пустое белое поле. Справа, на панели "Свойства" в свитке "Свойства" указано разрешение документа - 550х400. Нам надо его изменить.

Скрин2.jpg

 Можно указать любое разрешение, какое - не важно, важно лишь чтобы оно было удобным для работы. Я, например, всегда указываю разрешение моего монитора - так мне проще подобрать размеры элементов HUD'а. В этом же свитке указан цвет фона. Чтобы работать было удобнее, мы поменяем его на темно-серый. Теперь элементы HUD'а не будут сливаться с фоном и нам не придется напрягать глаза. А вообще можете какой угодно ставить.

Что ж, давайте нарисуем какую-нибудь симпатичную шкалу. Это будет индикатор здоровья. Для этого нам понадобятся различные инструменты вот на этой панели:

Скрин3.jpg

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

Вот что вышло у меня:

Скрин4.jpg

Не стану называть ее красивой, но для этого урока сойдет.

Теперь надо преобразовать изображение в символ. Для этого мы выделяем всю шкалу, нажимаем правой кнопкой мыши и выбираем "Преобразовать в символ". Выбираем тип "Фрагмент ролика".

Скрин5.jpg

Теперь надо задать символу имя. Этот шаг очень важен. Имя нужно для распознания символа в ActionScript. И так, выделяем символ и находим панель "Свойства". В строке "Назначить имя экземпляру" пишем "healthbar". На самом деле имя может быть любое, главное, чтобы оно совпадало с именем, которое вы будете указывать в ActionScript.

Скрин6.jpg

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

Скрин7.jpg

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

Создаем новый слой во временной шкале.

Скрин8.jpg

Нижний пока лучше заблокировать, чтобы не внести случайных изменений. Для этого нажимаем на точку под замком. На новом слое рисуем прямоугольник. Рисуем так, чтобы он был сбоку от шкалы (шкала осталась на нижнем заблокированном слое). Это должно выглядеть вот так:

Скрин9.jpg

Теперь находим на временной шкале 100-й кадр. Выделяем этот кадр на обоих слоях.

Скрин10.jpg

Нажимаем на них правой кнопкой мыши и выбираем "Вставить ключевой кадр". Пробел от 1-го кадра до 100-го автоматически заполняется. Так это должно выглядеть:

Скрин11.jpg

Затем выделяем созданный нами прямоугольник. Убедитесь, что бегунок на шкале времени стоит именно на 100-м кадре. Теперь растягиваем этот прямоугольник так, чтобы он полностью закрывал шкалу. Вот так:

Скрин12.jpg

Переходим к временной шкале. На верхнем слое в промежутке между 1-м и 100-м кадрами в любом месте щелкаем правой кнопкой мыши и выбираем "Создать анимацию формы". Кадры должны окраситься в зеленый цвет. Поводите красным бегунком по шкале и убедитесь, что прямоугольник увеличивается от первого кадра к последнему.

Нажимаем на верхний слой с прямоугольником правой кнопкой мыши и выбираем "Маска". Слой-маска - это такой слой, в пределах которого отображается нижний слой. Снова поводите бегунок и убедитесь, что шкала-индикатор здоровья плавно увеличивается от первого кадра к последнему. Мы только что сделали анимацию заполнения индикатора здоровья.

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

Но у вас шкала должна выглядеть вот так:

Скрин13.jpg

Теперь переходим к основной сцене. Для этого в левом верхнем углу ищем надпись "Монтажный кадр" и нажимаем на нее.

Скрин7.jpg

Теперь дело за скриптом. Создаем новый слой. Называем "ActionScript".

Скрин14.jpg

Нажимаем правой кнопкой по первому кадру и выбираем "Действия". Открывается окно, в котором мы будем писать код. Код следующий:

ActionScript
var m_health = 100;
setHealth = function(_health)
{
	var health = Math.floor((Math.max(_health,0)));
	if (m_health!=health)
	{
		m_health = health;
		healthbar.gotoAndStop(m_health);
	}
}


В восьмой строке упоминается имя "healthbar". Это имя нашего символа - индикатора здоровья. Если вы сделали шкалу здоровья правильно, то в основной сцене она не должна быть видна.

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

Скрин15.jpg

Создадим текстовое поле на только что созданном слое. Пишем в нем "100".

Скрин16.jpg

Теперь надо разобраться с параметрами этого поля. Переходим к панели "Свойства".

Скрин17.jpg

В строке "Назначить имя экземпляру" пишем "health_percent". Выбираем тип "Динамический текст". Шрифт можно выбрать любой, но стандартный, иначе не будет читаться на других компьютерах. Лучше поставить тип шрифта "Regular". В противном случае могут возникнуть проблемы с чтением шрифта в игре. Цвет тоже ставьте какой вам нужно. В свитке "Символ", в самом низу есть три кнопочки. Проверяем, чтобы они не были нажаты. Рядом с выбором шрифта есть кнопка "Внедрить". Нажимаем ее, выбираем пункт "Цифры" и кликаем "ОК". Мы внедрили шрифт для того, чтобы в игре цифры не отображались как .

Теперь переходим к редактированию кода. Открываем наш старый код и добавляем туда строки:

ActionScript
health_percent.text = m_health;
if (m_health.text > 100)
{
	health_percent.text = 100;
}


Целиком скрипт должен выглядеть вот так:

ActionScript
var m_health = 100;
setHealth = function(_health)
{
	var health = Math.floor((Math.max(_health,0)));
	if (m_health!=health)
	{
		m_health = health;
		healthbar.gotoAndStop(m_health);
	}
	health_percent.text = m_health;
	if (m_health.text > 100)
	{
		health_percent.text = 100;
	}
}


В 10-й, 11-й и 13-й строках можно увидеть имя " health_percent" - это имя текстового поля, которое мы задали в его свойствах.

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

ActionScript
var red_text:Color = new Color(health_percent);
if(m_health < 20)
{
	red_text.setRGB(0xFF0000);
}
else
{
	red_text.setRGB(0x[нужный цвет]);
}


Вот так будет выглядеть код целиком:

ActionScript
var m_health = 100;
setHealth = function(_health)
{
	var health = Math.floor((Math.max(_health,0)));
	if(m_health!=health)
	{
		m_health = health;
		healthbar.gotoAndStop(m_health);
	}
	health_percent.text = m_health;
	if(m_health > 100)
	{
		health_percent.text = 100;
	}
	var red_text:Color = new Color(health_percent);
	if (m_health < 20)
	{
		red_text.setRGB(0xFF0000);
	}
	else
	{
		red_text.setRGB(0x[нужный цвет]);
	}
}


[нужный цвет] - это цвет ваших цифр. Он указывается с помощью шести символов. Вы можете посмотреть название нужного цвета на панели инструментов, вот тут:

Скрин18.jpg

Его можно так же посмотреть на панели "Цвет" (открыть панель можно через Окно > Цвет). Копируете название цвета и вставляете вместо [нужный цвет].

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

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

Скрин19.jpg

Теперь находим 20-й кадр напротив нижнего слоя. Нажимаем правой кнопкой мыши и выбираем "Вставить ключевой кадр".

Скрин20.jpg

Переводим красный бегунок на первый кадр, в самое начало. Полностью выделяем индикатор. Изменяем его цвет на красный путем изменения цвета заливки. Теперь поводите бегунок по временной шкале. В промежутке от первого до 20-го кадра индикатор здоровья должен быть красным. Начиная с 20-го кадра и до конца окраска индикатора должна остаться прежней. Возвращаемся к монтажному кадру.

Скрин7.jpg

Индикаторы энергии делаются по тому же принципу, что и индикаторы здоровья. Не вижу смысла в описании создания индикаторов энергии в этой статье, т.к. процесс их создания почти не отличается от создания индикаторов здоровья. Как они делаются, вы можете посмотреть в исходнике HUD'а, который я приложил.

Индикаторы боеприпасов

Давайте создадим индикаторы боезапаса. Создаем новый слой так, чтобы он был ниже слоя с AS. Остальные слои блокируем. На новом создаем три текстовых поля, в каждом пишем "100". Одно из них называем "clip_ammo", второе - "inventory_ammo", третье - "grenade_ammo". "clip_ammo" - патроны в обойме, "inventory_ammo" - сколько всего патронов, "grenade_ammo" - количество гранат. Для каждого поля внедряем шрифт.

Теперь открываем наш код. Идем в самый конец кода и с новой строки вставляем вот это:

ActionScript
setAmmo = function(_secammo,_clipammo,_clipsize, _inventoryammo, _grenadeammo, _grenadetype, _notvehicle)
{
	if (_notvehicle==true)
	{
		clip_ammo.text = _clipammo;
		inventory_ammo.text = _inventoryammo;
		grenade_ammo.text = _grenadeammo;
	}
	else
	{
		clip_ammo.text = _clipammo;
		inventory_ammo.text = _secammo;
	}
}


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

ActionScript
var red_ammo:Color = new Color(clip_ammo);
if (_clipammo <= _clipsize / 3 && clipsize != 0)
{
 	red_ammo.setRGB(0xFF0000);
}
else
{
	red_ammo.setRGB(0x[нужный цвет]);
}


Напоминаю, что [нужный цвет] - это шестизначное название цвета ваших цифр. Вот так этот код будет располагаться в скрипте:

ActionScript
var m_health = 100;
setHealth = function(_health)
{
	var health = Math.floor((Math.max(_health,0)));
	if (m_health!=health)
	{
		m_health = health;
		healthbar.gotoAndStop(m_health);
	}
	health_percent.text = m_health;
	if (m_health > 100)
	{
		health_percent.text = 100;
	}
	var red_text:Color = new Color(health_percent);
	if (m_health < 20)
	{
		red_text.setRGB(0xFF0000);
	}
	else
	{
		red_text.setRGB(0x[нужный цвет]);
	}
}
setAmmo = function(_secammo,_clipammo,_clipsize, _inventoryammo, _grenadeammo, _grenadetype, _notvehicle)
{
	var clipsize = _clipsize;
	if (_notvehicle==true)
	{
		clip_ammo.text = _clipammo;
		inventory_ammo.text = _inventoryammo;
		grenade_ammo.text = _grenadeammo;
	}
	else
	{
		clip_ammo.text = _clipammo;
		inventory_ammo.text = _secammo;
	}
	var red_ammo:Color = new Color(clip_ammo);
	if (_clipammo <= _clipsize / 3 && clipsize != 0)
  	{
       		red_ammo.setRGB(0xFF0000);
	}
	else
	{
		red_ammo.setRGB(0x[нужный цвет]);
	}
}


То, что вы видите выше - это наш скрипт целиком.

Последние штрихи

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

Скрин21.jpg

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

 

Экспорт

Что ж, HUD готов. Теперь настроим параметры публикации. Заходим "Файл" > "Параметры публикации", убеждаемся, что напротив Flash стоит галочка, переходим на вкладку "Flash", где в пункте "Проигрыватель" выбираем Flash Player 8 и удостоверяемся, что в пункте "Сценарий" выбран ActionScript 2.0.

Скрин22.jpg

Нажимаем "ОК". Теперь идем в "Файл" > "Экспорт" > "Экспортировать ролик". Называем файл HUD_AmmoHealthEnergySuit, сохраняем в формате .swf. Сворачиваем Adobe Flash, идем в папку с сохраненным файлом. Меняем его расширение .swf на .gfx. Создаем папку "Libs", в ней создаем еще одну папку - "UI". В эту папку кидаем наш файл. Запаковываем папку "Libs" в архив zz_GameData.rar, меняем его расширение на .pak. Копируем этот архив в папку Crysis/Game. Запускаем редактор, входим в режим игры с помощью комбинации Ctrl+G. Вуаля! На экране вы видите ваш HUD! А я покажу свой скриншот:


Скриншот

Голубая полоска, огибающая нижний черный фон - это индикатор энергии. Как я уже писал, его создание практически не отличается от создания индикатора здоровья. Поэтому я не стал описывать процесс его создания в этой статье. Но если вам это интересно и нужно, изучите исходник, приложенный к статье. Уверен, с этим проблем возникнуть не должно.

 

Исходник .fla (пример)

Здесь можно скачать исходный файл HUD'а, созданный согласно этому уроку и представленный на скриншотах выше. Для просмотра исходника .fla вам необходим Adobe Flash версии не ниже CS4.

HUD_Example.rar