Компонент Script: подключение пользовательской логики

PlayCanvas предоставляет мощные инструменты для создания интерактивных 3D-игр и приложений, а компонент Script играет ключевую роль в реализации пользовательской логики. Этот компонент позволяет добавлять скрипты на объекты сцены, что открывает широкие возможности для управления поведением объектов, взаимодействия с пользователем и обработки различных событий.

Создание и подключение компонента Script

Чтобы добавить компонент Script к объекту, необходимо выполнить несколько простых шагов. Обычно для этого используется интерфейс редактора PlayCanvas, но можно сделать это и через код.

1. Использование редактора PlayCanvas

В редакторе PlayCanvas достаточно просто выбрать объект на сцене и добавить к нему компонент Script. Для этого:

  1. Откройте редактор и выберите объект, к которому хотите прикрепить скрипт.
  2. В панели компонентов нажмите кнопку Add Component и выберите Script.
  3. В появившемся списке скриптов выберите нужный файл или создайте новый.
2. Подключение компонента Script через код

Можно добавить компонент Script и программно, используя API PlayCanvas. Например, следующий код добавляет компонент к объекту:

var entity = new pc.Entity();
entity.addComponent('script');

После добавления компонента можно подключать скрипты к объекту, указав нужные файлы JavaScript.

Написание пользовательских скриптов

Для того чтобы скрипт стал активным, необходимо создать его с использованием API PlayCanvas. Скрипты должны быть написаны в отдельных файлах и подключены к объектам. В PlayCanvas все скрипты организуются в виде классов, которые наследуют от базового класса pc.ScriptType.

Пример простого скрипта

Простой скрипт для объекта, который будет двигаться по оси X:

var MoveScript = pc.createScript('moveScript');

// Инициализация
MoveScript.prototype.initialize = function() {
    this.speed = 5;  // скорость движения
};

// Обновление
MoveScript.prototype.update = function(dt) {
    this.entity.translateLocal(this.speed * dt, 0, 0);
};

В этом примере скрипт будет двигать объект вдоль оси X с заданной скоростью. Метод initialize выполняется один раз при запуске скрипта, а метод update вызывается каждый кадр и отвечает за перемещение объекта.

Создание события в скрипте

Для создания событий в скрипте PlayCanvas предоставляет механизмы для подписки на события или их генерации. Для этого используются методы, такие как fire, on и off.

Пример:

var CustomEventScript = pc.createScript('customEventScript');

// Инициализация
CustomEventScript.prototype.initialize = function() {
    this.app.on('custom:event', this.onCustomEvent, this);
};

// Обработчик события
CustomEventScript.prototype.onCustomEv ent = function() {
    console.log('Событие получено!');
};

В этом примере скрипт подписывается на пользовательское событие custom:event, и когда оно возникает, вызывается метод onCustomEvent.

Работа с параметрами скриптов

Скрипты PlayCanvas могут содержать параметры, которые можно настраивать непосредственно в редакторе. Эти параметры могут быть различных типов, включая числа, строки, булевы значения и ссылки на другие объекты.

Пример использования параметра
var ScaleScript = pc.createScript('scaleScript');

// Параметр для масштаба
ScaleScript.attributes.add('scaleFactor', {
    type: 'number',
    default: 1,
    title: 'Множитель масштаба'
});

// Инициализация
ScaleScript.prototype.initialize = function() {
    // Применяем параметр масштаба
    this.entity.setLocalScale(this.scaleFactor, this.scaleFactor, this.scaleFactor);
};

В этом примере параметр scaleFactor можно настроить в редакторе, и он будет использоваться для изменения масштаба объекта. Это позволяет создавать гибкие и динамичные скрипты.

Организация структуры скриптов

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

Использование нескольких скриптов

Скрипты могут взаимодействовать друг с другом. Например, можно создать один скрипт для обработки движения, а другой для столкновений:

// Скрипт движения
var MoveScript = pc.createScript('moveScript');

MoveScript.prototype.initialize = function() {
    this.speed = 5;
};

MoveScript.prototype.update = function(dt) {
    this.entity.translateLocal(this.speed * dt, 0, 0);
};

// Скрипт столкновений
var CollisionScript = pc.createScript('collisionScript');

CollisionScript.prototype.initialize = function() {
    this.entity.collision.on('triggerenter', this.onTriggerEnter, this);
};

CollisionScript.prototype.onTriggerEn ter = function(other) {
    console.log('Объект столкнулся с чем-то!');
};

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

Работа с компонентами в скрипте

Важной особенностью компонента Script является возможность взаимодействия с другими компонентами объекта. Это позволяет использовать другие функции PlayCanvas, такие как анимация, физика и рендеринг, в рамках одного скрипта.

Пример использования компонента RigidBody
var PhysicsScript = pc.createScript('physicsScript');

// Инициализация
PhysicsScript.prototype.initialize = function() {
    this.rigidbody = this.entity.rigidbody;
    this.rigidbody.applyForce(0, 10, 0); // Применяем силу вверх
};

В данном примере скрипт взаимодействует с компонентом физики RigidBody, чтобы применить силу к объекту, заставляя его двигаться.

Отладка и тестирование скриптов

PlayCanvas предоставляет удобные инструменты для отладки и тестирования скриптов. В редакторе есть возможность запускать игру в реальном времени и наблюдать, как работают скрипты. Логирование сообщений можно выполнять с помощью консольных функций console.log, что позволяет отслеживать состояние объекта или любые другие данные во время исполнения скрипта.

Для более сложных ситуаций PlayCanvas поддерживает систему “breakpoints” в браузерных инструментах разработчика, что позволяет ставить точки останова и анализировать поведение скриптов в момент их выполнения.

Подключение внешних библиотек

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

this.app.assets.loadFromUrl('path/to/library.js', 'script', function(asset) {
    var libraryScript = asset.resource;
    // Используйте библиотеку в вашем коде
});

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

Использование компонентов в других скриптах

Иногда необходимо взаимодействовать с другими компонентами, которые прикреплены к объектам в сцене. PlayCanvas предоставляет методы для поиска объектов по имени или тегам, что позволяет динамически подключать их к скрипту.

Пример поиска объекта по имени:

var TargetScript = pc.createScript('targetScript');

TargetScript.prototype.initialize = function() {
    this.targetEntity = this.app.root.findByName('TargetObject');
    this.targetEntity.translateLocal(10, 0, 0);
};

Этот код находит объект с именем TargetObject и перемещает его.

Заключение

Компонент Script в PlayCanvas является мощным инструментом для разработки логики и поведения объектов в 3D-пространстве. Гибкость API, возможность создания модульных скриптов и интеграции с другими компонентами позволяют разработчику создавать динамичные и интерактивные игры и приложения. Важно понимать, как эффективно организовать код, использовать параметры, а также взаимодействовать с другими частями системы для создания качественного продукта.

Оглавление