Здравствуйте, сегодня рассмотрим как с помощью бесплатного фреймворка LibGDX создать HTML5 контент (игры, страницы, баннеры и др.).

Скачать исходники для статьи можно ниже

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

1. Устанавливаем бесплатную программу Android Studio

Для разработки HTML5 сайтов, баннеров, игр с помощью libGDX вам понадобится установить среду разработки — можно выбрать бесплатную Android Studio, скачать её можно на официальном сайте:

«developer.android.com/studio/index.html»

2. Устанавливаем бесплатный фреймворк libGDX

Заходим на официальный сайт libGDX:

“libgdx.badlogicgames.com/download.html”

Жмем на кнопку Download и закачиваем файл – gdx-setup.jar

Для того чтобы запустить скаченный jar файл – нужно установить JAVA платформу на ваш компьютер (если она уже не установлена).

Устанавливаем JAVA SE платформу – для этого заходим на официальный сайт:

“oracle.com/technetwork/java/index-jsp-138363.html”

Далее выбираем нужный файл (в зависимости от установленной на ваш компьютер ОС и её разрядности: 32,64,86 бит):

Закачиваем и устанавливаем на компьютер.
После чего вы сможете запустить jar файл – gdx-setup.jar.

Запускаем LibGDX.

Незабываем поставить галочку напротив пункта html при создании нового проекта в libgdx:

После чего жмем на кнопку Generate (в двух выскакивающих сообщениях жмем Yes).

Закрываем LibGDX.

Далее заходим в Android Studio и выбираем пункт Import Project:

Далее заходим в папку нашего проекта и выбираем в нем файл build.gradle:

И в Android Studio загружается наш проект.

Код можно оставить по умолчанию и приступить к следующему пункту – создания HTML5.

3. Как выгрузить, опубликовать HTML5 из Android Studio и LibGDX

В верхнем меню выбираем пункт View->Tool Windows->Gradle:

После чего справа у вас откроется окошко Gradle projects:

Если в данном окошке пусто – попробуйте нажать на кнопку “Обновить” (на скриншоте выше данная кнопка показана маленькой стрелочкой).

Здесь мой проект называется web1 – раскрываем его, далее разворачиваем пункт html, в нём Tasks, после other и находим dist – по которому кликаем правой кнопкой мышки и выбираем пункт Run:

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

в папке проекта (в моём примере – C:\LibGDX\web1) находим папку HTML-> далее папку build-> и здесь расположена папка dist.

Всё что находится в папке dist нужно забросить на сервер сайта.

4. Перекидываем папку dist на сервер сайта по FTP

Для этого можно воспользоваться бесплатной программой – FileZilla.

Для примера, забросил папку dist в корневую папку сайта на wordpress:

Зайдем внутрь папки dist – в ней есть файл index.html

Теперь если мы укажем в браузере следующий путь:

http://ваш сайт/dist/index.html

Так как код в проекте мы не трогали, а оставили все по умолчанию то откроется следующая страничка, где расположена картинка:

На этом всё, красивых вам сайтов!