2014年9月18日木曜日

libGDXで回転するジェット機2

今回のサンプルは、「LibGDX Tutorial 3B: Basic graphics2 / Simple Animation」、
ジェット機が回転するアニメーションをする。
見た目は前回とほとんど変わらないが、プログラムの中身はずいぶん違う。

1.雛形は前回のを利用


今回は雛形は作らずに前回のを利用する。


2.Animationクラスを利用する


Game class の修正。
BasicsGraphics-core の MyGdxGame.java を修正。



実行してみる。(※ステップ1)


前回と同様、ジェット機がくるくる回転している。
画像が小さくなったような気がするが、見た目はほぼ同じ。

3. 今回の重要なポイント


前回はタイマーを用いて自分で画像を更新することにより
アニメーションを実現していた。
が、今回はAnimationというlibGDXのクラスを使うことで
タイマーの処理を実装する必要がない。

animation = new Animation(1/15f, textureAtlas.getRegions());

When creating an animation you pass in the amount of time per frame
アニメーションを作成する際には、フレームあたりの時間を渡す

(15 frames per second in this case)
(この場合、毎秒15フレーム)

and an array of TextureRegions.
それとTextureRegionsの配列。

These represent the individual frames of animation within the TextureAtlas.
これらはTextureAtlas内アニメーションの各フレームを表す。

In this particular example we are simply using all of the frames available within the Atlas as a single animation.
この特定の例では、単に一つのアニメーションとしてアトラス内で使用可能なすべてのフレームを使用しています。

The next key change is:
次のキー変更がある

elapsedTime += Gdx.graphics.getDeltaTime();
batch.draw(animation.getKeyFrame(elapsedTime, true), 0, 0);

Here we are simply drawing the current frame from the animation to the screen.
ここでは、単に画面に​​アニメーションから、現在のフレームを集めている。

We pass in the amount of time that has elapsed so the animation knows where it is in the sequence.
私たちは、それが配列である場合、アニメーションが知っているように経過した時間の長さを渡します。

The true parameter is telling it to loop the animation.
真のパラメータは、ループにアニメーションを、それを語っている。

Of course, you can have multiple animations from a single texture Atlas.
もちろん、単一のテクスチャアトラスから複数のアニメーションを持つことができます。

Consider the spritesheet we are currently working with.
私たちは、現在作業しているspritesheetを考えてみましょう。

If you take a look at the .atlas file, you will see each individual frame is named:
あなたは.atlasファイルを見てみる場合は、各個別のフレームの名前は表示されます。


4.ステップ2



What we want to do is treat this as two sepeate animations.  Frames 1 through 10 represent an upward roll, while 11-20 are a downward roll.  Let’s take a look at how we do that:
私たちがやりたいことは2 sepeateアニメーションとして扱いです。 11-20が下方にロールしている間のフレーム1〜10は、上方向にロールを表します。それでは私たちはそれを行う方法を見てみましょう:

Game class の修正。
BasicsGraphics-core の MyGdxGame.java を修正。



実行してみる。(※ステップ2)

背面にあるウインドウがステップ1の実行結果で
前面にあるウインドウがステップ2の実行結果です。


以上、終わり。

2014年9月1日月曜日

libGDXで回転するジェット機

今回のサンプルは、「LibGDX Tutorial 3: Basic graphics」、
ジェット機が回転するアニメーションをする。

1.gdx-setupで雛形を作成


ターミナルを開き、gdx-setup.jarがあるフォルダに移動する。
$ cd ~/libGDXProject

gdx-setupを起動する。
$ java -jar gdx-setup.jar

liggdx Project Generator が起動される


必要な情報を入力。()内は説明。
Name: BasicGraphics(プロジェクト名)
Package: name.taoka.ugeee.basicgraphics(パッケージ名)
Game class: MyGdxGame(ゲームクラスの名前)
Destination: /home/taoka/libGDXProject/BasicGraphics(プロジェクトを生成するフォルダ名)
Android SDK: /usr/local/android-studio/sdk(Android SDKのパス。自動でセットされているハズ)

Sub Projects: Desctop と Android を選択。
※Iosは持ってない、HtmlはGWTのプラグインがなくて動かなかったので外した。

Extentions: Box2dが最初からチェックされていたのでそのままにした。

全部入力したら、「Generate」ボタンをクリック。
何やらエラーが出た。
You have a more recent version of android build tools than the recommended.
Do you wat to use this version?


前回」も出たので、そのまま「はい」をクリック。

雛形が生成される。
ゴニョゴニョといっぱいメッセージが出てくる。
「Done!」と表示されれば成功。


もう用がないので、「liggdx Project Generator」は終了させる。

2.Eclipseに取り込む


Eclipseを起動し、
File > Import... > Gradle Project を選択し「Next >」をクリック。


Root folder に、「/home/taoka/libGDXProject/BasicGraphics」
(liggdx Project Generator で指定した Destination)を入力し、
「Build model」をクリック。


しばらく待つと以下のようにプロジェクトが表示される。


プロジェクト(BasicGraphics)をチェックし、「Finish」をクリック。


しばらく待つ。
Package Explorerにプロジェクトが追加追加されている。



3.動作確認


動かしてみる。
プロジェクト「BasickGraphics-desktop」右クリックし、
Run AS > Java Application を選択。


Select Java Application というダイアログが出て何やら聞いてくるので、
「DesktopLauncher」を選択し「OK」をクリック。


動いた!(それにしても度きつい赤だなー)


Androidで動かしてみる。

プロジェクト「BasickGraphics-android」右クリックし、
Run AS > Android Application を選択。


インストールするデバイスを選び、「OK」をクリック。


しばらくするとAndroid端末で以下のような画面がでるハズ。


4.ジェット機の画像を表示


まず、ジェット機の画像ををダウンロードし、Eclipseのプロジェクトにコピー。
これは、「本家」からダウンロードしてください。


android/desktopともassetsの下にコピー。


Game class の修正。
BasicsGraphics-core の MyGdxGame.java を修正。


実行してみる。

引用
コー​​ドについては、実際には前のチュートリアルでのHello Worldの例と比較して新しいことありません。唯一の新しい概念は、テクスチャとスプライトです。テクスチャは、基礎となるOpenGLのテクスチャを表す。テクスチャ(および他の類似のクラス)で心に留めておくべき重要な点は、彼らが使い捨てインターフェイスを実装している。これは、あなたがそれを使い終わったら、disposeメソッドを呼び出す必要があり、そうしないとメモリリークが発生することを意味します!

5.Pixmapを使用して動的に画像を表示


Game class の修正。
BasicsGraphics-core の MyGdxGame.java を修正。


実行してみる。

6.TextureAtlas


いろんな角度からみたジェット機の画像を用意。
本家に見当たらなかったので、
本家の画像より切り抜いたものを置いておく。
jet-images.zip (20画像)


ジェット機の画像を適当なフォルダに解凍。
(ここでは、「~/libGDXProject/BasicGraphics/images」に解凍した)

libGDXのあるフォルダに移動し、以下を実行
$ java -cp gdx.jar:extensions/gdx-tools/gdx-tools.jar com.badlogic.gdx.tools.texturepacker.TexturePacker ~/libGDXProject/BasicGraphics/images/ ~/libGDXProject/BasicGraphics/images/ spritesheet
※Windowsで実行する場合は、gdx.jarとextensions の間の赤い「:」(コロン)は「;」(セミコロン)にする。
※Setup App だけをダウンロードして Automatically でセットアップした場合は、別途ここよりzipをダウンロードして解凍しておく。

TexturePackerの説明
機能: 複数の画像を1つのファイルにパッケージする
第1パラメータ: 画像ファイルのあるディレクトリ
第2パラメータ: 生成先のディレクトリ
第3パラメータ: パッケージファイル名


すると、「spritesheet.atlas」と「spritesheet.png」というファイルが作成される。

プロジェクトにコピー
「spritesheet.atlas」と「spritesheet.png」をassetsフォルダにコピーする。


BasicsGraphics-core の MyGdxGame.java を修正。


実行してみる。


以上、終わり。

2014年8月31日日曜日

libGDXでHelloWorld

1. gdx-setupで雛形を作成


ターミナルを開き、gdx-setup.jarがあるフォルダに移動する
$ cd ~/libGDXProject

gdx-setupを起動する
$ java -jar gdx-setup.jar

「liggdx Project Generator」が起動される


必要な情報を入力。()内は説明。
Name: HelloGDX(プロジェクト名)
Package: name.taoka.ugeee.hellogdx(パッケージ名)
Game class: GdxMain(ゲームクラスの名前)
Destination: /home/taoka/libGDXProject/HelloGDX(プロジェクトを生成するフォルダ名)
Android SDK: /usr/local/android-studio/sdk(Android SDKのパス。自動でセットされる)

Sub Projects: Iosは持ってないので外した。

Extentions: Box2dが最初からチェックされていたのでそのままにした。

全部入力したら、「Generate」ボタンをクリック。
何やらエラーが出た。
You have a more recent version of android build tools than the recommended.
Do you wat to use this version?
 

たぶんAndroidのビルドツールが古いバージョンを使っているためだと思う。
「はい」をクリックし、今のバージョンをそのまま使う。

ゴニョゴニョとメッセージが出るので、しばらく待つ。
Done!と表示されれば成功。



2. Eclipseに取り込む 


Eclipseを起動し、
File > Import... > Gradle Project を選択し「Next >」をクリック。


Root folder に、「/home/taoka/libGDXProject/HelloGDX」を入力し、

「Build model」をクリック。

しばらく待つとプロジェクトが表示されるので
「HelloGDX」をチェックし、「Finish」をクリック。

しばらく待つ。(私の環境では2分ぐらいかかった)
Package Explorerにプロジェクトが追加されている。


3.動作確認


動かしてみる。
プロジェクト「HelloGDX-desktop」右クリックし、
Run AS > Java Application を選択。

Select Java Application というダイアログが出て何やら聞いてくるので、
「DesktopLauncher」を選択し「OK」をクリック。


動いた!


Androidで動かす場合は、
プロジェクト「HelloGDX-android」右クリックし、
Run AS > Android Application を選択する。

画面いっぱいにDesktopと同じような画面がでるハズ。

htmlで動かす場合は、
プロジェクト「HelloGDX-html」右クリックし、
Run AS > Web Application を選択する。

warファイルのフォルダを聞いてくるので
「HelloGDX/html/war」を選択する。


以下のようなメッセージが出てきたら、ブラウザで
「http://127.0.0.1:8888/index.html?gwt.codesvr=127.0.0.1:9997」を開く。


Firefox31開いてみるが...エラーが...
Chromeでも同様のエラーが出る。


どうも、GWT Developer Pluginが対応してないみたい。
なんか、「Super Dev Mode」というのだと、プラグインなしで出来るみたい。

ターミナルを起動し、プロジェクトのルートフォルダに移動。
$ cd ~/libGDXProject/HelloGDX

html版の実行
$ ./gradlew html:superDev


The code server is ready.
Next, visit: http://localhost:9876/
しばらくすると、上記のようなメッセージが出るので、
ブラウザで「http://localhost:9876/」にアクセス。


上記のような画面がでる。
「Dev Mode On」をクリック。


しかし、「Can't find any GWT Modules on this page.」というエラーがでてうまく動かなかった。

ここでギブアップ。今回は、html版はなしということで。

4.ちょっと修正


HelloGDXというからには、「HelloGDX」という文字を表示させたい。
HelloGDX-core の GdxMain.java を修正する。
※コメントに@@@とある個所を修正した


よし!「Hello GDX」と表示された。
背景も白になり目にやさしくなりました。


以上、終わり。

libGDXの開発環境を構築

libGDXの開発環境は
・Eclipse
・Intellij IDEA
・NetBeans
と多岐にわたるが、ここでは、Eclipseを使うことにする。

また、OSは「Manjaro Linux (Arch)」を前提にしている。
他のOSを使っている人用にもリンク(検索条件)を示しておいた。

基本的には、本家のドキュメントどおりにすればよい。
Setting up your Development Environment

が、英語なので日本語でまとめておく。

1.JDK7のインストール


まず真っ先に必要なのは、「Java Development Kit 7+ (JDK)」。
※JDK6ではダメ! (6 will not work!)らしい。

ターミナルを開き、以下のコマンドを実行。
$ sudo pacman -S jdk7-openjdk

※Oracle のプロプライエタリな Javaは使ってないが、今のところ問題は起きていない。

他のOSを使っている人も、
「OS + JDK + Install」でググれば必要な情報が出ると思うよ。
例えば、Windowsの場合は、「Windows JDK Install」とすればよい。
日本語の情報を優先して出したい場合は「Install」を日本語の「インストール」にすればよい。

「Windows JDK Install」でググる。
「Ubuntu JDK Install」でググる。

2.Eclipseのインストール


次は、Eclipseをインストールする。

ターミナルを開き、以下のコマンドを実行。
$ sudo pacman -S eclipse

「windows eclipse install」でググる。
「ubuntu eclipse install」でググる。

3.Android-SDKのインストール


ターミナルを開き、以下のコマンドを実行。
$ yaourt -S android-sdk android-sdk-platform-tools

「windows android sdk install」でググる。
「ubuntu android sdk install」でググる。

4.EclipseにADT Pjuginをインストール


Eclipseを起動し、
Help > Install New Software を選択。


Installダイアログが出るので、右上の「Add」ボタンをクリック。


Add Repositoryダイアログが出るので、
Name: ADT
Location: https://dl-ssl.google.com/android/eclipse/
と入力し、「OK」をクリック。


Installダイアログに戻るので、Work withで「ADT」を選択し、
Developer Tools をチェックして、「Next >」をクリック。


Install Detailsが出るので、「Next >」をクリック。


ライセンスに同意するか聞かれるので、「I accept the terms of the license agreements(同意する)」を選択し、「Finish」をクリック。


しばらく待つ。
途中、security warningのダイアログが出る場合は、「OK」をクリック。

最後に、Eclipse を再起動して終わり。

5.EclipseにGradle Pluginをインストール


Eclipseを起動し、Help > Install New Software を選択。
※手順4とほぼ同じなので画面は省略。

Installダイアログが出るので、右上の「Add」ボタンをクリック。

Add Repositoryダイアログが出るので、
Name: Gradle
Location: http://dist.springsource.com/release/TOOLS/gradle
と入力し、「OK」をクリック。

Installダイアログに戻るので、Work withで「Gradle」を選択し、
Extentionsの中の「Gradle IDE」をチェックして、「Next >」をクリック。

あとは、手順4と同様なので省略。

6.libGDXのインストール


ligGDXのサイトに行き、
Download > Releases とたどって行くと「zip」ファイルがあるので、
最新版の「libgdx-1.3.1.zip」(2014.09.01現在)をダウンロードする。

※普通に「Download」を選ぶと、「gdx-setup.jar」だけのダウンロードになる。これだけで、自動でやってくれて非常に便利なのだが、ドキュメントやツール類が必要になる場合があるので、ここでは「zip」をダウンロードする。

ダウンロードしたzipファイルを適当なフォルダに解凍する。

7.Eclipseのワークスペースを別途用意する


libGDXはマルチプラットフォームなので、Android/iOS/Desktop/htmlなど沢山のプロジェクトが作成される。ので、libGDX専用のワークスペースを作ったほうがいい。

Eclipseを起動し、
File > Switch Workspace > Other...をクリックすればワークスペースを切り替えることができる。

以上、終わり。

2014年8月30日土曜日

ゲーム用語辞典

まだ少ないですが、順次追加していきます。

テクスチャ

物の表面の質感・手触りなどを指す概念。3Dコンピュータグラフィックス(CG)においては、物体の表面の質感を表現するために、3Dオブジェクトの表面に貼り付ける模様や画像を「テクスチャ」、このようにテクスチャを貼り付ける手法のことを「テクスチャマッピング」と呼ぶ。
「テクスチャマッピング」により、3Dオブジェクトの質感はリアルなものになる。例えば、同じオブジェクトでも、金属のテクスチャを貼り付ければ金属片に見え、木目のテクスチャを貼り付ければ木片に見える。テクスチャマッピングにより、光沢のあるテーブルやガラスへの映り込みを表現することもできる。

参考
バンダイゲームアカデミー

自己紹介

こんにちは、40代元SEの UGeee(ゆーじぃぃぃ)と言います。

自己紹介を少しだけ。
1970年に四国の山奥に生まれる。

人生で初めて、ゲームに出会ったのは、7〜8歳のころ。
インベーダーゲームに触れ、衝撃的な面白さを感じた。


10歳のころ「平安京エイリアン」で遊ぶ。
これしかないので、これだけをやり、かなりの腕前になる。
9999の最高得点をマークしたこともあった。


12歳のころ、ゲーム&ウオッチなるものが登場。
バンクギャング」、「ジャングルアドベンチャーウッドマン」で遊ぶ。
ジャングルアドベンチャーウッドマンには、「Yesterday」と「コンドルは飛んでいく」
という音楽を鳴らす機能があり、いい音楽だなーとよく聞いていた。


12歳のとき、はじめて海に行く。
素足で歩く砂浜の感覚と、足がつかない深さに驚く。
どこまで深く潜れるかに挑戦し、溺れそうになりながらも、
めちゃめちゃ楽しかった。
が、ディグダグというゲームがあることを知り、
海よりゲームに夢中になっていた。


中学生のころ、ファミコンが発売される。
我々の世代が初代ファミコン世代らしい。

ファミコンが出たのは、ちょうど中学に入学するころだったので、
入学祝いに何か買ってあげるとのことで、もちろんファミコンを希望した。

しかし、近くのスーパーでは売り切れとなっており、
どーしてもゲーム機が欲しかったUGeeeは、別のゲーム機を買ってもらう。

確かカシオのPV-1000というゲーム機だった。
ファミコンと同時期に発売されたが、ファミコンには全く及ばす
ゲームの本数も15本のみの発売だった。

兄に、ファミコンにしたら?
と言われたが、待てなかった。
兄の忠告に従っていたらと悔やむ。

その頃の夢は、壁一面にゲームが並べられた大きな部屋で、
自分専用のテレビの前で座り、365日x24時間ゲームをやることだった。


その後、MSX, MSX2 へと進む。
MSXで多少、プログラミングなどをやる。
プログラミングと言っても、マイコンBASICマガジンという
雑誌のプログラムをそのまま打ち込むだけで、自分で作ったわけではない。
これが、その後の人生に影響を与える。(のちにSEになる)

今になって思えば、ファミコンにしなくて良かった。
だって、ファミコンにしていたらMSXを買うことはなく、
ずーとファミコンでゲームだけをしていたと思う。
しょぼい、PV-1000だったからこそ、MSXに移行したわけです。
人間万事塞翁が馬ですね。


高校の2年の夏休みに友達からファミコンとドラクエ1+2を借りる。
ドラクエの面白さに感激し、没頭する。


高校を卒業して、社会人になる。
社会人になっても、ゲームをやる。

スパーファミコン(ここで念願のファミコンを手にする)を手に入れる。
その後、初代PlayStationに移る。
休日は食べ物を買い込み、一歩も外出せずに
ずーと寮にこもってゲームをやる。

27歳、ネットワークビジネスに誘われる。
なぜか、関わってしまい、ゲームをやめる。

3年ほどネットワークビジネスをやるが、うまく行かず、30歳でやめる
ふと、ドラクエのオープニングテーマが頭の中で鳴った。
これをきっかけにまたゲームをし始める。


ドラゴンクエストVII エデンの戦士たち」と
ファイナルファンタジーVI」をやり始める。

ドラクエはマップが3Dになっていて馴染めなかった。(酔う感じがした)
謎解きでちょっとつまづき、最後までクリアできなかった。
昔のような情熱でゲームができなくなっていた。

ファイナルファンタジーのほうは最後までクリアできた。
こっちは謎解きでつまずくことなく
スムーズにストーリー展開するようになってるから。

と、ざっと人生を振り返ってみたが、
今思えば、なんと無駄なことに時間を費やしていたのか。
この時間に勉強を少しでもしていたらもっとましな人生になったのになどど思う。

というわけで、一念発起した
40代の元SEがゼロからゲームを作っていくことにしたのです。

※SEといってもビジネスアプリにしか携わったことがなくゲームに関しては素人です。

今まで遊んだゲーム

平安京エイリアン(学研)
バクダンマン(バンダイ)
バンクギャング(バンダイ)
ジャングルアドベンチャーウッドマン(増田屋)
PV-1000
パチンコUFO(カシオ)
スペースパニック(カシオ)
MSX/MSX2
倉庫番(シンキングラビット/アスキー)
ウィザードリィ(アスキー)
フラッピー(デービーソフト)
ちゃっくんぽっぷ(タイトー)
キャンドゥーニンジャ(マスティール/アスキー)
魔城伝説(コナミ)
プロフェッショナル麻雀(シャノアール)
けっきょく南極大冒険(コナミ)
ハイパースポーツ1(コナミ)
信長の野望全国版(光栄)
三国志(光栄)
グラディウス(コナミ)
ドラゴンスレイヤーⅣ(ファルコム)
メタルギア(コナミ)
キングコング2(コナミ)

スーパーファミコン
・・・多数

PlayStation
・・・多数