Ваше первое приложение

Разработка приложений в PlayCanvas легка и увлекательна. Давайте потратим несколько минут, чтобы изучить основы. Мы создадим следующее простое 3D-приложение:

Используйте стрелки клавиатуры, чтобы перемещать красный шар.

Для начала перейдите на страницу PROJECTS.

Выберите кнопку NEW, чтобы создать новый проект:

Введите My First App в качестве названия проекта. Описание не обязательно и может быть заполнено позже. Нажмите CREATE.

Создав проект, мы можем сразу перейти к редактору - просто нажмите кнопку EDITOR:

При первом открытии редактора вы увидите, что для вас была создана минимальная сцена:

Конкретно, у вас есть камера (для рендеринга сцены), коробка, стоящая на плоскости, и свет (для освещения 3D-объектов).

Вы можете легко изменить коробку на другую форму, например, на сферу. Для этого выберите сущность Box в панели ИЕРАРХИИ. В панели Инспектор справа измените свойство Type компонента MODEL с Box на Sphere. Для полноты переименуйте сущность из Box в Sphere тоже!

Но наша сфера немного скучного серого цвета. Давайте окрасим ее в красный! Для этого нам нужно создать материал, нажав значок + в панели РЕСУРСЫ:

Выберите материал, и его свойства появятся в панели Инспектор справа. Разверните раздел DIFFUSE и нажмите на палитру цветов, чтобы отредактировать цвет на красный:

Затем мы должны назначить материал сфере. Вы можете сделать это с помощью простой операции перетаскивания:

Теперь давайте настроим объект Camera. Выберите ее в панели ИЕРАРХИИ:

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

Затем давайте сделаем так, чтобы сфера была управляема стрелочными клавишами на клавиатуре. Для этого мы должны создать скрипт. Щелкните правой кнопкой мыши по объекту "Sphere" и выберите Add Component -> Script.

На объекте "Sphere" во вкладке "Inspector" появится компонент "Script Component". Чтобы создать скрипт внутри этого компонента, введите название movement.js.

Нажмите клавишу "Enter", и ваш скрипт будет создан.

Теперь нажмите кнопку "EDIT", чтобы открыть редактор кода. Вы увидите следующий каркас скрипта:

var Movement = pc.createScript('movement');

// initialize code called once per entity
Movement.prototype.initialize = function() {

};

// update code called every frame
Movement.prototype.update = function(dt) {

};

Чтобы управлять сферой, давайте добавим некоторый код в функцию update. Скопируйте и вставьте следующий код:

var Movement = pc.createScript('movement');

// initialize code called once per entity
Movement.prototype.initialize = function() {

};

// update code called every frame
Movement.prototype.update = function(dt) {
    // get which keys are pressed
    var keyboard = this.app.keyboard;
    var left  = keyboard.isPressed(pc.KEY_LEFT);
    var right = keyboard.isPressed(pc.KEY_RIGHT);
    var up    = keyboard.isPressed(pc.KEY_UP);
    var down  = keyboard.isPressed(pc.KEY_DOWN);

    // move this entity based on which keys are pressed
    // dt is the time in seconds since the last frame and stands for 'delta time'
    if (left) {
        this.entity.translate(-dt, 0, 0);
    }
    if (right) {
        this.entity.translate(dt, 0, 0);
    }
    if (up) {
        this.entity.translate(0, 0, -dt);
    }
    if (down) {
        this.entity.translate(0, 0, dt);
    }
};

Когда код будет обновлен, сохраните скрипт, используя комбинацию клавиш CTRL+S (или CMD+S на Mac), и закройте вкладку редактора кода.

Теперь вы готовы предварительно просмотреть свое приложение, открыв страницу запуска. Для этого нажмите кнопку "Launch" в верхнем правом углу редактора.

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

The final step is to publish your app so you can share it with others. To do this, click on the  button in the left hand side toolbar.

Откроется диалоговое окно публикации. Здесь вы можете опубликовать билд (или даже загрузить билд для самостоятельного хостинга).

Нажмите опцию PUBLISH TO PLAYCANVAS. Затем вы можете настроить ваше опубликованное приложение.

Оставьте настройки по умолчанию, прокрутите вниз и выберите PUBLISH NOW.

Теперь у вас есть URL для вашей опубликованной сборки! Не стесняйтесь делиться им с миром в Twitter или Facebook!

Таким образом, это весь процесс создания и публикации приложения PlayCanvas. В этом быстром введении мы коснулись основ. Теперь изучайте остальную часть Руководства пользователя, чтобы изучить более продвинутые темы. Good luck and have fun!