Экспорт из PhysicEditor

  Когда все фигуры удовлетворяют вашему вкусу и вы готовы перенести работу в Phaser, необходимо экспортировать данные в читаемый формат. До того, как экспортировать, выберите пункт Lime + Corona (JSON) в правой части экрана под экспортером. Кнопка публикации вызовет имя и место для сохранения физических данных. Из-за того, что этот файл содержит данные для нескольких объектов, обычно его называет как-нибудь во множественном числе, например, "сэндвичи" или "транспортныеТела". Вот вывод экспорта фигуры лодки.

{
  “boat": [
    {
      “density”: 2, “friction”: 0, “bounce”: 0,
      “filter”: { “categoryBits”: 1,
      “maskBits”: 65535 },
      “shape”: [29, 18, 35, 42, 29, 72, 10,
      72, 4, 42, 10, 18, 19, 4]
  }

  ]
}

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

Добавление сложных объектов

  Некоторые фигуры невозможно представить как комбинацию прямоугольников, кругов и капсул. Эти фигуры часто представляются многоугольниками, которые представляют собой набор сегментов линий, которые определяют внешние края фигуры. Хотя и возможно написать код, который создал бы эти линии, намного легче создать фигуру и загрузить ее данные в Phaser.

Физический редактор

  Программа, поддерживающая феймворком Phaser и написанная для создания и экспорта данных фигур называется PhysicsEditor. Эта программа, сделанная компанией CodeAndWeb, может очерчивать спрайты для создания довольно точных контуров многоугольника, которые также можно отредактировать вручную. Ссылку на скачку можно найти на https://www. codeandweb.com/physicseditor.

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

  После того как у вас есть фигура в рабочей области, найдите инструмент magic wand над картинкой и кликните на него. Вам будет представлен экран, которые автоматически очертит объект спрайта, основываясь на прозрачности объекта, используя для фигуры границы между видимой частью и прозрачной (поэтому убедитесь что ваши изображения сохранены в формате png). Регулировка погрешности вверх сделает вычисления более простыми, обычно уменьшая число точек конечной фигуры. Уменьшенное число точек создаст быстро рассчитываемую для физической системы фигуру. Установка значения погрешности, равное 0 добавит больше точек, создавая более точную фигуру с большим числом точек, которая будет требовать более долгой обработки.

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

Построение составных объектов

  Не все тела в реальном мире являются идеальными кругами или прямоугольниками. Большинство из них очень сложные, хотя игры часто упрощают их в набор примитивных фигур. Например 2D кресло имеет хотя бы четыре прямоугольника (сиденье, спинка, две ножки). Прямоугольники, круги, капсулы (форма пилюли) - все это фигуры, которые можно использовать для созданиях составных объектов. Менее используемые варианты включают в себя линии и плоскости, которые занимают всю площадь игрового мира (полезно для границ или земли).

  При создании составных тел сначала нужно удалить старые фигуры тела спрайта через body.clearShapes(). 

  В следующем случае загружается спрайт жезла с круговым весом на каждой из сторон палки. Прямоугольник не будет представлять этот жезл в полной мере. Также он будет слишком большим или слишком маленьким в центре, если использовать круги. Капсула будет иметь закругленные концы, но так же не подходит, как и прямоугольник. Лучшим решением будет создание прямоугольника для средней секции и два круга для круговых весов.

game.physics.startSystem(Phaser.Physics.P2JS);
baton = game.add.sprite(300, 400, ‘phaser’);
game.physics.p2.enable(baton, true);
baton.body.clearShapes();
baton.body.addRectangle(35, 10);
baton.body.addCircle(10, −20, 0);
baton.body.addCircle(10, 20, 0);

  При добавлении фигур аргументы, идущие за их размером (ширина, высота и радиус), задают сдвиг. По умолчанию все фигуры располагаются над центральной точкой спрайта, к которому они добавляются. Если задан сдвиг, они сдвигаются от цента спрайта на это расстояние. Заметьте, что в этом коде сдвиг по x для двух кругов задан как 20 и -20. Это поместит круги на края жезла, туда где они должны быть.

Добавление основных объектов

  По умолчанию тело спрайта - это прямоугольник, совпадающий со спрайтом по ширине и высоте. Чтобы добавить другую фигуру, нужно удалить тело по умолчанию и заменить его новой фигурой тела. В Phaser есть функция автоматического создания и замены простых тел. Основные метод замены - это setCircle и setRectangle. В следующем коде оригинальный прямоугольник спрайта таблетки заменен на круг. Затем это тело круга будет снова заменено на другой прямоугольник размером, отличающимся от оригинального.

game.physics.startSystem(Phaser.Physics.P2JS);
pill = game.add.sprite(300, 400, ‘pill’);
game.physics.p2.enable(pill);
pill.body.setCircle(40);
pill.body.setRectangle(50, 100);

Настройка мира в P2

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

game.physics.startSystem(Phaser.Physics.P2JS);

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

brick = game.add.sprite(300, 400, ‘brick’);
game.physics.p2.enable(brick);

Отладка тел

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

game.physics.p2.enable(brick, true);

Физическая система P2

  Вторая главная физическая система в Phaser - это P2. Разработанная Стэфаном Хэдманом, это полнофункциональная физическая система, которая включает в себя коллайдеры (еще один термин для частей тела, которое может сталкиваться с другими частями), которые работают для большего количества фигур, а не только для квадрата. Некоторые из главных коллайдеров могут включать в себя круги, плоскости, прямоугольники, капсулы и выпуклые многоугольники. Все эти коллайдеры не обязательно должны быть выровнены по осям, так что поворот объекта повлияет на столкновения естественным образом.

  Эти коллайдеры часто используются для создания веселых и интересных игр с симуляцией физики. Общие типы игр, которые могут использовать P2, включают в себя строительно-разрушительные виды игр, типа Angry Birds, игры с приземлением или гоночные игры с грубым 2D ландшафтом, или продвинутые 2D платформеры с шаткими мостами, которые колеблются, когда игрок их перебегает их. В отличие от аркадного физического движка, эта система обрабатывает столкновения по умолчанию. После того как тело было добавлено в мир, оно всегда будет сталкиваться с другими телами.

Угловая скорость и упругость

  Есть еще один способ двигать аркадные тела на экране - через их угловую скорость и угловое ускорение. Оба эти свойства изменяют "скорость поворота" объекта игры, к которому привязано тело. Это менее используемые свойства, но их можно использовать в гонках с видом сверху или похожих играх с этим же видом.

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

function create() {
  game.physics.startSystem(Phaser.Physics.ARCADE);
  player = game.add.sprite(200, 100, "player");
  player.anchor.setTo(.5,.5);
  game.physics.enable(player, Phaser.Physics.ARCADE);
  player.body.collideWorldBounds = true;
  player.body.drag = { x: 1000, y: 1000 };
  player.body.angularDrag = 750;asteroids = game.add.group();
  asteroids.enableBody = true;
  asteroids.physicsBodyType = Phaser.Physics.ARCADE;
  for (var i = 0; i < 10; i++) {
    var asteroid = asteroids.create(game.rnd.integerInRange(20, 780), 

     game.rnd.integerInRange(20, 580), 'roid');
    asteroid.body.bounce = .9;
  }
  //управление
  cursors = game.input.keyboard.reateCursorKeys();
}
function update() {
  //запуск кода игрового цикла
  if(cursors.left.isDown) {
    player.body.angularVelocity = -200;
  }
  if(cursors.right.isDown) {
    player.body.angularVelocity = 200;
  }
  if(cursors.up.isDown) {
    game.physics.arcade.velocityFromAngle(player.angle, 200, player.body.velocity);
  }
  game.physics.arcade.collide(player, asteroids);
}