Как сделать HTML5 с помощью libGDX

Здравствуйте, сегодня рассмотрим как с помощью бесплатного фреймворка 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»

libgdxhtml5

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

libgdxhtml52

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

Запускаем LibGDX.

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

8d9lbc

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

Закрываем LibGDX.

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

k1t9zt

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

dmvnkt

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

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

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

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

libgdxhtml53

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

libgdxhtml54

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

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

libgdxhtml55

libgdxhtml56

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

libgdxhtml57

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

3byeav

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

ckw1gp

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

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

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

libgdxhtml58

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

libgdxhtml510

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

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

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

lfm4cb

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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