ZScript. Динамический HUD.

Предисловие.

Данный урок, является продолжением урока ZSCRIPT. Продвинутый HUD.

В данном уроке, вы познакомитесь с мощным инструментом языка ZScript — переменными, в связке с циклами. И научитесь, двигать спрайты по экрану, в 60 fps.

Передвигаем спрайт брони.

Первое что нужно сделать, это указать версию ZScript, на первой строке.

version "4.0"

Данная приписка, даст нам возможность, воспользоваться функциями ZScript версии «4.0«

Теперь, создайте переменную типа int, внутри класса myStatusBar. И, в методе Init, задайте ей значение.

version "4.0"
 
class myStatusBar : BaseStatusBar
{
	int x_pos;
	override void Init()
	{
		super.Init();
		SetSize(0,320,200);
		x_pos = 50;
	}

Переменная x_pos, будет хранить x координату, нашей картинки. Теперь, допишите стейт Draw, новыми значениями.

override void Draw(int state, double TicFrac)
{
  Super.Draw (state, TicFrac);
  x_pos += 5 * TicFrac;
  if(x_pos > 600) x_pos = 0;

Разберем новые строки:

override void Draw(int state, double TicFrac)

У функции Draw, есть 2 аргумента:

• state — возвращает текущий статусбар (automap, fullscreen)
• TicFrac — возвращает время, затраченное на обновление кадра.

В данном уроке, аргументом state, мы пользоваться не будем. Нас сейчас, больше интересует TiсFrac.

x_pos += 5 * TicFrac;

В этой строке, мы передвинули позицию картинки на 5 пикселей, и, умножили на TicFrac, что-бы скорость передвижения не зависела от FPS. Работает это следующим образом.

Если у игрока 10 FPS, то TicFrac вернет 0.1 секунды. Но, если у игрока 100 FPS, то TicFrac вернет 0.01 секунды. Из за того что, значение x_pos увеличивается каждый кадр, важно его компенсировать, умножая на TicFrac.

if(x_pos > 600) x_pos = 0;

Здесь, я заставил координату x_pos вернуться обратно, после того как она зайдет за границу экрана (x_pos > 600).

Последнее что осталось, это привязать координату x_pos к функции DrawImage.

DrawImage("ARM1A0",(x_pos,-10));

Теперь спрайт брони, будет передвигаться слева-направо.

Рисуем HP Bar.

Сначала, скачайте спрайт хп бара, с MEGA.

Поместите его в папку Sprites (если вы используете pk3 формат)

Затем, внутри класса myStatusBar, создайте функцию drawHpBar, и перепишите туда следующий код:

void drawHpBar(int hp) {
  int i = 0;
  int draw_x = 20;
  while(i < hp) {
    DrawImage("HPSTICK",(draw_x,-10));
    draw_x += 3;
    i++;
  }
}

Данная функция, рисует полосу из картинок «HPSTICK«, чем больше hp, тем больше полоса. Каждая следующая картинка, рисуется на расстоянии в 3 пикселя от предыдущей.

draw_x += 3;

Осталось вызвать функцию drawHpBar, внутри функции Draw.

drawHpBar(CPlayer.health);

Теперь, если запустить, увидим красивый HP бар.

Постойте, откуда тут CPLayer?

Наш статусбар myStatusBar наследуется от BaseStatusBar

class myStatusBar : BaseStatusBar

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

Конкретно CPlayer является переменной типа PlayerInfo (о чем написано на вики, строкой выше). Переменные доступные в CPlayer, смотрите здесь. Нажмите Ctrl+F, и введите PlayerInfo чтобы быстро найти структуру данного типа.

Рисуем море крови.

Создайте еще одну функцию. Она будет отвечать, за рисование крови на экране, высота которого, будет зависеть от HP игрока.

void drawIrritainingBloodHud(int hp) {
  if(hp < 0) {
    Fill(Color(100, 255, 0, 0), 0, -Screen.GetHeight(), Screen.GetWidth(), Screen.GetHeight());
  } else {
    Fill(Color(100, 255, 0, 0), 0, abs(hp) + VerticalResolution/2, Screen.GetWidth(), Screen.GetHeight());
  }
}

Разберем функцию Fill. Она рисует прямоугольник на экране (в нашем случае, мы рисуем, полупрозрачный, красный прямоугольник). Синтаксис у неё следующий:

Fill(цвет, x, y, ширина, высота);

• цвет — задает цвет прямоугольника.
• x, y — указывает координаты, относительно которых, рисуется прямоугольник.
• ширина, высота — задают размер прямоугольника.

А теперь, вернемся к коду.

if(hp < 0) {

Если HP, меньше 0 (игрок умер).

Fill(Color(100, 255, 0, 0), 0, -Screen.GetHeight(), Screen.GetWidth(), Screen.GetHeight());

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

Цвет, задается в функции Color, по следующему шаблону:

Color(a, r, g, b);

• a — задает alpha, т.е. непрозрачность.
• r, g, b — задают уровени яркости красного, зеленого, и синего суб-пикселей (в пикселе — 3 суб-пикселя).

Screen.GetWidth()

Возвращает, ширину твоего экрана.

Screen.GetHeight()

Возвращает, высоту экрана.

Перейдем, следующей строке:

} else {

Если игрок, не умер, то:

Fill(Color(100, 255, 0, 0), 0, abs(hp) + VerticalResolution/2, Screen.GetWidth(), Screen.GetHeight());

Рисуем прямоугольник, в зависимости от HP.

abs(hp) — обозначает, что мы берем значение по модулю, т.е. если число отрицательное, делаем его положительным. Далее к abs(hp), я прибавил VerticalResoulution/2, что-бы сдвинуть прямоугольник вниз.

Функцию разобрали, осталось вызвать её в Draw.

drawIrritainingBloodHud(health);

Готово, теперь получая урон, ты будешь захлебываться в крови.

Итоговый результат.