落下処理がうまくいかない

Question

以下のようなコードを書いたのですが
初期描画はうまくいったのですが
そのあとの下に落ちる処理ができません
どのようにしたらいいのでしょうか？

import java.applet.Applet;

import java.awt.Graphics;
import java.awt.Image;
import java.awt.Dimension;
import java.awt.event.KeyListener;
import java.awt.event.KeyEvent;

import java.net.URL;

public class action extends Applet implements Runnable, KeyListener{
	
	Thread thread = null;
	
	Image MapChip1;
	Image CharaChip1;
	
	int MapChip1X;
	int MapChip1Y;
	
	int CharaChip1X;
	int CharaChip1Y;
	
	Dimension size;
	Image back;
	Graphics buffer;
	
	public void init(){
		
		thread = new Thread(this);
		thread.start();
		
		URL urlCode = getCodeBase();
		URL urlDoc = getDocumentBase();
		
		MapChip1 = getImage(getCodeBase(), "../アクションゲーム/MapChip1.png");
		CharaChip1 = getImage(getCodeBase(), "../アクションゲーム/CharaChip1.png");
		
		size = getSize();
		back = createImage(size.width, size.height);
		
		buffer = back.getGraphics();
		
		addKeyListener(this);
		
	}
	
	public void paint(Graphics g){
		
		MapChip1X = 20;
		MapChip1Y = 480;
		
		CharaChip1X = 10;
		CharaChip1Y = 20;
		
		buffer.drawImage(MapChip1, MapChip1X - 20, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  1, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  2, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  3, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  4, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  5, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  6, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  7, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  8, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X *  9, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 10, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 11, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 12, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 13, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 14, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 15, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 16, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 17, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 18, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 19, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 20, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 21, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 22, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 23, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 24, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 25, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 26, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 27, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 28, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 29, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 30, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 31, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 32, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 33, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 34, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 35, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 36, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 37, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 38, MapChip1Y, this);
		buffer.drawImage(MapChip1, MapChip1X * 39, MapChip1Y, this);
		
		buffer.drawImage(CharaChip1, CharaChip1X, CharaChip1Y, this);
		
		g.drawImage(back, 0, 0, this);
		
		requestFocusInWindow();
		
	}
	
	public void run(){
		
		while(true){
			
			if(CharaChip1Y <= MapChip1Y){
				
				CharaChip1Y += 1;
				repaint();
				
			}
			
			if(CharaChip1Y <= MapChip1Y && CharaChip1X >= 0 &&
				CharaChip1X <= MapChip1X * 39){
				
				CharaChip1Y = MapChip1Y;
				repaint();
				
			}
			
		}
		
	}
	
	public void keyPressed(KeyEvent e){
		
		int Keycode = e.getKeyCode();
		if(Keycode == KeyEvent.VK_UP){
			CharaChip1Y -= 40;
			CharaChip1Y += 40;
			repaint();
		}
		
	}
	
	public void keyReleased(KeyEvent e){
		
	}
	
	public void keyTyped(KeyEvent e){
		
	}
	
}

Answer 1

KSwordOHasteさんがすでに原因と解決法は解説されているので補足しておきます。

Swingの画面描画（というより世間一般のGUIの画面描画）は、「絵を書き終わったら相手に見せる」という仕組みで動いています。例えば裏返すことのできるホワイトボードを想像してください。そして、以下のような位置関係に立ったとします。

描く人→	ホワイトボード	←見る人

描く人は裏面に絵を書きます。いろいろなパーツを描くので少し時間がかかりますが、見る人は反対側の真っ白な状態のホワイトボードを見ているので、作業中の様子はわかりません。描く人は**描くものを全て書き終わったらホワイトボードをひっくり返します。**すると見る人は「出来上がった絵」だけを見ることができます。描く人は裏返し終わったら次の絵を描き始めます。描き終えたらひっくり返します。これを繰り返すことで、絵が更新されていきます。

この考え方をダブルバッファリングといいます。なぜこのようなことをするかというと、描く人と見る人が同じ向きに立っていた場合、見る人はぐちゃぐちゃの描きかけを見せられることになり、非常に見づらい状態になってしまうからです。

さて、ここで考えをSwingに戻しましょう。描く人はGraphicsクラス、ホワイトボードはApplet、見る人はディスプレイの前のあなたです。paintメソッドは「描く」処理で、paintが終わるとホワイトボードをひっくり返すように画面を更新します。いまのコードは「ひっくり返す前に全部落ちていくコマを描いてしまっている」ので、ひっくり返ったら残像のように絵が下に伸びている状態になっていることでしょう。

ではどうすればいいか、それがKSwordOfHasteさんの回答です。ひっくり返すという行為を一定間隔で繰り返し、その都度絵の座標を更新することで、パラパラ漫画のように少しずつ移動しているように見せることができます。

Comments

[KSwordOfHaste]

とても分かり易い解説ですね。(swingでなくても)GUIを始めたばかりの方にとても参考になると思いました。

[fuzzball]

ダブルバッファの説明で「ホワイトボードをひっくり返す」という例えは初めて見ましたが、すごく良い例えですね。PCや端末の「中の人」が必死で描いているのを想像すると面白いです。

>>見る人はぐちゃぐちゃの描きかけを見せられることになり
それが面白いってこともｗ

[masaya_ohashi]

OpenGLとかを直接触っていると、ダブルバッファリング無しでやるとぐちゃぐちゃっぷりがよく見えます。ああ、こういうところも管理してくれるなんてGUIプログラミングは便利だなぁ、と思うのです。

Answer 2

paintメソッドで少しずつ描画位置をずらしながらImageをdrawImageで描画としていますが、この方法ではアニメーションにはなりません。

Graphics#drawXxxは無条件・即座に描画を行うというものではありません。やりかたによりますが少なくとも同一のメソッドで連続して描画すると画面上「最後に描画した結果しか見えない」という結果になります。

swing/awtの再描画メカニズムは（プログラミング上の注意点をはっきりさせるために若干誇張して表現すると）以下のようになっています。

1. ある領域の表示内容をrepaintメソッドで再描画が必要という状態にする
2. 一呼吸おいて(ある程度の時間が経ってから)ランタイムが自動的にpaintメソッドを起動
3. 起動されたpaint/paintComponentの中で*再描画が必要な部分を描画
4. 一呼吸おいて(ある程度の時間が経ってから)3.の結果が画面に反映される

アニメーションさせるためには通常は以下のように考えます。

(1) javax.swing.Timerを用いて一定時間ごとある処理を起動させる
(2) その処理の中でImageの描画位置を変更し、repaintメソッドを呼び出す
(3) paint/paintComponentで描画位置に従って描画する

javax.swing.Timerの使用例を過去の質問(以下)に書いたことがあるのでMyComponentクラスの定義内容に注目してみてください。

https://teratail.com/questions/78033