Applet - JavaでGraphics (2003 .. 2005)

練習８   グラフィックス アニメーション 作成入門

内容

アニメーション画像の表示

Java（Java仮想マシン：JVM）では，プロセス（処理）をいくつかの単純な制御処理（スレッド）に分割し，各スレッドが微小な時間分割内で実行されるため，マルチタスクが可能となる。 Webブラウザでも複数の画像やアプレットが同時に読み込まれ，実行が行われる。 では，このマルチスレッド処理を利用して，画像のアニメーションを行ってみよう。

Step1   静止画像の表示

予備知識として，アップレットに静止画像を表示する方法を学習することにします。画像はHTMLの<IMG>タグで簡単にWebブラウザの画面に表示できます。しかし，画像を動かしたり，ボタンを選択して表示する画像を切り替えたりするようなイベント処理を記述するにはアプレットの方が便利です。 AWTではImageクラスで画像が取り扱われる。画像をアプレットに読み込む（ロード）には、AppletクラスのgetImageメソッドを使う。

Image imageSample;
imageSample = getImage(URL urlsample, String imageName );
または
imageSample = getImage(getCodeBase(), String imageName );

URLクラスを使って読み込む画像ファイルのURLを指定できる。ここではAppletクラスのgetCodeBaseメソッドまたはgetDocumentBaseメソッドを使ってアプレット自身のURLを取得し，これを画像ファイルを探す場所として使用する。
画像をアップレットのブラウザに表示（描画）するには，アップレットを描画するためのコードを記述する paint メソッドの中で，Graphics クラスの drawImage メソッドを使う。 Applet クラスには ImageObserver インタフェースを実装するオブジェクトが既定値として用意されてるので，この ImageObserver オブジェクトとして単に this キーワードを使う。
public void paint (Graphics g) {
Int x1, y1; //ブラウザ内での表示位置の座標
g.drawImage ( imageName, x1, y1, this );
}

それでは，右上の図のように３つの画像を表示するアプレットを作成しましょう。

このアプレットを実行するためには画像ファイルを何処に保存するかに注意が必要である。 JBuilderでアプレットを作成する場合，標準では，アプレットを表示するためのHTMLファイルは「classes」の中にある。 アプレットのHTMLファイルのソースを開いてみると分かるように， この場所（フォルダ＝ディレクトリ）が，「 CODEBASE="." 」の設定によって URLのパスの基準になっている。 従って「getImage(getCodeBase(), "pie1.gif");」のようにコードを記述した場合は，３つの画像 pie1.gif 〜 pie3.gif をこのHTMLファイルと同じ場所におけばよい。 

package applet08;
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
/**
 * タイトル: GraphicsImage FileRead 1(Applet)
 * 著作権: Copyright (c) 2004
 */

public class GraphicsImage_01 extends Applet {
  //変数の宣言
  Image smpImage1, smpImage2, smpImage3;

  //アプレットのビルド
  public GraphicsImage_01() {
  }
  //アプレットの初期化
  public void init() {
    //appletに画像ファイルを読み込む
    smpImage1 = getImage(getCodeBase(), "pie1.gif");
    smpImage2 = getImage(getCodeBase(), "pie2.gif");
    smpImage3 = getImage(getCodeBase(), "pie3.gif");
  }
  //appletのブラウザに画像を表示する
  public void paint(Graphics g) {
    g.drawImage(smpImage1, 50, 75, this);
    g.drawImage(smpImage2, 100, 75, this);
    g.drawImage(smpImage3, 150, 75, this);
  }
}

ここでは次の6つの画像ファイルを使います。


(pie0.gif),
(pie1.gif),
(pie2.gif),
(pie3.gif),
(pie4.gif),
(pie5.gif),

この画像をダウンロードしてプログラムを完成しましょう。

Step2   スレッドの作成

次の例では，スレッドによるグラフィックスアニメーションの作成法を示す。 このアプレットでは６つの画像ファイルを配列 sampleImage[0]〜sampleImage[5] に読み込み，paintメソッドの中でそれらの画像表示を繰り返し処理し，新しいスレッドの中で repaintメソッドを呼び出すことにより，Java仮想マシンに paintメソッドを繰り返し実行させている。
Javaでスレッドを作成する方法の２つあり，ここでは「java.lang.Runnableインターフェイス」を実装するクラスを宣言する方法を使う。インターフェイスはメソッドとは違うので，更に「runメソッド」を追加し，この中に実行させたい内容を記述する。注意：JBuilderでJava Appletのソースコードを作成する場合，Runnableインターフェイスに関する部分は自分で記述する必要がある。特に，class宣言部の
implements Runnable
を忘れないように（これが無いとjava.lang.Threadのサブクラスを実装する別の方法と混同されてエラーになる） 
package applet08;
import java.awt.*;
import java.awt.event.*;
import java.applet.*;
/**
 * タイトル: GraphicsAnimation 1(Applet)
 */
public class GraphicsAnimation_01 extends Applet implements Runnable {

  //変数の宣言
  Image sampleImage[] = new Image[6];
  Image presentImage;
  int sampleIndex = 1;       //配列の添え字
  Thread sampleThread;
  boolean animateFlag = true;// 値が true なら アプレットはrun状態

  //アプレットのビルド
  public GraphicsAnimation_01() {
  }
  //アプレットの初期化
  public void init() {
    for (int i=0; i<=5; [@@@]) { //穴埋め部分（iの増分）
      sampleImage[i] = getImage(getCodeBase(), "pie"+i+".gif"); // 画像ファイルの読み込み
    }
  }
  //アプレットの開始
  public void start() {
    sampleThread = new Thread(this);
    sampleThread.start();
  }
  //アプレットの停止
  public void stop() {
    animateFlag = false; // 値が false ならアプレットは停止状態
  }
  //Threadクラスのrunメソッドを更新（上書き）する
  public void run() {
    while(animateFlag) {
      presentImage = sampleImage[sampleIndex];
      sampleIndex++;
      if(sampleIndex > 5) sampleIndex = [@@@]; //穴埋め部分 （配列の添え字が5以上なら"0"に戻す）
      repaint();
      try {
        Thread.sleep( [@@@] ); //穴埋め部分 （アニメーションの1要素を表示する時間）
      }
      catch(InterruptedException e){
      }
    }
  }
  public void paint (Graphics g) {
    if (presentImage != null ) g.drawImage(presentImage, [@@@], [@@@], this);//穴埋め部分（アニメーションの表示位置）
  }
  //アプレットの破棄
  public void destroy() {
  }
}
以上のアプレットのコードの中で「穴埋め部分[@@@]」を補って，アプレットを作成しなさい。ヒントは次の小節にある。
sleepメソッドを使うとスレッドの実行を一時停止できる。その時間が経過するとスレッドは再び実行を開始する。 このアプレットでは，５つの画像 pie1.gif 〜 pie5.gif をブラウザの座標 x=50, y=50 の位置に，それぞれを 200ミリ秒の間づつ表示させて，パイの画像の切り口が広がっているように見せている。 画像ファイルの読み込み処理では，for文の中で前後の文字列に文字 i を連結して画像ファイル名を生成している。


参考書：Steven Holzer，武藤健志(監訳) "Javaプログラミング Black Book 第2版" (第13章)，インプレス 2002.03
Go to TOP (C) T. Katayama　----- Last updated: