第3回　マウスに合わせてアニメーション - そら豆スクリプト入門

＜＜ 1 2 3 4 5 6 7 8 ＞＞ 目次 用語集 演習回答

---

前回は、プログラムの改造に、ちょっとだけ挑戦してみた。

マルをシカクにしたり
サイズや表示する位置を変更したり、
なんてことを、ほんの1行かえるだけで実現した。

今回は、プログラム全体の組み立てについて、しらべてみよう。
それから、カタチや色や線の太さを変更する方法を理解する。
そして、これらを組み合わせて、
もう少し複雑な、マウスに合わせて動くアニメーションプログラムを作ろう。

2行のコードで、なにがおきるか †

そら豆スクリプトによるアニメーションについて説明するまえに
コードが2行あったら、どんなことがおきるのか考えてみよう。

前回の記事では、プログラムを1行だけ改造してみたが、
一番最後の演習に、次のような問題があった。

５．マルを描く行のあと、次の行でシカクを描いてみる。
どんな結果が得られるだろうか

じっさいにやってみたら、どんな結果になっただろうか。

たとえば、2つの行を続けてかくと、こんなふうになる。

{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

これを実行すると、
次のようにマルの上にシカクが描かれる。

• マルとシカクを描く

まずマルを描いて、それからシカクを描くので、
このようになるんだ。

そら豆スクリプトでは、
基本的に、複数のコードが続いていると、
上から順番に実行していく。

そして、見た目としては
最初に描かれたカタチが下になり
最後に描かれたカタチは上に重ねて描かれる。

今回のように、
マルを描く行と、シカクを描く行が続いている場合、
まずマルを描いて、
それからシカクを描くんだ。

では、これをふまえて
そら豆スクリプトによるアニメーションについて
説明しよう。

そら豆スクリプトによるアニメーション †

イラストやマンガは、ほんとうは止まっているけれど、
テレビとか映画とかゲームは、動いているように見える。
このような「アニメーション」が、
どのような原理になっているか
知っているよね。

そう。ペラペラマンガのように、
まず、ちょっとずつカタチがちがう絵を大量に用意して、

それを速いスピードで順番に表示すると
目の錯覚で、絵が動いているように見えるんだ。

そら豆スクリプトでも、アニメーションを表示する方法は同じだ。

ただし、あらかじめ大量の絵を用意するかわりに
ちょっとずつカタチがちがう絵を
プログラムで作り出す。

いつものデモプログラムを例に、実際のコードを調べてみよう。
コードは、大きく2つの部分に分かれている。

よく見ると、「---初期設定する」の部分と、「---くり返し描画する」の部分があるよね。

「---初期設定する」の部分は、そのプログラムをうごかしたときに、最初に１回だけ実行される。
「---くり返し描画する」の部分は、そのあと何度もくりかえし実行されるんだ。

じっさいに実行される部分は、すぐあとの「{」と「 }」で囲まれているところだ。
だから、「---初期設定する」の後ろの「{」と「 }」の間のコードが、
最初に１回だけ実行されて、
そのあと、「---くり返し描画する」の後ろの「{」と「 }」の間のコードが、
くりかえし実行される。

じつは、「---(命令語) {・・・}」と書いてある部分は、
ほかから呼び出される命令を定義している。

とくに、「---初期設定する」と「---くり返し描画する」の部分は、
そら豆スクリプト本体から動的に呼び出される、特別な命令なんだ。

ちなみに、「---初期設定する」の後ろの「{」と「 }」の間には

{幅:300, 高さ:300}のサイズ

というコードがあるけれど、
これは、カタチを描くエリアのサイズを指定する命令だ。

この命令は、最初に一回だけ実行されることになる。

それから、「{」と「 }」の間のコードは、
行頭に空白を入れて、位置を右にずらしている。
このように行頭をそろえると、
どこからどこまでが「{」と「 }」の間なのか、
ひとめで判断できるので、
コードが見やすくなる。

このように行頭を下げることを
「字下げ」とか「インデント」と呼ぶ。

いろんなカタチを描くには †

では、もう一度、コード全体を見てほしい。

前回改造した1行は、このような「---くり返し描画する」の後ろの
「{」と「 }」の間にある。
だから、ここにマルを描く行があれば、くりかえしマルを描くことになる。
くりかえすたびに、マウスの位置が変わっていれば、
その位置に合わせてマルを描く位置も変わるんだ。

そして、この行を改造すれば、マルをシカクにしたり、描き方を変えることができた。

カタチをかえる †

それでは、マルとシカクいがいのカタチを描いてみよう。
そら豆スクリプトでは、いろんな種類のカタチを描ける。
ここでは、その例として「セン」と「サンカク」を描いてみよう。

センは、次のようにして描く。

｛始点X：0、始点y：0｝と｛終点X：@マウスX、終点y：@マウスy｝にセン

• センを描く

サンカクは、次のようにして描く。

｛X1：0、Y1：0｝と｛X2：100、Y2：100｝と｛X3：@マウスx、Y3：@マウスy｝にサンカク

• サンカクを描く

マルやシカクを書く行との違いが、わかるかな。
そう、引数(ひきすう)が、ちがっているよね。

このように、そら豆スクリプトでは、命令語ごとに引数の書き方がちがっている。
あたり前だけど、「セン」を描くときは、2つの点の位置を指定する。
「サンカク」を描くときは、3つの点の位置を指定する。
なお、命令によっては、複数の方法で引数を指定できる場合がある。

どのような命令語があって、引数をどのようにあたえるか、
それをしらべる方法は、あとで説明する。

色を変える †

次は、色を変えてみよう。
変えられる色には、「輪郭色」「塗りつぶし色」「背景色」の３つがある。

まず、「輪郭色」を例にして、色を変えてみよう。
マルの輪郭色を変えるには、次のように書く。

{赤:255、緑:0、青:0}の輪郭色
{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

• 輪郭色を指定してマルを描く

「輪郭色」は、輪郭の色を指定するための命令語だ。
ここでは、まず輪郭の色を赤色に指定して、
それからマルを描いている。

今回の記事の冒頭で、
複数のコードがつづいている場合、
上から順番に実行していくことを説明した。
たとえば、マルを描く行があって、
つづいてシカクを描く行がある場合は、
まずマルを描いて、それからシカクを描くのだったよね。

輪郭色など色を指定する場合は、
まず専用の命令(この場合は、輪郭色)で色を指定し、
それから、じっさいに描くカタチを指定する。
すると、指定した色でカタチが描かれるんだ。

絵の具で紙に絵を描く場合に、
パレットの上から色を選んで、
それから紙に絵を描いている、
なんて感じを想像してもらうと、いいかもしれない。

ちなみに、色の指定には、赤(Red)・緑(Green)・青(Blue)をまぜる
「光の三原色」(RGB)を使っている。
詳しい指定方法については、あとで説明する。

色の指定は、ずっと続く †

さて、輪郭色の指定は、一度行うと、
次の輪郭色を指定するまで、ずっと有効になっている。
そのために、次のように２つのカタチを連続して描くと、
どちらも同じ色で描かれることになる。

{赤:255、緑:0、青:0}の輪郭色
{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のシカク

• 輪郭色を指定してマルとシカクを描く

塗りつぶし色と背景色 †

塗りつぶし色と背景色のやり方も、輪郭色の指定方法とほぼ同じだ。

「塗りつぶし色」は、カタチの中を塗りつぶす色を指定する命令だ。
次のようにすると、カタチを塗りつぶすことができる。

{赤:255、緑:0、青:0}の輪郭色
{赤:0、緑:0、青:255}の塗りつぶし色
{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

• 塗りぶつし色を指定してマルを描く

ここでは、まず輪郭の色を赤色に指定して、
つづいて、塗りつぶし色を青色に指定して、
それからマルを描いている。

こんどは、背景色を指定してみよう。

「背景色」は、カタチを描く背景の色を指定する命令だ。
なにも指定しない場合は、灰色になっている。
ここに、自由に色をつけることができる。

次のようにすると、背景色をつけることができる。

{赤:0、緑:255、青:0}の背景色
{x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル

• 背景色を指定してマルを描く？

あれ？
なにか、おかしい。

いままでは、マルが重ね描きされていたのに、
今回は、マルが移動しているように見える。
これは、いったい・・・

「初期設定する」と「くり返し描画する」 †

なにが、おきているんだろうか。
もう一度、コードをよく読んでみよう。

そら豆スクリプトでアニメーションを作る場合、
「初期設定する」の部分が一回だけ実行されて、
「くり返し描画する」の部分が何度もくりかえし実行されるのだった。

そして、背景色を指定する行は、
この「くり返し描画する」の中にある。
つまり、背景色が、何度もくりかえし指定されていることになる。

じつは、そら豆スクリプトでは、
背景色を指定するたびに、描かれていたカタチを消してしまうんだ。

だから、背景色が、何度もくりかえし指定されると
そのたびに、描かれたカタチを消えてしまい、
毎回、1個だけカタチを描きなおすことになる。

コレはコレで、とてもおもしろい効果だね。

練習問題 †

でも、いままでと同じように、カタチを重ね描きしながら
背景色を指定するには、どうすればいいだろうか？

(答えは、このページの最後で！)

いろんな命令を使うには †

さて、いろんなカタチや色を使えるようになったら、
表現の幅が大きく広がるはずだ。

ぜひ、自分の作ってみたいものを、
自分で考えて自分で作ってみよう。

そら豆スクリプトには、まだ説明していない命令が、いくつかある。
その種類と数は、これからどんどん増えていく。

そこで、命令について調べる方法を説明しよう。

命令の調べ方について †

そら豆スクリプトで使える全部の命令は、
次の命令一覧ページにまとめてある。

• そら豆スクリプトの命令一覧

これらの命令を組み合わせることで、いろいろな動きを作り出すことができる。
今後、新しい命令も、どんどん追加していく予定だ。

命令の使い方を調べる１ †

使える命令が分かったら、次は、どのように使うのか
調べる必要がある。

そのためには、2つの方法がある。

まず最初の方法は、さきほどの命令一覧ページを見ること。
ここで、サンプルコードを見ると、使い方の例が載っているんだ。

たとえば、マル命令の場合、

となっているよね。
一番右にある

｛X：100、Y：100｝に｛幅：50、高さ：50｝のマル

がサンプルコードになる。
これをコピペすれば、とりあえず使えるはずだ。

命令の使い方を調べる２ †

さて、命令の使い方を調べる、もうひとつの方法は
次のようなサンプルページを見ること。

そら豆スクリプトのサンプルページ

キミのやりたいことと、よく似たサンプルページを見つけて
そのコードをよく読んでみよう。
そうすれば、きっと使い方のヒントが見つかるはずだ。

命令を使いこなすコツ †

命令を調べて、プログラムを作るとき大事なことは、
まず、サンプルコードをよく読むこと
いろんなコードを詳しく読んでみることで
プログラミングのヒントがたくさん手に入るんだ。

もうひとつは、順番にすこしずつ改造してみること
解説を読むだけでは、じっさいに動くプログラムを
作ることは、なかなかできない。

だから、じっさいのコードを読んだり、
改造してみたりすることは、
とても重要なんだ。

最初は、思いどおりにできないかも知れないけれど
ちょっとずつ改造したり、
ともだちに相談したり、
いろいろ実験したりしながら
がんばってみよう。

色を数字で指定する方法 †

そら豆スクリプトでは、次のように、
3つの数値の組み合わせで指定する。
次の例は、赤色で背景を塗りつぶしている。

{赤:255、緑:0、青:0}の背景色

さきほど説明したように、そら豆スクリプトでは、
光の3原色つまり赤(R:Red)、緑(G:Green)、青(B:Blue)の3つの色の量で表している。

色の量は、0から255までの数字で指定する。
だから、 {赤:255、緑:0、青:0}だと、赤色が255でもっとも多く、
緑色と青色は0なので、まったくない。~

また、次のように指定すると 赤色を半分と緑色を半分ずつ混ぜた、暗い紫色になる。

{赤:125、緑:0、青:125}の背景色

• 暗い紫色の背景色でマルを描く

最大の値が、255というのが、中途半端に感じると思う。
たしかに人間にとっては、中途半端だが、
実はコンピュータにとっては、キリのいい数字なんだ。

主な色の指定方法は、下記のようになる。

そして、次のようにすると
マウスの位置によって、マルを塗りつぶす色が変化する。

---くり返し描画する{
 {赤:@マウスX、緑:255、青:@マウスY}の塗りつぶし色
 {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
}

• マウスの位置に合わせて、マルの色を変える

白黒の指定方法 †

白色と黒色は、
このように光の3原色でも指定できるが、
次のように、白と黒の濃さで指定することもできる。

{白黒:0}の背景色 //黒色

{白黒:255}の背景色 //白色

この場合は、白黒の量で、白と黒の濃さを調整する。
白黒が0だと、黒色になり
白黒が255だと、黒色になる。
そして、白黒を0から255の間で調整することで、
灰色の濃さを調整できるんだ。

演習 †

練習問題の答え †

さて問題は、

いままでと同じように、カタチを重ね描きしながら
背景色を指定するには、どうすればいいだろうか？

というものだった。

背景色を指定すると、いままでのカタチが消えてしまうので
背景色を1回だけ指定するようにすればいい。
そのためには、「くり返し描画する」ではなく、
「初期設定する」で背景色を指定する。

//背景色を指定して、マウスの位置にマルを描く（重ね描きあり）
---初期設定する{
  {幅:300, 高さ:300}のサイズ
  {赤:0、緑:255、青:0}の背景色
}

---くり返し描画する{
  {x:@マウスX, y:@マウスY}に{幅:50, 高さ:50}のマル
}

• 背景色を指定して、マウスの位置にマルを描く（重ね描きあり）

演習問題 †

次のようなプログラムを作ってみよう。

これらも、自分の予想どおりになるか
じっさいに手を動かして
ためしてみよう。

1.マウスの動きに合わせて、円弧(えんこ：円の一部になる曲線)を描いてみよう。
円弧の描き方は、命令リストで確認する

2.かんたんなお絵かきツールを作ってみよう。
マウス動きに合わせて、マウスの位置に赤色の小さなマルを描く。

---

＜＜ 1 2 3 4 5 6 7 8 ＞＞ 目次 用語集 演習回答