Help us understand the problem. What is going on with this article?

libGDXを使った簡単なhtml5アプリの開発

More than 3 years have passed since last update.

HTML5 Japan Cup 2014 に参加した時に使用した libGDX を使った html5アプリ の作り方を紹介しようと思います。

ちなみに、応募した作品はこちら

libGDX とは

デスクトップ(Windows、Linux、Mac)、スマホ(Android、iPhone) 、HTML5 に対応したクロスプラットフォームゲームライブラリです。

環境

HTML5 Japan Cup 2014 に参加した当時は、以下の環境で開発しました。


OS

Windows7

開発ツール

Eclipse 4.4 + ADT Plugin + Gradle Plugin + Google Plugin for Eclipse

Android SDK

ブラウザ

PC版 chrome で動作確認

簡単な html5 アプリの作り方

libGDX をダウンロード

以下のページで、Download Setup App をクリック
https://libgdx.badlogicgames.com/download.html
(gdx-setup.jar というファイルがダウンロードされます。)

セットアップの実行

ダウンロードした gdx-setup.jar をダブルクリックすると、
プロジェクトのひな型を作成してくれるアプリが起動します。

image

アプリの名前、パッケージ名、メインクラス名、作成先のディレクトリ、インストールした Android SDK のホームディレクトリを入力し "Genarate" ボタンを押すと、プロジェクトのひな型を生成してくれます。

作成されたプロジェクトをEclipseで開く

gdx-setup.jar で作成されたひな型のプロジェクトをEclipse で開いてみます。
Eclipse 起動後、メニュー[ファイル]ー[インポート]をクリック
"インポート"ダイアログから Gradleプロジェクトを選択し「次へ」
image

"ルート・フォルダー"に gdx-setup.jar で作成したひな型プロジェクトの作成先のディレクトリを入力して、「モデルのビルド」ボタンを押下してから、「完了」ボタンを押下
image

プロジェクトがビルドされて、Eclipse上で開発できる状態になります。
image

ひな型アプリの実行

Google Plugin for Eclipse がインストールされていれば、特にコーディングしなくても、アプリのひな型が実行できます。アプリの名前-html のプロジェクトを右クリック-「実行」ー「Webアプリケーション(GWT Super Dev Mode)」をクリック
image

Eclipse上でWebサーバーが起動します。
image

ブラウザーでアクセスすると、こんな感じにひな型のアプリが起動します。
image

まとめ

かなり、ザックリと libGDX をつかったHTML5アプリの作成方法を書いてみました。
もっと、アプリ開発の細かいところまで書きたかったのですが、今回はここまでにしたいと思います。
最近、libGDXの情報源が豊富になっているので

  • クロスプラットフォームで スマホアプリを作りたい人
  • スマホアプリ開発でエミュレータが重くてイヤになっている人
  • 「やっぱり java でコーディングしたい!」な人

は、libGDX でアプリ開発してみてはいかがでしょうか?

opst
情報技術と社員力でお客様を成功に導く Make IT Your Success
https://www.opst.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away