Как создать анимацию в Phaser с текстурным атласом

  1. Создание текстурного атласа для Phaser

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

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

Атлас текстуры помещает все ваши спрайты в один файл (во многом как обычная таблица спрайтов) и использует либо файл XML, либо JSON, чтобы описать, где начинается и заканчивается каждый спрайт (что-то вроде карты HTML, если вы помните, когда-либо использовали их). Посмотрите на следующий пример атласа и таблицы спрайтов, которые мы могли бы использовать с Phaser:

(извините за линии водяных знаков, я купил эти спрайты, поэтому, к сожалению, не могу ими поделиться!)

Сначала я начал использовать спрайт-листы для своих анимаций, потому что это первое, с чем я столкнулся и предположил, что именно так должны быть сделаны спрайтовые анимации, однако после прочтения этого ответа Ричарда Дейви:

Я переключился на использование атласа вместо этого. Ричард - создатель Phaser, поэтому можно с уверенностью сказать, что он, вероятно, знает, о чем говорит.

По сути, вы можете делать все, что можете, с помощью таблицы спрайтов с атласом и:

  • Атлас использует меньше памяти и пропускной способности
  • При использовании атласа каждый элемент рисуется только один раз (спрайт-лист перерисовывается каждый кадр)
  • Не все кадры должны быть одинакового размера при использовании атласа.
  • Проще ссылаться на кадры по имени, а не по индексу

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

Создание текстурного атласа для Phaser

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

Эти инструменты сделают так, чтобы все спрайты, которые вы загружаете, были упорядочены в один файл .png , и они также создадут файл JSON или XML, который описывает координаты, где начинается и заканчивается каждый спрайт, чтобы Phaser знал, как отображать Это.

Создайте файл spriteatlas.png и spriteatlas.json ИЛИ файл spriteatlas.xml

Как я уже упоминал, существует множество способов сделать это в зависимости от того, какой инструмент вы используете (технически, вы даже можете создать себя, используя такую ​​программу, как Photoshop, хотя я бы не рекомендовал ее). Если вы используете бесплатный инструмент Я упоминал ранее, вы должны загрузить все спрайты, которые вы хотите включить в атлас в поле, показанном ниже:

и загрузите файл .png, который генерируется при условии. Вам также следует изменить раскрывающийся список с надписью «Текст» следующим образом:

в XML или JSON-TP-Array в зависимости от того, хотите ли вы использовать XML или JSON (я буду использовать JSON для остальной части этого примера), а затем загрузите полученный файл. После того, как вы загрузите несколько изображений, текстовое поле на изображении выше будет содержать ваш файл JSON или XML.

Поместите оба файла .png и .xml OR .json в папку с игровыми ресурсами.

Нам нужно будет загрузить оба этих файла в игру, чтобы вы оба поместили их в папку ресурсов. Файл .png, вероятно, довольно очевиден, но давайте посмотрим на файл .json (как я уже сказал, я буду использовать JSON для остальной части этого урока, но версия XML в основном та же идея, просто немного отличное форматирование).

`` `javascript" filename ":" dying1 "," frame ": {" x ": 954," y ": 256," w ": 230," h ": 296}," повернут ": false," обрезан " ": false," spriteSourceSize ": {" x ": 0," y ": 0," w ": 230," h ": 296}," sourceSize ": {" w ": 230," h ": 296 }}, {"filename": "dying2", "frame": {"x": 522, "y": 905, "w": 246, "h": 294}, "повернут": false, "обрезано" ": false," spriteSourceSize ": {" x ": 0," y ": 0," w ": 246," h ": 294}," sourceSize ": {" w ": 246," h ": 294 }}, <p> Это пример из игры, которую я сейчас создаю, и показывает два кадра из моего файла атласа (все остальные файлы я выбросил, потому что это очень длинный файл). Важными частями здесь являются то, что он предоставляет имя для конкретного спрайта, а также предоставляет координаты того, где он расположен на изображении. </ p> <p> Теперь, если мы ссылаемся на определенный спрайт по имени его фрейма, Phaser будет знать, как его отобразить. </ p> <h3> Создание анимации в Phaser с использованием атласа текстуры </ h3> <p> Способ создания анимации с помощью атласа очень похож на способ создания анимации для таблицы спрайтов, но немного отличается. Во-первых, давайте загрузим наши активы. </ p> <blockquote> <p> Добавьте следующий код в свой метод <strong> предварительной загрузки </ strong>: </ p> </ blockquote> `` `javascript //this.game.load.atlasXML('mysprite ',' assets / sprites.png ',' assets / sprites.xml '); this.game.load.atlas ('mysprite', 'assets / sprites.png', 'assets / sprites.json'); <p> <strong> ПРИМЕЧАНИЕ: </ strong> <em> В приведенном выше примере я использовал файл JSON для атласа, если вы используете XML, обязательно используйте вместо него функцию <strong> atlasXML </ strong>. </ em> </ p> <p> Далее мы добавим спрайт в игру (так же, как любой спрайт) и создадим для него анимацию. </ p> <blockquote> <p> Добавьте следующее в метод <strong> create </ strong> основного состояния ваших игр </ p> </ blockquote> `` `javascript this.sprite = me.game.add .sprite (me.game.world.centerX, 300, «mysprite»); this.sprite.animations.add («умирает», Phaser.Animation.generateFrameNames («умирает», 1, 6), 5, верно); <p> Как вы можете видеть, вызов функции <strong> animations.add () </ strong> аналогичен тому, что вы обычно делаете, за исключением того, что здесь я использую вспомогательный метод <strong> generateFrameNames </ strong>. Вам нужно предоставить массив имен фреймов, которые будут составлять анимацию в качестве второго параметра, и вместо того, чтобы записывать все это вручную, <strong> generateFrameNames </ strong> автоматически создаст для вас массив имен, если они находятся в общий формат. </ p> <p> У меня есть 6 спрайтов, которые составляют мою анимацию смерти: </ p> <ul> <li> dying1.png </ li> <li> dying2.png </ li> <li> dying3. png </ li> <li> dying4.png </ li> <li> dying5.png </ li> <li> dying6.png </ li> </ ul> <p> Так что вместо того, чтобы писать все это вручную я использую это: </ p> `` `javascript Phaser.Animation.generateFrameNames ('dying', 1, 6); <p> В качестве префикса я указываю 'dying' и указываю начало как 1, а конец как 6, чтобы он генерировал следующий массив: </ p> `` `javascript

['dying1', 'dying2', 'dying3', 'dying4', 'dying5', 'dying6'];

<p> Существуют также дополнительные параметры, которые вы можете добавить в эту вспомогательную функцию для разных форматов имен файлов, например, вы могли бы вместо этого назвать ваши файлы как-то вроде <strong> dying_0001.png </ strong>. Вы можете ознакомиться с полной документацией по функции <a href="http://phaser.io/docs/2.4.3/Phaser.Animation.html#.generateFrameNames"> здесь </a>. Конечно, вы также можете просто написать это вручную, если хотите, но когда у вас есть анимация длиной 20 кадров, это, безусловно, помогает ускорить разработку, а также делает ваш код более чистым. </ p> <p> Теперь осталось только воспроизвести анимацию. </ p> <blockquote> <p> Добавьте следующий код для воспроизведения анимации: </ p> </ blockquote> `` `javascript this.sprite.animations.play ('dying'); <p> и у вас должно получиться что-то вроде этого: </ p> <p> <a href="https://www.joshmorony.com/media/2015/09/phaser-depth-animation.gif"> <img src = "https://www.joshmorony.com/media/2015/09/phaser-depth-animation.gif" alt = "Анимация Phaser Atlas" width = "463" height = "743" class = "aligncenter size-full wp-image-3360 "/> </a> </ p> <p> На самом деле это не моя анимация смерти, а моя анимация плавания, но вы поняли! </ p> <h3> Резюме </ h3> <p> Что мне действительно нравится в использовании текстурного атласа над листом спрайтов, так это то, что вам не нужно беспокоиться о том, чтобы все ваши спрайты имели одинаковый размер (что может не желательно для вашей игры), и это позволяет создавать анимации очень просто, ссылаясь на имена файлов (особенно с помощью <strong> generateFrameNames </ strong>), а не указав имена фреймов по номерам, как в моем другом уроке , </ p> <p> Если вы используете спрайт-листы для анимации, я настоятельно рекомендую переключиться на атлас. </ p> <div class = "rfvft5bdadd781dcd4"> <ins class = "adsbygoogle" style = "display: block" data-ad-format = "autorelaxed" data-ad-client = "ca-pub-1731118875740147" data- ad-slot = "6944256848"> </ ins> <h3> Что смотреть дальше ... </ h3> <div style = "position: относительный; padding-bottom: 56,25%; padding-top: 25px; высота: 0; "> <iframe style =" position: absolute; top: 0; left: 0; ширина: 100%; высота: 100%; " width = "560" height = "315" src = "https://www.youtube.com/embed?listType=playlist&list=PLvLBrJpVwC7ocO1r-xu218C15iE9gTWBA" frameborder = "0" allowfullscreen> </ iframe> </ div> </ DIV>Com/embed?