Warmらしくする

１．線画で描く
　表示はできるようになりました。で、○を描いたってしょうがないのでWarmらしきものを描きます。
　まずは線画チックに描きます。これは、特に問題ないと思います。

public class Warm {

    int x = 50;
    int y = 50;
    int width = 30;
    int height = 30;
    Color warmColor = Color.black;
    
    public void DrawWarm(Graphics g) {
        g.setColor(warmColor);
        // 体
        g.drawOval(x, y, width, height);
        // 目
        g.drawOval(x+1, y-8, 10, 10);
        g.drawOval(x+19, y-8, 10, 10);
        // 瞳
        g.fillOval(x+5, y-5, 4, 4);
        g.fillOval(x+22, y-5, 4, 4);
    }
}

２．テクスチャの貼り付け
　で、PCの能力は線画くらいじゃ何ともないので、テクスチャを貼りつけてみます。
　まずは、テクスチャを準備して（50×50のPNGでOKです）srcの下にresourseフォルダを作成し、インポートします。 　で、コードは次のようになります。

    public void DrawWarm(Graphics g) {

        //①　 Graphics を Graphics2D に
        Graphics2D g2 = (Graphics2D)g;
        
        //②　 BufferedImageの作成
        BufferedImage bi = null;
        try {
        bi = ImageIO.read(getClass().getResource("/resources/bodyCol01.png"));
        } catch(Exception e) {
            e.printStackTrace();
        }

        //③　 Rectangle2D.Doubleの作成
        Rectangle2D.Double rec2DD = new Rectangle2D.Double(0, 0, bi.getWidth(), bi.getHeight());

        //④　 BufferedImage と Rectangle2D.Double から TexturePaint を作成
        TexturePaint texture = new TexturePaint( bi, rec2DD );

        // テクスチャをセット
        g2.setPaint(texture);
        // 体
        Ellipse2D.Double ell2DDbody = new Ellipse2D.Double(x, y, width, height);
        g2.fill(ell2DDbody);
        // 目
        g2.setPaint(Color.white); //　この時点でテクスチャから単色へ
        Ellipse2D.Double ell2DDeyeL = new Ellipse2D.Double(x+1, y-8, 10, 10);
        Ellipse2D.Double ell2DDeyeR = new Ellipse2D.Double(x+19, y-8, 10, 10);
        g2.fill(ell2DDeyeL);
        g2.fill(ell2DDeyeR);
        // 瞳
        g2.setPaint(Color.green);
        Ellipse2D.Double ell2DDpupL = new Ellipse2D.Double(x+5, y-5, 4, 4);
        Ellipse2D.Double ell2DDpupR = new Ellipse2D.Double(x+22, y-5, 4, 4);
        g2.fill(ell2DDpupL);
        g2.fill(ell2DDpupR);
    }

解説①
　Graphicsクラスではテクスチャを扱う事が出来ません。そこでGraphics2Dクラスを使います。Graphics2DクラスはGraphicsクラスを拡張したもので、色々と機能追加されています。
　…で、ここではGraphicsクラスgをキャストしてGraphics2Dクラスg2にしてます。ところが、実際にプログラム上でこんなことをしてもクラスは変わりませんし、基本中の基本的NGです。
　…が、このコーディングがOKの場合があります。それは、元々gがGraphics2Dクラスだった場合です。
　…で、実はGraphics2Dなんです。なんか、旧バージョンとの互換性云々…とのことです。わかりづらっ(-_-;)
　…で、ついでに言うと、ソースコードの下の方の『目』や『瞳』の図形の描き方が線画の時と変わってますが、これは、テクスチャを貼るから変わったんじゃなくて、Graphics2Dになったため使用するメソッドを変えたものです。
　Graphics2Dを使うので、Graphics2Dの図形描画の方法に従いました。そうしないと、Graphics2Dでしか描けない図形とGraphicsでも描ける図形のメソッドが変わってしまい、スーパークラスと同じ『描く』行為が別メソッドになり、オブジェクト指向的に…乗り物クラスと自動車クラスは…どちらも走る…省略っ^^;
解説②③④
　この連続技でテクスチャを作成します。
　②でPNG画像を読み込んでBufferedImageを作成します。
　③でBufferedImageの大きさを取得します。
　④でイメージと大きさを指定してテクスチャの完成です。

あとは、コードを見ていただければ、よろしいかと…。
あっ、それから、目の白が目立たないんで背景を濃くしました。これはVisualEditorで変えました。
次回は、Warmをいろんな方向に向けたり…かな？

java,描画,テクスチャ,TexturePaint,Graphics2D,setPaint,BufferedImage,ImageIO

まずは表示

とりあえず、見えないことには話が進まないので、まずは表示から。
人工生命体はJFrame上に配置したJPanelに表示することにしました。JFrame上にステータスバー（もどき）を置こうと思ったので、表示領域 を自由な位置に配置することを考えてJPanelにしました。そして表示は、当然、人工生命体であるところのWarmオブジェクトにやらせること にしました。

１．JFrameウィンドウの作成
　Eclipse＋VisualEditorで作成します。
　まず、新規クラスを作成。これは、『普通のJavaプロジェクト』です。
　出来たプロジェクトを右クリックし、『新規』→『ビジュアル・クラス』を選択。
　『新規Javaビジュアル・クラス』ウィンドウが開かれるので、『スタイル』で『Swing・フレーム』を選択。
　『どのメソッド・スタブを作成しますか？』は『public　static・・・』を選択。
　パッケージやファイル名は適当に。

２．JPanelの貼り付け
　VisualEditorを使って『Swingコンテナー』のJPanelをjContentPane上に配置します。
　大きさ、その他は適当に。

ここまでで、基本のウィンドウは出来ました。
次は、描画のためのメソッドを追加します。

　描画はコンポーネントのGraphicsオブジェクトに、描画メソッドを使って書きます。したがって、JPanelからgetGraphics()メソッドで Graphicsオブジェクトを取得して、そこに描画をすればOKということになります。・・・が、しかし、これではうまくいきません。なぜ、何がうまくいかないのかというと、・・・
　そもそも、JFrameウィンドウ達（JFrame上に乗ってるパネルやボタンやテキストフィールドなど全て）は、私達の描画だけを相手にしているわけではありません。自分でも、自分自身の描画領域や、配置されたボタンや、ウィンドウの枠を書いたりしています。これも描画です。さらに、自分の上に乗ってた他のウィンドウが動いて自分が画面上に現れた時や、ウィンドウがリサイズされた時にも自分を描画し直します。そして、こういった動きはフレームワークという形で実装・管理されています。
　したがって、私達が自分に都合のよいタイミングで勝手に描画をしても、『あんたの描画なんて聞いてないよっ！』と言われて、上書きされてしまったり、書き直しされなかったりするわけです。
　で、このフレームワークにうまく潜り込んで、うまいこと描画させるために次のことが必要になります。

３．描画用派生クラスの作成
　JPanelクラスの描画部分を乗っ取って、ここで人工生命体を描画させます。ただし、元からあるJPanelクラスの描画を完全に殺してしまっ てはJPanel自体の描画ができなくなってしまいます。したがって、『JPanelクラスの描画を乗っ取って人工生命体を描画するけど、元の JPanelクラスの描画も動かす』ということになります。
　つまり、JPanelクラスの派生クラスを作成し、描画メソッドであるpaintComponent()をオーバーライドし、そこで人工生命体の描画をする けどスーパークラスのpaintComponent()を呼び出して本来のJPanelクラスの描画もさせる、・・・ということになります。 　次のソースが元のコードです。JPanel01はJPanelのインスタンスとして使用されています。

public class testFrame extends JFrame {

    private static final long serialVersionUID = 1L;
    private JPanel jContentPane = null;
    private JPanel jPanel01 = null;
    /**
     * This method initializes jPanel01   
     *    
     * @return javax.swing.JPanel 
     */
    private JPanel getJPanel01() {
        if (jPanel01 == null) {
            jPanel01 = new JPanel();
            jPanel01.setLayout(new GridBagLayout());
            jPanel01.setPreferredSize(new Dimension(270, 130));
            jPanel01.setBorder(BorderFactory.createBevelBorder(BevelBorder.LOWERED));
        }
        return jPanel01;
    }

　これを次のように変更します。（JPanel　→　DrawPanel）

    private DrawPanel jPanel01 = null;
    /**
     * This method initializes jPanel01   
     *    
     * @return javax.swing.JPanel 
     */
    private JPanel getJPanel01() {
        if (jPanel01 == null) {
            jPanel01 = new DrawPanel();

class DrawPanel extends JPanel {

}

　で、これでJPanelの派生クラスとしてDrawPanelを作ることができました。

　次に、DrawPanelクラスにpaintComponent()をオーバーライドします。これはEclipseの機能で実現できます。
　ソースコードのエディタ上でDrawPanelクラスのDrawPanelの文字を選択状態にします。
　メニューの『ソース』→『メソッドのオーバーライド/実装』を選択します。
　『メソッドをオーバーライド/実装』ウィンドウが開くので、『オーバーライドまたは実装するメソッドを選択：』で『JComponent』の 『PrintComponent()』を選択します。
　ちなみに、JComponentのPrintComponent()を選択するのは、JPanelクラスはJComponentから派生していて PrintComponent()はJComponentクラスのメソッドだからです。以下の図を参照のこと。(javaでプログラムを作るな ら、以下のサイトはバイブルとなるのでブックマークしておきましょう。)
　さて、コードですが、以下の状態になります。

class DrawPanel extends JPanel {

    @Override
    protected void paintComponent(Graphics g) {
        // TODO 自動生成されたメソッド・スタブ
        super.paintComponent(g);
    }
}

　オーバーライドしたpaintComponent(Graphics g)は引数にGraphicsオブジェクトを持っているので、これに人工生命体を描画します。GraphicsオブジェクトgをWarmクラスの描画関数に渡して描画させます。これでOKです。

class DrawPanel extends JPanel {
    @Override
    protected void paintComponent(Graphics g) {
        // TODO 自動生成されたメソッド・スタブ
        super.paintComponent(g);

        Warm warm1 = new Warm();
        warm1.DrawWarm(g);
    }
}

public class Warm {

    int x = 80;
    int y = 100;
    int width = 50;
    int height = 50;
    Color warmColor = Color.red;
    
    public void DrawWarm(Graphics g) {
        g.setColor(warmColor);
        g.drawOval(x, y, width, height);        
    }
}

　これで、表示が動くはずです。
　Eclipseの画面上は以下のとおりです。
　で、次回は、Warmの描画を充実させます・・・の予定です。
java,描画,JPanel,paintComponent,Graphics,setColor