キャラの歩行パターンで画像切り替えながらアクション

キャラの歩行パターンで画像切り替えながらアクション

この記事はキャラ画像を切り替えながらアクションさせる方法を書きます。

まずは画像を用意します

今回から素材サイトさんから画像おかりしてます！ かなりかわいい。

ぴぽや

これは前向きだけですが、上下左右の４方向 * ３パターンで、時間経過ごとにパターンを切り替えます。

上記のサイトでは、ウディタ用に素材をまとめてくれているのですが、今回はLibGdxのテクスチャアトラスとしてまとめたいので、 元の素材を別々にばらしてから、テクスチャアトラス画像にまとめています。

・分割ツール

超画像魂コンバイン - ｋ本的に無料ソフト・フリーソフト

いくつかほかの分割ツールをためしましたが、アルファ情報も保持したまま分割してくれるので、goodです。

・画像をテクスチャアトラス化するのは前にやった↓

http://snoopopo.hatenablog.com/entry/2015/06/06/173336

ソースのほう

/**
 * キャラ画像を切り替えながらアクション（キャラが歩行する処理のサンプル）
 */
public class Scene2dActionWalkSampleListener extends ApplicationAdapter {

    private Stage stage = null;

    private int cnt = 1;
    private boolean preEnter = false;

    private Array<Image> imagelist = null;

    @Override
    public void create() {
        stage = new Stage();
        Gdx.input.setInputProcessor(stage);

        imagelist = new Array<>();
        imagelist.add(new Image(new Texture("./player_x0_y0.png"))); //ひとつ目
        imagelist.add(new Image(new Texture("./player_x1_y0.png"))); //2つ目
        imagelist.add(new Image(new Texture("./player_x2_y0.png"))); //3つ目

        for (Image image : imagelist) {
            image.setPosition(200,300);
            stage.addActor(image);
        }
    }

    @Override
    public void render() {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear( GL20.GL_COLOR_BUFFER_BIT);  //画面クリア

        stage.act(Gdx.graphics.getDeltaTime()); //よばないとアクションが実行されなかった

        if (!preEnter && Gdx.input.isKeyPressed( Input.Keys.ENTER)) {
            for (Image image : imagelist) {
                image.addAction(Actions.moveBy(0, -100, 2)); //2秒間で100px前に前進
            }
        }

        preEnter = Gdx.input.isKeyPressed( Input.Keys.ENTER);

        for (Image image : imagelist) {
            image.setVisible(false); //いったん全部を非表示にして
        }

        //今のフレームで表示させる画像だけ表示する
        int rest = cnt % 10;
        if (rest <= 2) {
            imagelist.get(0).setVisible(true);
        } else if (rest <= 6) {
            imagelist.get(1).setVisible(true);
        } else {
            imagelist.get(2).setVisible(true);
        }
        cnt++;

        stage.draw();
    }

    @Override
    public void dispose() {
        stage.dispose();
    }
}

すべてパターンの画像に、それぞれアクションを設定してあげて、 画像の表示非表示を切り替えている、かんじです。

なので、非表示になっていて見えないけど、すべての画像が同じ動き（アクション）をしていることになります。

表示、非表示の切り替えてる部分　Image#setVisible

ここでImage#setVisibleを使わずに、はじめは、image#remove()してstage#add(image)をしていたのですが、 アクションの設定など、消えたくないものも消えて大量にぬるぽが発生したので、今回はこのようにしています。

       for (Image image : imagelist) {
            image.setVisible(false); //いったん全部を非表示にして
        }

        //今のフレームで表示させる画像だけ表示する
        int rest = cnt % 10;
        if (rest <= 2) {
            imagelist.get(0).setVisible(true);
            //〜略〜
        }

アクションはイメージのオブジェクトそれぞれに作ってあげないとだめっぽい

           for (Image image : imagelist) {
                image.addAction(Actions.moveBy(0, -100, 2)); //2秒間で100px前に前進
            }

アクションのインスタンスは、画像それぞれに必要なようでした。

・動かないソース↓

           Action action = Actions.moveBy(0, -100, 2);
            for (Image image : imagelist) {
                image.addAction(action);
            }

上記では動きませんでした。（libgdxのライブラリ内でぬるぽなので、中の動きをみるひつようある　TODO