Разработка игры html5: Пишем HTML5-игру за 20 минут, или введение в Phaser framework / Habr – Разработка HTML5 игры под Android с нуля и до релиза / Habr

Разработка игр на HTML5 - онлайн курс по созданию игр на HTML5 | GeekBrains

Алексей Кадочников

Frontend-developer в Mail.Ru Group. Ведущий преподаватель GeekBrains с опытом более 2 лет, обучил более 30 000 студентов. Эксперт в области backend-разработки для интернет-магазинов.

Андрей Буранов

Cистемный администратор ОС Linux в Mail.Ru Group. Работал в компании NetCracker: получил опыт инженера NIX-систем и тренера-эксперта, преподавал курсы "Linux and UNIX Basic" и "Файловые системы".

Олег Поливанный

Senior Software Engineer, Game Developer в команде Toptal. Долгое время занимался играми (и со стороны сервера, и со стороны клиента), работал в компаниях MAPILab, Realore, Intenium.

Дмитрий Бондарчук

Ведущий разработчик в зарубежном стартапе (Нидерланды). Основатель креативного агентства "Амика". Опыт в разработке и руководстве командой 10 лет.

Игорь Шапилов

Backend-разработчик (PHP) в веб-студии МегаМир IT. За 10 лет в IT написал множество программ по математическим моделям, разработал несколько небольших игр, Android-приложение для выдачи заданий сотрудникам сервисного центра.

Валентин Тюстин

3D/2D-Artist, работал в Центре визуализации при НИИСИ РАН, сейчас 3D-художник в студии IT Territory (Mail.Ru).

Иоанн Павловский

Разрабатывал инди-игры для мобильных платформ, создавал образы персонажей и геймдизайн игры Three Heroes, делает игру для HTC Vive.

На чём делать HTML5 игры? — Cyber Code

С уходом Flash из браузеров необходимость делать браузерные игры на чём-то другом возросла чуть больше чем полностью. В технологиях альтернативы нет, она одна — HTML5 технология.

И для того чтобы начать делать HTML5 игры, хорошо бы сначала выбрать средство для этого, благо что выбор в HTML5 движках и фреймворках для игр имеется)

Сначала рассмотрим HTML5 движки и фреймворки хорошо подходящие для создания 2D игр, а потом рассмотрим для 3D.

Стоит рассказать про технологии рендера HTML5, их две: canvas и WebGL. Суть разницы: canvas — это для отображения 2D и работает без проблем практически во всех браузерах, а

WebGL — это для рендера 3D и может работать не во всех браузерах.

Для HTML5 2D пару лет назад было очень важно чтобы движок умел рендерить в canvas, а не только в WebGL, т.к. порталы игр брали игры только на canvas. Но сейчас ситуация меняется и WebGL становится более обыденным и показателем большой скорости рендера в сравнение с canvas. Но если вы делаете 2D HTML5 игру, то на всякий случай она должна уметь рендериться в canvas — вдруг спонсор не захочет WebGL.

На просторах инета я нашёл вот такую таблицу популярности HTML5 2D движков: https://html5gameengine.com

Коротко рассмотрю топ из этой таблицы в своём порядке)

Основной фишкой PixiJS является скорость рендера. Авторы утверждают, что на данный момент это самый быстрый движок рендеринга 2D. В основном используется WebGL рендер везде где это возможно и лишь для старых браузеров автоматически включается рендер в canvas.

На оф. сайте есть кучка примеров и документация.

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

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

Если же вы хотите, чтобы такие базовые вещи были уже сразу из коробки, то прошу к ознакомлению с Phaser-ом.

Phaser — HTML5 игровой движок с открытым исходным кодом. Он хорошо поддерживается Ричардом Дэви и сообществом вокруг него. Для рендера используется PixiJS, так что он может рендерить в canvas или webGL по выбору и за скорость можно не беспокоиться.

Тонны примеров на оф. сайте, огромное комьюнити и отличный форум.

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

Есть готовые шаблоны в MS Visual Studio для новых проектов Phaser с использованием языка TypeScript.

Я выбрал этот движок после долгих раздумий между CreateJS, PixiJS и Phaser и остался доволен. После Haxe+OpenFL пришло приятное ощущение, что я занимаюсь разработкой игры, а не костылями для разработки игры) Я сразу решил использовать TypeScript и был приятно удивлён, что в MSVS есть готовые шаблоны проектов.

ImpactJS занимает топовые места рейтинга HTML5 Canvas Game Engine с самого 2010 года, когда он и появился на публике. Это игровой движок на JavaScript. Поставляется вместе с Ejecta Framework, который помогает публиковать игры на iOS и tvOS. Ejecta берет исходники в js и компилит его под OpenGL. По словам разработчиков игры не будут отличаться от нативных игр на Objective-C.

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

Но такие прелести уже не бесплатны, ImpactJS стоит $99 USD. Но, если всё взвесить, то я думаю эта сумма отобьётся и оправдается после 1-2 проданных игр.

Сам я опыта с импактом не имел, но на вид он мне нравится.

Преимуществом фреймворка CreateJS является то, что он достаточно унифицирован под браузеры и его поддерживают Adobe пр., т.е. это некая гарантия (наверно), что фреймворк будет обновляться и выдавать минимум багов в бразуерах. Хотя мы то с вами знаем, что поддержка Adobe ничего не значит)

Ну а если серьёзно, то фреймворк выглядит опрятным и я знаю минимум 2-х человек, которые его полюбили и не собираются перелазить на что-то даже более удобное, например на Phaser.

Беспрепятственное встраивание любого API, ads и пр.

Construct 2 знаменит тем, что даёт возможность что-то сделать не требуя от творца глубоких навыков программирования, а т.е. является именно конструктором, от этого и популярный.

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

 

Теперь рассмотрим на чём можно делать HTML5 3D игры.

Unity 5 — один из лучших движков для создания 2D и 3D-игр так же поддерживает экспорт в HTML5 WebGL.

Я думаю будет не мало Unity WebGL игр на порталах, которые уже начали бодро закупать 3D WebGL. Вы можете попробовать демо-версию Unity WebGL здесь.

Стоимость: Бесплатная / Платная лицензии.

Unreal Engine 4 представляет собой набор интегрированных инструментов для разработчиков игр для разработки и создания игр, он так же, как и Unity, поддерживает экспорт в HTML5 WebGL начиная с версии 4.7.

Стоимость: Бесплатная / Платная лицензии.

Three.js — легковесная кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений. Three.js скрипты могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL. Исходный код расположен в репозитории GitHub.
Babylon.js — легковесный кроссбраузерный JavaScript-фреймворк, использующий API WebGL для отображения 2D и 3D-графики в браузере без использования каких-либо сторонних плагинов и дополнений.

Babylon.js использует элемент HTML5 Canvas. Фреймворк распространяется под лицензией Apache 2. Исходный код расположен на GitHub.

Фреймворк был разработан Дэвидом Катушем (David Catuhe), Дэвидом Руссе (David Rousset), Пьером Ларард (Pierre Lagarde), и Мишель Руссо (Michel Rousseau), а также независимыми сторонними разработчиками.

На тему сравнения Three.js и Babylon.js есть не плохая статья на хабре: Игровой мир WebGL или Three.js vs Babylon.js.

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

Для себя я выбрал Phaser для создания 2D HTML5 игр. А для 3D HTML5 я бы взял Unity.

Поделиться ссылкой:

Похожее

Разработка 2D игр под Windows и HTML5 без программирования / Habr

Привет Хабраюзеры!

Сегодня я хочу представить вашему вниманию замечательный конструктор 2D игр (для Windows и в частности для HTML5) Scirra Construct.

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

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

Команда из scirra.com с недавнего времени распространяет два своих конструктора:

— Construct Classic (Windows) Абсолютно бесплатно
— Construct 2 (HTML5) Условно-бесплатно (с ограничениями)

Ну а теперь поговорим об отличительных характеристиках каждого.

Первый, а именно Construct Classic распространяется абсолютно бесплатно и позволяет создавать DirectX игры для платформы Windows. Его главное преимущество в открытом исходном коде, т.е при создании игры вы можете спокойно продавать ее и использовать в других коммерческих целях. Тем не менее, это не делает его слабее как конструктор. Возможности Construct Classic пожалуй во многом превышают возможности Construct 2, но это уже скорее из-за недоработки второго и пока ограниченных возможностей html5.

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

Разнообразие жанров в конструкторе действительно радует, по мне так он просто идеален для создания платформеров.

Самый простой пример создания платформера в Construct Classic проходит таким образом:

— Добавление заранее нарисованного (или скаченного с интернета в виде спрайта) персонажа, а затем анимации его движений. Недостаток в том, что можно добавлять анимацию только по отдельным кадрам, а не всю целиком (как например, в формате .gif). Но если вы, к примеру, сами рисуете анимацию в Flash, то проблема решается покадровым сохранением.
— Назначить вашему персонажу специальное поведение Platform (в этом поведении можно редактировать такие свойства персонажа как скорость движения, скорость прыжка, гравитацию, назначение кнопок управления и т.д.)
— Создание поверхности (опоры) для персонажа по которой он собственно и будет бегать.
— Добавление заднего фона на отдельном слое.
— Добавление врагов, игровых очков, звуков и т.д.
— Добавление событий и действий в Evevnt Sheet Editor (например: если персонаж дотрагивается до врага, то у персонажа отнимается жизнь).

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

Если кто-то заинтересовался, то детальный процесс создания платформера рассматривается в этой статье:
Создаем платформер в Construct Classic за 5 минут.

Вот некоторые примеры игр разработанных в Construct Classic

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

А теперь поговорим о втором детище от Scirra, которое позволяет создавать игры на HTML5. А именно о Construct 2. На данный момент он распространяется в трех вариантах.

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

Второй вариант стоит 79$ и включает в себя создание неограниченного количества событий и слоев. А также имеет лимитную лицензию, если ваш доход от игры или приложения не превышает 5000$.

Третий вариант предоставляет все-то же самое что и второй, только лицензия приобретается (насколько я понял) полностью и обойдется этот вариант в 375 зеленых.

Construct 2 прежде всего отличается от Construct Classic своими слегка урезанными возможностями. По крайней мере, в нем осталось очень мало объектов и поведений в отличие от предшественника. Но между тем сам конструктор стал еще дружелюбнее к пользователю и освоил живое перетаскивание изображений в программу по средствам drug and drop. Да и самое главное возможность создания игр под устройства, поддерживающие HTML5, включающая поддержку тач управления (Привет iOS).

Пример начального создания платформера в Construct 2.

Физика в Construct 2 (также имеется и в Construct Classic), в качестве движка используется Box2D.

В заключении могу сказать, что один из главных минусов обоих конструкторов состоит в том, что работают они только под Windows. Это конечно не мешает вам попробовать запуск программы в Wine или Crossover, но все же факт остается фактом. В итоге можно собраться небольшой компанией из нескольких человек и попытаться создать что-то “свое” и может быть даже выпустить это “свое” в свет. В одиночку работать над игрой можно, но сложно, если сказано просто, то это не значит быстро. Как минимум, нужно подумать о создании игровой механики, графики, музыки, а потом все это реализовать. Но сам процесс построения игры, взаимодействия игровой механики, связывание основных событий с действиями, реализован в Consctruct на очень высоком и доступном для понимания юзера уровне. Конечно это не первый подобный игровой конструктор, (взять к примеру GameMaker), у каждого есть свои плюсы и недостатки, но по своей простоте разработке 2D игры для Windows, по крайней мере Construct Classic явно вырывается вперед.

Все для тех же заинтересованных:

Урок по созданию TDS игры в Construct 2.

Примеры игр созданных в Construct 2.

Редактор для создания HTML5 игр / itProger

Разработка игр на HTML5 появилась уже давно и уже сейчас есть множество потрясающих проектов. Мы расскажем про специальный редактор для создания таких HTML5 игр.

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

Небольшой список таких игр приведен ниже:

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

Game Coder
Программа Game Coder позиционируется как кросс-платформенная программа для создания игр на основе HTML5 и при помощи языка программирования JavaScript.

Программу можно установить как на Windows, так и на другие платформы такие, как: Mac, Linux и даже Андроид. Все что вам потребуется для установки IDE это скачать его и установить на ваш компьютер/телефон.


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


Установка программы

Установка не требует каких-то особых знаний. Тем не менее, если что-то не получается, то вы можете посмотреть специальный видео урок по установке данной среды разработки:


Особенности среды разработки

Среда имеет Debugger, а также консоль для вывода различных сообщений. Это позволяет следить за кодом и за возможными ошибками в нем. Есть встроенный визуальный редактор объектов, благодаря которому можно намного быстрее и качественнее создавать игры на HTML. Он позволяет создавать игровые локации и настраивать эффекты в пару кликов. Также имеет встроенный дизайнер уровней. 


Для создания мультиплеерных проектов или же игр, которые должны связываться с сервером здесь есть встроенный терминал, который поддерживает все стандартные команды. Также есть поддержка серверов от PHP и NodeJS.


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


Из интересных фишек можно также выделить моментальную возможность поиска ошибок в Google или Яндекс. Кроме того, вы можете писать код в "живом" режиме с моментальными изменениями. 


Редактор быстрый и позволяет создавать игры буквально за 5-10 минут. Ниже вы можете посмотреть видео с созданием небольшой игры в Game Coder за пару минут:


Топ 10 HTML5 игр / ua-hosting.company corporate blog / Habr

В последние годы HTML5 и JavaScript активно набирают популярность среди разработчиков инди-игр. Причина такого выбора очевидна — потенциал двух приложений в производстве игр. HTML5 теперь считается серьезной игровой платформой. Дальше для примера приведены 10 топовых игр с использованием HTML5.

1. A Grain of Truth

Игра была разработана братьями Рудовски (Польша). Суть игры проста — юная путешественница в поисках мага. Это игра жанра «point-and-click» (квест) полна приключений, с очень красивой графикой полностью погружает геймеров в игровой мир. Игра написана с помощью JQuery, что в очередной раз показывает, что данный фреймворк можно использовать не только для создания сайтов, но и для развлечений.

играть

2. Save the Day

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

Игра была создана на открытом игровом движке Turbulenz на HTML5. Движек Turbulenz предоставляет широкий выбор функций и сервисов для создания игр (отказоустойчивость, асинхронная загрузка, масштабируемость). Вообщем — движок для создания игр, использующих веб-технологии, а не нативный код. Turbulenz — игровой движок для социальных игр, использующий HTML5, WebGL JavaScript. Его возможности позволяют делать захватывающие реалтайм 3D игры, с физикой.

играть

3. Runfield

Runfield — специфическое название, простой, но немного странной игры. Геймер примеряет роль гипер — прыгучей лисы. Кликаете — прыгаете, перепрыгиваете препятствия… словом играете). Игра была разработана Ilmari Heikkinen, графика создана с использованием canvas, одного из элементов HTML5.

играть

4. Cut the Rope

Перереж веревку — накорми зверюшку-лягушку. Создана студией разработки игр в России, ZeptoLab в 2010 году. Головоломка, которая пришлась по душе многим геймерам со всего мира. Суть такова — лягушонка нужно накормить разноцветными конфетами на веревках, которые нужно «правильно» перерезать. Сюжет, правда, забавный. На каждом следующем уровне добавляется количество веревок, мыльные пузырьки, ракеты… собираются звездочки, открываются новые локации… что писать — лучше раз сыграть) (заняло некоторое время разобраться, где именно на сайте кнопочка «играть» — внизу «Give it a fry»)

играть

5. Robots are People Too

Robots are People Too (роботы тоже люди?) игра на canvas/WebGL, многопользовательская игра (на любителя), разработана с использованием HTML5 canvas. Она отличается от остальных игр, сложная и одновременно с этим интересная, ведь нужно учиться играть двумя руками. Нужно управлять двумя роботами. Управление W-A-S-D для одного робота (синего) и стрелки (влево-вправо-вверх-вниз) для другого (красного) робота.

играть

6. BrowserQuest

Многопользовательская RPG игра, BrowserQuest. Для создания графики игры использован тот же — HTML5 canvas. Так как игра создана на HTML5/JavaScript, то она доступна через большинство браузеров и платформ. Сюжет игры: молодой разведчик посещает разные опасные места в поисках приключений и острых ощущений. Использованы такие технологии как web worker (определяет API для создания фоновых скриптов в веб-приложениях при этом не блокируя сам процесс игры), localStorage (сохраняет историю игры).

играть

7. Sumon

Игра Sumon известна среди геймеров. Головоломка Sumon от ideateca, нативное приложение, которое также разработано с помощью веб-технологии HTML5. Более интересной ее делает использование фреймворка CocoonJS (компилит HTML5 приложения). Платформа Ludei уже была использована при разработке более 500 игр, эта игра не исключение). Графика Sumon создана с использованием HTML5 сanvas.

играть

8. Lux Ahoy

Игра — аркада, которая превратит Вас в пирата. Нужно ударить противника с пушки ядром, рассчитав угол и мощность. Графика игры были разработаны и созданы в Flash, а затем были перенесены на HTML5. К сожалению, игра запускается не во всех браузерах (заходить в Lux Ahoy нужно браузером Google Chrome).

играть

9. The Convergence

Convergence — игра похожа на Robots are People Too. Одиночная игра, которая требует одновременно координировать двух героев. Для графики был использован HTML5 сanvas.

10. Bombermine

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

играть

Взято на сайте

15 HTML5 игр с открытым исходным кодом

Самое замечательное то, что HTML5-игры работают во всех современных браузерах: Яндекс.Браузер, Chrome и Firefox, но Вы также можете играть в данные игры и на мобильных платформах: iPhone и Android (через Cordova – “cordova.apache.org/”). Взглянув на игры с открытым исходным кодом HTML5 – Вы можете научиться разрабатывать свои собственные.
Скачать исходники для статьи можно ниже

Все эти игры построены на HTML5 и JavaScript. В подборку мы также включили несколько многопользовательских HTML5 игр.

1. Игра 2048

Играть в игру: “gabrielecirulli.github.io/2048/”
Посмотреть код игры: “github.com/gabrielecirulli/2048”

2. Clumsy Bird

Играть в игру: “ellisonleao.github.io/clumsy-bird/”
Посмотреть код игры:
“github.com/ellisonleao/clumsy-bird”

3. Hextris

Играть в игру:”hextris.github.io/hextris/”
Посмотреть код игры:

4. Pacman in HTML5 Canvas

Играть в игру:”pacman.platzh2rsch.ch/”
Посмотреть код игры: “github.com/platzhersh/pacman-canvas”

5. Astray

Играть в игру:”wwwtyro.github.io/Astray/”
Посмотреть код игры: “github.com/wwwtyro/Astray”

6. Canvas Tetris

Играть в игру:”dionyziz.logimus.com/tetris/”
Посмотреть код игры: “github.com/dionyziz/canvas-tetris”

7. Agent 8 ball

Играть в игру:”agent8ball.com/”
Посмотреть код игры: “github.com/thinkpixellab/agent8ball”

8. Tic Tac Toe

Играть в игру:”codepen.io/timrijkse/full/XjLGKv/”
Посмотреть код игры: “codepen.io/timrijkse/pen/XjLGKv”

9. 0hh2

Играть в игру:”0hh2.com/”
Посмотреть код игры: “github.com/Q42/0hh2”

10. Javascript Pseudo 3D Racer

Играть в игру:”codeincomplete.com/games/racer/v4-final/”
Посмотреть код игры: “github.com/jakesgordon/javascript-racer/”

Мультиплеер игры:

11. mk.js

Играть в игру:”mk.mgechev.com/”
Посмотреть код игры: “github.com/mgechev/mk.js”

12. Shootr

Играть в игру:”shootr.signalr.net/”
Посмотреть код игры: “github.com/NTaylorMullen/ShootR”

13. Browser Quest

Играть в игру:”browserquest.mozilla.org/”
Посмотреть код игры: “github.com/mozilla/BrowserQuest”

14. VueChess

Посмотреть код игры: “github.com/gustaYo/vue-chess”

15. Freeciv Web

Играть в игру:”play.freeciv.org/”
Посмотреть код игры: “github.com/freeciv/freeciv-web”

На этом всё! Красивых Вам сайтов!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *