<< Turtle Cafe/ぱらぱら漫画アニメーション >>

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

10.1 学習目標

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

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

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

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.2.1 車＿点滅.dama
  1: ※プログラム名：車を点滅させるプログラム
  2: ※作成者：岡田　健
  3: ※作成日：2009.12.2
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※車を生成する
 12: 画像を新規作成して、車と名付ける。
 13: 車のファイル名を「car.gif」と設定する。
 14: ウィンドウに車を追加する。
 15: 
 16: 整数型を新規作成して、カウンタと名付ける。※ループカウンタ
 17: 
 18: ※アニメーションを行う
 19: 無条件で｛
 20: 
 21: 	※待つ
 22: 	ウィンドウは０．２秒待機する。
 23: 
 24: 	※処理
 25: 	カウンタ％２＝０ならば｛
 26: 		車を出現させる。
 27: 	｝をして、そうでないならば｛
 28: 		車を隠す。
 29: 	｝をする。
 30: 	カウンタにカウンタ＋１を入れる。
 31: 
 32: 	※再描画する
 33: 	ウィンドウを再描画する。
 34: 
 35: ｝を繰り返す。
出現/隠すに関する新しい命令
[オブジェクト]を出現させる。

オブジェクトを出現させます。

[オブジェクト]を隠す。

オブジェクトを隠します。

[オブジェクト]が出現中である

現在、隠されているか、出現しているかをしらべます。以下のように使います。

車が出現中であるならば｛
	車を隠す。
｝をして、そうでないならば｛
	車を出現させる。
｝をする。
[オブジェクト]の出現状況を取得する。

現在、隠されているか、出現しているかをしらべます。以下のように使います。

真偽値型を新規作成して、状態と名付ける。
車の出現状況を取得して、それを状態に入れる。
やってみよう！

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

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

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

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

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

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

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

例えば、次のプログラムは、 ただ車と信号と風車を表示するだけですが、、、

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.3.1.1 車と信号と風車.dama
  1: ※プログラム名：車と信号と風車を表示する
  2: ※作成者：岡田健
  3: ※作成日：2009.12.2
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: 画像を新規作成して、車と名付ける。
 12: 画像を新規作成して、信号と名付ける。
 13: 画像を新規作成して、風車と名付ける。
 14: 
 15: 車のファイル名を「car.gif」と設定する。
 16: 信号のファイル名を「sign.gif」と設定する。
 17: 風車のファイル名を「kazaguruma.gif」と設定する。
 18: 
 19: ウィンドウに車を追加する。
 20: ウィンドウに信号を追加する。
 21: ウィンドウに風車を追加する。
 22: 
 23: ※各オブジェクトのＸＹ座標を設定する
 24: 車のＸ座標を５０に設定する。
 25: 車のＹ座標を１００に設定する。
 26: 信号のＸ座標を１５０に設定する。
 27: 信号のＹ座標を１００に設定する。
 28: 風車のＸ座標を２５０に設定する。
 29: 風車のＹ座標を１００に設定する。
 30: 
 31: ウィンドウを再描画する。

次のように、「変身する」命令を使うと、 車の見た目を信号や風車に変えることができます。

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.3.1.2 車のアニメーション.dama
  1: ※プログラム名：車がアニメーションするプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.2
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: 画像を新規作成して、車と名付ける。
 12: 画像を新規作成して、信号と名付ける。
 13: 画像を新規作成して、風車と名付ける。
 14: 
 15: 車のファイル名を「car.gif」と設定する。
 16: 信号のファイル名を「sign.gif」と設定する。
 17: 風車のファイル名を「kazaguruma.gif」と設定する。
 18: 
 19: ウィンドウに車を追加する。
 20: ウィンドウに信号を追加する。
 21: ウィンドウに風車を追加する。
 22: 
 23: ※各オブジェクトのＸＹ座標を設定する
 24: 車のＸ座標を５０に設定する。
 25: 車のＹ座標を１００に設定する。
 26: 信号のＸ座標を１５０に設定する。
 27: 信号のＹ座標を１００に設定する。
 28: 風車のＸ座標を２５０に設定する。
 29: 風車のＹ座標を１００に設定する。
 30: 
 31: 整数型を新規作成して、カウンタと名付ける。
 32: 
 33: ※アニメーションを行う
 34: 無条件で｛
 35: 
 36: 	ウィンドウを再描画する。
 37: 
 38: 	※車を変身させる
 39: 	カウンタ％３＝０ならば｛
 40: 		車が車に変身する。
 41: 	｝をして、カウンタ％３＝１ならば｛
 42: 		車が信号に変身する。
 43: 	｝をして、そうでないならば｛
 44: 		車が風車に変身する。
 45: 	｝をする。	
 46: 
 47: 	カウンタにカウンタ＋１を入れる。
 48: 
 49: 	ウィンドウは0.2秒待機する。	
 50: 
 51: ｝を繰り返す。
見た目に関する新しい命令
[オブジェクト]が[オブジェクト]に変身する。

現在のオブジェクトを、指定されたオブジェクトとおなじ見た目に変身（!?）させます。

10.3.2 人を動作させる

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

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.3.2.1 歩く人アニメーション.dama
  1: ※プログラム名：人が歩くアニメーションプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.2
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する
  9: ウィンドウを初期化する。
 10: 
 11: ※アニメーション用画像を用意する
 12: 画像を新規作成して、人１と名付ける。
 13: 画像を新規作成して、人２と名付ける。
 14: 画像を新規作成して、人３と名付ける。
 15: 画像を新規作成して、人４と名付ける。
 16: 画像を新規作成して、人５と名付ける。
 17: 画像を新規作成して、人６と名付ける。
 18: 画像を新規作成して、人７と名付ける。
 19: 画像を新規作成して、人８と名付ける。
 20: 人１のファイル名を「man1.gif」と設定する。
 21: 人２のファイル名を「man2.gif」と設定する。
 22: 人３のファイル名を「man3.gif」と設定する。
 23: 人４のファイル名を「man4.gif」と設定する。
 24: 人５のファイル名を「man5.gif」と設定する。
 25: 人６のファイル名を「man6.gif」と設定する。
 26: 人７のファイル名を「man7.gif」と設定する。
 27: 人８のファイル名を「man8.gif」と設定する。
 28: 
 29: ※１番だけをウィンドウに表示させる
 30: ウィンドウに人１を追加する。
 31: 
 32: ※ループカウンタを生成する
 33: 整数型を新規作成して、カウンタと名付ける。
 34: カウンタに０を入れる。
 35: 
 36: ※アニメーションループ
 37: 無条件で｛
 38: 
 39: 	※ --- 待つ ---
 40: 	ウィンドウは０．１秒待機する。
 41: 
 42: 	※ --- 処理を行う ---
 43: 	カウンタ％８＝０ならば｛
 44: 		人１が人１に変身する。
 45: 	｝をして、カウンタ％８＝１ならば｛
 46: 		人１が人２に変身する。
 47: 	｝をして、カウンタ％８＝２ならば｛
 48: 		人１が人３に変身する。
 49: 	｝をして、カウンタ％８＝３ならば｛
 50: 		人１が人４に変身する。
 51: 	｝をして、カウンタ％８＝４ならば｛
 52: 		人１が人５に変身する。
 53: 	｝をして、カウンタ％８＝５ならば｛
 54: 		人１が人６に変身する。
 55: 	｝をして、カウンタ％８＝６ならば｛
 56: 		人１が人７に変身する。
 57: 	｝をして、カウンタ％８＝７ならば｛
 58: 		人１が人８に変身する。
 59: 	｝をする。
 60: 
 61: 	※ --- 再描画する ---
 62: 	ウィンドウを再描画する。
 63: 
 64: 	カウンタにカウンタ＋１を入れる。
 65: 
 66: ｝を繰り返す。

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

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

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

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.3.3.1 歩く人アニメーション２.dama
  1: ※プログラム名：歩く人のアニメーション
  2: ※作成者：岡田健
  3: ※作成日：2009.12.2
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する
  9: ウィンドウを初期化する。
 10: 
 11: ※バックグラウンド画像を用意する
 12: 画像を新規作成して、背景と名付ける。
 13: 背景のファイル名を「bg.jpg」と設定する。
 14: 
 15: ※アニメーション用画像を用意する
 16: 画像を新規作成して、人１と名付ける。
 17: 画像を新規作成して、人２と名付ける。
 18: 画像を新規作成して、人３と名付ける。
 19: 画像を新規作成して、人４と名付ける。
 20: 画像を新規作成して、人５と名付ける。
 21: 画像を新規作成して、人６と名付ける。
 22: 画像を新規作成して、人７と名付ける。
 23: 画像を新規作成して、人８と名付ける。
 24: 人１のファイル名を「man1.gif」と設定する。
 25: 人２のファイル名を「man2.gif」と設定する。
 26: 人３のファイル名を「man3.gif」と設定する。
 27: 人４のファイル名を「man4.gif」と設定する。
 28: 人５のファイル名を「man5.gif」と設定する。
 29: 人６のファイル名を「man6.gif」と設定する。
 30: 人７のファイル名を「man7.gif」と設定する。
 31: 人８のファイル名を「man8.gif」と設定する。
 32: 
 33: ※１番だけをウィンドウに表示させる
 34: ウィンドウに背景を追加する。
 35: ウィンドウに人１を追加する。
 36: 
 37: ※１番を移動
 38: 人１のｘ座標を２４０に設定する。
 39: 人１のｙ座標を２４０に設定する。
 40: 
 41: 整数型を新規作成して、カウンタと名付ける。※ループカウンタ
 42: カウンタに０を入れる。
 43: 
 44: ※アニメーションループ
 45: 無条件で…
 46: 
 47: 	※ --- 待つ ---
 48: 	ウィンドウは０．１秒待機する。
 49: 
 50: 	※ --- 処理を行う ---
 51: 
 52: 	※背景を移動させる
 53: 	背景のＸ座標を取得して、背景のＸ座標をそれ-１に設定する。
 54: 
 55: 	※人の見た目を変える
 56: 	カウンタ％８＝０ならば｛
 57: 		人１が人１に変身する。
 58: 	｝をして、カウンタ％８＝１ならば｛
 59: 		人１が人２に変身する。
 60: 	｝をして、カウンタ％８＝２ならば｛
 61: 		人１が人３に変身する。
 62: 	｝をして、カウンタ％８＝３ならば｛
 63: 		人１が人４に変身する。
 64: 	｝をして、カウンタ％８＝４ならば｛
 65: 		人１が人５に変身する。
 66: 	｝をして、カウンタ％８＝５ならば｛
 67: 		人１が人６に変身する。
 68: 	｝をして、カウンタ％８＝６ならば｛
 69: 		人１が人７に変身する。
 70: 	｝をして、カウンタ％８＝７ならば｛
 71: 		人１が人８に変身する。
 72: 	｝をする。
 73: 
 74: 	※再描画する
 75: 	ウィンドウを再描画する。
 76: 
 77: 	カウンタにカウンタ＋１を入れる。
 78: 
 79: ｝を繰り返す。
オブジェクトの重なりの順番

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

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

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

10.4.1 文字を回す

文字をつくるには、テキストを新規作成します。

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.4.1.1 テキスト＿回転.dama
  1: ※プログラム名：「こんにちは」が回るプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.7
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※こんにちはを生成する
 12: テキストを新規作成して、挨拶と名付ける。
 13: 挨拶の文字列を「こんにちは」と設定する。
 14: ウィンドウに挨拶を追加する。
 15: 
 16: ※アニメーションループ
 17: 無条件で｛
 18: 	※待つ
 19: 	ウィンドウは０．１秒待機する。
 20: 
 21: 	※処理
 22: 	挨拶を５度右に回す。
 23: 
 24: 	※再描画
 25: 	ウィンドウを再描画する。
 26: ｝を繰り返す。

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

10.4.2 文字を変化させる

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

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.4.2.1 テキスト＿変化.dama
  1: ※プログラム名：繰り返しを数えるカウンター
  2: ※作成者：岡田健
  3: ※作成日：2009.12.7
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※カウンタを作成する
 12: テキストを新規作成して、カウンタ表示と名付ける。
 13: カウンタ表示の文字列を「繰返数」と設定する。
 14: ウィンドウにカウンタ表示を追加する。
 15: 
 16: 整数型を新規作成して、カウンタと名付ける。※ループをカウントする変数
 17: カウンタに０を入れる。
 18: 
 19: ※アニメーションを行う
 20: 無条件で｛
 21: 
 22: 	※待つ
 23: 	ウィンドウは０．１秒待機する。
 24: 
 25: 	※処理
 26: 	カウンタ表示の文字列をカウンタと設定する。
 27: 	カウンタにカウンタ＋１を入れる。
 28: 
 29: 	※再描画
 30: 	ウィンドウを再描画する。
 31: 
 32: ｝を繰り返す。

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

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

ここをクリックすると、以下のプログラムをダウンロードできます。

リスト 10.4.2.2 テキスト＿変化２.dama
  1: ※プログラム名：繰り返しを数えるカウンタ
  2: ※　　　　　　　（文字とつなげる版）
  3: ※作成者：岡田健
  4: ※作成日：2009.12.7
  5: 
  6: ※授業に必要なライブラリを取り込む。
  7: TurtleLibraryを参照する。
  8: 
  9: ※環境を初期化する。
 10: ウィンドウを初期化する。
 11: 
 12: ※カウンタを作成する
 13: テキストを新規作成して、カウンタ表示と名付ける。
 14: カウンタ表示の文字列を「繰返数」と設定する。
 15: ウィンドウにカウンタ表示を追加する。
 16: 
 17: ※カウンタを少し右に移動する
 18: カウンタ表示のｘ座標を１６０に設定する。
 19: 
 20: 整数型を新規作成して、カウンタと名付ける。※ループをカウントする変数
 21: カウンタに０を入れる。
 22: 
 23: ※アニメーションを行う
 24: 無条件で｛
 25: 
 26: 	※待つ
 27: 	ウィンドウは０．１秒待機する。
 28: 
 29: 	※処理
 30: 	カウンタ表示の文字列を「繰り返し数は」＋カウンタ＋「です。」と設定する。
 31: 	カウンタにカウンタ＋１を入れる。
 32: 
 33: 	※再描画する
 34: 	ウィンドウを再描画する。
 35: 
 36: ｝を繰り返す。
テキスト専用の新しい命令
[オブジェクト]の文字列を[文字列]に設定する。

テキストオブジェクトの文字を、指定された文字列に変更します。文字列は、文字、数字、それらの組み合わせを指定することができます。

10.5 練習問題

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

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

<< Turtle Cafe/ぱらぱら漫画アニメーション >>