Java キーボードのイベント処理と再描画

Question

前提

学校の課題でタイルベースゲームのようなものを作っています。

実現したいこと

プレイヤーにマップ上を移動させたい

発生している問題・エラーメッセージ

キーボードのイベント処理で、プレイヤーの位置情報が変更されるようにしました（メソッドplayerMove）
しかし、その後に再描画をする方法が分からず困っています。
多分JavaFXのImageクラス，ImageViewクラスの使い方が多分よくわかってないです。

該当のソースコード

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene; 
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.stage.Stage; 

import javafx.scene.input.KeyEvent;



public class TileGame extends Application{
    char[][] map;
    int MX = 6, MY = 6;
    int boy_x, boy_y; //主人公の位置

    @Override public void start(Stage stage){
	Group root = new Group();
	Scene scene = new Scene(root);
	scene.setFill(Color.BLACK);

	stage.setTitle("Tile Game");
        stage.setWidth(600);
        stage.setHeight(600);
        stage.setScene(scene); 
        stage.sizeToScene(); 
        stage.show(); 

	MapMaker();
        
	drawInitialMapAndChars(root);
	scene.setOnKeyPressed(this::keyPressed);
    }

    public static void main(String[] args) {
	launch(args);
    }
    

    public void MapMaker(){
	// ひとまわり大きな配列を作る
	map = new char[MY+2][MX+2];

	// マップの周囲を見えない壁で囲む
	for (int x = 0; x <= MX+1; x++) {
	    map[0][x] = 'B';
	    map[MY+1][x] = 'B';
	}

	for (int y = 0; y <= MY+1; y++) {
	    map[y][0] = 'B';
	    map[y][MX+1] = 'B';
	}

	String[] map_str = { //初期マップ
	    "     G",
	    "BLB BB",
	    " L    ",
	    "BLBLB ",
	    " LML  ",
	    "BBBBBB" };

	// マップデータの読み込み
	for (int y = 1; y <= MY; y++) {
	    for (int x = 1; x <= MX; x++) {
		map[y][x] = map_str[y-1].charAt(x-1);
		if ( map[y][x] == 'M' ) {
		    boy_x = x;
		    boy_y = y;
		}
	    }
	}
    }

    public void drawInitialMapAndChars(Group root) {

	for (int y = 1; y <= MY; y++) {
	    for (int x = 1; x <= MX; x++) {
		switch ( map[y][x] ) {
	  
		case 'B': // ブロックの描画 
		    Image Bimage = new Image("ground.png");
		    ImageView blockView = new ImageView(Bimage);
		    blockView.setFitWidth(100);
		    blockView.setFitHeight(100);
		    blockView.setX(100*(x-1));
		    blockView.setY(100*(y-1));
		    root.getChildren().add(blockView);
                   break;

		case 'G': // 敵の描画 
		    
                   break;
	  
		case 'M': // プレイヤーの描画
		    Image Pimage = new Image("player.png");
		    ImageView playerView = new ImageView(Pimage);
		    playerView.setFitWidth(100);
		    playerView.setFitHeight(100);
		    playerView.setX(100*(x-1));
		    playerView.setY(100*(y-1));
		    root.getChildren().add(playerView);
                   break;
		}
	    }
	}
    }

    public void keyPressed(KeyEvent e) {
        
	switch ( e.getCode() ) {
	case LEFT:
	    playerMove(2);
	    break; // left
	case RIGHT:
	    playerMove(0);
	    break; // right
	case UP:
	    playerMove(1);
	    break; // up
	case DOWN:
	    playerMove(3);
	    break; // down
	}
    }

    public void playerMove(int dir) {
	int dx = 0, dy = 0;
	switch ( dir ) {
	case 0: dx =  1; break; // right
	case 1: dy = -1; break; // up
	case 2: dx = -1; break; // left
	case 3: dy =  1; break; // down
	}
	if ( dx == 0 && dy == 0 ) return;
	if ( map[boy_y+dy][boy_x+dx] == 'B' ) return; // block
	boy_x += dx; boy_y += dy;
	if ( map[boy_y][boy_x] == ' ' && map[boy_y+1][boy_x] == ' ' ) playerMove(3); // drop
	else{
	    map[boy_y][boy_x] = 'M';
	    //この後再描画
	}
    }

}

試したこと

再描画のところでメソッドdrawInitialMapAndCharsをもう一度呼び出してみたら、プレイヤーが移動した分増殖していきました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[jimbe]

>再描画のところでメソッドdrawInitialMapAndCharsをもう一度呼び出してみたら、プレイヤーが移動した分増殖していきました。

移動するときに移動元を消してませんが。

[mamamami]

コメントありがとうございます。
移動元の消し方？が分からないです。。。
とりあえずマップごと全部描画し直せばいいのかな、というイメージで最初の描画メソッドを呼び出してみたのですが、その前に今描画されているものを消す処理が必要ということでしょうか？

[TN8001]

>> 移動するときに移動元を消してませんが。
> 移動元の消し方？が分からないです。。。

`L`があったりするので単純には消せませんね...
どうせ boy_x, boy_y で管理してるので、わざわざ`M`も動かす意味もないような。

`L`の役割と、// drop の意図がちょっとわかりません（`G`にたどり着けなくないですか？）

Answer 1

drawInitialMapAndCharsを単純に呼ぶと、ImageViewがどんどん増えていきます。
root.getChildren().clear()として、いったん全部消してからやり直せば増え続けはしなくなります。
しかし現状移動するたびにmapにMが増えていくので、やり直してもやっぱりプレイヤーが増えます。

ひとつ動かすために全部作り直すのも無駄ですので、playerViewをフィールドに取り直接動かせばいいでしょう。

//この後再描画
playerView.setX(100 * (boy_x - 1));
playerView.setY(100 * (boy_y - 1));

---

ImageViewの元のImageは使いまわせるので、Image Bimage = new Image("ground.png");はループの外に出したほうが省メモリかと思います。

Comments

[mamamami]

確かに’M’を動かす必要は全くありませんでしたね。。。
ImageViewとImageについて理解が深まりました。
回答していただきありがとうございました。

ちなみに、’L’ははしごで、//dropは下に落下する処理でした。
マップや描画処理など未完成で混乱させていたら申し訳ありませんでした。。。