６ ゲームに近い動きをさせる（Stagingの応用）

6.1 Shapeオブジェクトを一定速度で動かす

• 平面上での位置を表す座標や、物体の移動速度は、 2つの実数で表現することができ、その表現方法としては 大別すると２種類ある
  • 資料ページでその相互変換方法を解説してあるので 参考にされたい。
  • 本章では、物体の移動の方向と速度の代わりに、 速度の x方向成分と y方向成分を使って、 （つまり translateメソッドに適した形で）扱うこととしておく。

• まずは、以下のようなプログラムからはじめよう。

    val (vx,vy)=(10,10)		//移動速度のx成分とy成分
    val c=s.circle(0,0,20)
    s.loop{
        s.translate(vx,vy)
        Thread.sleep(100)
    }
  

  （サンプル1も参照）

  • 図形が一定方向に移動しつづけるため、早晩 すべての図形が画面からはみ出して何も見えなくなるのが難点。（なので次節で改善を図りましょう）

枠のデータ設定

6.2 一定サイズの四角い枠の中だけで動かす

（つまり、壁に当たると反射するように動かす）

• vx, vy を（valでなく）var変数に変える。

    var (vx,vy)=(10,10)
  

  • （一文字変更するだけだが）
  • val は再代入不可の変数であることを表し、
  • var は再代入可の変数。
  • 今回のように特に意図的に使うとき以外は valを使うことが推奨されている。

• SimpleShapeオブジェクト（circleを含む）の現在位置を求める関数を作っておく（このほうがコードが簡略になる）。

    def pos(o:net.kogics.kojo.staging.SimpleShape):Point=c.origin+c.offset
  

  方向の反転（の書き方）

  • 型名 SimpleShape は、circle, line, pointなどに共通の（親クラス、スーパークラスとも呼ぶ）型名で、
  • posの引数の型をこう指定しておくと、様々なShapeに対して適用できる。

• ループの中（sleepの直前ぐらいが適切な場所だろう）で以下の判断を行う

    if(pos(c).x>rx||pos(c).x<lx)vx= -vx
    if(pos(c).y>ty||pos(c).y<by)vy= -vy
  

  • 関数 pos を使わないと、この式はもっと複雑になることがわかるだろう。

  • ifの条件式の () の中で「または」の意味の論理演算子 || を使わずに書くなら、

        if(pos(c).x>rx)vx= -vx
        if(pos(c).x<lx)vx= -vx
        if(pos(c).y>ty)vy= -vy
        if(pos(c).y<by)vy= -vy
    

    という４行の記述になる。 （サンプル2も参照）
    （なるべく整理したほうが望ましい）。

各図形ごとの速度成分の変数

6.3 沢山のオブジェクトをまとめて作成し、動かす

• まずオブジェクトを多数生成する
• vx, vy の値についても、オブジェクトごとに保持しておく ための仕組みが必要となる。
  • そのためには、右図上のように vx, vy の配列を作って、 描画オブジェクトの配列と、（同じ添え字のもの同士） 関連づけあって処理する、という書き方も可能
    （実際、fortranなどの古い言語ではこういう書き方が頻繁に使われていた）。だが、
  • 右図下のように３つの値をタプルにまとめて、そのタプルの 配列にするという考え方が今は主流になっている。

• オブジェクト（と速度成分値をタプルにしたもの）の集合体を生成するコード。

    var l = for (i <- 1 to 30) yield
         (s.circle(i * 5, random(20)-10, 2),
             i * 0.2, i * 0.3)
  

  • Shapeオブジェクトと、x,y各方向の移動速度成分（vx, vyに相当）を、
    タプルとしてまとめてある。

• loopの中でこれらの各要素を、translateメソッドで移動させる。

    for ((c, vx, vy) <- l)
        c.translate(vx, vy)
  

  • Scala言語（などの最近の言語）では、forなどの構文で 使うループ変数として、スカラ（単独の変数；従来からの使い方）だけでなく、 タプルを分割して代入できるよう複数の変数（タプルと同じ書き方）を使うことができる（上記コードがその例）。

6.4 vx,vy の変更を次の周回に反映させる

• 6.2 で 単独の値としての vx, vy に対して行ったような 判断や処理を、こんどは、
  • 配列（図では倉庫に例えている）からタプルを順々に取り出して、
  • 作業場（に相当するような空間）で処理を行う、

• このとき、6.2のコードを forのループの中にそのまま移行した、

    for ((c, vx, vy) <- l) {
        c.translate(vx, vy)
        if(pos(c).x>rx||pos(c).x<lx)vx= -vx
        if(pos(c).y>ty||pos(c).y<by)vy= -vy
    	}
  

  のようなコードは、動作しない。その理由は、

  1. ループ変数は val変数と同等の扱いであり、再代入できない。また、それ以前に、
  2. ループ変数は（関数の引数と同様に）そのループの 一回一回の実行の中だけの一時的なものであり、 継続的に使われない。

  喩えて言えば、作業場での一時的な変更項目は、倉庫には反映されていない、ということ。

• 倉庫に反映させる考え方（プログラムの書き方）としては２通りある。
  1. 書き戻す。（下図左）
     このとき mutableなcollectionを使う必要がある。
     （これについては次回解説するとして今回は省略する）
     
  2. 別倉庫に送り込む（上図右）
• ここでは 2. の考え方で実現する。そのために、
  • if文（壁に当たると vxやvyの　符号を反転させる という動作）から、
  • if式 に書き換える。
  • 「壁に当たれば 符号を反転させた値、そうでなければ 前からの値」 という意味になる）
• そうして作った（別倉庫に送り込む）値を、タプルにまとめて、 ブロック（ブレースの中）の値として、yieldを使った内包表記で 配列にまとめる。
• その上で、その配列を、var変数（に変更した） l に代入する。
  （倉庫２を、ごそっと建物ごと移動させて倉庫１の場所に置く、というイメージ）

• 以上をまとめると以下のようなコードになる。

    l=for ((c, vx, vy) <- l) yield {
        c.translate(vx, vy)
        (c,
        if(pos(c).x>rx||pos(c).x<lx)-vx else vx ,
        if(pos(c).y>ty||pos(c).y<by)-vy else vy
        )
    }
  

  （サンプル3も参照）

メインループとイベント駆動

6.5 補足 マウスイベント

• 本章ではメインのloopで小さい変化を繰り返し行うことによる物体の自律的な移動を扱った。
• これに加えて、マウス等でユーザが参加して変化を引き起こす手段を与えると、使いでのあるプログラムになる可能性が高い。
• マウスでの操作は、本章と同様に loop の中でマウスの状態をチェックする方法を
  「手駒（「自分」の分身）をマウスで動かす」の章で紹介したが、これに加えて、

• ユーザ主導で発生させるイベントに対する応答を 画面上のオブジェクトにあらかじめ教えておく、という書き方もできる。
  例えば以下のような呼び方。

    tCanvas.onMouseClick{(x,y)=>
        s.circle(x,y,100).fill(red)
    }
  

  • サンプルも参照。
  • ここでは MouseClick　というイベントに対する応答を 指示している。
  • こうした指示を行うためのメソッドは（どの言語でも） onXXXXX のように onで始まる名前であることが多い。
  • こういった呼出の仕組みや、呼び出される処理のことを、 「イベントリスナー」「イベントハンドラ」などと呼ぶ。
  • 上記の式は、メソッド onMouseClick に、ラムダ式を渡す、という考え方になる。
  • ブレース {} の中に ダブルアロー => を置き、
    その左に引数リスト（関数定義のときと同じ）、
    右側に値（を得るための式）を書いたものが、ラムダ式。
    • このラムダ式の使い方は次回以降も学んでいく予定。
    • なので頭の隅にとどめておいてください。

• 上記の例では、onMouseClickメソッドのレシーバとして 　 tCanvas（キャンバスを表すオブジェクト）を使ったので、 キャンバス上のどこでクリックしても有効だった。
  それに対して、

    val c=s.circle(0,0,100)
    c.onMouseClick{(x,y)=>
        println(x,y)
    }
  

  のように描画オブジェクトに対してイベントハンドラを設定することもできる。

  • このとき、イベントは、当該図形の上でクリックした時だけ発生する。
  • 図形を fill した時としない時で、クリックが有効になる範囲がどう変化するか、
    サンプルで確認してみて下さい。