Движки для браузерных игр: как создать свою игру OTUS

Особенности разработки игры для браузера — Gamedev на DTF

Разбираемся вместе с техлидом BeaversBrothers

3871 просмотров

Для образовательного проекта Банка России мы сделали яркую веб-игру «Тайна потерянной копилки». Она привлекает внимание школьников к теме финансовой грамотности, знакомит с терминами, учит разумно распоряжаться деньгами. Игра понравилась не только детям, но и взрослым из разных городов России — в неё сыграли более 30 000 человек.

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

Особенности разработки игры для браузера

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

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

Предположения об особенностях браузерной игры у нас были — значительные ограничения на доступный и используемый размер оперативной памяти (в ТЗ, например, зафиксировано, что для мобильных устройств должно хватать 1 Гб оперативной памяти), баланс между качеством игровых ресурсов (изображения, текстуры, спрайты, звуки, видео) и скоростью их скачивания.

К этому добавились требования от клиента — игра должна запускаться и работать во всех заявленных мобильных и десктопных браузерах (включая IE 11), на минимально возможных аппаратных характеристиках. Требования эти исходили из того, что игру предполагалось показывать при любой удобной возможности, на любом попавшемся под руку устройстве — например, в школе.

Как выбирали движок

У нас уже был опыт игровой разработки, поэтому направления выбора движка обозначили сразу:

• Игровой движок Phaser — мы уже реализовывали на нём игру для Эльдорадо/Майкрософт.
• Unity с возможностью экспорта игры в Web — мы делали игровые проекты на этом движке.
• Также рассматривали малоизвестные нам движки LibGDX, Godot, PlayCanvas.

Неизвестные варианты отвалились по вполне очевидной причине — их надо было осваивать и изучать, что, некоторым образом, пугало, хоть и не казалось невозможным. Вариант с Unity отвалился потому, что ограничения движка и экспорта не позволяли, например, использовать аудио в IE 11. А ещё потому, что экспортируемый из Unity код Javascript получался очень большой, а IE 11 значительно более медленный в парсинге и исполнении кода, чем современные браузеры.

Таким образом, было решено взять свежую версию движка Phaser (на момент начала разработки это была версия Phaser 3.11). Выбрали этот движок ещё и потому, что вся логика и отрисовка — программные, а значит, мы могли контролировать в коде абсолютно любой аспект будущей игры.

Как писали

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

Взяли из готовых в документации примеров «перемещение персонажа» и «тайловая карта», собрали, запустили — работает: персонаж ходит, прыгает, перемещается по платформам. Запустили во всех доступных устройствах — всё ещё работает. Добавили виртуальные кнопки управления из примера «виртуальные кнопки» и запустили на мобильных — всё ещё работает. Добавили немного механик — удар, враг, нанесение и получение урона, сбор монет — для прототипа было достаточно.

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

После успешного прототипа у нас появилось понимание, как будет реализована архитектура и организован код. Если говорить про инфраструктурную часть, то это работа с движком в части загрузки ресурсов, создания игровых объектов, переключения экранов. Что касается непосредственно игровой логики — это реализация персонажей, реализация механик взаимодействия с добычей, ловушками, врагами.

Стек разработки был взят довольно типичный для подобного проекта — webpack, webpack-dev-server, babel, babel/preset-typescript.

Какие трудности были

С трудностями столкнулись в соблюдении требований по производительности и в командном взаимодействии. Приходилось работать с новыми инструментами и передавать друг другу материалы в новых форматах, поэтому не всегда всё получалось гладко с первого раза.

Например, в ТЗ было предусмотрено, что игра при запуске пытается определить производительность устройства, и в случае низкой производительности отображается соответствующее уведомление. На данном этапе мы столкнулись с двумя проблемами. Во-первых, браузер не даёт практически никаких сведений на этот счёт. Во-вторых, производительность конкретной вкладки браузера в конкретный момент времени очень сильно зависит от внешних факторов — сколько вкладок открыто, нет ли тяжёлых сайтов в других вкладках, не свёрнут ли браузер.

Было опробовано несколько теоретических и практических гипотез, из которых родилось финальное решение. Решение состоит в следующем:

• На экране загрузки игры, где идёт прогресс от 0 до 100 %, фактическая загрузка ресурсов заканчивается на 92 %.
• После этого за пределами экрана создаётся сцена, на которую помещаются тяжёлые анимации и немного физики.
• Далее в течение 5 секунд измеряется среднее время отрисовки одного кадра.
• После этого принимается решение о производительности устройства и прогресс доходит до 100 %.

Очень важным было требование полной работоспособности игры в IE 11, что тоже доставляло неудобства. Оказалось, что при запущенных инструментах разработчика, и без того небыстрое выполнение Javascript в этом браузере ещё замедлялось.

То есть ты сталкиваешься с тормозами в игре, открываешь инструменты разработчика, чтобы найти причину, а игра тормозит ещё больше.

Игровые механики

Игровые механики сами по себе несложные, во многом вдохновлённые существующими играми.

Главный герой, например, это цельный спрайт анимации вместе с оружием. Такое решение было выбрано, чтобы избежать рассинхрона анимаций замаха и оружия. Поэтому проверка нанесения урона происходит так — в момент определённых кадров анимации удара (кадра с третьего примерно) рассчитываем область пересечения, которая действует в течение ещё нескольких кадров анимации. Так нам удалось добиться реалистичности срабатывания оружия.

Обратной стороной такого решения в анимации главного персонажа стало то, что для каждого пола на каждом из уровней нужен свой отдельный набор подготовленных анимаций с оружием. А на втором уровне потребовался ещё один дополнительный набор — в кредитных кроссовках. Итого получилось по четыре полноценных набора анимаций для каждого персонажа.

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

Так, все герои с мечом будут в обычных кроссовках.

Интересной была механика с ловлей ключей от сундука. Для ключа, который нужно было поймать, область срабатывания сделана меньше, чем визуальный спрайт ключа, а также незначительно смещена в сторону случайным образом. Это привело к желаемому эффекту «у меня ключ с первого раза не собирается» — иногда нужно несколько раз попробовать собрать ключ, чтобы попасть на область его срабатывания. Иначе было слишком просто, хотя в финальном релизе область срабатывания всё-таки была чуть увеличена, чтобы уменьшить процент неудачных попыток.

Все остальные механики собственно тем же и являются — срабатывание приближения и пересечения персонажа и игровых объектов в определенные моменты времени и анимации.

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

Выводы и советы

Определитесь с жанром на самом раннем этапе.

Игры в вебе — это реально существующее явление, со своей аудиторией и со своими правилами. Такие игры не требуют установки, позволяют устраивать короткие игровые сессии, механикой привлекают больше, чем внешним видом.

Совет — относитесь к разработке веб-игры как к реальной игре, а не как к очередному «скрипту на странице». Тестируйте, профилируйте, не допускайте утечек памяти и повышенной нагрузки на процессор. Игроки и батареи их устройств будут довольны.

Смотрите подробнее, как мы делали веб-игру «Тайна потерянной копилки».

20 движков JavaScript для создания игр в Web

Содержание:

• Isogenic Game Engine
• V Play
• Unity
• Play My Code
• WiMi5
• lychee.js
• QICI Engine
• Panda.js
• Goo Create
• Kiwi.js
• Stage.js
• melonJS
• PlayCanvas
• Pixi. js
• BabylonJS
• PhysicsJS
• Crafty
• Phaser

Глобальный маркетинг для онлайн-игр превышает доход в 100 миллиардов долларов. Это может означать только то, что онлайн-игры продолжают прокладывать путь для инвестиций, бизнеса и проектов и, следовательно, новых возможностей. Поистине, было чудесно наблюдать, как эта индустрия перешла от использования Flash и Java для питания своих игр к мощным 2D и 3D игровым движкам, которые в основном работают на JavaScript и HTML5. Мобильные и социальные игры становятся все более популярными, и наметился четкий путь к росту.

Разработчики мобильных игр годами боролись за то, чтобы свести концы с концами, когда дело доходит до разработки игр. Кажется, что когда кто-то создает потрясающую игру, кто-то другой приходит с более простой версией и забирает большой приз. Это было в случае с Flappy Bird и многими другими играми, которые имели, казалось бы, простой игровой опыт, но сумели сделать создателей игр миллионерами на месте. Это мечта всех разработчиков игр: создать игру, которая обеспечит их финансовую жизнь. Хотя это мечта, это не невозможно достичь.

Создание хороших игр требует знания программирования, системной архитектуры, возможностей использования экстрасенсов в технологиях, а также прочной основы, на которой можно построить свою игру. И таких фреймворков для разработки игр сейчас существует в большом количестве; некоторые называют их движками разработки игр. Мы сконцентрируемся в основном на игровых движках JavaScript, иногда упоминая о надежном движке разработки игр на HTML5. Оба языка тесно связаны друг с другом, и некоторые из этих игровых движков имеют мощные функции и инструменты, которые гарантируют, что игры, которые вы создаете, немедленно выбивают ваших соперников из игры.

к содержанию ↑

Isogenic Game Engine

Внешне Isogenic Game Engine может показаться не таким уж и привлекательным, но поверьте нам этой информацией, которой мы собираемся поделиться. Это мощный движок игрового движка, способный структурировать большие, сложные и визуально привлекательные многопользовательские игры. Используйте возможности 2D & Isometric для создания игровых миров. Супер-физический алгоритм и функциональность гарантируют, что ваши игры будут удивительными каждый раз, когда пользователи играют в нее. Просмотрите документацию, чтобы узнать, почему крупные бренды, такие как BBC, используют Isogenic для своих личных платформ.

Смотреть

к содержанию ↑

V Play

V-Play — еще один отличный выбор для разработчиков 2D-игр. Это также для разработчиков приложений, которые хотят придать своим приложениям визуальный вид. Создавайте лучшие веб-приложения, не исследуя почти столько же времени. Краткие алгоритмы анимации позволяют создавать плавные конструкции с нулевым джетлагом при переходе; отлично подходит для разработчиков спортивных приложений! Автоматическое обнаружение устройств позволяет доставлять ваши приложения в наилучшем виде для устройств любого типа. Игровой движок поддерживает такие аспекты, как разработка визуальных декораций, поддержка мультимедиа, интегрированные сетевые инструменты для многопользовательских игр и поддержка пользовательского ввода. Он также поддерживает краткую физику, анимацию и частицы, а также алгоритм искусственного интеллекта. Этот алгоритм поможет вам поддерживать рост ваших игр в зависимости от того, что ваши пользователи делают с ним. V-Play предлагает одну из самых богатых библиотек инструментов и функций для 2D-игр.

Смотреть

к содержанию ↑

Unity

Unity 3D — самый популярный игровой движок в мире. Разработчики используют его различными способами для создания игр, которые помогли им заработать миллиарды долларов вместе взятых. Многие игры, которые вы найдете в библиотеках коллекций игр Steam, использовали Unity для создания своих игр. Это не просто то, что вы можете использовать для создания игр для браузера. Это также то, что вы можете использовать для создания действительно крутых и забавных игр для огромного набора устройств. Это касается iOS, Android, Windows, Linux, PlayStation, XBOX, Wii, виртуальной реальности и телевизоров.

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

Смотреть

к содержанию ↑

Play My Code

Игры и игры вместе стали такой большой частью истории. Мы все играли хотя бы в одну игру за всю свою жизнь, и, скорее всего, она нам очень понравилась. Некоторые предпочитают играть в традиционные игры, такие как шахматы, а в 21 веке играть в цифровые игры гораздо сложнее. Эти цифровые игры не всегда сложны, но могут быть невероятно увлекательными и интерактивными. Зная это, у всех нас есть креативные соки, необходимые для создания собственной игры. У нас нет подходящих инструментов для этого.

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

Смотреть

к содержанию ↑

WiMi5

Вы когда-нибудь хотели узнать, что значит создавать, публиковать и монетизировать онлайн-игры, не покидая своего веб-браузера? Это своего рода натяжение, которое Wimi5 пытается сделать здесь. Это интерактивная платформа для разработки игр, которая поддерживает многие динамики и аспекты современных онлайн-игр, которые мы имеем сегодня. Он объединяет все это в едином пользовательском интерфейсе панели. Затем вы можете превратить свои идеи на бумаге в реальный ощутимый опыт для браузера.

Смотреть

к содержанию ↑

lychee.js

Личи может показаться надуманным в контексте разработки онлайн-браузерных игр. Но на самом деле некоторые примеры показывают, что вы можете использовать Личи для создания 2D игр. Что еще интереснее, вы можете подключить Lychee к существующему игровому движку. Он использует некоторые из этих смехотворно хороших функций. Личи построен на основе ECMAScript 2016 и объединяет в себе как искусственный интеллект, так и машинное обучение. Это обеспечивает надежный и прогрессивный подход для разработки приложений высокого класса.

Смотреть

к содержанию ↑

QICI Engine

QICI использует движок Phaser и создает собственный интерфейс, который интегрирует разработку игр непосредственно в браузер. Вам даже не понадобится использовать редактор кода (если вы этого не хотите) на своем компьютере для корректировки кода и других важных аспектов. Как ни странно, вы могли бы даже разработать на своем мобильном устройстве. Попрощайтесь с этими длинными и скучными поездками на поезде. Теперь вы можете просто работать над своей игрой, пока вы путешествуете.

С движком QICI, создающим HTML5-игры точно так же, как веб-разработка, используйте ваш любимый редактор кода, ваш любимый веб-браузер, используйте язык JavaScript и все лучшие инструменты веб-разработки. QICI Engine позаботится о сложности базовых технологий, поэтому вы просто сосредоточитесь на том, что важно — на создании игры! QICI был создан разработчиками и дизайнерами, которые десятилетиями накапливали опыт работы с пользовательскими интерфейсами интуитивно. Креативная панель инструментов повышает вашу производительность, поскольку вы учитесь полагаться на функциональные инструменты и функции, которые делают вашу жизнь в десять раз проще.

Смотреть

к содержанию ↑

Panda.js

Panda.js даст вам представление о том, как выглядит 2D-движок HTML5 для создания игр в браузере. Небольшой размер пакета Panda и удобная документация для изучения команд делают ее блестящим выбором для начинающих разработчиков онлайн-игр.

Будучи крошечным движком, Panda поддерживает множество библиотек и алгоритмов, о которых вы узнаете больше с помощью любого игрового движка, который вы решите использовать. Рендеринг осуществляется через библиотеку Pixi.js. Вы также можете создавать красивые эффекты на основе частиц. Физический движок гарантирует, что ваши игры будут подлинными. Вы можете создавать собственные плагины Panda.js и делиться ими с другими разработчиками. Ваши игры могут быть ускорены с помощью краткого локального хранилища данных. Создавайте собственные события Google Analytics и отслеживайте их эффективность в вашей игре. И да, это еще не все, но вы сами должны это проверить. Настоящее обучение начинается, когда вы пишете первые пару строк кода.

Смотреть

к содержанию ↑

Goo Create

Goo Create позволяет создавать игры, даже если вы никогда не читали и не видели код строки раньше. Это очень похоже на популярное приложение для обучения программированию, где вы в основном создаете что-то через графический пользовательский интерфейс. С Goo Create вы будете использовать этот пользовательский интерфейс для создания красивых игровых пейзажей, которые вы можете дополнить своими собственными идеями, чтобы встроить их в игру. Создание версии-копии Flappy Bird займет у вас всего несколько часов вашего времени, так как все команды встроены в саму программу.

Goo Create — это проект с открытым исходным кодом, который предоставляет платную поддержку и тарифные планы для серьезных разработчиков игр. Goo Create удаляет бесконечное количество часов, затрачиваемое на рендеринг всего пакета проекта. Это потому, что все встроено в браузер. Он также автоматически компилируется в браузере. Это не обязательно должна быть игра, которую вы строите; Goo Create обслуживает экспертов по анимации и бренды, которые хотят создавать красивые цифровые визуальные демонстрации для своих продуктов или витрин. Инструменты, которые вам нужны, все есть.

Смотреть

к содержанию ↑

Kiwi.js

Kiwi.js убирает разочарование от разработки 2D-игр для браузеров HTML5. В платформу встроен сверхбыстрый движок рендеринга WebGL и Canvas, который может развертывать ваши игры на настольных и мобильных устройствах. Богатая коллекция плагинов Kiwi позволяет создавать более значимые игровые возможности. Вот некоторые из этих плагинов: механизм достижений, позволяющий создавать пользовательские достижения на основе прогресса пользователя, алгоритм искусственного интеллекта, позволяющий вашей игре развиваться в зависимости от выбора, который делают пользователи. создание, расширенная интеграция физики в ваши игры, управление квестами, спрайты и тени для всех ситуаций, а также разъем для социальных сетей, чтобы ваши пользователи могли войти в систему, используя данные социальных сетей, а также поделиться своими достижениями в социальных сетях , Kiwi. js предлагает одни из лучших на рынке учебных пособий, благодаря которым любой может быстро создать свою первую HTML5-игру с использованием движка JavaScript.

Смотреть

к содержанию ↑

Stage.js

В зависимости от ваших требований или предыдущего опыта разработки онлайн-игр Stage.js может быть гибким и простым решением для создания ваших первых 2D-игр с поддержкой HTML5 и JavaScript. Stage.js с открытым исходным кодом и поддерживает ваши любимые платформы. Создавайте динамичные головоломки или игры, основанные на простой физике.

Смотреть

к содержанию ↑

melonJS

Melon.js появился в процессе изучения разработки игр с использованием JavaScript. Это привело к тому, что Melon.js обладает следующими функциями: встроенный в спрайт JS-движок для разработки 2D-игр. Это независимый проект, который не требует дополнительных библиотек для работы, поддерживает мобильные устройства, а также все ведущие браузеры, оптимизация для мобильные устройства для управления движением и аппаратные средства, встроенная поддержка звука HTML5, практичный физический движок, позволяющий снизить нагрузку на процессор, множество эффектов, которые потребуются для создания функциональной онлайновой игры в браузере. Форумы сообщества размещаются в группах Google. Здесь вы можете быстро найти ответы на свои вопросы о том, как работает Melon.js или в случае возникновения ошибок. Документация содержит несколько десятков демонстрационных приложений, созданных с помощью Melon, некоторые из которых имеют открытый исходный код и могут быть использованы для изучения различных аспектов разработки игр.

Смотреть

к содержанию ↑

PlayCanvas

PlayCanvas — игровой движок полного спектра с возможностями 3D. Его графическая инфраструктура поддерживает WebGL 3D, физический рендеринг, функции краткого освещения (с тенями), световые карты, сетки, движок графического процессора для частиц со встроенным редактором PostFX, что позволяет интегрировать 3D-материалы из самого любимого 3D-программного обеспечения на рынке. 3D-физика возможна благодаря движку Ammo.js 3D. Суть в том, что PlayCanvas работает в облаке, поэтому вы можете создавать браузерные игры (все основные поддерживаемые браузеры) из своего браузера.

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

Смотреть

к содержанию ↑

Pixi.js

Pixi.js — движок рендеринга 2D-игр, предназначенный для игр HTML5. Цель состоит в том, чтобы сделать Pixi максимально быстрым на любом типе устройства. С Pixi.js вы можете пользоваться преимуществами HAC (аппаратного ускорения), не тратя бесчисленные часы на изучение этой концепции. Аудитория / пользователи Pixi — это те, кто не хочет использовать WebGL, но хочет использовать богатый игровой контент, интерактивные дисплеи и приложения, которые одинаково поддерживаются на всех платформах. Это не означает, что Pixi не поддерживает WebGL. Конечно, это так же, как и поддержка свойства Canvas HTML5. Именно способ, которым был построен Pixi, позволяет ему быть плавным, быстрым и равномерно интерактивным движком рендеринга.

Смотреть

к содержанию ↑

BabylonJS

Вы слышали о Babylon.js, даже если раньше не слышали о разработке игр. Эта библиотека успешно эксплуатировалась в течение тонны лет; он продолжает подниматься на вершину как один из ведущих игровых движков JavaScript с поддержкой WebDL и 3D-разработок. Babylon не требует установки на вашем компьютере как внутренняя сущность. Таким образом, вся разработка может происходить в самом браузере / редакторе кода. Это делает его привлекательным выбором для тех, кто хочет развиваться на ходу. Вавилон, безусловно, является одним из самых глубоких игровых движков, которые можно использовать для создания традиционно анимированных игровых игр или тщательно разработанных проектов, которые будут напоминать более глубокую способность к разрешению и интерактивности.

Смотреть

к содержанию ↑

PhysicsJS

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

Смотреть

к содержанию ↑

Crafty

Crafty лучше всего определить как игровой движок JavaScript, который собирает набор компонентов, которые можно использовать для создания интерактивных игр. С помощью компонентов вы можете сделать выбор для своей игры, который не будет раздувать вашу кодовую базу, или даст вам слишком много головной боли, если вам нужно перенести часть кода в другое место. Связывание событий с Crafty позволяет вам управлять поведением системных событий. Таким образом, вы можете создавать собственные звонки и действия. Небольшой размер Crafty — это то, что больше всего нравится разработчикам игр для новичков; Некоторые разработчики подразумевают, что вы можете создавать игры, не имея Crafty в своей коллекции движков, но удобная система компонентов позволяет быстро составить план развития вашей игры и ее прогресса. Crafty.js имеет необычное сообщество, которое заинтересовано в том, чтобы помочь другим разработчикам игр создавать и структурировать игры.

Смотреть

к содержанию ↑

Phaser

Phaser — явный фаворит среди опытных и начинающих разработчиков игр, которые хотят создавать игры с использованием фреймворка HTML5. Его кодовая база с открытым исходным кодом и большое сообщество позволяют любому быстро начать создавать игры для мобильных устройств и настольных компьютеров. JavaScript-функция Phaser поставляется вместе с библиотекой Pixi.js, которая помогает объединять компоненты WebGL и Canvas. С помощью Phaser вы можете создавать игры, которые приносят вам миллионы долларов дохода, если вам удастся использовать действительно феноменальную игру.

Предварительный загрузчик Phaser позволяет разработчикам легко загружать свои игровые ресурсы и автоматически обрабатывать их. Таким образом, вам не нужно тратить время на написание обширного кода для каждой части игры. Phaser использует много полезных внешних библиотек для достижения звездных физических движений, в то же время позволяя тратить анимационные функции, чтобы ваши игры выглядели профессионально и привлекательно. Вы можете получить первый опыт игры Phaser в реальной жизни всего за пару часов. На таких сайтах, как GitHub, вы можете позаимствовать тонну кода, не говоря уже о бесконечных кучах великолепных учебных пособий, которые помогут вам быстро освоиться.

Смотреть

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

cms, html, javascript, web, компонент

Romuald Shmidtelson

Поделиться постом:

Игровые движки HTML5 — найдите то, что подходит именно вам

GDevelop	0бесплатно (MIT)	105	50	2d, звуки, столкновения, физика, бесплатно, facebook, gdevelop, pixi, gui, быстро,	15227961873 апреля 2018 г.	Подробнее
Modd.io	0бесплатно	105	50	2d, звук, коллизия, бесплатная, облачная, гейммейкер, мобильная, физика, редактор карт, сети,	156712320029 августа 2019 г.	Подробнее
Конструкция 2	0,1 варьируется	100	40	создатель игр, бесплатно, 2d, 3d, webgl, звуки, коллизии, физика,	140844960019 августа 2014 г.	Подробнее
ВавилонДжС	0бесплатно	100	50	webgl, 3d, звуки, коллизии, физика, отладка,	1527517336 28 мая 2018 г.	Подробнее
Двигатель ImpactJS	0бесплатно	85	35	2d, звуки, коллизии, физика, отладка, редактор карт,	140654880028 июля 2014 г.	Подробнее
EaselJS	0бесплатно (MIT)	64	45	flash-like, 2d, звуки, бесплатно,	1513951479 22 декабря 2017 г.	Подробнее
Фазер	0бесплатно (MIT)	64	45	flash-like, 2d, звуки, коллизии, физика, машинопись, webgl, бесплатно,	15227961873 апреля 2018 г.	Подробнее
pixi.js	0бесплатно (MIT)	58	45	2d, webgl, бесплатно,	15227612413 апреля 2018 г.	Подробнее
Гейммейкер	200 долларов	54	40	гейммейкер, 2d, звуки, коллизии, физика, отладка, редактор карт,	14074992008 августа 2014 г.	Подробнее
Три.js	0бесплатно (MIT)	52	45	3D, webgl, бесплатно,	152105147514 марта 2018 г.	Подробнее
PlayCanvas	0бесплатно	52	45	3D, облачное, бесплатно, webgl, звуки,	15228123463 апреля 2018 г.	Подробнее
Турбуленц	0бесплатно (MIT)	48	35	2d, 3d, webgl, звуки, коллизии, физика, отладка, сеть,	1450832952 22 декабря 2015 г.	Подробнее
личиJS	0бесплатно (MIT)	45	45	2d, звуки, отладка, пользовательский интерфейс, сеть,	152251798731 марта 2018 г.	Подробнее
дыняJS	0бесплатно (MIT)	43	45	2d, звуки, столкновения, физика, бесплатно, редактор карт,	1517063546 27 января 2018 г.	Подробнее
Cocos2d-X	0бесплатно (MIT)	42	45	ios-like, бесплатно, 2d, физика,	143040968730 апреля 2015 г.	Подробнее
УЭЙД	0бесплатно (варьируется)	42	45	2d, изометрия, модульность, физика,	14072400005 августа 2014 г.	Подробнее
Квинтус	0бесплатно (MIT)	41	40	jquery-подобный, 2d, звуки, бесплатно,	1454439250 2 февраля 2016 г.	Подробнее
Лукавый	0бесплатно (MIT)	39	45	бесплатно, 2d, звуки, коллизии,	15188	17 февраля 2018 г.	Подробнее
энчант.js	0бесплатно (MIT)	36	35	2d, звуки, столкновения, физика, webgl, бесплатно,	14519083274 января 2016	Подробнее
LimeJS	0бесплатно (Apache)	36	40	2d, звуки, физика, бесплатно,	1433177258 1 июня 2015 г.	Подробнее
Изогенный двигатель	0,1 варьируется	34	40	2d, изометрия, физика, поиск пути, создание сетей,	1393263288 24 февраля 2014 г.	Подробнее
Panda.js	0бесплатно (MIT)	31	35	бесплатно, 2d, webgl, мобильный, физика, звуки, модульный,	152113907015 марта 2018 г.	Подробнее
Киви.js	0бесплатно (MIT)	30	45	2d, webgl, физика, бесплатно,	144762593515 ноября 2015 г.	Подробнее
GC DevKit	0бесплатно (Мозилла)	29	35	2d, mobile-first, звуки, коллизии, физика, отладка,	1458840624 24 марта 2016 г.	Подробнее
воксель.js	0бесплатно (BSD)	28	40	webgl, 3d, воксель, звуки, физика, сеть,	144400	октября 2015 г.	Подробнее

Рескин игры

Рескин игры

5 Преимущества рескина мобильных игр

Рескины мобильных игр стали популярными в индустрии мобильных приложений. Обновление игр предлагает инновационные, но недорогие игровые решения, которые нравятся как брендам, так и потребителям.

Давайте разберемся, почему скины для мобильных игр так популярны в наши дни. Вот 5 преимуществ рескинов мобильных игр.

Преимущество №1: Обновления игр для конкурентного рынка

Индустрия мобильных игр — рынок с высокой конкуренцией. Каждый год создаются тысячи игр благодаря многочисленным конкурентам в бизнесе мобильных игр. Из-за этого некоторые игровые жанры выделяются в зависимости от тенденции рынка. Это могут быть бесконечные раннеры, аркадные игры, головоломки, гиперказуальные игры и многое другое.

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

Преимущество № 2: Креативность при обновлении мобильных игр

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

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

Преимущество №3: Рескины для мобильных игр обеспечивают эффективность

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

В конечном счете, скины для мобильных игр сокращают время разработки без ущерба для качества. Рескины взяты из проверенных и отлаженных игр, поэтому качество гарантировано. При создании игр меньше рисков.

Результатом меньшего риска и меньшего количества необходимых ресурсов является более высокая рентабельность инвестиций (ROI). Минимальные ресурсы, необходимые для рескининга, в сочетании с эффективностью игр по привлечению аудитории позволяют брендам достигать своих целей и получать высокую прибыль.

Преимущество № 4. Рескиннинг повышает вовлеченность аудитории

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

• Портирование игры для других устройств
• Локализация языка и контента для соответствия сегментам рынка
• Использование новых историй/тем для переиздания старых заголовков
• Включение игр в акции и мероприятия

Преимущество № 5. Модификации мобильных игр поддерживают инновации

Использование отточенного игрового движка также снижает риски при разработке игр, включая затраты. Если проблем с разработкой игр будет меньше, у разработчиков игр будет больше ресурсов для изучения новых идей и выхода на новые рынки. Такое перераспределение ресурсов даст брендам возможность больше узнать о своей целевой аудитории и внедрить инновации в соответствии со своими целями.

Примеры игровых скинов

1. Minions Banana Frenzy

Minions Banana Frenzy использует игровой движок Fruit Blade и добавляет забавные характеристики, которыми славятся миньоны. Вместо кокосов и персиков в обновлении игры использовались культовые бананы Chiquita из-за их отношения к кампании Миньонов.

2. Hyundai Beat Bozza

Hyundai Beat Bozza — это рескин мобильной игры Penalty Kick. В игре был изменен скин, чтобы продвигать Hyundai за счет улучшенного игрового процесса. В игру были добавлены не только визуальные эффекты, но и более сложные уровни.

3. OSN On The Run

OSN On The Run — это рескин, созданный с использованием игрового движка Giant Hamster Run. Игра была сделана для продвижения услуг OSN в более занимательной форме. Это была идеальная игра для того, чтобы рассказать зрителям о том, как трудно вернуться домой пораньше, чтобы посмотреть любимые телепередачи.

4. Data Hop

Data Hop — это новая версия простой, но увлекательной игры Pet Hop.