美人のアニメーション


8枚の画像を切り分けて、タイマ割り込みで美人の顔のアニメーションを行います。

前田稔の超初心者のプログラム入門

プログラムの作成

  1. メモ帳などでタイプして Bijin2.java の名前で保存して下さい。
    //★ 美人の画像を切り分けてアニメーション    前田 稔
    //   幅=96, 高さ=96 の Sprite が横に4枚、縦に2段の画像を使います
    import java.awt.*;
    import java.awt.event.*;
    import javax.swing.*;
    
    class Bijin2 extends JFrame implements ActionListener
    {   Image   img;
        Timer   time;
        int     currFrame;
        private int sx,sy;
    
        // Main
        public static void main(String args[])
        {   new Bijin2();
        }
    
        // Constructor
        Bijin2()
        {   super("Bijin Animation");
            img = getToolkit().getImage("c:\\data\\test\\Bijin.jpg");
            currFrame = 0;
            time = new Timer(200, this);
            time.start();
            setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            setSize(140, 180);
            setVisible(true);
        }
    
        public void paint(Graphics g)
        {   if (img!=null)
            {   g.drawImage(img,30,50,30+96,50+96,sx,sy,sx+96,sy+96,this);
            }
        }
    
        public void view(int n)
        {   sx = (n % 4) * 96;
            sy = (n / 4) * 96;
            repaint();
        }
    
        public void actionPerformed(ActionEvent evt)
        {   Object source = evt.getSource();
            if (source == time)
            {   if (isShowing())
                {   currFrame = (currFrame+1) % 8;
                    view(currFrame);
                }
            }
        }
    }
    
  2. 画像ファイル(c:\data\test\Bijin.jpg)をパスで指定したフォルダーに格納して下さい。
    または、適当なフォルダーに Bijin.jpg を格納して、フルパスで指定して下さい。
    このファイルには「幅=96, 高さ=96」の Sprite が横に4枚、縦に2段でならんでいます。
  3. ソースプログラムをコンパイルして class オブジェクトを実行して下さい。
    Windows の画面に美人の画像がアニメーションされていたら完成です。
    画像の読み込みに多少時間がかかるので、起動直後はフレーム枠だけが表示されることがあります。
    確認が終わればアニメーションウインドウの「×」をクリックして下さい。
    DOS 画面にメッセージが表示されてプログラムが終了します。

プログラムの説明

  1. Swing(スィング)を使ったプログラムの基本的な説明は Swing を使って、色を設定して線を描く を参照して下さい。
    Image img は8枚の Sprite を並べたイメージ Object です。
    time はタイマの Object です。
    currFrame はタイマ切り替えで表示する画像の番号です。
    sx,sy は currFrame から計算された表示する画像のオフセットです。
        import java.awt.*;
        import java.awt.event.*;
        import javax.swing.*;
    
        class Bijin2 extends JFrame implements ActionListener
        {   Image   img;
            Timer   time;
            int     currFrame;
            private int sx,sy;
        
  2. Bijin2 の Constructor です。
    getImage("c:\\data\\test\\Bijin.jpg") でフルパスを指定して画像を入力します。
    文字列の中で「\」を使うときは「\\」と書きます。
    currFrame は表示する画像の番号で、最初は0番目に設定します。
    new Timer(200, this) でタイマをインスタンス化します。
    200 は画像を切り替えるスピード(200ミリ秒)です。
    time.start() でタイマを開始します。
        // Constructor
        Bijin2()
        {   super("Bijin Animation");
            img = getToolkit().getImage("c:\\data\\test\\Bijin.jpg");
            currFrame = 0;
            time = new Timer(200, this);
            time.start();
            setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            setSize(140, 180);
            setVisible(true);
        }
        
  3. 画像を表示するメソッドです。
    super.paint(g) を呼び出すと、画面が初期化(クリア)されます。
    今回のプログラムでは、クリア処理を呼び出すと画面が「チラツキ」ます。
    前回描画した画面の上から重ね書きしてもかまわないときは、super.paint(g) を呼び出す必要はありません。
    img に画像が設定されていることを確かめて、drawImage() で画像を表示します。
    30,50 は画像を表示する Windows の左上座標で、30+96,50+96 は右下の座標です。
    sx,sy はイメージ領域の左上座標で、sx+96,sy+96 は右下の座標です。
        public void paint(Graphics g)
        {   //super.paint(g);
            if (img!=null)
            {   g.drawImage(img,30,50,30+96,50+96,sx,sy,sx+96,sy+96,this);
            }
        }
        
  4. タイマ割り込みのメソッドです。
    割り込みが自分に対するものかを if(source == time) で確かめます。
    isShowing() で画面が表示中かを確かめます。
    (currFrame+1) % 8; で表示する画像を切り替えて view(currFrame) でフレームを設定するメソッドを呼びます。
        public void actionPerformed(ActionEvent evt)
        {   Object source = evt.getSource();
            if (source == time)
            {   if (isShowing())
                {   currFrame = (currFrame+1) % 8;
                    view(currFrame);
                }
            }
        }
        
  5. フレームを設定するメソッドです。
    n で指示されたフレーム番号に対応する Sprite の位置を sx,sy に設定します。
    sx,sy はイメージ領域の左上座標です。
    repaint() で画像を表示するメソッドを呼びます。
    96 は Sprite の幅で、4 は横方向に並んでいる枚数です。
        public void view(int n)
        {   sx = (n % 4) * 96;
            sy = (n / 4) * 96;
            repaint();
        }
        

超初心者のプログラム入門(Java2)