понедельник, 31 июля 2017 г.

Спрайт со спрайтом

  Самый простой случай коллизий в Phaser - это коллизии между двумя одиночными спрайтами. В следующем примере создается капля и ей дается скорость падения. Проверка столкновения вызывается в функции обновления чтобы узнать когда капля упадет на землю. После того, как она упадет, она будет уничтожена. 
  Примите к сведению, что в этом и следующих примерах необходимо создать тела для спрайтов (через вызов game.physics.enable). После подключения физического тела к спрайту станет возможным доступ ко всем свойствам и методам тела спрайта, например ускорение и скорость.


var ground, rain;
function create() {
  game.physics.startSystem(Phaser.Physics.ARCADE);
  ground = game.add.sprite(200, 400, ground);
  rain = game.add.sprite(200, 10, rain);
  game.physics.enable( [ ground, rain ], Phaser.Physics.ARCADE);
  rain.body.velocity.y = 100;
}
function update() {
  game.physics.arcade.collide(ground, rain, collisionHandler, null, this);
}
function collisionHandler (obj1, obj2) {
  obj2.kill();
}

  Проверка столкновения в физической системе arcade выполняется в функции обновления. Первые два аргумента функции collide - это объекты, которые должны проверяться на столкновение. Третий аргумент - это функция, которая вызовется после того, как объекты столкнутся.
  Аргументы для функции обработчика столкновений всегда передаются в том порядке, в котором они указаны в вызове метода collide. Из-за того, что капля была вторым аргументом в методе, вызванном в функции обновления, она будет переменной obj2 в обработчике. В этом примере мы убиваем спрайт капли, хотя мы также могли воспроизвести звуковой эффект или все что угодно в момент, когда капля касается земли.

вторник, 25 июля 2017 г.

Коллизии

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

game.physics.arcade.collide(itemOne, itemTwo, collisionCallback, 
  processCallback, context);
   Коллизии также разделят два столкнущихся объекта, отталкивая их назад в состояние, в котором они визуально не пересекаются на экране. Иногда это разделение не требуется или будет мешаться на конечной стадии игры. У Phaser есть другой метод overlap, который только проверяет, пересеклись ли объекты.

понедельник, 24 июля 2017 г.

Дерево квадрантов

  Обнаружение коллизий может быстро стать очень затратным процессов в игре с большим количеством объектов, которые нужно проверять на пересечение. Когда в игре сто объектов, которые могут касаться друг друга, это десять тысяч различных вызовов проверки столкновений между ними. Метод, который Phaser использует для уменьшения числа этих проверок, называется дерево квадрантов.
  Дерево квадрантов хранит ссылки на объекты в разных (все более меньших) квадрантах мирового мира. Если в любом конкретном квадранте находится достаточно объектов, он разобьет этот прямоугольник на четыре более меньшие четверти и продолжит хранить местоположения в этих более меньших прямоугольниках. С помощью этих деревьев квадрантов становится легко и быстро исключать группы спрайтов, которые не имеют возможности столкнуться с другими, основываясь на том, как далеко расположена одна четверть квадранта от другой. Даже с помощью обычного деления мира на четверти, возможно разделить спрайты на три четверти, в которых спрайт не существует, потенциально удаляя из процесса множество проверок столкновений.


Изменение размеров ограничивающих прямоугольников

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


  Изменение размера прямоугольника столкновений состоит из искусства и науки. Вот основой способ задать ограничивающий прямоугольник.


sprite1.body.setSize(300, 200, 20, 20);

Отладка ограничивающего прямоугольника

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


var phaserState = {
render: function() {
game.debug.body(spriteName);
}
}

воскресенье, 23 июля 2017 г.

Аркадная физика

  Как говорилось ранее, физическая система arcade в Phaser для физических тел использует исключительно параллелепипеды и прямоугольники. Технических термин для параллелепипедов, которые использует система arcade - объясняется как "параллельный осям ограничивающий параллелепипед". Это интересный способ сказать, что параллелепипеды не могут вращаться и всегда остаются зафиксированными, так что их ширина всегда означает то, какую длину они занимают по оси x, а высота - какую по оси y
  До того, как использовать любую из аркадных физик в Phaser, она должна быть инициализироанна с помощью вызова:


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

Ограничивающие прямоугольники

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


Тела

  Для работы физической системы необходимо, чтобы объекты внутри физического "мира" могли сталкиваться друг с другом. Эти объекты имеют термин "тела". Тело - это нечто, что имеет определенную форму, например прямоугольник, круг или сложную фигуру, сделанную из точек и линией и существующую в мире.
  Эти тела не являются визуальными элементами и используются только физической системой для расчета таких вещей, как изменение позиции и коллизии. Из-за того, что они не видимые объекты, они часто ассоциируются с видимыми элементами, которые будут отражать позицию и поворот физического тела на экране.
  По умолчанию, спрайты в Phaser не имеют тел, ассоциируемых с ними. Тела нужно активировать, указывая физическую систему, которую вы будете использовать. После активации, спрайты будут контролироваться телами физической системы. Например, чтобы создать тело для спрайта и добавить его в физическую систему физики arcade, вот основной подход:


var meteor = game.add.sprite(200, 0, meteor);
game.physics.enable(meteor, Phaser.Physics.ARCADE);

суббота, 22 июля 2017 г.

Фазы физической системы

  Большинство физических систему следуют основным паттернам настройки потока выполнения. Хотя наша цель заключается не в том, что разобраться в деталях того, как построить все части физического движка, будет полезно знать как они работают, чтобы можно было понять последующие примеры коды и проводить отладку будущих проблем.
  В целом, физические движки выполняют три главных шага: во-первых, они проверяют потенциальные коллизии между объектами (широкая фаза), во-вторых, они проверяют актуальные коллизии (узкая фаза), и наконец они пытаются отделить объекты, чтобы они не пересекались. Во время работы в базовой системе, как например в физическом движке arcade в Phaser, ограничивающие прямоугольники, представляющие собой физические тела объектов, достаточно легко просчитать и разделить, так что эти действия могут проходить быстро и без особых хлопот. Более продвинутые системы учитывают большее количество факторов сталкивающихся тел (таких как реституция, масса и трение) и могут иметь несколько необычных для движка фигур, которые требуют более долгих и сложных вычислений.
  Широкая фаза физического движка важна для сокращения времени обработки. После того, как в игре будет значительное количество разных сущностей, расчет их столкновений  (и запуск последующего кода разделения) может занять значительное количество времени. Во время широкой фазы, физических движок выполнит серию быстрых вычислений чтобы выяснить, какие столкновения имеют шансы на то, чтобы произойти и будет хранить список потенциальных столкновений игровых объектов, чтобы проверить их более точно. Часто это может сразу же выявить огромное количество столкновений.
  В узкой фазе движки проверяют все линии, которые составляют части части тел объектов и смотрят, находятся ли они внутри какого-либо пространства объекта, с которым можно потенциально столкнуться. Если это происходит, тогда движок отделит объекты, двигая их назад пока они не перестанут пересекаться. В системе arcade это делается автоматически а также применяются любые свойства коллизий (передача импульса в зависимости от массы, трение между двумя объектами и отскакивание). В других системах движок попробует оттолкнуть объект назад, основываясь на том, как быстро он двигался по направлению к объекту, с которым он столкнулся. Когда эти подвинутые системы начинают отталкивать объекты друг от друга, они должны учитывать все остальные объекты в системе. Для того, чтобы уменьшить эффект возникновения другой коллизии из-за отталкивания объекта обратно, система может не полностью отделить объект, чтобы другие объекты в мире имели шанс столкнуться с результирующим движением назад от столкновения. Другие физические компоненты, например трение и отскакивание так применяются к этим шагам. За несколько итераций система стремится стать разумной "готовой" версией мира без столкновений.
  Множество физических систем работают с фиксированным шагом времени. Это означает что физические расчеты будут запускаться не для каждого кадра, а в заданный временной промежуток. Знание того, сколько времени пройдет между каждым шагом позволяет движку предсказывать то, как двигать объекты во время кадров, в которых не выполняются физические вычисления. Он так же может предсказывать с некоторой степенью определенности , где в будущем могут находиться объекты (за исключением ввода пользователя). Множество этих систем фактически запустит физические вычисление за несколько кадров перед отрисовкой объектов, чтобы дать системе возможность отловить неожиданные изменения модели, такие как если бы игрок резко повернул влево в стену и повлек бы за собой столкновение десяти машин.

пятница, 21 июля 2017 г.

Объединение физических свойств

  Во время создания ваших игровых объектов, убедитесь что вы потратили некоторое время чтобы поиграть с их значениями скорости, ускорения (включая гравитацию) и трения, чтобы получить правильное "ощущение" игры, которую вы пытаетесь сделать. Эти значения скорее всего будут разными для разных объектов и важно задать их правильно. Тяжелая машина вероятно будет иметь медленное ускорение с некоторой сильной силой трения. Также машина не будет слишком сильно отскакивать, поэтому значение реституции, близкой к нулю будет предпочтительнее. Бумажный самолетик не будет иметь много сопротивление по оси x, но может иметь огромное сопротивление по оси y, что повлечет за собой очень медленное падение.

Коллизии

  Когда сталкиваются объекты, они передают энергию друг другу. Ударяя по бейсбольному мячу битой, вы передаете энергию скорости биты мячу, посылая его в полет. В то же самое время, мяч передаст некоторую часть своей энергии бите. Вот почему бэттеры (те кто бьют по мячу в бейсболе) могут чувствовать удар или почему биты могут разрушаться. Фактически переданная энергия - это множитель текущей скорости каждого объекта, их масс и их реституции. Если объекты полностью совпадают, они идеально передадут свою энергию. Два идеально летящие в противоположных направлениях коробки столкнутся, передадут их энергии и сразу остановятся. Более тяжелый объект будет требовать больше энергии для своего движения, и объекты с большей реституцией как правило будут иметь большее количество отскоков.


Реституция (упругость)

  Все объекты в мире будут отталкиваться, если их ударить. Некоторые оттолкнуться дальше остальных. Реституция - это термин, определяющий количество силы, которая вернется объекту, если он ударился во что-то. Легко увидеть разницу между отскоком мяча и камня. Бросание мяча на землю подкинет его обратно довольно высоко, тогда как камень бухнется на землю и его приключения будут закончены.
  Хотя технически реституция объекта - это очень сложные вычисления игровые движки обычно представляют ее как число между единицей и нулем. Значение реституции, равное нулю означает что объект идеально упругий. Этот "идеальный" объект падает с определенной высоты и он обязательно вернется на ту высоту, с которой он был подброшен. Реституция, равная нулю вообще не подкинет объект. Если объект с нулевой упругость ударится во что-то, он не оттолкнется и просто встанет замертво.


четверг, 20 июля 2017 г.

Трение (сопротивление)

  Трение - решающая сила, которая толкается движущийся объект в противоположном направлении. В мире без трения все скользило бы повсюду, и было бы почти неспособно остановиться. Игры без трения выглядели бы как если бы все скользило по льду, или игрок был бы в космосе. Хотя есть игры в которых это сделано намерено, множество игр полагается на сопротивление, для того чтобы объекты приводились в состояние покоя.
  Разные поверхности и зоны могу иметь разную величину сопротивления. Каменная дорога будет иметь достаточно большое сопротивление и будет быстро останавливать людей или транспорт. И наоборот, ледяная дорога не будет сильно замедлять тех, кто на ней и малейшее нажатие кнопки может иметь огромный эффект для движения. 


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


среда, 19 июля 2017 г.

Силы

  Если разобраться, то большинство физики в игре - это силы. Силы - это то, что в конечном счете изменяют скорость объекта, и чем больше сила, тем больше эффект. Силы могут иметь две формы: импульсная и постоянная. Импульсные силы действует только однажды. Некоторые примеры импульсных сил включают в себя удар по футбольному мячу или бросание объекта в воздух. Эти силы передают некую энергию игровому объекту. Постоянные силы действуют на объект постоянно и всегда его двигают. Постоянная сила, которые нам нужна чтобы каждый день, - это гравитация, хотя существует много других, например ускорение автомобиля или втаптывание земли, в то время как мы стоим на ней.


Ускорение

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



Физика для начинающих

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

Скорость

  Скорость - это темп, с которым игровой объект двигается в заданном направлении. Это решающий компонент физических свойств объекта. Без скорости не было бы изменений расположения объектов на экране и игроки пялились бы на статичные объекты.
  В Phaser все объекты имеют свою скорость, разделенную на скорость движения по осям x и y. Большая скорость в любом из направлений означает, что объект движется быстро. Меньшее число означает более медленную скорость. Нулевая скорость - самое медленное значение, что означает что объект вообще не движется.


вторник, 18 июля 2017 г.

Связывание твин-анимаций

  Множество анимаций содержат несколько разных переходов, которые должны происходить в определенной последовательности. В кат-сценах, персонаж может быть заскриптован, чтобы идти к компьютерному терминалу, подождать, и затем пройти к мотоциклу, чтобы позже ускориться. Эта цепь анимаций может быть реализована в Phaser с помощью связывания твин-анимаций. В отличие от предыдущих примеров, которые воспроизводились автоматически, эти анимации находятся в очереди и приводится в движение по команде запуска в конце цепочки


game.add.tween(robot).to({ x: 600 }, 1000, Phaser.Easing.Linear.None).
to ( {rotation: 90 }, 500, Phaser.Easing.Linear.None).
to({ y: 300 }, 700, Phaser.Easing.Linear.None).
to ( {rotation: 0 }, 500, Phaser.Easing.Linear.None).
to({ x: 100 }, 1000, Phaser.Easing.Linear.None).start();


  Игровым движкам часто необходимо симулировать физические взаимодействия вместе с беспорядками, которые им присущи. Гоночным играм нужна способность для газа, поворота и торможения для остановки. Игры с разрушением, как Angry Birds, требуют чтобы у объектов было скорость, гравитация и точно прилагаемые силы столкновений, когда птицы-снаряды достигают своих целей. Встроенные в Phaser две основные физические системы, arcade и P2 дают разработчику все инструменты для создания многих подобных игр. Физические системы имеют разные цели и требуют разное количество ресурсов компьютера, так что далее мы будем изучать это.
  В данный момент, есть две другие физические системы в Phaser. Первая, Ninja, похожа на систему arcade, за исключением того, что она вводит наклонные тайлы и возможности бега по стенам. Вторая система, Box2D, очень сильная система, которая ценна, если вам нужны полигональные коллизии между объектами и очень реалистичная физика. Box2D - это платный аддон к Phaser с отличной документацией, поэтому она не будет рассматриваться.
  Простейшая система для того, чтобы в нее вникнуть - это система arcade, которая обеспечивает довольно простой подход к необходимым элементам, таким как коллизии, гравитация и скорость. Главным недостатком этой системы является то, что она использует квадраты для обработки коллизий, делая трудным для реализации такие вещи, как наклоны или полигональные (неквадратные) формы коллизий. Из-за упрощения, эта физическая система будет работать значительно быстрее, но она может быть менее реалистичной (поэтому называется "аркадная").
  Вторая физическая система, P2, - более сильный и "реалистичный" движок. Эта система может иметь комплекс фигур (потенциально сделанных в других программах) для объектов и реализует более реалистичную физическую модель. P2 - это движок, который можно использовать, если требуется создать игру с транспортом, которые имеют толчки и тягу, обеспечиваемую контактом колес с землей. Эта мощь требует цены. P2 обычно требует больше компьютерных ресурсов, чем система arcade, и она требует больше времени для изучения чтобы действительно ее понять и использовать все, что эта система может предложить.

Смягчение анимации

  Большинство движений в жизни не происходит с одинаковой скоростью от начала и до конца. Все, что стартует на полной скорости и двигается с ней до тех пор пока внезапно не остановится выглядит очень странно и ненатурально с точки зрения человека (или ужасающе, если движение применено к человеческим фигурам). Вместо этого, большинство движений для натуральности начинают медленное движение, затем ускоряются до их максимальной скорости, и затем замедляются перед остановкой. Это применяется к широкому диапазону случаев, включая раскачивания часового маятника (или человеческой руки), ускорение и замедление автомобиля или скольжение объекта по столу, если он не сделан изо льда. Движки твин-анимации обычно будут включать набор разных функций, которые смягчают анимацию, чтобы она могла выглядеть естественно. Далее следует список встроенных функций смягчения, с кратким объяснением основных случаев использования для каждой из них.
  Каждая из этих функций смягчения имеет три разных формы: "в", "из" и "вИз". Они отсылаются к тому, когда будет применяться смягчение на анимацию. Смягчение "в" начнет медленно и затем ускоряясь, заканчивая анимацию на полной скорости. Отлично для движения объектов за экран или для анимации очень внезапных столкновений. Смягчение "из" начнет анимацию на полной скорости и замедлится перед остановкой. Это смягчение полезно для анимации объектов, которые будут появляться из-за экрана или наличия в кат-сценах персонажей, которые будут останавливаться со скольжением. Наконец, смягчение "вИз" начнет анимацию медленно  и также медленно ее закончит. Его обычно используют для случаях, в которых объект и начинает, и заканчивает движение на экране. Хорошим пример этого типа движения включается в себя движения аватара или скользящие на игровой доске объекты. 
  Смягчение ао- это тонкая вещь, которая действительно заставляет сиять анимацию, но для того, чтобы ее по-настоящему понять, нужно с ней немного поиграть. Потратьте немного времени на это и ощутите что вам кажется хорошим, а что нет. Если сомневайтесь, Exponental или Quadratic - два примера хороших функций смягчения по умолчанию.
  • Linear - первая в списке, потому что технически это не смягчение. Вместо этого, линейная твин-анимация всего лишь интерполяция без каких-либо замедления около начала и остановки. Вместо написания смягчения типов "в" или "из", используется команда смягчения Phaser.Easing.Linear.None.
  • Back - предоставляет некоторое "предвкушение" движения с помощью короткого движения в противоположную от направления смягчения сторону, фактически промахиваясь или завершая движение.
  • Bounce - достигнет своего назначенного места и затем отскочит три раза, как если бы кто-то уронил баскетбольный мяч на пол. Может быть слишком анимированной, использовать осторожно.
  • Circular - занимает особенно долгое время, чтобы ближе к концу анимации разогнаться до полной скорости. Хороший вариант для очень плавного движения, которое все еще выглядит органично.
  • Elastic - похожа на back функцию смягчения. Анимация промахнется мимо места назначения и вернется назад в последние несколько кадров. Если использовать умеренно, можно получить приятный эффект.
  • Exponential - очень быстрое движение в или из полной скорости анимации.
  • Cubic, Quadratic, Quartic, Quintic - расположены вместе, потому что они все технически имеют одну идею, но они более мощная версия друг друга. Они - менее крайняя степень Exponential версии, но все еще обеспечивают сильное смягчение движений "в" или "из".
  • Sinusoidal - одна из "плавных" функций смягчения, как и circular. Очень гладкая, хотя она может показаться немного медленной.

Свойства твин-анимации

  Хотя возможно твин-анимировать любое свойство, когда дело касается анимации визуальных элементов, существует несколько самых часто используемых свойств.
  • X, Y - самые часто используемые свойства, поскольку их можно использовать для перемещения объектов по экрану
  • scale.x, scale.y - менее используемые. Изменение масштаба объекта - хороший способ сделать псевдо-3D пространство без каких-либо сложных вычислений, которые требует настоящее 3D. Небольшое масштабирование элементов интерфейса может занять долгое время, чтобы обеспечить визуальную привлекательность. Твин-анимация масштаба - это нечто иное, чем твин-анимация других свойств. Она должна отдельной твин-анимацией, привязанной к свойству object.scale.
  • this.game.add.tween(bar.scale).to({ x: .8 }, 350);
    
  • Alpha используется для появления или исчезания. Начиная со значения, равного 0 и увеличивая его до 1 заставит объект появиться. Наоборот, уменьшение до 0 - простой способ заставить объект исчезнуть. Исчезание, в свою очередь - легкий способ смухлевать в случае смертей врагов или других переходов.

Синтаксис твин-анимации

  Главный синтаксис для твин-анимации объекта в Phaser выглядит немного странно, потому что он добавлен в игру через game.add. Твин - это по сути объект, который можно создать, хранить и воспроизвести заново если потребуется. Основной синтаксис начинает твин-анимацию объекта и указывает ему двигаться до или от свойства, указанного первым аргументом объекта. Длительность обозначается в миллисекундах, а так же может быть указан объект смягчения анимации(будет описан далее). Наконец, если вы хотите, чтобы твин-анимация воспроизводилась автоматически (что, как правило типично), установите autoStart в true.


game.add.tween(object).to({property: value}, duration, easing, autoStart);

  Например, вот твин-анимация, которая двигает игрока в позицию x, равную 400 пикселям, за 0.7 секунды. Анимация начинается сразу же и будет смягчена на основе кубической модели смягчения.

game.add.tween(player).to({x: 400}, 700, Phaser.Easing.Cubic.Out, true);

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


game.add.tween(logo).from({y: “−400}, 700, Phaser.Easing.Cubic.Out, true);

понедельник, 17 июля 2017 г.

Написание твин-анимации

  Во время написания программной твин-анимации, компьютеру нужно знать три вещи. Первое: ему нужно знать начальные значения свойств объекта, который будет анимирован (позицию или другие свойства типа прозрачности или видимости). Второе: ему нужно знать конечные значения этих же свойств. И третье: ему потребуется длительность твин-анимации.
  Из-за того, что игровые объекты на экране, анимированные с помощью твин-анимации  уже имеют визуальные свойства текущей позиции, поворота и прозрачности, можно предположить, можно предположить что начальное и конечное местоположение анимации являются теми свойствами, которые объект имеет в текущий момент. Методы анимации "от" и "до" - это разные способы указать, как использовать текущие свойства объекта в анимации в качестве значений. "От" будет начинать с текущей позиции и двигаться к указанной. Наоборот, "до" будет начинать с указанного значения и двигаться обратно к месту, где спрайт находится в данный момент.

Твин-анимация

  Твин-анимация - это способ анимации через изменение свойств объекта от одного значения к другому в течение определенного промежутка времени. Для большинства игр, анимации будут управляться через игровую физику и несколько простых запрограммированных в игровые объекты правил, как например ввод и реакция искусственного интеллекта. Эти анимации хороши, но они могут быть немного непредсказуемыми. Часто разработчику может потребоваться анимация, в которой длительность, начало и конец движения объекта заранее известны. Такой вид предсказуемой анимации обычно требуется для анимации интерфейса, чтобы например реализовать исчезание графики заставки и подпрыгивающие от ввода игрока кнопки. Игровым кат-сценам тоже могут понадобиться эти предсказуемые анимации для того, чтобы убедиться, что объект достигнет указанного месте по тем или иным причинам, так что твин-анимация - лучший выбор для реализации подобного движения.
  Термин "tween" взят из мира традиционной 2D анимации. Во время работы над анимацией, главный мультипликатор должен нарисовать две (или более) ключевые позы фигуры, которые описывают позиции критических частей анимации. Эти позы выбраны из-за их способности определить, как будет выглядеть движение между ними. Хорошим выбором двух поз может быть кадры "готовый к размаху" и "бьющий мяч" игрока в гольф. После того, как были определены две позы, к кадрам нужно добавить временные обозначения и затем работа будет передана помощнику, который нарисует все кадры между ними (или "tweens", как они их называют). В наши дни компьютер может выполнять твин-анимацию за программиста или мультипликатора, но термин сохранился.

воскресенье, 16 июля 2017 г.

Редактор Tiled

  Не смотря на то, что написание списка индексов, разделенных запятыми - не такой уж плохой способ создания игрового мира, ему не достает визуальной обратной связи, что полезно для того, чтобы убедиться что мир будет таким, каким его ожидает дизайнер. Кто-то может пойти путями для просвещенных и создать свой редактор, например использование пикселей в изображении, который будет представлять собой тайл в игре (красный значит лава), но обычно полнофункциональный тайловый редактор карт действительно ускоряет рабочий процесс для геймдизайнера, который хочет сделать игру в огромным миром, основанном на тайлах.
  Существует много тайловых редакторов карт для свободного использования. Некоторые хорошие примеры включают в себя Mappy, Tiled, DAME, и каждый из них имеет свое сообщество и богатый выбор функций. По сути, создать тайловый редактор карт достаточно легко, поэтому многие программисты (к лучшему или к худшему) пишут свой собственный редактор вместе использования готового решения. Если вы собираетесь использовать такой редактор, Tiled - это выбор для разработчиков игр на Phaser.
  Вообще он включает в себя несколько дополнительных функций, помимо обычной расстановки тайлов, что может превратить его в почти полнофункциональный редактор уровне, если им правильно пользоваться. Дополнительные функции Tiled (которые поддерживает Phaser) - это возможность иметь несколько слоев тайлов и помещать другие ресурсы там, где он должны появиться в игровом мире. Хотя Phaser автоматически не распознает нетайловые ресурсы, которые расположены в игровом мире, он может получить доступ к данным, которые можно использовать позже для размещения дверных проемов, врагов или предметов, которые нужно будет искать игроку. 
  У Tiled есть установщики для всех операционных систем, которые можно найти на сайте http://www.mapeditor.org/.

Загрузка тайловых карт

  Вот обычный способ загрузки тайловых карт в формате, который мы будем позже использовать (формат редактора Tiled).


game.load.tilemap(map,as sets/tilemaps/maps/tilemap.json,
 null, Phaser.Tilemap.TILED_JSON);

  Подобно атласам спрайтов, существует несколько форматов тайловых карт. Есть два разных формата, в которых эти карты можно загрузить в Phaser. Первый это Phaser.Tilemap.CSV, который является обычным массивом чисел? разделенных запятыми. Это очень похоже на 2D пример массива карты, описанный ранее. Второй формат - Phaser.Tilemap.TILED_JSON из программы Tiled, который можно использовать как вариант полнофункционального редактора уровней для Phaser. Этот формат содержит несколько дополнений, включая несколько слое карты и дополнительные зоны, которые можно использовать для расположения объектов с необходимыми дополнениями.

пятница, 14 июля 2017 г.

Тайловые карты

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


var tileMap = [
[1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,0,1],
[1,0,0,1,1,1,0,0,1],
[1,0,0,0,0,0,0,0,1],
[1,1,1,1,2,1,1,1,1]
];


  Следующий шаг для тайлового движка после получения данных цифровой карты - это использование этих чисел для отрисовки наглядной карты. Изображение набора тайлов нужно создать из тайлов, которые можно будет использовать для каждого их номера. Ниже пример изображений набора тайлов. Каждый тайл должен быть одинакового размера, и обратите внимание, что всего три вида тайлов, один для каждого из чисел в цифровой карте. Белый тайл это 0, камень это 1, и череп это 2.


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


  После того как карта была нарисована, следующим шагом будет получение игрока и других игровых объектов карты. Коллизии тайлов станут следующей проблемой, для того чтобы тайловая карта работала корректно. Если ни с одним тайлом нельзя столкнуться, карта будет просто бесполезной. Игрок будет проходить падать вниз или проходить через все тайлы. И наоборот, если он будет сталкиваться со всеми тайлами, ничто в игровом мире не сможет сдвинуться с места. 
  Обычно движки имеют способ настроить, какие тайлы "открыты" и какие должны считаться твердым объектом, через которые игрок не может пройти. Для этой тайловой карты, установка нулевого тайла (белого тайла) как "открытого" даст игроку достаточно пространства для перемещения, в то время как он не сможет вылететь за границу игрового мира.
  Более продвинутые тайловые движки (и редакторы, которые входят в их комплект) могут добавлять еще больше атрибутов для каждого тайла. Ветер, смертельные зоны, ядовитые области - все это допустимые атрибуты, которые могут иметь тайлы и которые вычисляются внутри тайлового движка, после того как он запускает свой код проверки коллизий игрока с другими игровыми объектами.

четверг, 13 июля 2017 г.

Сцены

  Простейший способ для того, чтобы представить карту в виде сцены, - это думать обо всем на карте, размещенные в космосе. Для начала это помогает представить объекты как космические. Хотя, технически, все планеты в космосе движутся быстро, для простых игр, они могут быть представляться как просто неподвижные. Сцена похожа на огромное пространство с объектами, размещенными по всюду. Фактически, одно из лучших использований уровней сцены - это использование для космических игр, в которых телесность может быть представлена не лучшим образом через схемы или жесткое позиционирование. Однако, также сцены хороши для более натуральных игр (как например подводные системы или более сложные платформеры), в которых система сетки будет казаться слишком неуместной и неестественной. Это также тип системы, которую используют 3D игры для представления местоположения всех объектов карты в игры. 
  При использовании системы сцены для игр, которые должны работать как 2D платформеры, платформы должны не иметь гравитации и тип их физических тел должен быть статическим. Поскольку еще нет хорошего редактора сцен для Phaser, каждый объект мира должен быть создан и помещен в сцену в методе создания, входящем в игровое состояние. Вот пример базового подхода, в этом примере группа объектов устанавливается как поверхность, и любой объект, добавленный в эту группу будет вести себя как поверхность. В сущности, мир, созданный в этом примере будет состоять из ряда размещенных платформ (или стен), которые не будут двигаться, когда игрок столкнется с ними.

function setup() {
game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.arcade.gravity.y = 250;
player = game.add.sprite(200, 100, player);
player.anchor.setTo(.5,1);
game.physics.enable(player, Phaser.Physics.ARCADE);
player.body.drag.x = 1000;
ground = game.add.group();
ground.enableBody = true;
ground.create( 100, 500, ground);
ground.create( 100, 400, ground);
ground.create( 300, 400, rockyGround);
ground.setAll(body.immovable, true);
ground.setAll(body.allowGravity, false);
}
\
  Этот процесс создания каждого отдельного куска уровня и добавления его внутрь функции создания вручную может быстро выйти из под контроля, когда мы имеем дело с огромными уровнями, которые нужно загрузить и настроить. Другой подход, который поможет уменьшить необходимость жестко прописывать данные уровня в функции настройки - это создание набора данных уровня. Этот набор данных может представлять объекты на сцене и указать, где должна быть размещена их графика. Лучший формат данных для использования, когда необходимо немного дополнительных данных для игры - это формат JSON. Вот очень простой пример, как может выглядеть описание JSON уровня.

{
ground: [
{ x: 100, y: 500, key: ground },
{ x: 100, y: 400, key: ground },
{ x: 300, y: 400, key: rockyGround }
]
}

  Формат JSON указывает ключи используемых ресурсов, которые ссылаются на ресурсы в кэше ресурсов Phaser. Он также дает координаты для расположения ресурсов после их создания. Этот конкретный пример только для поверхности, но другие объекты могут быть созданы и указаны в других массивах с названиями "собираемое", "враги" или "ловушки". Следующие шаги в процессе загрузки данных и последующее использование данных для создания объектов на сцене, что делает их неподвижными объектами поверхности в игре, как и раньше:


function preload() {
game.load.json(scene_data,data/scene_data.json);
}
function setup() {
var sceneData = game.cache.
getJSON(scene_data);
ground = game.add.group();
ground.enableBody = true;
var currentObject;
for(var i = 0; i < sceneData.ground.length; i++) {
currentObject = sceneData.objects[i];
ground.create(currentObject.x, currentObject.y, currentObject.key);
}
ground.setAll(body.immovable, true);
ground.setAll(body.allowGravity, false);
}

  При условии, что другие ресурсы были загружены раньше, мы добавляем новую строку в метод предварительной загрузки, которая загружает данные JSON файла. Любой загруженный файл JSON может быть доступен из кэша Phaser через "game.cache.getData". При доступе он возвращает объект JavaScript, который может быть доступен через оператор точки, как и любой другой объект JavaScript. Используя этот подход к размещению сцены, становится легко отделять объекты сцены от кода, который фактически выполняет все настройки игрового состояния. Одно потенциальное преимущество этого метода - повышенный шанс того, что фактическое расположение игрового мира может иметь место и в другом приложении, которое просто экспортировало JSON для его использования в Phaser.

вторник, 11 июля 2017 г.

Карты

  Многие люди, думающие о возможности создания игр, мечтают о создании сочных миров и окружении, в которых будет обитать игрок. Размещение всех этих участков мира с помощью кода становится довольно времязатратной задачей. Для усугубления проблемы создания игрового мира, если бы каждая отдельная часть мира, отражающаяся в игре, являлась бы уникальной графикой, игра бы имела слишком много ресурсов для загрузки, и ожидание отняло бы любое желание игроков поиграть в нее. Также плохо что художнику игры пришлось быть работать вечно, чтобы создать все эти меленькие кусочки игр, что привело бы к чрезвычайно долгой разработке игры. Повторное использование ресурсов и создание карты, основанное на графическом интерфейсе решают эти проблемы, и каждый из них будет рассмотрен далее.
  Два главных подхода к созданию карт для игр - это сцены и схемы. Сцены - это форма карты, в которой объекты не нужно помещать конкретные области и они могут занимать столько места, сколько захотят. Схемы намного более строгие, они имеют пространства, выделенные для разных объектов, которые могут занимать на экране заданные ширину и высоту. Каждый из них имеет свои преимущества и недостатки, которые еще будут обсуждены, хотя на данный момент тайловый редактор карт - единственный победитель для самой лучшей системы отображения в Phaser.
  Не смотря на то, что Tiled - сильнейший редактор карт на данный момент, он не всегда лучший инструмент для создания карт для Phaser. Следи за форумами Phaser, поскольку сообщество кажется быстро движется к созданию более специфичных для Phaser инструментов. Есть хорошие шансы что будет хотя бы один, если не более редакторов карт, написанных специально для Phaser и которые будут примерно так же хороши, как Tiled, когда вы захотите создать карту для вышей собственной игры.



понедельник, 10 июля 2017 г.

Добавление маркеров и воспроизведение аудио спрайтов

  В действительности, аудио спрайты - это просто маркеры, которые указывают, когда начать и как долго воспроизводить. Так же возможно добавить маркеры к аудио внутри самого игрового кода и затем использовать маркер для воспроизведение звука с начальной точки маркера и с его длительностью.
  Метод добавления маркера требует по крайней мере три аргумента: имя маркера для дальнейшего проигрывания звука, время, когда звук начинается (в секундах) и длительность этого звука (в секундах) Следующий код добавляет маркер вручную и затем проигрывает звук этого маркера. Позже, при вызове воспроизведения, просто передайте имя маркера строкой для того чтобы воспроизвести звук из списка маркеров.


sounds = game.add.audio(sounds);
sounds.allowMultiple = true;
sounds.addMarker(gameMusic, 2, 1.2);
sounds.play(gameMusic);

  Еще один важный элемент, который следует учитывать при использовании аудио спрайтов заключается в том, что необходимо установить свойство allowMultiple в значение true, что позволит звукам проигрываться несколько раз (полезно для одиночных звуков, которые могут срабатывать несколько раз для воспроизведения множества разных экземпляров одного звука, например звуковой эффект стрельбы с повторением звука пули).
  Если звуки были загружен как аудио спрайт, то маркеры будут добавлены автоматически. Предыдущий код может быть упрощен с помощью удаления метода добавления маркеров.


sounds = game.add.audio(sounds);
sounds.allowMultiple = true;
sounds.play(gameMusic);

Использование инструмента Audiosprite

  Инструмент Audiosprite довольно прост в использовании, после того как вы загрузили и установили его. К командной строке перейдите к папке с коллекцией с аудио файлами, которые вы хотите включить в спрайт. Им не обязательно быть в одинаковом формате. Например, если у вас есть файл "sound.wav" и somemusic.mp3” (или столько звуков, сколько вам нужно), вы можете ввести эту команду:


audiosprite --output audioSpriteName sound.wav somemusic.mp3


  Эта команда возьмет разные звуки и соединит их, создав в той же папке  звук с именем audioSpriteName” в четырех разных форматах: MP3, M4A, AC3, и OGG. После запуска этой команды, в том каталоге появятся четыре новых файла вместе файлом audioSpriteName.json, который содержит данные о длительности и время начала каждого звука в комбинированном файле. Эти четыре аудио файла и файл JSON нужно положить в вашу папку ресурсов для последующей загрузки в игру.

воскресенье, 9 июля 2017 г.

Установка кодеков

  Мы установили только утилиты командной строки для создания аудио спрайта, но не установили кодеки, необходимые для создания аудио файлов. Процесс установки кодеков зависит от операционной системы.
  Для установки кодеков для Windows, следуйте этим шагам:
  Скачайте ffmpeg с http://ffmpeg.zeranoe.com/builds/ .Извлеките файлы в постоянный (неизменяемый) каталог на вашем компьютере (например C:/dev/ffmpeg). После извлечения отредактируйте путь к Windows, чтоб включить каталог bin папки ffmpeg внутрь корневой папки ffmpeg. В случае этого примера каталога папка, которую надо будет добавить в путь Windows будет C:/dev/ffmpeg/bin.
  Путь в Windows - это список из нескольких каталогов, в которых находятся программы, которые можно запустить из командой строки. Он может быть изменен с помощью меню Система      ->     Расширенные настройки системы
->Переменные среды. Выберите путь в списке системных переменных и нажмите изменить. Добавьте точку с запятой (;) к концу списка и затем добавьте путь к ffmpeg. Нажатие "ok" обновит путь, но вам нужно будет закрыть и снова открыть командную строку для чтобы произвести изменения.

четверг, 6 июля 2017 г.

Генерация аудио спрайта

  Хотя и возможно вручную создать аудио файл, который представляет собой комбинацию множества звуков с добавлением ряда маркеров в код, которые указывают начало отдельных звуков в аудио файле, гораздо легче использовать программу, которая сможет создать аудио спрайт автоматически. Генератор аудио спрайтов соединит ряд аудио файлов в один, преобразует скомбинированный файл в разные форматы (OGG, MP3 и WAV) и создаст JSON файл, который сообщит Phaser где какой звук в спрайте находится.
  Инструмент, который генерирует такой файл и идеально работает с Phaser - это tonistiigi’s audiosprite generator. Это инструмент платформы Node.js, поэтому следующие несколько команд вводятся в командную строку prompt или терминал.
  Чтобы установить аудио спрайт глобально, введите эту команду в командную строку.


npm install -g audiosprite

Экспорт из PhysicEditor   Когда все фигуры удовлетворяют вашему вкусу и вы готовы перенести работу в Phaser, необходимо экспортировать д...