Преобразование флеш-игр в HTML5

Flash постепенно отвергается Adobe в пользу HTML5 и JavaScript;

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

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

01. Улучшите игру в HTML5

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

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

02. Достигните 60 FPS

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

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

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

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

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

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

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

Теперь определите глобальную переменную с именем WebFontConfig. Проще всего этого будет достаточно:

  var WebFontConfig = {
  'classes': false,
  'timeout': 0,
  'active': function () {
  // Шрифт успешно загружен ...
  },
  'custom': {
  «семьи»: ['Gunplay'],
  // URL-адрес ранее упомянутого CSS
  'urls': ['styles/fonts.css']
  }
};  

Не забудьте указать код в активном обратном вызове, показанном выше. Вот и все!

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

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

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

  var progress = 15;
localStorage.setItem ('myGame.progress', progress)  

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

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

  var progress = parseInt (localStorage.getItem ('myGame.progress')) | | 0;  

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

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

  var stats = {'goal': 13, 'wins': 7, 'loss': 3, 'draws': 1
};
localStorage.setItem ('myGame.stats', JSON.stringify (статистика));
...
var stats = JSON.parse (localStorage.getItem ('myGame.stats')) || {};  

В некоторых случаях объект «localStorage» недоступен. Например, при использовании протокола file: // или при загрузке страницы в частном окне. Вы можете использовать оператор «try and catch», чтобы ваш код продолжал работать и использовать значения по умолчанию, которые показаны в следующем примере:

  try {
    var progress = localStorage.getItem ('myGame.progress');
} catch (исключение) {
  // localStorage недоступен, используйте значения по умолчанию
}  

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

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

05. [1945905]

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