Преобразовать флеш игры в HTML5

Flash медленно отказывается от Adobe в пользу HTML5 и JavaScript; Его официальный конец в конце концов устанавливается за 2020 год. И вот где эта статья придет пригодна.

• Восстановите Flash веб-сайт 2004 года на 2018 год

Советы, описанные ниже, целью, чтобы помочь разработчикам игры HTML5 избегают распространенных ошибок при преобразовании Flash Games в JavaScript, а также для того, чтобы весь процесс разработки идут как можно гладко. Все, что вам нужно, это базовые знания JavaScript, WebGL и Phaser Framework.

Изменение дизайна игры от SWF на JavaScript может дать лучше Пользовательский опыт , что, в свою очередь, дает ему современный вид. Но как это сделать? Вам нужен преданный конвертер игры JavaScript для избавления от этой устаревшей технологии? Ну, Flash в преобразование HTML5 может быть кусок пирога - вот какой опытный застройщик JavaScript должен сказать по этому вопросу.

Хотелось бы сохранить ваш дизайн процесса просто? А. Строитель сайта и право веб хостинг Поставщик может держать его таким образом.

01. Улучшите опыт игры HTML5

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

• Поддержка мобильных устройств
  Преобразование от Flash в JavaScript позволяет достичь более широкой аудитории - пользователи поддержания мобильных устройств для элементов управления сенсорным экраном, обычно должны быть реализованы в игру. К счастью, устройства Android, и iOS теперь также поддерживают WebGL, поэтому 30 или 60 рендеринга FPS обычно могут быть легко достигнуты. Во многих случаях 60 кадров в секунду не приведут никаких проблем, которые будут улучшаться только со временем, поскольку мобильные устройства становятся все более и более и более эффективными.
• Улучшение производительности
  Когда дело доходит до сравнения ActionScript и JavaScript, последний быстрее. Кроме того, преобразование игры - это хороший случай для пересмотра алгоритмов, используемых в игровом коде. С помощью JavaScript Game Development вы можете оптимизировать их или полностью поднимать неиспользуемый код, который оставлен оригинальными разработчиками.
• Исправлять ошибки и делать улучшения на игровой процесс
  Наличие новых разработчиков, глядя в исходный код игры, может помочь исправить известные ошибки или открывать новые и очень редкие. Это сделало бы играть в игру менее раздражающим для игроков, что заставит их проводить больше времени на вашем сайте и поощрять их, чтобы попробовать другие игры.
• Добавление веб-аналитики
  В дополнение к отслеживанию трафика, веб-аналитика также может быть использована для сбора знаний о том, как игроки ведут себя в игру, и где они застревают во время игрового процесса.
• Добавление локализации
  Это будет увеличивать аудиторию и важно для детей из других стран, играющих в вашу игру. Или, может быть, ваша игра не на английском языке, и вы хотите поддержать этот язык?

02. Достигните 60 кадров в секунду

Когда дело доходит до разработки игр JavaScript, может быть заманчиво использовать HTML и CSS для кнопок, виджетов, виджетов и других элементов GUI. Наш совет должен быть осторожен здесь. Это противодействует, но фактически используя элементы DOM меньше исполнения на сложных играх, и это повышает больше значение на мобильном. Если вы хотите достичь постоянного 60 FPS на всех платформах, то может потребоваться отставку от HTML и CSS.

Неинтерактивные элементы GUI, такие как бары для здоровья, боеприпасы или счетчики баллов или счетчики на счет могут быть легко реализованы в Phaser с использованием обычных изображений (класс Phaser.image '), используя свойство «.CROP» для обрезки и «Phaser». Текст класса для простых текстовых меток.

Интерактивные элементы, такие как кнопки и флажки, могут быть реализованы с помощью встроенного класса Phaser.button '. Другие, более сложные элементы могут состоить из разных простых типов, таких как группы, изображения, кнопки и текстовые метки.

03. Загрузка пользовательских шрифтов

Если вы хотите рендерировать текст с пользовательским вектором шрифта (например, TTF или OTF), то вам нужно убедиться, что шрифт уже загружен браузером перед рендером любого текста. Phaser V2.6 не обеспечивает решение для этой цели, но можно использовать другую библиотеку - Web Font Loader Отказ

Предполагая, что у вас есть файл шрифта и включите веб-шрифт на вашей странице, затем ниже - это простой пример того, как загрузить шрифт. Сделайте простой файл CSS, который будет загружен загрузчиком Web Find (вам не нужно включать его в свой HTML):

 @ font-face {
  // Это имя вы будете использовать в JS
  Font-Samea: «Gunplay»;
  // URL к файлу шрифта, может быть относительным или абсолютным
  SRC: URL ('..//.// fonts / gunplay.ttf') формат ('trueType');
  Вес шрифта: 400;
} 

Теперь определите глобальную переменную с именем WebFontConfig. Что-то так просто, как это обычно хватило:

 var webfontconfig = {
  «Классы»: ложь,
  «Тайм-аут»: 0,
  «Active»: функция () {
  // Шрифт успешно загружен ...
  },
  'обычай': {
  «Семьи»: [«Gunplay»],
  // URL к ранее упомянутым CSS
  «URL»: [«стили / fonts.csss»]
  }
}; 

Не забудьте поместить свой код в «Active» обратного вызова, показанного выше. И это все!

04. Сохранить игру

Теперь мы находимся в средней точке нашей вспышки для преобразования JavaScript - пришло время позаботиться о шейдерах. Чтобы постоянно хранить локальные данные в ActionScript, вы будете использовать класс SharedObject '. В JavaScript простая замена LocalStorage API , который позволяет хранить строки для последующих поисков, выживших страниц перезагрузки.

Сохранение данных очень просты:

 VAR Progress = 15;
LocalStorage.SetItem («MyGame.progress», прогресс); 

Обратите внимание, что в приведенном выше примере переменная «прогресс», которая является числом, будет преобразована в строку.

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

 VAR Progress = Parсент (LocalStorage.geteTem ('mygame.progress')) || 0; 

Здесь мы гарантируем, что возвращаемое значение является числом. Если оно не существует, то 0 будет присвоен переменную «прогресс».

Вы также можете хранить и получать более сложные структуры, например, JSON:

 VAR Stats = {«Цели»: 13, «WINS»: 7, «Убытки»: 3, «Рисунки»: 1
};
LocalStorage.SetItem ('mygame.stats', json.stringify (статистика));
...
VAR Stats = JSON.PARSE (LocalStorage.getItem ('mygame.stats')) || {}; 

Есть некоторые случаи, когда объект «LocalStorage» не будет доступен. Например, при использовании файла: // протокол или когда страница загружена в частное окно. Вы можете использовать оператор «TRY и CALL», чтобы ваш код продолжил работу, и использует значения по умолчанию, которое отображается в примере ниже:

 попробуйте {
    VAR Progress = LocalStorage.getItem ('mygame.progress');
} Catch (исключение) {
  // localStorage не доступно, используйте значения по умолчанию
} 

Другое, что нужно помнить, так это то, что сохраненные данные сохраняются на домен, а не на URL. Поэтому, если существует риск того, что многие игры размещаются в одном домене, то лучше использовать префикс (пространство имен) при сохранении. В приведенном выше примере «MyGame». Это префикс, и вы обычно хотите заменить его с именем игры.

Если ваша игра встроена в iFrame, то LocalStorage не сохраняется на iOS. В этом случае вам нужно будет хранить данные в родительском IFRAME вместо этого.

05. Шайд фрагмента по умолчанию

Когда Phaser и Pixijs визуализируют ваши спрайты, они используют простой внутренний шейдер фрагмента. У него нет много функций, потому что он адаптирован для скорости. Тем не менее, вы можете заменить этот шейдер для ваших целей. Например, вы можете использовать его для проверки Overdraw или поддерживать больше функций для рендеринга. Ниже приведен пример того, как снабжать собственным фрагментом по умолчанию на Phaser V2.

 Функция Preload () {
  this.load.shader ('filename.frag', 'Shaders / filename.frag');
}
Функция Создать () {
  var redener = this.rinder;
  var batch = renderer.spritebatch;
  Batch.defaultshader =
  new pixi.abstractfilter (this.cache.getshader ('filename.frag'));
  Batch.SetContext (Renderer.gl);
} 

06. Изменить метод тонирования

Пользовательский шейдер по умолчанию может использоваться для замены методов тонирования по умолчанию в Phaser и Pixijs. Тонировка в Phaser и Pixijs работает путем умножения пикселей текстуры данным цветом. Умновидение всегда темнеет цвета, которые, очевидно, не проблема; Это просто отличается от тонирования вспышки. Для одной из наших игр нам нужно было реализовать тонировку, похожие на Flash, и решил, что можно использовать пользовательский шейдер по умолчанию. Ниже приведен пример такого фрагмента шейдера:

// определенный вариант оттенка, похожий на тонирование вспышки, которая добавляет
// к цвету и не умножается. Отрицательный цвет
// должны быть снабжены для этого шейдера, чтобы работать правильно, то есть установить
// sprite.tint до 0, чтобы превратить цельный спрайт в белый.
точность lowp float;
варьируя vec2 vtexturecoord;
варьируя VEC4 VCOLOR;
Униформа Unother Sampler2D;
Void Main (void) {
  VEC4 F = Textex2D (USAMPLER, VTEXTURECOORD);
  float a = зажим (vColor.a, 0,00001, 1.0);
  gl_fragcolor.rgb = f.rgb * vColor.a + зажим (1.0 - vColor.rgb / a, 0,0, 1.0) * VCOLOR.A * F.A;
  gl_fragcolor.a = f.a * vColor.a;
} 

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

 SPRITE.TINT = 0x000000; // Это цвета спрайт на белый
SPRITE.TINT = 0x00FFFF; // Это дает красный 

07. Осмотрите облицовку

Замена шейдера по умолчанию также может быть использовано, чтобы помочь с отладкой. Ниже мы объяснили, как можно обнаружить Overdraw с таким шейдером.

Переполнение происходит, когда многие или все пиксели на экране отображаются несколько раз. Например, многие объекты занимают одно и то же место и оказывают один над другим. Сколько пикселей GPU может представлять в секунду, описывается как частота заполнения. Modern Desktop GPU имеют чрезмерную скорость наполнения для обычных 2D-целей, но мобильные, намного медленнее.

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

 Void Main (void) {
  gl_fragcolor.rgb + = 1,0 / 7,0;
} 

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

Этот шейдером также помогает найти как «невидимые» объекты, которые по какой-то причине все еще отображаются, и спрайты, которые имеют чрезмерные прозрачные области вокруг, которые необходимо разделить (GPU все еще должен обрабатывать прозрачные пиксели в ваших текстурах).

08. Почему физические двигатели - ваши друзья

Физический двигатель представляет собой промежуточное программное обеспечение, отвечающее за моделирование физических органов (обычно жесткая динамика тела) и их столкновения. Физические двигатели моделируют 2D или 3D пробелы, но не оба. Типичный физический двигатель предоставит:

• Движение объекта путем установки скоростей, ускорений, суставов и двигателей;
• Обнаружение столкновений между различными типами формы;
• Расчет ответов на столкновение, то есть. Как два объекта должны реагировать, когда они сталкиваются.

Существует Phaser Plugin, который хорошо работает для этой цели. Box2D также используется в игровом режиме Unity Engine и Studio The GameMaker 2.

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

09. Экспорт звуки

Если у вас есть звуковые эффекты флэш-игры внутри файла .fla, то экспортируя их из GUI невозможно (по крайней мере, не в Adobe Animate CC 2017) из-за отсутствия параметров меню, обслуживающих эту цель. Но есть еще одно решение - выделенный скрипт, который только что:

 Функция NormalizeFileName (Имя) {
  // преобразует имя камеры на имя Snake_Case
  возвращение name.replace (/ ([A-Z]) / g, '_ $ 1'). Заменить (/ ^ _ /, '') .tolowercase ();
}
Функция DivingPath (путь) {
  // делает путь к файлу более читабельным
  Верните unescape (путь) .replace («Файл: /// ',' ') .replace (' | '', ':');
}
fl.outputpanel.Clear ();
если (fl.getdocumentdom (). liblic.getselecrecentiTems (). Длина & gt; 0)
  // получить только выбранные предметы
  var library = fl.getdocumentdom (). liblic.getselecrecediTems ();
еще
  // получить все предметы
  var library = fl.getdocumentdom (). Библиотека.темы;
// спроси пользователя для каталога назначения экспорта
var root = fl.browseforfolderurl ('Выберите папку.');
ошибки var = 0;
для (var i = 0; i let; library.length; i ++) {
  var item = Библиотека [I];
  Если (item.itemtype! == 'Sound')
  Продолжить;
  var path = root + '/';
  Если (item.originalCompressTytepe === 'RAW')
  Path + = NormalizeFileName (item.name.split ('.') 
) + '.wav';
  еще
  Path + = NormalizeFilename (item.name);
  var success = item.exporttOfile (путь);
  Если (! успех)
  ошибки + = 1;
  fl.trace (DivingPath (Path) + ':' + (Успех? »:« Ошибка »));
}
fl.trace (ошибки + 'ошибки (ы)); 

Как использовать сценарий для экспорта звуковых файлов:

1. Сохраните код выше как файл .jsfl на вашем компьютере.
2. Откройте файл .fla с Adobe Animate.
3. Выберите команды и GT; Запустите команду из верхнего меню и выберите скрипт в диалоге, который открывается.
4. Теперь другой диалоговый файл всплывает для выбора каталога назначения экспорта.

Готово! Теперь вы должны иметь файлы WAV в указанном каталоге. Что осталось сделать, - это преобразовать их, например, MP3, OGG или AAC. (Если у вас есть игровые файлы, чтобы сохранить безопасность, обновить до приличного облачное хранилище .)

10. Как использовать MP3S

Хороший добрый формат MP3 вернулся, поскольку некоторые патенты истекли и теперь каждый браузер может декодировать и воспроизводить MP3. Это делает развитие немного проще, так как наконец нет необходимости готовить два отдельных аудиоформата. Ранее вам нужно, например, файлы OGG и AAC, а теперь достаточно MP3.

Тем не менее, есть две важные вещи, которые вам нужно помнить о mp3:

• MP3 должны декодировать после загрузки, что может быть трудоемким, особенно на мобильных устройствах. Если вы видите паузу после того, как все ваши активы загружены, то это, вероятно, означает, что MP3 декодированы
• Безумно играя петли MP3S немного проблематично. Решение - использовать MP3Loop, Подробнее в этой статье Опубликовано фазой Compu.

Эта статья была первоначально опубликована в номере 277 Treative Web Design Web Designer. Купить проблему 277 здесь или же Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

• 5 случайных игр для дизайнеров
• Создайте свою собственную физику WebGL
• Понять импортный трубопровод Unity Asset