Создание простой игры - Часть 6

Вы можете найти полный проект здесь. Если вы не видели Часть 1, Часть 2, Часть 3, Часть 4 и Часть 5, прочитайте их сначала.

Пользовательский интерфейс

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

Пользовательские интерфейсы создаются в PlayCanvas с использованием Screen Component и Element Component. Подробнее описано в руководстве пользователя

Сущности пользовательского интерфейса

Мы разделили наш пользовательский интерфейс на три состояния игры: Меню, В игре и Конец игры. Каждое состояние имеет активируемую Screen Entity при входе в состояние. У нас также есть экран специально для оверлея. Поскольку оверлей отображается под шариком в меню, мы используем компонент 3D Screen для отображения оверлея в мировом пространстве за шариком.

Изображения и текст

Изображения и текст добавляются в пользовательский интерфейс с помощью компонента Element. Этот компонент может отображать изображения в виде текстурного активного элемента или текст в виде активного элемента шрифта.

Скрипт пользовательского интерфейса

Давайте посмотрим на скрипт главного меню.

var UiMenu = pc.createScript('uiMenu');

UiMenu.attributes.add("overlay", {type: "entity"});

// инициализация кода, вызываемого один раз для каждой сущности
UiMenu.prototype.initialize = function() {
    this.on('enable', this.onEnable, this);
    this.on('disable', this.onDisable, this);

    this.onEnable();
};

UiMenu.prototype.onEnable = function () {
    // Слушаем клики на фоне

    this.overlay.enabled = true;
    this.overlay.element.on("click", this.start, this);

    if (this.ball) {
        this.ball.model.meshInstances[0].material.depthTest = false;
    }
};

UiMenu.prototype.onDisable = function () {
    this.overlay.enabled = false;
    // Прекращаем слушать события
    this.overlay.element.off("click", this.start, this);
};

UiMenu.prototype.start = function (e) {
    this.app.fire("ui:start");
    // предотвращаем касания и события мыши
    e.stopPropagation();
};

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

Когда Entity активирован, мы отображаем полноэкранное наложение, включая его, а затем начинаем прослушивать событие клика. Когда Entity отключен, мы перестаем прослушивать событие и скрываем наложение. Когда событие срабатывает, мы запускаем событие "ui:start", которое слушает основной игровой скрипт, и это вызывает изменение состояния игры.

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

Игра завершена

Поздравляем с завершением серии! Мы надеемся, что вы узнали много о том, как можно структурировать и создавать игру с помощью PlayCanvas. Если у вас есть отзывы о руководстве, пожалуйста, свяжитесь с нами на нашем форуме.