11.        Игровой счет

Для фиксирование побед и поражений, мы добавим в игру игровой счет, очки. Для добавление текста в игру нам понадобятся определенные узлы, и узел который мы собираемся использовать называется «label». Сам текст не может существовать без определенных узлов.

Узел «label» самый простой узел для отображение текста. Он имеет минимальный набор для регулирования и отображение текста.

Откроем наш уровень, и прикрепим наш новый узел.

Как вы могли заметить наш узел «label» зеленного цвета, он относиться к группе «Пользовательского интерфейса» и потому имеет особые свойства присуще только этой группе.

Обратите внимание на инспектора справа, там есть форма для текста, давайте впишем туда строку «Test»

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

Конечно мы не хотим, чтобы наш текст размещался в этом месте и давайте переименуем в счет игрока «PlayerScore» и переместим его ближе к нашему пользовательскому прямоугольнику.

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

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

Опция «Align» отвечает за горизонтальное выравнивание, в ней содержится 4 параметра, right, center, left, fill. Выравнивание по правую сторону, по левую, по центру, fill что делает так и не понял, по правде говоря, вроде как должен заполнять весь участок по ширине. Опция «Valign» отвечает за вертикальное выравнивание и имеет схожие параметры, только вместо левого и правого направления, верхнее (top) и нижние (bottom) выравнивание. 

Выставим наш текст точно по середине, а для этого выровняв по горизонтали и вертикали по центру.

Только сместите немного сам мяч, иначе он перекрывает текст.

Далее мы сместим текст с помощью «Margin» левее от центра, это будут счет игрока, помним, так же позже сделаем счет противника аналогичным способом, только сместим вправо. В опции «Margin» есть 4 параметра указывающие направления смещения: Left (влево), Top (вверх), Right (вправо), Bottom (вниз). Увеличивая или уменьшая (числа могут быть и отрицательные) мы смещаем наше поля в ту или иную сторону. Давайте сместим наш текст влево на -200 единиц.

Далее мы копируем наш узел горячими клавишами ctrl + D и переименуем новый узел в счет соперника «OpponentScore». Все что вам нужно сделать, это сбросить «Margin» левую сторону и увеличить на столько же число по правую сторону, тем самым мы смещаем счет соперника в правую область экрана. Попробуйте сделать это самостоятельно. Можно конечно и левую сторону увеличить на 200 единиц, за место правой, и это тоже будет работать, способ смещения выбирайте сами.

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

Заглянем в скрипт нашего главного узла уровня. И объявим две переменной счет игрока и счет противника

Далее просто будем обновлять текст у узлов «Label» во встроенной функции процесса. Помним через знак «$» мы можем напрямую обращаться у дочернему узлу родителя, в нашем случаи родитель — это узел уровня «Level», а дочерние узлы это «PlayerScore» и «OpponentScore». Далее мы обратимся к атрибуту текста, и присвоим ему переменную.

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

К примеру, чтобы обратиться к атрибуту пользовательского узла «label» к полю смещения в левую сторону, я остановил курсор мыши на этом параметре.

Иными словами, если вызвать «узел.margin_left = -200», то результат будет такой же, как мы заранее прописали в инспекторе. И таким способом вы можете обращаться к любому атрибуту узла, только разные атрибуты иногда требуют разные типы данных. Помните это.

Но вернемся в нашему коду, по правде говоря он не сработает и связано это с тем, что атрибут узла «text» требует строковые значения, но наша переменная PlayerScore имеет числовое значение, и при запуске игры выскачет ошибка.

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

Метод str превращает числовое значение в строковую. Запустите игру, и вы будете наблюдать как текст «Test» смениться на число.

Счет не меняется, мы это исправим, но для начала подключите текст счета соперника с его переменной

Но как мы узнаем кто из игроков забил и кому забил? Так как у нас уже есть области где мяч сбрасывается, то мы можем их использовать для отслеживания счета. К примеру, в левой области узла «Left» (он же узел Area2D), как только мяч попадает в эту область мы прибавляем счет соперника на единицу. Аналогично и справой областью.

Помним += это сокращение которое увеличивает на единицу.

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

Запустите игру и протестити счет игрока и соперника.

 Все должно работать идеально, осталось лишь слегка настроить стиль текста и добавить свой шрифт.

Нажмите на узел счета игрока и перейдите к инспектору, там вы найдете переопределение темы «Theme overrides» далее «Fonts», а после нажмите на [пусто]. У нас есть два варианта выбора шрифта, растровый шрифт или динамический, возьмем динамический шрифт «Новый DynamicFont»

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

В нашем случаи в папке assets есть готовый скаченный шрифт формата ttf, под названием «PoetsenOne-Regular». Вы можете найти любой шрифт который вам понравиться в интернете.

p.s. шрифт по умолчанию не имеет кириллицы, поэтому для отображение русских букв вам понадобится шрифт с кириллицей.

Далее мы перетащим наш шрифт из папки assets из файловой системы в инспектор в Font Data.

После это отобразиться шрифт в опции Font Data, и на экране снова появиться наш счет игрока.

Настроим его размер, раскройте вкладку settings и увеличьте размер шрифта Size до 40 единиц.

Так текст стал выглядеть более наглядно и крупнее. Теперь изменим цвет шрифта, на более мягкий не совсем белый цвет, вы можете выбрать любой цвет, но я возьму 16-теричный цвет d9d8d7. Цвет он же «Colors» располагается выше вкладки «Fonts».

И это все что нужно чтобы текст выглядел красиво.

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

А когда запустите игру то счета игрока и соперника будут красиво смотреться на местном фоне.

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