Sunaba講座 #5 点を動かす ＆ 画面更新 について

はじめに

sunabaの導入については「Sunaba講座 #0 導入編」をご覧ください。各講座へのリンクも貼ってあります

課題04 点を横方向に走らせる

画面左上から右方向に点を走らせてください。走らせる距離は10ドット程度でOKです。
はじめにアニメーションの仕組みについて考えてみましょう。
パラパラ漫画を思い浮かべてください。ノートの隅に絵を描いてペラペラめくって遊んだ経験はあると思います。Sunabaのアニメーションもこれに近いのです。紙のパラパラ漫画とSunabaで異なる点をあげてみます。

• パラパラ漫画と異なる点
  • Sunabaは絵を作りながらパラパラめくっている
    • その場で絵を作ってすぐ表示、これを高速で繰り返しているイメージです。
    • 1枚表示している間に次の絵を急いで描く。描き終えたら表示を切り替える、そんな感じです。
  • Sunabaは絵を切り替える頻度が1/60秒毎
    • Sunabaは1/60秒毎に1枚表示しようと頑張ります
    • 1枚描く間に考える（計算）時間が長いと、更新速度が遅れます
    • 逆に、早く描けてしまった場合は、1/60秒更新になるよう待機時間を設けて調整します

以降、画面表示の切り替え動作を『 画面更新 』と呼びます

---

画面更新の詳細

Sunabaは画面メモリにアクセスする命令を実行すると、 自動的に60000～69999番の値すべてをPC画面に反映します。例として、2×2ドットの四角を画面の中心に描くプログラムで説明します。

memory[64949]->990099
memory[64950]->990099
memory[65049]->990099
memory[65050]->990099

前提条件として、Sunabaのプログラム実行直後は全メモリの値が0（ゼロ） になることを認識しておいてください（画面メモリ的には黒ですね）
一行ずつSunaba君の動きを追っていきます。

• 1行目の memory[64949] -> 990099** をSunaba君が読み取って実行
  • 64949番だけピンク、他の9999個の画素は全て黒 の1枚絵作成。
  • できた絵をPC画面表示部に送信（計10000メモリの情報）
• 2行目の memory[64950] -> 990099 をSunaba君が読み取って実行
  • 64949,64950番がピンク、他の9998個の画素は全て黒 の1枚絵作成。
  • できた絵をPC画面表示部に送信（計10000メモリの情報）
• 3行目の memory[65049] -> 990099 をSunaba君が読み取って実行
  • 64949,64950,65049番がピンク、他の9997個の画素は全て黒 の1枚絵作成。
  • できた絵をPC画面表示部に送信（計10000メモリの情報）
• 4行目の memory[65050] -> 990099 をSunaba君が読み取って実行
  • 64949,64950,65049,65050番がピンク、他の9996個の画素は全て黒 の1枚絵作成。
  • できた絵をPC画面表示部に送信（計10000メモリの情報）
• プログラム終了（最後の絵が表示された状態で終了）

1ドット打つたびに画面が更新される様子は、今まで実際に画面を見てきたイメージ通りでしょう。
なんにしても、この方法では大きな絵を表示するのに長い時間を要することは想像できると思います（1画面10000ドットなので、1/60 * 10000 = 166.6秒．．．遅！）
このままではゲーム作りなんて無理です。もちろん1枚絵を一気に表示する機能は用意されていますが、それは次の課題で解説します。

Sunabaはなぜこの仕組みをデフォルト設定にしているのでしょうか。それはプログラムが実行される様子を、画面の動きをみて実感できるようにするためでしょう。横線を縦に並べることで四角を描いたプログラムを思い出してください。横線が上から徐々に描かれる様子がアニメっぽく表示されたはずです。Sunabaは初心者のため開発言語なので、デフォルトがこの設定なのです。たぶん。
画面更新の中でも、今回のデフォルトの動作を自動更新と呼びます。これに対なす機能として、プログラマが画面更新タイミングを決める手動更新が用意されています。こちらは先ほど述べた1枚絵を一気に表示する方法です。後々の課題で解説します。

---

課題04の解説

あらためて課題04の解説をしたいと思います。画面更新の話が長くて、課題内容が頭から抜けたと思うので再掲します。

• 課題04：画面左上から右に点を走らせる。距離は10ドット程度でOK

  • 自動更新の仕組みを意識して、点が動くように見えるプログラムを考えてみましょう
  • whileを使わず、コピペコードでOKです
  • 点が点滅しますが、画面自動更新の仕組み上、どうにもならないので気にしないことです
  • 疑似コード

  
    60000を白
    60000を黒
    60001を白
    60001を黒
    ・・・・
    ・・・
    ・・
    

• お手本コードは掲載しません。点が右側に走っていればOKです。完成した後は色をピカピカさせて遊んでみましょう。

---