200行のコードのlibGDX for Androidで最もシンプルな3Dゲーム

私は、サムスンITスクールの学生向けAndroidプログラミングを教えています。 トレーニングプログラムでは、さまざまなトピックを扱います。 とりわけ、Android向けの3Dグラフィックスの基礎を学生に紹介する1つのレッスンがあります。 このレッスンの標準的な教材は、いくつかの理由で非常に役に立たなかったようです。

1. 裸のOpenGLが使用されます。実際、ゲームのプログラミングでは既製のエンジンが最も頻繁に使用されるため、これは学生自身のプロジェクトのコンテキストではあまり有用ではありません。 ビジネスで純粋なOpenGLを見ることが基本を理解するのに良いと主張する人もいるかもしれませんが、2番目の欠点があります。
2. レッスンは非常にわかりにくいです。 プログラミングに精通しているとはいえ、典型的な小学生は、レッスンで説明されていることの多くを理解するのに十分な基盤を持っていません（たとえば、多くは大学でのみマトリックスを取ります）。
3. レッスンの最後に結果が出ました-OpenGLツールを使用して3つの三角形を描画します。 これは実際の3Dゲームとはかけ離れているため、学生を簡単に落胆させることができます。

そのため、libGDX for Androidの使用の基本を説明するレッスンを準備することにしました。とにかくこの資料を準備しているので、同時にここに投稿します-ハブ このレッスンでは、Android向けの最もシンプルな3Dゲームを作成します。スクリーンショットは記事の紹介でご覧いただけます。 だから、猫にようこそ。





なぜlibGDXなのか？ まず、Javaプログラミングを学生に教えるため、コードはJavaである必要があります。 これにより、選択肢が絞り込まれます。 第二に、libGDXは非常に簡単に習得できました。 私の状況では、これは他の欠点を上回る大きな利点です。



ゲームのアイデアは非常にシンプルです。あなたは武器システムを担当する戦闘機の副操縦士です。 敵の船のエンジンが照準器の照準にあるとき、レーザー武器で時間をかけて撮影する必要がありますが、最初のパイロットは尾を離さないようにします。 つまり、実際には、ゲームプレイは「クリックして時間」というフレーズで記述されます。



このレッスンでは、Android Studio 1.5のみが必要になります（バージョンは異なる場合があります。ここでは、たった今使用したバージョンを示しました）。

最初に、libGDXからプロジェクトを作成するためのウィザードをダウンロードする必要があります。これにより、プロジェクトの初期設定タスクが大幅に簡素化されます（ libGDXプロジェクトのwiki指示のリンクからダウンロードできます）。 それが私がそこで行った設定です：



結果のプロジェクトをAndroid Studioにインポートし、コード自体の作業を開始します。 メインのゲームコードはMyGdxGame.javaファイルにあります（このクラスに私と同じ名前を付けた場合）。 テンプレートコードを削除して、独自のコードを書き始めます。

public class MyGdxGame extends ApplicationAdapter { public PerspectiveCamera cam; final float[] startPos = {150f, -9f, 0f}; @Override public void create() { cam = new PerspectiveCamera(67, Gdx.graphics.getWidth(), Gdx.graphics.getHeight()); cam.position.set(startPos[0], startPos[1], startPos[2]); cam.lookAt(0, 0, 0); cam.near = 1f; cam.far = 300f; cam.update(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、67度の視野角（かなり頻繁に使用される値）で新しいカメラを作成し、画面の幅と高さのアスペクト比を設定します。 次に、カメラの位置をポイント（150、-9、0）に設定し、座標の中心を見るように指示します（ゲームプレイを構築するピラミッドを配置する場所だからです）。 最後に、update（）ユーティリティメソッドを呼び出して、すべての変更をカメラに適用します。



これで、私たちが見るものを描くことができます。 もちろん、ある種の3Dモデルを使用することもできますが、レッスンを簡単にするために、単純なピラミッドのみを描画します。

 public class MyGdxGame extends ApplicationAdapter { ... public Model model; public ModelInstance instance; @Override public void create() { ... ModelBuilder modelBuilder = new ModelBuilder(); model = modelBuilder.createCone(20f, 120f, 20f, 3, new Material(ColorAttribute.createDiffuse(Color.GREEN)), VertexAttributes.Usage.Position | VertexAttributes.Usage.Normal); instance = new ModelInstance(model); instance.transform.setToRotation(Vector3.Z, 120); } @Override public void dispose() { model.dispose(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、コードでモデルを作成するように設計されたModelBuilderのインスタンスを作成します。 次に、寸法が20x120x20で、面の数が3（最終的にピラミッドが得られる）の単純なコーンモデルを作成し、緑のマテリアルに設定します。 モデルを作成するとき、少なくともUsage.Positionを指定する必要があります。 Usage.Normalは、モデルに法線を追加するため、照明が正しく機能します。



モデルには、独自のリソースを描画および管理するために必要なすべてが含まれています。 ただし、正確に描画する場所に関する情報は含まれていません。 そのため、ModelInstanceを作成する必要があります。 これには、モデルをレンダリングするための場所、回転、スケールのパラメーターに関するデータが含まれています。 デフォルトでは、（0、0、0）で描画されるため、（0、0、0）でレンダリングされるModelInstanceを作成するだけです。 ただし、さらに、transform.setToRotation（）メソッドを呼び出して、ピラミッドをZ軸に沿って120度回転させます（これはカメラの位置から見たほうがわかりやすいです）。



モデルは使用後に解放する必要があるため、Dispose（）メソッドにコードを追加します。



次に、モデルインスタンスを描画しましょう。

 public class MyGdxGame extends ApplicationAdapter { ... public ModelBatch modelBatch; @Override public void create() { modelBatch = new ModelBatch(); ... } @Override public void render() { Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight()); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT); modelBatch.begin(cam); modelBatch.render(instance); modelBatch.end(); } @Override public void dispose() { model.dispose(); modelBatch.dispose(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、Create ModelBatchをcreateメソッドに追加します。このメソッドは、モデルのレンダリングと初期化を行います。 renderメソッドでは、画面をクリアし、modelBatch.begin（cam）を呼び出し、ModelInstanceを描画してから、modelBatch.end（）を呼び出して描画プロセスを完了します。 最後に、modelBatchをリリースして、すべてのリソース（使用するシェーダーなど）が正しくリリースされるようにする必要があります。







かなり良いように見えますが、少しの照明で状況を改善できる可能性があるため、追加しましょう。

 public class MyGdxGame extends ApplicationAdapter { ... public Environment environment; @Override public void create() { environment = new Environment(); environment.set(new ColorAttribute(ColorAttribute.AmbientLight, 0.4f, 0.4f, 0.4f, 1f)); environment.add(new DirectionalLight().set(0.8f, 0.8f, 0.8f, 10f, 10f, 20f)); ... } @Override public void render() { ... modelBatch.begin(cam); modelBatch.render(instance, environment); modelBatch.end(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、Environmentのインスタンスを追加します。 それを作成し、アンビエント（散乱）ライト（0.4、0.4、0.4）を設定します（透明度の値は無視されることに注意してください）。 次に、色（0.8、0.8、0.8）および方向（10、10、20）のDirectionalLight（指向性ライト）を作成します。 ここではすべてが非常に明白であるものの、あなたはすでに一般的な光源に精通していると思います。 最後に、レンダリング中に、作成された環境をモデルハンドラーに渡します。







まだゲームを書いているので、静的な画像に少しのダイナミクスを追加しても害はありません。 図面ごとにカメラを少し動かしてみましょう。 libGDXアプリケーションのライフサイクルについてここで言うのが適切です。 開始時にcreate（）メソッドが呼び出されます。このメソッドでは、すべての初期化を配置するのが適切です。 次に、render（）メソッドが1秒あたりN回呼び出されます。NはFPSです。 このメソッドは、現在のフレームを描画します。 したがって、アプリケーションにダイナミズムを追加するには、render（）でゲームオブジェクトのパラメーターを何らかの方法で変更するだけです。

 public class MyGdxGame extends ApplicationAdapter { ... final float bound = 45f; float[] pos = {startPos[0], startPos[1], startPos[2]}; float[] Vpos = new float[3]; final float speed = 2f; private float getSpeed() { return speed * Math.signum((float) Math.random() - 0.5f) * Math.max((float) Math.random(), 0.5f); } @Override public void create () { ... // initialize speed for (int i = 0; i < 3; i++){ Vpos[i] = getSpeed(); } } @Override public void render() { ... for (int i = 0; i < 3; i++) { pos[i] += Vpos[i]; if (pos[i] <= startPos[i] - bound) { pos[i] = startPos[i] - bound; Vpos[i] = getSpeed(); } if (pos[i] >= startPos[i] + bound) { pos[i] = startPos[i] + bound; Vpos[i] = getSpeed(); } } cam.position.set(pos[0], pos[1], pos[2]); cam.update(); modelBatch.begin(cam); modelBatch.render(instance, environment); modelBatch.end(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、ピラミッドが動いているような錯覚を作成しますが、実際にはカメラが動いているので、それを通して見ることができます。 ゲームの開始時に、create（）メソッドは各座標（速度）の増分Vpos [i]の値をランダムに選択します。 render（）メソッドで各シーンが再描画されるたびに、変更ステップの値が座標に追加されます。 座標を変更するために確立された境界を超えた場合、座標をこれらの境界に戻し、カメラが他の方向に動き始めるように新しい速度を生成します。 cam.position.set（）は、上記の法則に従って計算された新しい座標にカメラを実際に設定し、cam.update（）はカメラパラメータを変更するプロセスを完了します。



異なるデバイスでは、FPSの違い、したがって1秒あたりのrender（）呼び出しの数により、ピラミッドの速度が異なることに注意してください。 フレーム間の時間の座標の増分の依存性をここに追加すると、速度はどこでも同じになります。 しかし、プロジェクトを複雑にしないためにこれを行いません。







それでは、ゲームHUDを作成しましょう。

 public class MyGdxGame extends ApplicationAdapter { ... protected Label label; protected Label crosshair; protected BitmapFont font; protected Stage stage; protected long startTime; protected long hits; @Override public void create() { ... instance.transform.setToRotation(Vector3.Z, 90).translate(-5,0,0); font = new BitmapFont(); label = new Label(" ", new Label.LabelStyle(font, Color.WHITE)); crosshair = new Label("+", new Label.LabelStyle(font, Color.RED)); crosshair.setPosition(Gdx.graphics.getWidth() / 2 - 3, Gdx.graphics.getHeight() / 2 - 9); stage = new Stage(); stage.addActor(label); stage.addActor(crosshair); startTime = System.currentTimeMillis(); } @Override public void render() { ... StringBuilder builder = new StringBuilder(); builder.append(" FPS: ").append(Gdx.graphics.getFramesPerSecond()); long time = System.currentTimeMillis() - startTime; builder.append("| Game time: ").append(time); builder.append("| Hits: ").append(hits); builder.append("| Rating: ").append((float) hits/(float) time); label.setText(builder); stage.draw(); } @Override public void resize(int width, int height) { stage.getViewport().update(width, height, true); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ピラミッドの回転およびシフトパラメーター（translate（x、y、z）メソッド）は、画面の中央にあり、カメラが見ているのと同じ場所に向けられるように変更されることに注意してください。 つまり、ゲームの開始時、私たちは敵と同じコースにいて、敵をエンジンで直接見ます。



ここでは、2つのテキストラベルを作成します。 ラベルラベルは、ゲーム内情報（FPS、ゲーム時間、ヒット統計）を表示するために使用されます。 十字線のラベルは赤で描画され、「+」という1文字のみが含まれています。 これにより、プレイヤーは画面の中央、つまりスコープを表示します。 それぞれについて、新しいラベルコンストラクター（<TEXT>、新しいLabel.LabelStyle（フォント、<COLOR>））で、碑文のフォントと色を含むスタイルが指定されます。 ラベルはaddActor（）メソッドによってStageオブジェクトに渡され、それに応じて、ステージの描画時に自動的に描画されます。



さらに、十字線ラベルの場合、setPosition（）メソッドは位置（画面の中央）を設定します。 ここでは、画面サイズ（Gdx.graphics.getWidth（）、... getHeight（））を使用して、プラス記号が中央に表示されるように配置する場所を計算します。 まだ小さな汚いハックがあります：setPosition（）は、碑文の左下隅の座標を設定します。 プラス記号の中心が画面の中心に表示されるように、取得した値から経験的に（つまりランダムに）定数3と9を引きます。本格的なゲームではこのアプローチを使用しないでください。 画面の真ん中にあるプラス記号だけは深刻ではありません。 十字線が必要な場合は、 スプライトを使用できます。



描画するたびに、StringBuilderを使用してテキストを作成し、FPS、ゲームの時間、ヒット数、評価など、表示するすべてのものを画面の下部に配置します。 setText（）メソッドを使用すると、ラベルテキストを設定できます。これは、render（）で何度も行います。







確かに、まだ撮影できません。 この欠陥を修正する時が来ました。

 public class MyGdxGame extends InputAdapter implements ApplicationListener { ... final float zone = 12f; boolean isUnder = false; long underFire; @Override public void create() { ... Gdx.input.setInputProcessor(new InputMultiplexer(this)); } @Override public void render() { if (Math.abs(pos[1] - startPos[1]) < zone && Math.abs(pos[2] - startPos[2]) < zone) { isUnder = true; crosshair.setColor(Color.RED); } else { isUnder = false; crosshair.setColor(Color.LIME); underFire = 0; } ... } @Override public void pause() {} @Override public void resume() {} @Override public boolean touchDown(int screenX, int screenY, int pointer, int button) { if (isUnder) { underFire = System.currentTimeMillis(); } else { hits /= 2; } return true; } @Override public boolean touchUp(int screenX, int screenY, int pointer, int button) { if (isUnder && underFire != 0) { hits += System.currentTimeMillis() - underFire; underFire = 0; } else { hits /= 2; } return false; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MyGdxGameクラスの説明が変更されていることに注意してください。 ここでは、InputAdapterから継承し、ApplicationListenerインターフェイスを実装します。 このような構造により、コードを変更せずに保存できますが、ユーザー入力を処理する機能を追加できます。 クラスを入力ハンドラーとして登録するcreate（）メソッドに行が追加されます。 InputAdapterは抽象であるため、単にpause（）およびresume（）メソッドを実装する必要があります。



すべての数学ヒット計算はレンダー（）にあります。 カメラの座標がそのゾーンにあるかどうかを確認し、対戦相手が同じコースの画面の中心にいるようにします（Y座標とZ座標が開始±ゾーン内にあるかどうか）。 同じコースにいる場合は、射撃できることを意味します。isUnder= trueに設定し、スコープをより明るい赤にします。 繰り返しになりますが、ヒットを決定するこの単純さは、単純さの愚かさ、ゲームプレイの慣例に基づくトリックです。 一般に、libGDXには、一般的なケースでどの3Dモデルがタッチ領域にあるかを判断するためのツールがあります 。



タッチ処理メソッドは、touchDown（指が画面に触れた）およびtouchUp（指が画面から削除された）と呼ばれます。 これらのメソッドはタッチ座標を受け入れますが、ここでは使用しません。 実際、ピラミッドを直接見るには、カメラがその位置にあるかどうかを判断するだけで十分です。 この場合（ユーザーが時間通りにクリックした場合）、touchDownで敵のピラミッドをレーザーで揚げた時間のカウントを開始します。 そうでない場合は、半分に分割してユーザーのポイントを減らします（ミスに対するペナルティー）。 ユーザーが指を離すと、指を離すのが遅すぎるかどうかを確認します。 遅らせた場合、時間通りであれば（レーザーがまだターゲットを揚げていた場合）、ポイントを追加します。

追加：ピラミッドではなく戦闘機のモデル

一般的に、ゲームの準備はできていますが、もっとまともに見えるようにしたいし、ピラミッドはかなり退屈です。 したがって、レッスンへのオプションの追加として、ピラミッドの代わりに航空機の通常の3Dモデルを実装できます。 このモデルを使用して、ゲームに挿入してみてください。



モデルには、異なる3Dエディターの4つの形式があります。 ただし、libGDXはバイナリモデル形式を使用するため、ゲームで使用するには変換する必要があります。 このために、特別なユーティリティfbx-convが提供されています。 収集したバイナリをダウンロードして、いくつかのフォルダーに解凍します。 Windows、Linux、およびMacOS用のバージョンがあります。 Windowsバージョンは不要なジェスチャーなしで起動します。LinuxおよびMacOSの場合は、最初にコマンドを実行する必要があります

 export LD_LIBRARY_PATH=/folder/where/fbx-conv/extracted/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、ユーティリティに共有ライブラリlibfbxsdk.soを探す場所を示します。 ユーティリティを実行します。

 ./fbx-conv-lin64 -f space_frigate_6/space_frigate_6.3DS
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、モデルへのパスを指定し、OSのバイナリを使用する必要があります。 その結果、ファイルspace_frigate_6.g3db



を取得します。このファイルは、プロジェクトフォルダーandroid/assets



（Androidプラットフォームのアプリケーションリソースを含むフォルダー）に配置する必要があります。





さて、これをゲームにプラグインします。

 public class MyGdxGame extends InputAdapter implements ApplicationListener { ... public AssetManager assets; public boolean loading; @Override public void create() { ... assets = new AssetManager(); assets.load("space_frigate_6.g3db", Model.class); loading = true; } @Override public void render() { if (loading) if (assets.update()) { model = assets.get("space_frigate_6.g3db", Model.class); instance = new ModelInstance(model); loading = false; } else { return; } ... } @Override public void dispose() { model.dispose(); modelBatch.dispose(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、AssetManagerクラスのインスタンスを作成します。このクラスは、ゲームリソースをロードし、モデルをロードするよう指示します。 各図面で、AssetManagerがモデル（booleanを返すupdate（）メソッド）をまだロードしているかどうかを確認します。 それがロードされると、退屈したピラミッドの代わりにかわいい飛行機をインスタンスに押し込み、loading = falseに設定して、このインスタンスの作成がすべてのフレームで繰り返されないようにします。そうしないと、アプリケーションの実行中にassets.update（）がさらにtrueを返します



起動時に、 java.io.FileNotFoundException: SPACE_FR.PNG



ます。 そのため、モデルファイルにはテクスチャが含まれていないため、個別にプッシュする必要があります。 提示された4つのテクスチャからSPACE_FR.PNG



のテクスチャをSPACE_FR.PNG



、名前をSPACE_FR.PNG



に変更し、 SPACE_FR.PNG



に入れて実行します。 その結果、オープニングピクチャにあるものを取得します。 さて、おやつ-ゲームプレイのGIF：







結論：非常にシンプルですが、使用する手段（照明、移動、HUD、タッチ、モデル）に関してはほぼ完全に記述し、わずか200行のコード内に収めました。 もちろん、改善できる点はたくさんあります。通常の視界、スカイボックス（空または周囲の空間）、ショットと飛行の音、ゲームメニュー、ヒットの通常の定義などです。 libGDXでのゲーム開発の最も重要なポイント。 このレッスンが、学生とHabrの聴衆の両方からAndroid上で多くの新しい面白いゲームの出現に貢献することを願っています。

ソース：

1. https://libgdx.badlogicgames.com/nightlies/docs/api/overview-summary.html
2. http://www.todroid.com/android-gdx-game-creation-part-i-setting-up-up-android-studio-for-creating-games/
3. https://xoppa.github.io/blog/basic-3d-using-libgdx/
4. http://stackoverflow.com/questions/19699801/dewitters-game-loop-in-libgdx
5. http://stackoverflow.com/questions/21286055/run-libgdx-application-on-android-with-unlimited-fps
6. https://xoppa.github.io/blog/interacting-with-3d-objects/
7. https://xoppa.github.io/blog/loading-models-using-libgdx/

PS： githubのコードとゲームのapkファイルです 。