Как перейти с adobe flash player на html5
Всё больше разработчиков социальных игр переносят свои проекты с Flash на HTML5. Однако это не такой простой процесс, как кажется. Какие подводные камни могут всплыть при портировании? Какие ошибки рискует допустить разработчик? Можно ли отдать портирование на аутсорс? Разбираемся вместе с техническим специалистом Stark Games.
Для создания этого материала мы поговорили со старшим разработчиком Stark Games. В портфолио студии входит «Ёлочка», которая каждый год стабильно попадает в топ самых популярных игр в «Одноклассниках» и «ВКонтакте». Впервые компания перенесла свою игру на HTML5 в 2019 году, набив по пути ряд шишек. Мы попросили поделится опытом человека, напрямую ответственного за портирование.
Почему HTML5?
Компании в целом часто выбирают HTML5. Наш собеседник объясняет это низким порогом входа в платформу и доступностью библиотек и движков.
Нет необходимости покупать API, заключать контракты. В том же Unity надо платить при определённых оборотах. Также HTML5 работает на всех браузерах без всяких плагинов, не надо ничего ставить.
Аналогичный аргумент приводит Ольга Хоменко, сооснователь PlaytoMax, студии-разработчика игр на HTML5:
Главный плюс — универсальность. Платформа работает на ПК, смартфонах, планшетах, Smart-TV и так далее.
Другой фактор, сработавший в пользу HTML5, — смартфоны стали гораздо мощнее, а вокруг платформы появилось больше технологий, инструментов и гайдов. Если ещё 3–4 года назад бюджетные устройства не справлялись с игрой на HTML5, а начинающий разработчик с трудом находил ответы на свои вопросы, то теперь всё иначе.
Стало больше информации: например, кто-то столкнулся с проблемой, написал об этом на том же «Хабре» или Stack Overflow. Если ты джуниор, то нет проблемы писать на HTML5 что хочешь — просто что-то спрашиваешь, открываешь и делаешь. В целом, HTML5 позволяет сейчас делать то же, что и на флеше. Так что лучше оптимизировать HTML5-версию, чем тянуть флеш.
Поэтому HTML5 планомерно захватывает площадки, в том числе социальные сети. Например, недавно «Одноклассники» отчитались, что за первые пять месяцев 2020 года выплатили разработчикам HTML5-игр около 360 миллионов рублей. Это на 80% больше, чем за аналогичный период 2019-го.
Трудности при портировании игры на HTML5
Какие главные подводные камни ждут студию, которая решила перенести свою игру с Flash на HTML5? По словам эксперта, могут возникнуть три проблемы: необходимость переписать код, оптимизировать игру и разобраться с командой.
Сперва придётся разобраться с кодом.
Есть конвертеры, которые могут это сделать, но для этого код должен быть просто идеальный. За всю свою профессиональную деятельность я такого не встречал.
Оптимизация игры
Вторая проблема — вам надо будет подумать, как оптимизировать игру. Если просто перенести проект с Flash на HTML5, то есть вероятность, что он будет тормозить. Особенно на слабых телефонах.
В целом, «флеш» позволяет больше. Поэтому при портировании на HTML5 надо учитывать нюансы. Например, человек может открыть игру на iPhone 5, а этот аппарат не умеет грузить текстуры выше определённого разрешения. И если вы поставите текстуру больше этого размера, то она либо не загрузится, либо вообще что-нибудь упадёт. Если у вас громоздкий интерфейс — его надо облегчить. На мобильном нельзя уместить всё, что у вас есть на десктопе. Все эти рюшечки, красивости, дополнительные кнопки можно убрать. Также у нас работает lazy loading ресурсов. То есть игроку в первую очередь показывают главные сцены, наиболее важное. Остальное не грузится, пока он сам не нажмёт.
О важности оптимизации интерфейса рассказывает и Ольга Хоменко из PlaytoMax:
Всегда помните, что на смартфонах экраны маленькие и все ваши 400 кнопок вы не внесёте.
Если будете рендерить на Pixi.JS, то там четвёртая версия значительно отличается от пятой. И я знаю команды, которые, работая с четвёртой версией, исправляли код этого движка, чтобы картинка нормально отображалась на слабых девайсах. Это особенно актуально для разработчиков игр, где есть элементы казино и так далее.
Оптимизация команды
Наш собеседник из Stark Games пошёл по второму пути.
Команду можно не менять, если вы переходите на язык программирования TypeScript. Считаю, что хороший Flash-разработчик с ним справится. Просто надо познакомиться с языком, почитать о его особенностях и так далее. У меня это заняло примерно неделю — после этого я помог «перейти» остальной команде.
Также эксперт отметил, что если у вас достаточно сложная игра, то лучше прокачать текущую команду, чем брать нового человека и объяснять ему, как устроен ваш продукт.
Мы так и делали, потому что у нас на изучение технологии уходит неделя-другая, а на введение нового человека в проект — около месяца.
Какие ошибки можно допустить при портировании игры на HTML5?
Очевидно, что игры у всех разные. При их портировании могут всплыть любые нюансы. Всё зависит от используемого движка, библиотек и так далее. Поэтому не факт, что ошибки, допущенные нашим собеседником, выскочат у остальных разработчиков. Однако опыт Stark Games может пригодится коллегам по цеху.
В первую очередь — мы ошиблись с распределением ресурсов. Мы решили тянуть сразу две версии: HTML5 и Flash. Поскольку у нас не было специалиста по HTML5, нам показалось, что силами нескольких разработчиков мы всё сделаем. Реальность оказалась сложнее. В итоге мы справились, но с трудом. Когда запускали следующую «Ёлочку», то ограничились только HTML5-версией.
— рассказал старший разработчик Stark Games.
Вторая ошибка — эксперт признался, что не сразу подумал об упрощении интерфейса.
В мобильной версии 19-й «Ёлки» был сложный интерфейс, который значительно нагружал смартфоны и распылял внимание пользователя. Пришлось его оптимизировать: выкидывать лишние кнопки, оставшиеся укрупнять, вводить специальные всплывающие окна и так далее. По-хорошему, это надо было сделать сразу.
Наконец, несколько мелких промахов. Наш собеседник рассказал, что на старте одна из версий «Ёлок» отправляла от игроков сверхподробные логи.
От пользователей иногда шли логи по 500 Мб. Сервера у нас чуть прилегли, да и самим игрокам едва ли понравилось, что ушло столько трафика. К счастью, это было только во «ВКонтакте» — первый билд мы выкатываем именно туда, потому что в «Одноклассниках» у нас игроков в разы больше, перед ними ошибаться совсем не хочется. В целом, исправили косяк за пару дней.
Стоит ли отдавать портирование на HTML5 на аутсорс?
Получается, что портирование игры на HTML5 — не такое простое дело. Может, тогда лучше воспользоваться услугами сторонних команд? Например, есть компания IceStone, которая конвертирует Flash-игры на HTML5.
Как утверждает наш эксперт, есть свои плюсы и минусы обращения к таким командам. Из преимуществ он называет точные сроки и, конечно, тот факт, что вам не придётся заниматься портированием самому. Из недостатков — переход обойдётся дороже и надо будет тратить время на встречу со специалистами и заключение договоров. Наконец, студии могут просто не сразу взять ваш проект — вдруг у них в очереди уже десяток таких же.
Всё зависит от задач. Если у вас несколько простеньких Flash-игр, они приносят какую-то копеечку, но вы ими не занимаетесь — можно отдать на аутсорс. Если же вы хотите дальше их развивать, выпускать апдейты, то лучше портировать самому. Я как разработчик сам бы этим занимался.
В этой статье — небольшая мотивационная часть и рабочий сценарий, как полноценно жить в сети без Flash-плагина
Сценарий будет состоять из трёх рецептов:
- Рецепт для сайтов, замечающих Flash через feature detection.
- Рецепт для сайтов, которые обращают внимание на User agent .
- Рецепт для сайтов, которые просто всегда дают Flash.
- + Запасной вариант на случай, если Flash понадобится.
- Потому что на смену ему пришли новые технологии, которые решают те же задачи лучше, которые используются в новых проектах и стартапах.
- Потому что на большинстве из тех сайтов, где вы видите Flash, эти технологии уже лежат в запасниках, и вам давно подготовлен Flash-free experience.
- Потому что Flash имеет множество проблем. Основные проблемы решить невозможно — они заложены в его архитектуру. Хороший список проблем есть в английской Википедии.
- Потому что все авторитетные стороны, связанные с Flash, говорят о том, что Flash пора выбросить 1 .
Об этом поподробнее:
- Googleговорит: «Откажитесь от плагинов». «Операции, которые раньше требовали использования плагинов, теперь можно выполнять с помощью веб-технологий»
- Mozilla борется с Flash; вспоминает, что Flash — основная причина падений Firefox и говорит: «Плагины — это унаследованная технология, не доступная на большинстве мобильных устройств. Mozilla советует веб-разработчикам всеми способами избегать плагинов. Если у вас есть функциональность, которую не удаётся создать без плагина, обратитесь к нам»
- Apple в 2010 опубликовала прекрасное письмо «Thoughts on Flash», а в английской Вики есть отличный разбор мнений об этом письме и ситуации в целом.
- Electronic Frontier Foundationчасто пишет о том, что Flash — это плохо
- Adobe в 2011 свернула поддержку Flash Player на всех ОС и платформах, кроме Wintel и Mac OS X. В своём письме они сказали: «…HTML5 — лучшее решение для создания материалов для мобильных платформ.»
- Даже рекламщики, а именно — IAB, их главный профсоюз — сказали в 2010: «Рекламодателям просто пора делать баннеры на HTML5, а не на Flash. Многие бренды уже сделали так для iPad, и их результаты радуют»
А, может, альтернативный Flash-плеер?
Если вы решите использовать альтернативный Flash-player (список-музей которых есть в той же Википедии), то вы ничего хорошего не получите. Все плееры полумертвы, поддерживают только часть возможностей Flash, тормозят, сбоят, и — в целом — малопригодны. Была надежда на Mozilla Shumway, но и она тихонько тает.
Главное же — альтернативный Flash player не решит основную проблему: в интернетах вам регулярно подсовывают SWF-файлы вместо полезного содержимого.
А решается проблема просто:
Удивительно, но многие сайты показывают вам Flash-содержимое … потому что у вас есть Flash!
Однажды вы задумались о жизни без него и блокировали его Flashblock-ом, а он продолжал быть в системе, и сайты всё так же давали вам всякие embed -ы и object -ы, которые Flashblock и блокировал. Это похоже на анекдот про обезьяну, которая таксиста обманула: мы попросили Flash-содержимое, а, когда оно пришло — заблокировали.
Конечно, это полная фигня. Отключите Flash-декодер. Ещё лучше — удалите его полностью. Тут-то окажется, что часто он не был нужен.
Иногда, впрочем, сайтам надо помочь
А как быть с Youtube-видео, вставленным много лет назад на сторонние сайты через embed или object ? Воспользуйтесь расширениями и Userscript-ами.
Например, ClickToPlugin для Safari знает в лицо пол-сотни object-ов и умеет заменять их на HTML5-эквивалент 2 .
Кто никогда не касался Flash, как гордый стриж никогда не касался земли? Конечно, iPhone и iPad.
Смените себе User agent на Safari @ iPad, и многие, очень многие сайты чудесно заработают.
Выберите в меню разработчика 3 Safari «Маскироваться под Internet Explorer» Разработка → Пользовательский агент → Safari iOS — iPad. Настройка применится для выбранной вкладки, она перезагрузится, и сервер выдаст вам версию для планшетов, функционирующую без Flash. Проделывать это, к сожалению, придётся каждый раз при посещении сайта, потому что в Safari нет автоматических способов сменить User agent .
Если у вас Firefox, вам повезло больше. Расширение UAControl позволяет выбирать User agent для каждого сайта. Откройте негодный сайт, ткните по кнопке UAControl → UAControl options for this site… → Action: Custom и вставьте в поле Custom user agent строчку от Safari iOS 8.1 на iPad:
Mozilla/5.0 (iPad; CPU OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B410 Safari/600.1.4
Теперь запросы для этого сайта будут всегда отправляться от имени iPad Safari. Viva la Firefox!
Некоторые герои меняют User agent глобально и насовсем — но я категорически это не советую. Любоваться планшетной навигацией на каждом сайте — выше моих сил. Одного Хабра хватило, спасибо .
Например: ваш любимый сайт с гитарным тюнером работает через Flash? Отправьте его на пенсию, и найдите тюнер на HTML5 и WebRTC.
А лучше — достаньте ваш смартфон или планшет, загляните в переполненный магазин приложений, и выберите подходящее на свой вкус.
Но что делать, если вы встретили сайт, которому действительно нужен Flash? Таким сайтом, например, оказался Livemocha, использующий Flash для аудио-занятий иностранным языком. Проект чрезвычайно интересный, Flash-free альтернативы нет, и обходиться без него не хочется.
- Гугловским анальным зондом отслеживающим модулем (а заодно — интеграцией с Гуглосервисами)
- Не общесистемным, авто-обновляемым встроенным Adobe Flash.
Итак, ставим вторым браузером Google Chrome — или любой другой коммерческий браузер на его основе, например, новую Оперу или Яндексобраузер. Я выбрал последний — Гугловский зонд модуль интеграции там выпилен и заменён на Яндексовский, а Яндекс-сервисами я как раз не пользуюсь. К тому же, их новый (бета) интерфейс очень клёвый
Теперь, когда попадаем на Flash-only сайт, с которого не хочется уходить на что-то более достойное, тыкаем в Safari: «Open in IE» Разработка → Открыть страницу с помощью → Yandex, и радуемся.
Для Firefox есть удобные расширения вроде Open In Chrome
С развитием технологии HTML5 все чаще и чаще возникает ее сравнение с Flash. Среди всех тех, кто может высказать свое мнение по этому вопросу стоит отметить Дуэйна Никола (Duane Nickull), ведущего евангелиста компании Adobe. На конференции Web 2.0 Expo он будет много говорить о новых перспективах HTML5, AJAX и Flash, и в преддверии этого он дал нам (O`Reilly) интервью.
В какой мере HTML5 и Flash перекрывают друг друга, а в какой дополняют?
Дуэйн: Во-первых, давайте проясним вопрос относительно того, что понимать под HTML5. Когда люди говорят или думают об HTML5, на самом деле они ссылаются на целый стек технологий, включающих в себя jQuery, AJAX, CSS и даже самый простой JavaScript. Подобно этому, Flash — это больше чем просто формат файлов *.swf. Flash — это полноценная платформа, включающая в себя сервер-сайдные компоненты, средства авторизации, протоколы, бинарные форматы, поддержку кодеков, а так же каналы обмена данных в таких серверных решения как Livecycle Data Services и Flash Media Server.
В большинстве случаев, основанные на Flash приложения размещаются в интернете, так что они размещаются внутри HTML контейнеров. Зачастую в работе используется JavaScript. Так что из этого можно с уверенностью сказать, что HTML и Flash отлично работают «в одной команде» и по большому счету Flash зависит от HTML.
Какова позиция Adobe в отношении HTML5?
Дуэйн: Стратегий Adobe является использование обеих технологий HTML5 и Flash, в том числе создание средств разработки под обе этих платформы. HTML5 — восхитительная технология и с моей точки зрения, как стандарт, слишком долго стояла на месте. Мы участвуем в группе W3C с целью как можно быстрее привнести новые фишки в наши продукты. На Adobe MAX 2010, мы показали продукт схожий с Flash Professional CS5, для того чтобы показать дизайнерам и разработчикам, каким простым и интуитивно понятным может быть создание интерактивной анимации в HTML.
Разработчики и архитекторы должны сделать выбор, что же им больше подходит. Рассмотрим это на примере форм для ввода данных. В большинстве случаев, делается выбор в пользу HTML форм, потому что они быстрее грузятся и не требуют дополнительного плагина. Если же требуется работа в оффлайне, к примеру в AIR приложениях, то предпочтение уже отдается Flash. Опять же, Adobe не говорит разработчикам какую из технологий нужно использовать, мы предоставляем решения для обеих платформ, а уже сам разработчик должен сделать выбор. Вряд ли бы они отнеслись положительно к тем, кто навязывает им свою волю.
С ростом использования HTML5, технологии становятся все больше похоже, например появился тег video. В этом вопросе существует ряд определенных требований, которые основаны как на возможностях браузеров, так и на возможностях интернет каналов. Платформа Flash накопила огромный опыт по работе с видео контентом, позволяя предоставлять видео в максимальном качестве, на основе таких перечисленных выше данных как возможности интернет канала и браузера. Это требует определенных серверных технологий и средств коммуникаций. HTML5 это все же язык разметки и может не справляться с поставленным задачами так же хорошо Flash Player до тех пор, пока не будут созданы соответствующие серверные технологии.
Отдельно стоит поговорить об отображении видео контролов. Если вы используете Flash Player, то ваш видео проигрыватель будет всегда выглядеть одинаково. Если же вы будете создавать свои контролы, используя HTML and CSS, то можете столкнуться с проблемой, что в разных браузерах они будут выглядеть по разному. Ни для кого не секрет, что CSS имеет определенные проблемы в разных комбинациях браузер/ОС. К примеру, у вас есть Opera, Chrome, IE, Safari, Firefox. В основном, они используются на в 3-10 разных ОС. Да еще есть около 5 подверсий как браузера, так и ОС. То есть грубо говоря, мы имеем 5 * 10 * 5 * 5 = 1,250 комбинаций, где нужно проверить, как работает наш CSS. Да, еще не забудьте про IE6. Так что не все так гладко. Если вам интересно, я писал об этом у себя в блоге.
Как будет развиваться продвижение Flash / HTML5 в сторону мобильных разработок?
Дуэйн: Я думаю оно будет развиваться так же, как и в интернете в целом. Adobe дает разработчикам выбор использовать те средства, которые им больше по душе. Flash платформа безусловно представляет интерес для мобильных разработок и единственной помехой в этом является то, что она не работает на iOS устройствах.
В любом случае выбор остается за потребителем. Millennial Media недавно опубликовала данные, что телефоны на базе Android составили 46% рекламного трафика в их сети, в то время как устройства от Apple лишь 32%. Android устройства, которые уже с версии 2.2 поддерживают Flash, являются вторыми по популярности и будут становится еще популярнее.
Так же развивается и рынок планшетов. Компания Research in Motion (RIM), устройства которой поддерживают и HTML5 и Flash Player, активно растет в этом направлении, несмотря на лидерство Apple в этой области.
И в завершении повторюсь, стратегией Adobe является предоставление выбора разработчику. Мы любим Flash и мы любим HTML.
Ранее Flash-контент встречался повсеместно на интернет-страницах. Но с течением времени веб-разработчики начали от него отказываться. Связано это с высокой нагрузкой на систему и множество других недостатков. В настоящий момент на большинстве сайтов используется ХТМЛ5 для всевозможных элементов, например, для проигрывания видео. По этой причине все чаще пользователи задаются вопросом, как включить HTML5 в Chrome. Мы разберемся не только с активацией, но и с возможной деактивацией данной технологии, которая в некоторых случаях тоже требуется.
Инструкция
Скажем сразу, включать HTML5 специально не нужно, так как он уже интегрирован в тонкие тела браузеров и не собирается оттуда выбираться на свет божий. Мир постепенно переходит на новый плеер, среди гигантов – видео-хостинг YouTube. Хотя там и сохранили возможность использовать старый добрый Flash. В случае с браузером Гугл Хром для переключения технологий используются сторонние расширения. В данной статье будут рассмотрены два наиболее удобных из них.
Вариант №1: Flash-HTML5 for YouTube
Данный плагин отлично справится с поставленной задачей. Во всех подробностях нюансы его использования мы разберем прямо сейчас. И начнем, пожалуй, с загрузки для нашего интернет-обозревателя:
В результате в верхней панели браузера появится новая иконка. Откройте любой видеоролик на Ютьюб и кликните по ней. Тогда появится переключатель между Флеш-плеером и ХТМЛ5.
Вариант №2: Disable YouTube HTML5 Player
В официальном магазине браузера есть интересный плагин, позволяющее отключить злополучный HTML5 для Google Chrome в YouTube. Разберемся с его установкой и последующим использованием. Предлагаем вашему вниманию пошаговую инструкцию:
В 2021 году Adobe прекращает поддержку плагина Flash Player. Flash-контент, включая аудиозаписи и видеоматериалы, больше не доступен для проигрывания в любой версии Chrome.
Как включить и отключить HTML5 в Google Chrome
Ранее Flash-контент встречался повсеместно на интернет-страницах. Но с течением времени веб-разработчики начали от него отказываться. Связано это с высокой нагрузкой на систему и множество других недостатков. В настоящий момент на большинстве сайтов используется ХТМЛ5 для всевозможных элементов, например, для проигрывания видео. По этой причине все чаще пользователи задаются вопросом, как включить HTML5 в Chrome. Мы разберемся не только с активацией, но и с возможной деактивацией данной технологии, которая в некоторых случаях тоже требуется.
Скажем сразу, включать HTML5 специально не нужно, так как он уже интегрирован в тонкие тела браузеров и не собирается оттуда выбираться на свет божий. Мир постепенно переходит на новый плеер, среди гигантов – видео-хостинг YouTube. Хотя там и сохранили возможность использовать старый добрый Flash. В случае с браузером Гугл Хром для переключения технологий используются сторонние расширения. В данной статье будут рассмотрены два наиболее удобных из них.
Вариант №1: Flash-HTML5 for YouTube
Данный плагин отлично справится с поставленной задачей. Во всех подробностях нюансы его использования мы разберем прямо сейчас. И начнем, пожалуй, с загрузки для нашего интернет-обозревателя:
В результате в верхней панели браузера появится новая иконка. Откройте любой видеоролик на Ютьюб и кликните по ней. Тогда появится переключатель между Флеш-плеером и ХТМЛ5.
Вариант №2: Disable YouTube HTML5 Player
В официальном магазине браузера есть интересный плагин, позволяющее отключить злополучный HTML5 для Google Chrome в YouTube. Разберемся с его установкой и последующим использованием. Предлагаем вашему вниманию пошаговую инструкцию:
А для отключения аддона выполните следующие шаги:
А включить аддон можно аналогичным способом.
Читайте также: