Самостоятельная сборка через SDK без Editor

Для начала работы с PlayCanvas без использования Editor необходимо настроить SDK. Для этого можно скачать последнюю версию SDK с официального репозитория на GitHub или подключить его через менеджер пакетов, если используете Node.js.

  1. Скачивание PlayCanvas SDK: Зайдите на страницу PlayCanvas GitHub и скачайте последнюю стабильную версию. В репозитории содержится весь исходный код для работы с движком и необходимыми инструментами.

  2. Установка через npm: Использование npm позволяет проще управлять зависимостями и обновлениями SDK. Выполните команду:

    npm install playcanvas

    После установки можно подключать SDK к проекту через импорт:

    import * as pc from 'playcanvas';

  3. Подключение через CDN: В случае если не требуется установка через npm, можно подключить SDK напрямую через CDN. Для этого достаточно добавить следующую строку в HTML:

    <script src="https://code.playcanvas.com/playcanvas-stable.min.js"></script>

Инициализация сцены

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

  1. Создание приложения:

    Для создания приложения нужно создать объект pc.Application, который является главным компонентом для управления всей сценой.

    const canvas = document.getElementById('applicationCanvas');
const app = new pc.Application(canvas, {
    mouse: new pc.Mouse(canvas),
    touch: new pc.TouchDevice(canvas)
});

    Этот код инициализирует приложение с холстом (canvas) и устанавливает обработку ввода с мыши и тач-устройств.

  2. Настройка рендеринга:

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

    app.graphicsDevice.maxPixelRatio = 2; // Устанавливаем максимальное разрешение рендеринга
app.scene.skybox = new pc.Asset('skybox', 'cubemap', {
    url: 'path/to/skybox.dds'
});

    В данном примере устанавливается максимальное разрешение и добавляется кубическая карта для неба.

Обработка ввода

PlayCanvas поддерживает множество различных способов ввода данных, включая мышь, клавиатуру и сенсорный экран. Для обработки этих событий в SDK используется система input events.

  1. Мышь и сенсорные события:

    Пример получения информации о движении мыши:

    app.mouse.on(pc.EVENT_MOUSEMOVE, function (event) {
    console.log('Mouse moved:', event);
});

    Для сенсорных экранов аналогичная обработка доступна через события touch:

    app.touch.on(pc.EVENT_TOUCHSTART, function (event) {
    console.log('Touch started at', event.x, event.y);
});

  2. Клавиатурные события:

    Для обработки ввода с клавиатуры используется объект pc.Keyboard.

    app.keyboard.on(pc.EVENT_KEYDOWN, function (event) {
    if (event.key === pc.KEY_SPACE) {
        console.log('Space key pressed');
    }
});

Создание и управление объектами в сцене

Все объекты в PlayCanvas представлены через Entity. Элементы сцены, такие как камеры, модели и свет, могут быть добавлены и управляться через объекты Entity.

  1. Создание Entity:

    Для создания простого объекта сцены необходимо создать экземпляр pc.Entity. Например, для создания объекта с примитивной геометрией (сферой):

    const sphere = new pc.Entity();
sphere.addComponent('model', {
    type: 'sphere'
});
app.root.addChild(sphere);

    Этот код создаёт объект-сферу и добавляет его в корень сцены.

  2. Управление трансформациями:

    Entity в PlayCanvas имеет три основные трансформации: позицию, вращение и масштаб. Эти параметры можно изменять напрямую:

    sphere.setPosition(0, 2, 0); // Перемещение в координаты (0, 2, 0)
sphere.setRotation(0, 90, 0); // Поворот на 90 градусов по оси Y
sphere.setLocalScale(1, 1, 1); // Масштабирование

Работа с материалами и освещением

PlayCanvas предоставляет инструменты для создания материалов и освещения. Все материалы связаны с объектами через компоненты модели.

  1. Материалы:

    Создать новый материал можно через объект pc.Material:

    const material = new pc.Material();
material.diffuse = new pc.Color(1, 0, 0); // Красный цвет
material.update();

sphere.model.material = material; // Применяем материал к объекту

  2. Освещение:

    Для добавления освещения в сцену используйте объект pc.Light. Пример добавления источника света:

    const light = new pc.Entity();
light.addComponent('light', {
    type: 'directional',
    color: new pc.Color(1, 1, 1),
    intensity: 1
});
app.root.addChild(light);

Обработка анимации

PlayCanvas позволяет добавлять анимацию объектов через компоненты animation. Для этого можно использовать стандартные анимации или создавать свои собственные.

  1. Использование анимации:

    Для применения анимации к объекту необходимо создать объект pc.AnimationComponent и добавить анимацию через animAssets.

    const anim = new pc.Animation();
anim.addClip('run', new pc.AnimationClip({
    name: 'run',
    duration: 2
}));
sphere.addComponent('animation', {
    speed: 1
});
sphere.animation.play('run');

    В этом примере создаётся простая анимация с именем “run”, которая проигрывается на объекте-сфере.

Интеграция с физикой

PlayCanvas предоставляет интеграцию с системой физики, используя библиотеку ammo.js. Для этого необходимо добавить компонент rigidbody и collision к объектам сцены.

  1. Добавление физики:

    Пример добавления физических свойств для объекта:

    sphere.addComponent('rigidbody', {
    type: 'dynamic',
    mass: 1
});
sphere.addComponent('collision', {
    type: 'sphere',
    radius: 1
});

    Этот код добавляет физические свойства для сферы, делая её динамическим объектом с массой 1.

Сетевые возможности

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

  1. Сетевое соединение:

    PlayCanvas предоставляет базовые возможности для работы с WebSocket. Пример создания подключения:

    const socket = new WebSocket('ws://localhost:8080');

socket.onmess age = function(event) {
    console.log('Message from server:', event.data);
};

    Для создания серверной логики необходимо использовать сервер, поддерживающий WebSocket-соединения.

Заключение

Работа с PlayCanvas SDK без использования редактора предоставляет гибкость в создании и управлении 3D-сценами, а также полный контроль над объектами, физикой, анимацией и сетевыми возможностями. Важно настроить правильное окружение, создавать объекты через компоненты и тщательно работать с событиями ввода и рендеринга для достижения высокой производительности и стабильности игры.

Оглавление