サイトのトップへ戻る

libGDX ドキュメント 日本語訳

サイト内検索

簡単なゲームを拡張する

このチュートリアルでは、 前回のチュートリアルで作成したシンプルなゲーム"Drop"を拡張します。 メニュー画面と、よりゲームらしくするための機能をいくつか追加します。

では、ゲームにおけるより高度なクラスについての紹介から始めましょう。



Screen インタフェース

Screenインタフェースは、複数のコンポーネントを持ったゲームの基礎部分です。 ScreenはApplicationListener オブジェクト由来の多くのメソッドと、新たに実装された二つのメソッド( showhide)を実装しています。 このshowhideは、それぞれScreenがフォーカスを得た時と失った時に呼び出されます。



Game クラス

抽象クラスGame は ApplicationListener を実装しており、さらに画面描写の設定や制御を手助するいくつかのメソッドが追加されています。

Screenオブジェクトと Game オブジェクトを使って、シンプルで強力なゲーム構造を作りましょう。

まず最初に、ゲームの開始点となる Game オブジェクトを作成します。

では、コードを見て動かしてみましょう:

package com.badlogic.drop;

import com.badlogic.gdx.Game;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;


public class Drop extends Game {

    public SpriteBatch batch;
    public BitmapFont font;

    public void create() {
        batch = new SpriteBatch();
        //Use LibGDX's default Arial font.
        font = new BitmapFont();
        this.setScreen(new MainMenuScreen(this));
    }

    public void render() {
        super.render(); //important!
    }

    public void dispose() {
        batch.dispose();
        font.dispose();
    }

}

アプリケーションの起動時に、SpriteBatch と BitmapFontのインスタンスを作成します。 共有できるオブジェクトを毎回新規作成するのはよろしくありません (DRYを参照してください)。 SpriteBatch オブジェクトはTextureのようなオブジェクトを画面に描写するのに使用されます。; そして BitmapFont オブジェクトはテキストを画面に描写するために、 SpriteBatchと一緒に使用されます。このページでは、 Screen クラスについてさらに説明していきます

次に、 MainMenuScreenオブジェクトをGame のScreen に設定します。 MainMenuScreenには、Drop インスタンスを引数として設定しています。

よくある間違いは、Game の実装で super.render() の呼び出しを忘れることです。 これを呼び出さないと、 create()メソッド内で設定したScreen は描写されません!

最後に、もう一つ忘れてはいけないことがオブジェクトの破棄です! 参考文献。



メインメニュー

では、MainMenuScreen クラスの核心に入りましょう。

package com.badlogic.drop;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;

public class MainMenuScreen implements Screen {

    final Drop game;

    OrthographicCamera camera;

    public MainMenuScreen(final Drop gam) {
        game = gam;

        camera = new OrthographicCamera();
        camera.setToOrtho(false, 800, 480);

    }


        //...Rest of class omitted for succinctness.

}

このコードではScreen インタフェースを実装した MainMenuScreenクラスを作成し、さらにそのコンストラクタを作成します。 Screen インタフェースにはcreate() メソッドの類いのものが無いので、代わりにコンストラクタを使用します。 必要に応じてDropインスタンスのメソッドやフィールドを呼び出せるようにするため、このコンストラクタでは Dropインスタンスを引数として受け取ります。

次は、MainMenuScreen クラスの最後の"重要" メソッド: render(float)です

public class MainMenuScreen implements Screen {

        //public MainMenuScreen(final Drop gam)....        

    @Override
    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0.2f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        camera.update();
        game.batch.setProjectionMatrix(camera.combined);

        game.batch.begin();
        game.font.draw(game.batch, "Welcome to Drop!!! ", 100, 150);
        game.font.draw(game.batch, "Tap anywhere to begin!", 100, 100);
        game.batch.end();

        if (Gdx.input.isTouched()) {
            game.setScreen(new GameScreen(game));
            dispose();
        }
    }

        //Rest of class still omitted...

}

このコードは、SpriteBatch インスタンスとBitmapFont インスタンスを自分で作成するのではなく、gameオブジェクト内のものを呼び出す必要があるという点を除けば、非常に分かりやすいものです。 game.font.draw(SpriteBatch, String, float,float)を使って、テキストを画面に描写しています。 既定コンストラクタを使ってフォントを取得できるようにするため、LibGDX には既成のフォント「Arial」が付属しています。

画面がタッチされたかどうかを調べ、もしタッチされていればゲーム画面にGameScreen インスタンスを設定し、現在のMainMenuScreenインスタンスを破棄します。 Screen の実装に必要な残りのメソッドは上書きしないので、今回は省略しています(このクラスでは破棄処理が必要なものはありません)。



ゲーム画面

これでメニュー画面が完成したので、遂にゲームを作る時が来ました。 元のゲームのコードをほとんど使い回します。 これは重複する作業を避け、Drop と同じくらいシンプルなゲーム実装を改めて考える手間を省くためです。

package com.badlogic.drop;

import java.util.Iterator;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Input.Keys;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.audio.Sound;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.math.MathUtils;
import com.badlogic.gdx.math.Rectangle;
import com.badlogic.gdx.math.Vector3;
import com.badlogic.gdx.utils.Array;
import com.badlogic.gdx.utils.TimeUtils;

public class GameScreen implements Screen {
    final Drop game;

    Texture dropImage;
    Texture bucketImage;
    Sound dropSound;
    Music rainMusic;
    OrthographicCamera camera;
    Rectangle bucket;
    Array<Rectangle> raindrops;
    long lastDropTime;
    int dropsGathered;

    public GameScreen(final Drop gam) {
        this.game = gam;

        // load the images for the droplet and the bucket, 64x64 pixels each
        dropImage = new Texture(Gdx.files.internal("droplet.png"));
        bucketImage = new Texture(Gdx.files.internal("bucket.png"));

        // load the drop sound effect and the rain background "music"
        dropSound = Gdx.audio.newSound(Gdx.files.internal("drop.wav"));
        rainMusic = Gdx.audio.newMusic(Gdx.files.internal("rain.mp3"));
        rainMusic.setLooping(true);

        // create the camera and the SpriteBatch
        camera = new OrthographicCamera();
        camera.setToOrtho(false, 800, 480);

        // create a Rectangle to logically represent the bucket
        bucket = new Rectangle();
        bucket.x = 800 / 2 - 64 / 2; // center the bucket horizontally
        bucket.y = 20; // bottom left corner of the bucket is 20 pixels above
                        // the bottom screen edge
        bucket.width = 64;
        bucket.height = 64;

        // create the raindrops array and spawn the first raindrop
        raindrops = new Array<Rectangle>();
        spawnRaindrop();

    }

    private void spawnRaindrop() {
        Rectangle raindrop = new Rectangle();
        raindrop.x = MathUtils.random(0, 800 - 64);
        raindrop.y = 480;
        raindrop.width = 64;
        raindrop.height = 64;
        raindrops.add(raindrop);
        lastDropTime = TimeUtils.nanoTime();
    }

    @Override
    public void render(float delta) {
        // clear the screen with a dark blue color. The
        // arguments to glClearColor are the red, green
        // blue and alpha component in the range [0,1]
        // of the color to be used to clear the screen.
        Gdx.gl.glClearColor(0, 0, 0.2f, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        // tell the camera to update its matrices.
        camera.update();

        // tell the SpriteBatch to render in the
        // coordinate system specified by the camera.
        game.batch.setProjectionMatrix(camera.combined);

        // begin a new batch and draw the bucket and
        // all drops
        game.batch.begin();
        game.font.draw(game.batch, "Drops Collected: " + dropsGathered, 0, 480);
        game.batch.draw(bucketImage, bucket.x, bucket.y);
        for (Rectangle raindrop : raindrops) {
            game.batch.draw(dropImage, raindrop.x, raindrop.y);
        }
        game.batch.end();

        // process user input
        if (Gdx.input.isTouched()) {
            Vector3 touchPos = new Vector3();
            touchPos.set(Gdx.input.getX(), Gdx.input.getY(), 0);
            camera.unproject(touchPos);
            bucket.x = touchPos.x - 64 / 2;
        }
        if (Gdx.input.isKeyPressed(Keys.LEFT))
            bucket.x -= 200 * Gdx.graphics.getDeltaTime();
        if (Gdx.input.isKeyPressed(Keys.RIGHT))
            bucket.x += 200 * Gdx.graphics.getDeltaTime();

        // make sure the bucket stays within the screen bounds
        if (bucket.x < 0)
            bucket.x = 0;
        if (bucket.x > 800 - 64)
            bucket.x = 800 - 64;

        // check if we need to create a new raindrop
        if (TimeUtils.nanoTime() - lastDropTime > 1000000000)
            spawnRaindrop();

        // move the raindrops, remove any that are beneath the bottom edge of
        // the screen or that hit the bucket. In the later case we increase the 
        // value our drops counter and add a sound effect.
        Iterator<Rectangle> iter = raindrops.iterator();
        while (iter.hasNext()) {
            Rectangle raindrop = iter.next();
            raindrop.y -= 200 * Gdx.graphics.getDeltaTime();
            if (raindrop.y + 64 < 0)
                iter.remove();
            if (raindrop.overlaps(bucket)) {
                dropsGathered++;
                dropSound.play();
                iter.remove();
            }
        }
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void show() {
        // start the playback of the background music
        // when the screen is shown
        rainMusic.play();
    }

    @Override
    public void hide() {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }

    @Override
    public void dispose() {
        dropImage.dispose();
        bucketImage.dispose();
        dropSound.dispose();
        rainMusic.dispose();
    }

}

MainMenuScreenで実装したのと同じように、ApplicationListenercreate()メソッドの代わりにコンストラクタを使用して Dropオブジェクトを引数として渡します。それ以外は、元ゲームの実装とほぼ95%同じです。 また、 GameScreenが画面に表示されるとすぐに音楽の再生を開始します。

画面の左上にはこれまで集めた雨粒の数を表す文字列も追加しました。

これで遂にゲームが完成しました。 Screen インタフェースとGame 抽象クラスについて理解し、複数の状態を持つ多面的なゲームを作成することが重要です。

完全なコードについては、 この Github を参照してください



今後の作業

これで複数の画面を扱う構造について理解したので、今がチャンスです。 メインメニューの見栄えを良くするために、Scene2dScene2D.uiSkinsについて学びましょう。 よりリアルにするために爆発を追加する演出ができるようになります。

前回のチュートリアルから続けてこのページの内容を読んだのであれば、ゲーム作りをする準備はできているでしょう。 大事なのは、チュートリアルの範疇から抜け出して独自のゲームを作成することです。 次はもっと大きなゲームが作れるよう前に進んでください!