動的画面の構成法
この講義では動的画面の構成法を解説します。
そもそもここで言う動的画面とは"リアルタイムで変動する画面"の事を指します。
これは説明するよりも実際に見て頂いた方がより早く理解出来ると思われるので、次のサンプルプログラムを実行してみて下さい。
書き換える部分はrun()メソッドとpaint()メソッドです。
public void paint(Graphics g) {
  g.lock();
  g.setColor(Graphics.getColorOfRGB(0x00, 0x00, 0x00));
  g.fillRect(0, 0, 240, 240);
  g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
  g.drawString("スクロール", 90, time);
  g.unlock(true);
}
public void run() {
  for (;;) {
    repaint();
    time++;
    try {
      Thread.sleep(30);
    } catch (InterruptedException e) {
      return;
    }
  }
}
またフィールドとしてtimeを追加しておいて下さい。初期値は0です。
/**時間を管理するフィールド*/
private int time = 0;
上記の通りに書き換えたら早速実行してみましょう。実行画面はこの様になります。
この技術を"スクロール ―Scroll― "といいます。 では実際のプログラムを詳しく見てみましょう。
g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
g.drawString("スクロール", 90, time);
まず色を指定します。今回は白で文字を描画します。
次に太字で表記されている実際の文字列描画部分ですが、このy座標を指定している部分にフィールドであるtimeを持って来ています。
フィールドtimeの値はスレッド内でインクリメントされています。
time++;
つまり文字列"スクロール"の表記位置は30ms毎に1ドットずつ、ズレて行く事になります。
フェードイン・フェードアウト
さて、動的画面構成技術は勿論これ以外にも沢山あります。次に挙げるものはフェードイン、フェードアウトと呼ばれる手法です。
先程の設定のままpaint()メソッドだけを以下の様に書き換えて下さい。
public void paint(Graphics g) {
  g.lock();
  g.setColor(Graphics.getColorOfRGB(0x00, 0x00, 0x00));
  g.fillRect(0, 0, 240, 240);
  if (time < 256) {
    g.setColor(Graphics.getColorOfRGB(time, time, time));
  } else {
    g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
  }
  g.drawString("フェードイン", 85, 80);
  if (time < 256) {
    g.setColor(Graphics.getColorOfRGB(0xff - time, 0xff - time, 0xff - time));
  } else {
    g.setColor(Graphics.getColorOfRGB(0x00, 0x00, 0x00));
  }
  g.drawString("フェードアウト", 80, 140);
  g.unlock(true);
}
実行画面です。
画面上部で行われている色彩推移を"フェードイン ―Fade In―"、下部のものを"フェードアウト ―Fade Out―"といいます。
今回は色彩設定部分の値を変動させています。RGB各値それぞれtimeを参照させる事で、色彩推移を表現しています。
この時、RGB値が256(＝0xff)を超えてしまうとエラーとなるので注意して下さい。
フラッシュ
最後にもう1つ、"フラッシュ ―Flash―"という技術を紹介します。
これは画面の一部分、或いは全体を一瞬光らせる表現法で、丁度カメラのフラッシュとそのイメージは似ています。
ではフラッシュのサンプルプログラムを見てみましょう。
public void paint(Graphics g) {
  g.lock();
  g.setColor(Graphics.getColorOfRGB(0x00, 0x00, 0x00));
  g.fillRect(0, 0, 240, 240);
  if (time % 10 == 0) {
    g.setColor(Graphics.getColorOfRGB(0xff, 0xff, 0xff));
    g.fillRect(0, 0, 240, 240);
  }
  g.unlock(true);
}
実行すると画面がチカチカと点滅すると思います。
今回はtimeが10で割り切れた時‥つまり300ms毎に1回、真っ白の画面を表示させています。
ここでは便宜上"フラッシュ"と呼んでいますが、実際は画面を切り替えているだけです。
フィールドtime
以上3手法、これらは総てtimeというフィールドの値を参照しています。
今回の場合に限らず、iαppliを作成する際には時間を管理する意味でも、このフィールドを用意しておくと良いでしょう。
そしてそのtimeを参照しつつ上記の手法を組み合わせれば、様々なバリエーションを持つ動的画面の構成が可能となる筈です。
inserted by FC2 system