矢印キーでキャラクターを動かす

画像を背景に矢印キーの操作でキャラクターを動かします。

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

プログラムの作成

  1. メモ帳などでタイプして Char.java の名前で保存して下さい。
    //★ Swing 矢印キーでキャラクタを動かす    前田 稔
    import java.awt.*;
    import javax.swing.*;
    import java.awt.event.*;
    
    public class Char extends JFrame implements KeyListener
    {   Image   img;
        Image   back;
        int     x= 100, y= 80, dir= 0, num= 0;
    
        // Main
        public static void main(String args[])
        {   new Char();
        }
    
        // Constructor
        Char()
        {   super("Character");
            img = getToolkit().getImage("c:\\data\\test\\Chr47.gif");
            back = getToolkit().getImage("c:\\data\\test\\MapBack.gif");
            addKeyListener(this);
            setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            setBackground(Color.gray);
            setSize(400, 340);
            setVisible(true);
        }
    
        // Paint
        public void paint(Graphics g)
        {   int yoff;
            g.drawImage(back,0,40,this);
            if (img!=null)
            {   yoff= (dir*2+num)*32;
                g.drawImage(img,x,y,x+32,y+32,0,yoff,32,yoff+32,this);
            }
        }
    
        // KeyEvent Listener
        public void keyPressed(KeyEvent e)
        {   switch(e.getKeyCode( ))
            {   case KeyEvent.VK_UP : y=y-10; dir=0; break;
                case KeyEvent.VK_RIGHT : x=x+10; dir=1; break;
                case KeyEvent.VK_DOWN : y=y+10; dir=2; break;
                case KeyEvent.VK_LEFT : x=x-10; dir=3; break;
            }
            num ^= 1;
            repaint();
        }
        public void keyReleased(KeyEvent e) { }
        public void keyTyped(KeyEvent e) { }
    }
    
  2. 画像ファイル(Chr47.gif と MapBack.gif)をパスで指定したフォルダーに格納して下さい。
    Chr47.gif は「縦横共に32ドット」の Sprite が縦に8枚並んだ画像です。
    MapBack.gif は「横=400ドット,縦=300ドット」の背景画像です。
  3. ソースプログラムをコンパイルして class オブジェクトを実行して下さい。
    背景画像の上から猫の画像が表示されます。
    上下左右の矢印キーで、ネコがアニメーションしながら動いたら完成です。

プログラムの説明

  1. Swing(スィング)を使ったプログラムの基本的な説明は Swing を使って、色を設定して線を描く を参照して下さい。
    img はネコの画像の領域で、back は背景画像の領域です。
    x, y は猫を描画する座標です。
    dir はネコの移動方向(上下左右)を記録する領域です。
    num は二枚の画像を切り替えてアニメーションするための領域です。
        import java.awt.*;
        import javax.swing.*;
        import java.awt.event.*;
    
        public class Char extends JFrame implements KeyListener
        {   Image   img;
            Image   back;
            int     x= 100, y= 80, dir= 0, num= 0;
        
  2. Constructor ではネコの画像と背景画像を入力します。
    キー操作を検出するために addKeyListener(this) を設定します。
        Char()
        {   super("Character");
            img = getToolkit().getImage("c:\\data\\test\\Chr47.gif");
            back = getToolkit().getImage("c:\\data\\test\\MapBack.gif");
            addKeyListener(this);
            setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            setBackground(Color.gray);
            setSize(400, 340);
            setVisible(true);
        }
        
  3. 画像を表示するメソッドです。
    g.drawImage(back,0,40,this) で背景画像を描画します。
    背景画像の上から g.drawImage(img,x,y,x+32,y+32,0,yoff,32,yoff+32,this) でネコを描画します。
    ネコは進行方向(上下左右)それぞれに、二枚の画像を切り替えながら移動します。
        public void paint(Graphics g)
        {   int yoff;
            //super.paint(g);
            g.drawImage(back,0,40,this);
            if (img!=null)
            {   yoff= (dir*2+num)*32;
                g.drawImage(img,x,y,x+32,y+32,0,yoff,32,yoff+32,this);
            }
        }
        
  4. 矢印キーを検出するメソッドです。
    上下左右のキーにより、進行方向を設定して座標を移動します。
    num の値は、0と1を交互に繰り返します。
    キー操作のプログラムは キーのイベントを検出する を参照して下さい。
        public void keyPressed(KeyEvent e)
        {   switch(e.getKeyCode( ))
            {   case KeyEvent.VK_UP : y=y-10; dir=0; break;
                case KeyEvent.VK_RIGHT : x=x+10; dir=1; break;
                case KeyEvent.VK_DOWN : y=y+10; dir=2; break;
                case KeyEvent.VK_LEFT : x=x-10; dir=3; break;
            }
            num ^= 1;
            repaint();
        }
        

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