<< Turtle Cafe/回授業：オブジェクトの概念修得とミニ作品制作/ぱらぱら漫画アニメーション >>

10 ぱらぱら漫画アニメーション

10.1 学習目標

10.2 画像を使ったプログラム

今回は、画像や文字を使ったアニメーションをやってみたいと思います。 プログラムは、前回までに習ったこととほとんど同じです。

リスト 10.2.1 RotateCar.java
  1: /**
  2:  * 車が回るプログラム
  3:  * 
  4:  * Yoshiaki Matsuzawa
  5:  * 2003/06/23
  6:  */
  7: public class RotateCar extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new RotateCar());
 12: 	}
 13: 
 14:   //タートルを動かす処理
 15: 	public void start() {
 16: 
 17:     //車を生成する
 18:     ImageTurtle car = new ImageTurtle("car.gif");
 19: 
 20:     //アニメーションループ
 21:     while (true) {
 22: 
 23:       //待つ
 24:       sleep(0.1);
 25: 
 26:       //処理
 27:       car.rt(5);
 28: 
 29:       //再描画
 30:       update();
 31:     }
 32:   }
 33:   
 34: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

ImageTurtleクラスを使うと、画像をオブジェクトとして、 タートルのように扱うことができます。

画像を使うときの注意

例えば、上記のRotateCar.javaアニメーションで、car.gifを使う場合は、 その2つ（RotateCar.javaとcar.gif）を同じフォルダに置く必要があります。

同じフォルダに置いていないと画像が表示されません。

使える画像の種類は「.gif」「.jpg」「.jpeg」のどれかです。 「.bmp」の画像は使えないので注意してください。

10.3 オブジェクトを隠す/出現させる

show(), hide() 命令を使うと、オブジェクトを隠したり、 出現させたりすることができます。

下のプログラムは、車が点滅するプログラムです。

リスト 10.3.1 OnAndOffCar.java
  1: /**
  2:  * 車を点滅させるプログラム
  3:  * 
  4:  * Yoshiaki Matsuzawa
  5:  * 2003/06/23
  6:  */
  7: public class OnAndOffCar extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new OnAndOffCar());
 12: 	}
 13: 
 14:   //タートルを動かす処理
 15: 	public void start() {
 16: 
 17:     int i;//ループカウンタ
 18:     
 19:     //車を生成する
 20:     ImageTurtle car = new ImageTurtle("car.gif");
 21: 
 22:     //アニメーションループ
 23:     i = 0;
 24:     while (true) {
 25: 
 26:       //待つ
 27:       sleep(0.2);
 28: 
 29:       //処理
 30:       if(i % 2 == 0){//偶数だったら
 31:         car.show();
 32:       }else{//偶数ではなかったら(奇数だったら)
 33:         car.hide();
 34:       }
 35:       i++;
 36:       
 37:       //再描画
 38:       update();
 39: 
 40:     }
 41:   }
 42: 
 43: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

出現/隠すに関する新しい命令
show()
オブジェクトを出現させます。
hide()
オブジェクトを隠します。
isShow()
現在、隠されているか、出現しているかをしらべます。
show([真偽])
真偽にtrueと書けば、出現させ、falseと書けば、隠します。
show(!isShow())
上記の命令の組み合わせ命令で、隠れていれば、出現させ、出現していれば、隠します。
やってみよう！

画像タートルを使って、青信号は点滅させ、車は前に進め、かざぐるまは回転させるプログラムを作ってください。 画像は以下のものをダウンロードして使ってください。

ブラウザからデスクトップに画像をドラッグドロップすると、デスクトップに画像をダウンロードすることができます。

（プログラムと同じフォルダに置いていないと画像が表示されません。）

（使える画像の種類は「.gif」「.jpg」「.jpeg」のどれかです。 「.bmp」の画像は使えないので注意してください。）

10.4 ぱらぱら漫画アニメーション

10.4.1 見た目を別のオブジェクトのものに

looks命令を使うと、 オブジェクトの見た目を別のオブジェクトのものにすることができます。

例えば、次のプログラムは、 ただじゃんけんのグーチョキパーを表示するだけですが、、、

リスト 10.4.1.1 JankenCharacters.java
  1: /**
  2:  * じゃんけんの絵を登場させるプログラム
  3:  * 
  4:  * 2003/05/08
  5:  * Yoshiaki Matsuzawa
  6:  */
  7: public class JankenCharacters extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new JankenCharacters());
 12: 	}
 13:   
 14:   //タートルを動かす処理
 15: 	public void start() {
 16:     
 17:     Goo g = new Goo();
 18:     Choki c = new Choki();
 19:     Paa p = new Paa();
 20:     
 21:     g.warp(100,100);
 22:     c.warp(200,100);
 23:     p.warp(300,100);
 24:     
 25:   }
 26: 
 27: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

次のように、looks命令を使うと、 グーの見た目をチョキやパーに変えることができます。

リスト 10.4.1.2 JankenAnimation.java
  1: /**
  2:  * じゃんけんアニメーションプログラム
  3:  * 
  4:  * 2003/05/08
  5:  * Yoshiaki Matsuzawa
  6:  */
  7: public class JankenAnimation extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new JankenAnimation());
 12: 	}
 13:   
 14:   //タートルを動かす処理
 15: 	public void start() {
 16:     
 17:     int i; //ループ用の変数
 18:     
 19:     Goo g = new Goo();
 20:     Choki c = new Choki();
 21:     Paa p = new Paa();
 22:     
 23:     g.warp(100,100);
 24:     c.warp(200,100);
 25:     p.warp(300,100);
 26:     
 27:     i = 0;
 28:     while (true) {
 29:       
 30:       sleep(0.5);
 31:       
 32:       //繰り返した数に応じてグーの見た目を変える
 33:       if(i % 3 == 0){
 34:         g.looks(g);
 35:       }
 36:       else if(i % 3 == 1){
 37:         g.looks(c);
 38:       }
 39:       else{
 40:         g.looks(p);
 41:       }
 42:       
 43:       update();
 44:       i++;
 45:     }
 46:   }
 47:   
 48: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

見た目に関する新しい命令
looks(オブジェクト)
現在のオブジェクトを、指定されたオブジェクトとおなじ見た目に変身（!?）させます。

10.4.2 人を動作させる

じゃんけんを応用すると、ぱらぱら漫画の要領で、 人が動作しているようなアニメーションを作ることができます。

リスト 10.4.2.1 WalkingMan.java
  1: /**
  2:  * 人が歩くアニメーションプログラム
  3:  * 
  4:  * Yoshiaki Matsuzawa
  5:  * 2003/06/17
  6:  */
  7: public class WalkingMan extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new WalkingMan());
 12: 	}
 13: 
 14:   //タートルを動かす処理
 15: 	public void start() {
 16:     
 17:     int i;//ループカウンタ
 18:     
 19:     hide();//亀を消去
 20:     
 21:     //アニメーション用画像を用意する
 22:     ImageTurtle man1 = new ImageTurtle("man1.gif");
 23:     ImageTurtle man2 = new ImageTurtle("man2.gif");
 24:     ImageTurtle man3 = new ImageTurtle("man3.gif");
 25:     ImageTurtle man4 = new ImageTurtle("man4.gif");
 26:     ImageTurtle man5 = new ImageTurtle("man5.gif");
 27:     ImageTurtle man6 = new ImageTurtle("man6.gif");
 28:     ImageTurtle man7 = new ImageTurtle("man7.gif");
 29:     ImageTurtle man8 = new ImageTurtle("man8.gif");
 30:     
 31:     //1番以外のアニメーション用画像を消す
 32:     man2.hide();
 33:     man3.hide();
 34:     man4.hide();
 35:     man5.hide();
 36:     man6.hide();
 37:     man7.hide();
 38:     man8.hide();
 39:     
 40:     //アニメーションループ
 41:     i = 0;
 42:     while (true) {
 43:       
 44:       // --- 待つ ---
 45:       sleep(0.1); //0.1秒
 46:       
 47:       // --- 処理を行う ---
 48:       if(i % 8 == 0){
 49:         man1.looks(man1);			
 50:       }
 51:       else if(i % 8 == 1){
 52:         man1.looks(man2);
 53:       }
 54:       else if(i % 8 == 2){
 55:         man1.looks(man3);
 56:       }
 57:       else if(i % 8 == 3){
 58:         man1.looks(man4);
 59:       }
 60:       else if(i % 8 == 4){
 61:         man1.looks(man5);
 62:       }
 63:       else if(i % 8 == 5){
 64:         man1.looks(man6);
 65:       }
 66:       else if(i % 8 == 6){
 67:         man1.looks(man7);
 68:       }
 69:       else if(i % 8 == 7){
 70:         man1.looks(man8);
 71:       }
 72:       
 73:       // --- 再描画する ---
 74:       update();
 75:       i++;
 76:     }
 77:     
 78:   }
 79:   
 80: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

このアニメーションでは、次の8枚の画像が使われています。

10.4.3 背景を動かす（画面のスクロール）

さらに、背景を付け加えると、動いているように見えます。

リスト 10.4.3.1 WalkingManWithBg.java
  1: /**
  2:  * 人が歩くアニメーションプログラム
  3:  * (背景付き)
  4:  * 
  5:  * Yoshiaki Matsuzawa
  6:  * 2003/06/17
  7:  */
  8: public class WalkingManWithBg extends Turtle {
  9: 
 10: 	//起動処理
 11: 	public static void main(String[] args) {
 12: 		Turtle.startTurtle(new WalkingManWithBg());
 13: 	}
 14: 
 15:   //タートルを動かす処理
 16: 	public void start() {
 17:     
 18:     //ウインドウを移動, 大きさ調整
 19:     window.warp(100, 100);
 20:     window.size(480, 420);
 21:     
 22:     int i;//ループカウンタ
 23:     
 24:     //座標を取得するための変数
 25:     int x;
 26:     int y;
 27:     
 28:     hide();//亀を消去
 29:     
 30:     //バックグラウンド画像を用意する
 31:     ImageTurtle bg = new ImageTurtle("bg.jpg");
 32:     
 33:     //アニメーション用画像を用意する
 34:     ImageTurtle man1 = new ImageTurtle("man1.gif");
 35:     ImageTurtle man2 = new ImageTurtle("man2.gif");
 36:     ImageTurtle man3 = new ImageTurtle("man3.gif");
 37:     ImageTurtle man4 = new ImageTurtle("man4.gif");
 38:     ImageTurtle man5 = new ImageTurtle("man5.gif");
 39:     ImageTurtle man6 = new ImageTurtle("man6.gif");
 40:     ImageTurtle man7 = new ImageTurtle("man7.gif");
 41:     ImageTurtle man8 = new ImageTurtle("man8.gif");
 42:     
 43:     //1番を移動
 44:     man1.warp(240, 240);
 45:     
 46:     //1番以外のアニメーション用画像を消す
 47:     man2.hide();
 48:     man3.hide();
 49:     man4.hide();
 50:     man5.hide();
 51:     man6.hide();
 52:     man7.hide();
 53:     man8.hide();
 54:     
 55:     //アニメーションループ
 56:     i = 0;
 57:     while (true) {
 58:       
 59:       // --- 待つ ---
 60:       sleep(0.1); //0.1秒
 61:       
 62:       // --- 処理を行う ---
 63:       //背景を動かす
 64:       x = bg.getX();
 65:       y = bg.getY();
 66:       bg.warp(x - 2, y);
 67:       
 68:       //人の画像を変える
 69:       if(i % 8 == 0){
 70:         man1.looks(man1);			
 71:       }
 72:       else if(i % 8 == 1){
 73:         man1.looks(man2);
 74:       }
 75:       else if(i % 8 == 2){
 76:         man1.looks(man3);
 77:       }
 78:       else if(i % 8 == 3){
 79:         man1.looks(man4);
 80:       }
 81:       else if(i % 8 == 4){
 82:         man1.looks(man5);
 83:       }
 84:       else if(i % 8 == 5){
 85:         man1.looks(man6);
 86:       }
 87:       else if(i % 8 == 6){
 88:         man1.looks(man7);
 89:       }
 90:       else if(i % 8 == 7){
 91:         man1.looks(man8);
 92:       }
 93:       
 94:       // --- 再描画する ---
 95:       update();
 96:       i++;
 97:     }
 98:     
 99:   }
100:   
101: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

オブジェクトの重なりの順番

オブジェクトは、new命令で作られた順番に、 後ろから重なっていきます。

背景を使うときは、人などの画像よりも先にnewして生成してください。

10.5 文字をオブジェクトして扱う

10.5.1 文字を回す

文字をつくるには、TextTurtleを使います。

リスト 10.5.1.1 RotateText.java
  1: /**
  2:  * 「こんにちは」が回るプログラム
  3:  * 
  4:  * Yoshiaki Matsuzawa
  5:  * 2003/06/23
  6:  */
  7: public class RotateText extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new RotateText());
 12: 	}
 13: 
 14:   //タートルを動かす処理
 15: 	public void start() {
 16: 
 17:     //こんにちはを生成する
 18:     TextTurtle hello = new TextTurtle("こんにちは");
 19: 
 20:     //アニメーションループ
 21:     while (true) {
 22: 
 23:       //待つ
 24:       sleep(0.1);
 25: 
 26:       //処理
 27:       hello.rt(5);
 28: 
 29:       //再描画
 30:       update();
 31:     }
 32:   }
 33:   
 34: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

文字も、「オブジェクト」ですから、タートルや、 画像と同じように扱うことができます。

10.5.2 文字を変化させる

文字オブジェクトは、 その文字を変化させるための特別な命令、text()を持っています。

リスト 10.5.2.1 Counter.java
  1: /**
  2:  * 繰り返しを数えるカウンター
  3:  * 
  4:  * Yoshiaki Matsuzawa
  5:  * 2003/06/23
  6:  */
  7: public class Counter extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new Counter());
 12: 	}
 13: 
 14:   //タートルを動かす処理
 15: 	public void start() {
 16: 
 17:     int i;//ループをカウントする変数
 18:     
 19:     //カウンターを生成する
 20:     TextTurtle counter = new TextTurtle("繰り返し数");
 21: 
 22:     i = 0;
 23:     //アニメーションループ
 24:     while (true) {
 25: 
 26:       //待つ
 27:       sleep(0.1);
 28: 
 29:       //処理
 30:       counter.text(i);
 31:       i++;
 32: 
 33:       //再描画
 34:       update();
 35:     }
 36:   }
 37:   
 38: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

ちなみに、下のプログラムのように、 文字と数字をつなげて、一つの文字にするには、+ 記号でつなげます。

文字列は、「"」で囲みますが、数字（変数）にはつけません。

リスト 10.5.2.2 Counter2.java
  1: /**
  2:  * 繰り返しを数えるカウンター
  3:  * (文字とつなげる版)
  4:  * 
  5:  * Yoshiaki Matsuzawa
  6:  * 2003/06/23
  7:  */
  8: public class Counter2 extends Turtle {
  9: 
 10: 	//起動処理
 11: 	public static void main(String[] args) {
 12: 		Turtle.startTurtle(new Counter2());
 13: 	}
 14: 
 15:   //タートルを動かす処理
 16: 	public void start() {
 17: 
 18:     int i;//ループをカウントする変数
 19:     
 20:     //カウンターを生成する
 21:     TextTurtle counter = new TextTurtle("繰り返し数");
 22: 
 23:     i = 0;
 24:     //アニメーションループ
 25:     while (true) {
 26: 
 27:       //待つ
 28:       sleep(0.1);
 29: 
 30:       //処理
 31:       counter.text("現在の繰り返し数は" + i + "です。");
 32:       i++;
 33: 
 34:       //再描画
 35:       update();
 36:     }
 37:   }
 38:   
 39: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

テキスト専用の新しい命令
text([文字列])
テキストオブジェクトの文字を、指定された文字列に変更します。文字列は、文字、数字、それらの組み合わせを指定することができます。

10.6 練習問題

10.6.1 問題1：アニメーションを作ろう

今回習ったことを用いて、楽しいアニメーションを作成してください。

10.6.2 作品例

リスト 10.6.2.1 AnimationSample.java
  1: /**
  2:  * アニメーションのサンプル
  3:  *
  4:  * 2003/05/08
  5:  * Yoshiaki Matsuzawa
  6:  */
  7: public class AnimationSample extends Turtle {
  8: 
  9: 	//起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new AnimationSample());
 12: 	}
 13:   
 14:   //タートルを動かす処理
 15: 	public void start() {
 16:     
 17:     int i;
 18:     
 19:     TextTurtle text = new TextTurtle("注目->");		
 20:     
 21:     TextTurtle number = new TextTurtle();
 22:     number.warp(200, 100);
 23:     
 24:     ImageTurtle car = new ImageTurtle("car.gif");
 25:     car.hide();
 26:     
 27:     i = 10;
 28:     while (true) {
 29:       //待つ
 30:       sleep(1);
 31:       
 32:       //処理
 33:       number.text(i);
 34:       
 35:       if (i == 3) {
 36:         number.color(java.awt.Color.red);
 37:       }
 38:       
 39:       if (i <= 0) {
 40:         text.looks(car);
 41:         number.text("ぼかーん!!");
 42:       }
 43:       
 44:       i--;
 45:       
 46:       //再描画
 47:       update();
 48:     }
 49:   }
 50:   
 51: }

下のボタンを押すと、このプログラムが実行できます。 ここをクリックすると、プログラムをダウンロードできます。

<< Turtle Cafe/回授業：オブジェクトの概念修得とミニ作品制作/ぱらぱら漫画アニメーション >>