Как создать анимацию в 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>

Похожие

Microsoft начинает помечать uTorrent как вредоносное ПО
Этот сайт может зарабатывать партнерские комиссии по ссылкам на этой странице. Условия эксплуатации , Популярный торрент-клиент, известный как uTorrent, имеет миллионы пользователей, многие из которых используют его уже десять лет. uTorrent (или микро-торрент, как его иногда называли) приобрел популярность, оправдав свое имя минималистского, быстрого торрент-менеджера. В последние годы это стало раздутым и неуклюжим.
Как исправить проблему с «слишком большой мощностью» на iPad?
... для iPad, один с USB-портом на конце и один с гнездом для SD-карты"> Apple продает два адаптера камеры для iPad, один с USB-портом на конце и один с гнездом для SD-карты. Для 30-контактных iPad эти два пакета поставляются в комплекте, в то время как для нового iPad-адаптера Lightning требуются более дорогие версии, которые продаются отдельно. Эти адаптеры были действительно полезны, но пару лет назад Apple наложила ограничение на программное обеспечение, ограничив выходную мощность адаптеров
Как отобразить элементы с помощью метода Map в Java 8
Представьте, что у вас есть набор значений температуры в градусах Цельсия, которые необходимо преобразовать в градусы Фаренгейта. До Java 8 вам нужно было бы перебирать коллекцию и преобразовывать каждое показание температуры в отдельности. В Java 8 преобразование каждой температуры может быть сделано только в одной строке кода. Ключом к достижению этой цели является использование метода map класса Stream. Этот метод отображает (т.е. переводит) каждый элемент коллекции на основе заданной
Любовная головоломка или головоломка как мотив для свадьбы и свадьбы
Еще одно вдохновение Zankyou на ведущую тему свадьбы и свадьбы - головоломка. Мотив может показаться простыней, однако он очень креативный и используется с фантазией, может быть очень интересной темой свадьбы. Загадкам можно придать символическое измерение, и тогда картонные элементы станут идеально подходящими для двух разных людей. Так как же вы можете использовать причудливо нарезанные кусочки целого, чтобы оживить и украсить день нашей свадьбы? Приглашения
Как изменить друзей Facebook, которые могут видеть вас в Интернете
Реклама Facebook довольно открыто говорит о своих целях: компания мечтает о мире, в котором каждый всегда на связи. Возможно, поэтому так сложно появляться в офлайн-чате в Facebook. Сама идея «офлайн» или «невидимка» является антитезой всему, во что верит социальная сеть. Однако быть «невидимым» не для всех. К счастью, возможно сохранить завесу конфиденциальности, в то же время сообщая своим близким друзьям и семье, что вы готовы к разговору. Вот как решить, какие друзья
Антивирус для iPhone, существует?
Может показаться странным, что «Лаборатория Касперского» не предлагает антивирусное приложение для iOS, но есть хорошее объяснение: Apple не поддерживает антивирусные приложения в App Store, поскольку состояния что «Apple разработала платформу iOS с очень безопасным ядром» и, следовательно, ее операционной системе не требуется антивирус. Это кажется высокомерным, но это не абсурдная маркетинговая стратегия:
Как полностью отключить Wi-Fi и Bluetooth в iOS 11 для всех сетей и устройств
... для любых соседних сетей Wi-Fi. Как полностью отключить Bluetooth в iOS 11 Чтобы полностью отключить Bluetooth-радио на вашем устройстве, выполните следующие действия: 1) Запустите приложение « Настройки» . 2) Коснитесь Bluetooth в списке. 3) Установите переключатель Bluetooth в положение OFF. Это полностью отключит Bluetooth-радио в
Антивирус для iPhone - он вообще существует?
Может показаться странным, что «Лаборатория Касперского» не предлагает антивирусное приложение для iOS, но есть веская причина: Apple не допускает никаких надлежащих антивирусных приложений в App Store, поговорка «Apple разработала платформу iOS с безопасностью в своей основе» и что операционной системе не нужна антивирусная утилита. Это звучит довольно высокомерно, но это не маркетинговая ерунда: Apple iOS действительно
Фотокниги в Google Фото теперь доступны в Польше
Google наконец-то представляет сервис Photobook в Польше прямо в Google Photos. Вы можете заказать физический альбом, созданный в приложении или на странице Фото. Я делаю около 10000 каждый год. изображения. Большинство из них созданы для нужд работы, но меньшая часть ежегодной коллекции, то есть мои личные фотографии, определенно важнее. В течение многих лет я опирался на проверенную систему: чтобы не утонуть во множестве фотографий, я делаю как минимум
Как просмотреть исходный код HTML в Microsoft Word
Обновлено: 24.01.2008 от Computer Hope Microsoft Word поддерживает возможность сохранения любого документа в виде веб-страницы. Однако, хотя можно сохранить документ в виде веб-страницы, нет способа просмотреть исходный код в самых последних версиях Microsoft Word. Microsoft Word 2007, 2010 и более поздние версии Как упомянуто выше, нет никакого
Как смотреть Бумеранг онлайн без кабеля: развлекайте своих детей
Когда у вас есть дети, вы фантастически знакомы со всеми каналами, подходящими для их возрастной группы, включая такой, как Бумеранг. Так что, если вы планируете обрезать шнур и беспокоитесь, вы не сможете вернуть своим детям их любимые шоу, знайте, что вы можете смотреть Бумеранг без кабеля довольно легко. «Бумеранг» - это канал, который существует с начала 90-х годов, и в нем есть множество классических и современных анимационных шоу, которые понравится даже родителям во время путешествия

Комментарии

Например, как мы празднуем как виртуальная команда и как мы проводим каникулы вместе?
Например, как мы празднуем как виртуальная команда и как мы проводим каникулы вместе? Поэтому на этой неделе мы собираемся потратить немного времени, чтобы поговорить о праздничных вечеринках для виртуальных команд. Теперь, когда мы работаем с глобальными командами, это возможность узнать о целой куче праздников. Поэтому первое, что я рекомендую для виртуальной команды, - это создать календарь праздников вместе и просто наметить, где все праздники для вашей виртуальной команды, это очень удобно,
Как работают фотокниги Google и сколько они стоят?
Как работают фотокниги Google и сколько они стоят? Служба Photobook доступна как в мобильном приложении Google Фото, так и в настольной версии страницы. Вы можете увидеть его в меню слева как совершенно новый отдел. В нем можно создать одну или несколько фотокниг, а черновики хранятся на сайте, поэтому вы можете создавать фотокниги даже на несколько вечеров, используя разные устройства.
Возникает вопрос: что на практике могут означать все эти изменения для издателей и брендов, какие последствия их ждут в ближайшие месяцы и как они должны реагировать?
Возникает вопрос: что на практике могут означать все эти изменения для издателей и брендов, какие последствия их ждут в ближайшие месяцы и как они должны реагировать? В этом вопросе выступили эксперты в области социальных сетей в анализах, подготовленных для Wirtualnemedia.pl. Сложнее бороться за новостную ленту Анна Роботицка, управляющий партнер агентства FaceAddicted / Amin Worldwide, подробно обсуждает последние изменения политики Facebook, пытаясь предсказать их
Как вы можете проверить, как мы попадаем в этот рейтинг сайтов?
Как вы можете проверить, как мы попадаем в этот рейтинг сайтов? Было несколько способов . Многие сайты имеют встроенные плагины, которые отображают свой собственный Page Rank. Вы можете проверить Page Rank самостоятельно на многих страницах сети, где находятся соответствующие модули. Достаточно было ввести название страницы и дождаться результата. Не менее популярным способом проверки рейтинга в Google было использование расширений для популярных
Как это случилось, спросите вы?
Как это случилось, спросите вы? «Это потрясающе. Быть удостоенным чести вашей страны - одна из самых высоких вещей. Я не рыцарь, я офицер совершенно высшего ранга. Я был действительно взорван. Я до сих пор не знаю, что сказать. Я очень благодарен. Приятно, когда тебя поддерживает твоя страна. Я
Какое значение делает React Native принести на сцену, и как мы можем убедиться, что приложения, созданные с его помощью, хорошо приняты целевой аудиторией?
Как это случилось, спросите вы? «Это потрясающе. Быть удостоенным чести вашей страны - одна из самых высоких вещей. Я не рыцарь, я офицер совершенно высшего ранга. Я был действительно взорван. Я до сих пор не знаю, что сказать. Я очень благодарен. Приятно, когда тебя поддерживает твоя страна. Я
Так как справиться с ситуацией, когда после запуска устройства оказывается, что нашего языка нет в списке поддерживаемых и поддерживаемых?
Так как справиться с ситуацией, когда после запуска устройства оказывается, что нашего языка нет в списке поддерживаемых и поддерживаемых? Перед началом каких-либо действий стоит помнить две вещи: вы всегда должны делать резервные копии данных на нашем устройстве и что, если вы только что купили телефон, вам будет удобнее попробовать установить польский перед добавлением каких-либо данных или восстановлением копий с предыдущего устройства. , Случай 0 - программное
Что такое вредоносное ПО и как определить, подвержен ли мой компьютер влиянию?
Что такое вредоносное ПО и как определить, подвержен ли мой компьютер влиянию? Под вредоносным ПО понимаются все вредоносные программы, такие как шпионское , рекламное или вирусное ПО , которые влияют на производительность и безопасность вашего компьютера. Компьютеры, как правило, заражаются вредоносным ПО в результате таких действий в Интернете, как загрузка файлов или просто просмотр веб-страниц. Таким образом,
Абра акции - как использовать?
Абра акции - как использовать? Если вы выбрали один из указанных выше кодов скидок и не знаете, как его использовать, воспользуйтесь нашим советом. Скопируйте сгенерированный для вас код скидки и перейдите в предварительный просмотр виртуальной корзины в файле abra-meble.pl. Найдите место для ввода кода скидки , вставьте его и подтвердите ваш заказ. Система автоматически добавит скидку к вашему заказу.
Помните, когда я сказал думать о & как всегда, ссылаясь на родительский селектор?
Помните, когда я сказал думать о & как всегда, ссылаясь на родительский селектор? Например: .button {color: #ffffff; цвет фона: # 2980b9; .page-contact & {background-color: # e67e22; }} Здесь мы перемещаем родительский селектор именно туда, где он нам нужен, таким образом, он очень контекстуален кнопке. Это действительно полезно для определения селектора на основе другого родителя, в данном случае класса контактной страницы.
Каковы некоторые из ваших идей для блоггеров как блогер моды и стиля?
Каковы некоторые из ваших идей для блоггеров как блогер моды и стиля? Какая из ваших любимых идей в блоге о моде? Поделитесь с нами в разделе комментариев! Если вам нужно больше вдохновения, посмотрите наш пост на влиятельные лица, чтобы следовать для SS18. Нужна подсказка для вашего первого или пятидесятого модного блога? Загрузите наш бесплатный шпаргалку и получите

Com/embed?
Как исправить проблему с «слишком большой мощностью» на iPad?
Так как же вы можете использовать причудливо нарезанные кусочки целого, чтобы оживить и украсить день нашей свадьбы?
Например, как мы празднуем как виртуальная команда и как мы проводим каникулы вместе?
Как работают фотокниги Google и сколько они стоят?
Возникает вопрос: что на практике могут означать все эти изменения для издателей и брендов, какие последствия их ждут в ближайшие месяцы и как они должны реагировать?
Возникает вопрос: что на практике могут означать все эти изменения для издателей и брендов, какие последствия их ждут в ближайшие месяцы и как они должны реагировать?
Как вы можете проверить, как мы попадаем в этот рейтинг сайтов?
Как это случилось, спросите вы?
Как это случилось, спросите вы?