デスクトップマスコットを作ってみる。【マスコットの表示編】

# 初めに
この記事は以下の記事で作成していた内容と同じですが、
作成中に方針を変えたため、別記事としています。
[JavaFX＋Kotlinでデスクトップマスコットを作ってみる。【マスコットの表示編】](https://qiita.com/urado/items/140293b94cac2424dc02)

上記ではJavaFXとKotlinで作成していましたが、
マスコットアプリ作成のライブラリとして公開する際に、
依存関係が増えないようにするため、javaのみで実行できるように変えています。

そのため、以降の記事からはJavaFXもKotlinも出てきません。
（ライブラリとしてリリースされた内容をKotlinで使用することは可能なはず）

ということで、似たような内容にはなると思いますが、行ってみましょう！












#環境
環境も変わってます。

* windows10
* Eclipse 2019-12 (4.14.0)













# プロジェクトの作成
Eclipseを起動したら、パッケージエクスプローラを右クリックでプロジェクトを作成します。
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555408/bc428b83-b397-88dc-2ef6-4823034a70f7.png)

プロジェクトの名前は**common**とします。













# マスコット表示用の画面を作成
先ほど作成したcommonの中に新たにクラスを作成していきます。
（パッケージは任意で決めましょう）

パッケージを右クリックして、クラスを作成します。
（ちなみにパッケージを新規で作成する場合は上にある**パッケージ**を選択すると作成できます）
![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555408/d279ea04-3a4d-fa9b-685e-f08917f7a126.png)

クラスの名前も任意で決めましょう。
（ここではJDMascotとします）
![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555408/a331a943-5039-b51b-44b9-58269e40cb14.png)

このクラスをウィンドウとして扱えるようにJFrameクラスを継承させます。
（クラスに内包する形でも実装できますが、現状この形にしています）

クラスの宣言に**extends JFrame**を追加します。

```java:JDMascot.java

public class JDMascot extends JFrame {

    // クラスの中身はまだ

}

```

これでウィンドウとして扱えるようになりました。

ただ、このままだと普通のウィンドウと同じ見た目になってしまうため、
マスコットのみ表示されるようにウィンドウの装飾を外す設定を入れます。

ついでに、必要な設定も入れていきます。

```java:JDMascot.java

private void setUp() {
    // ウィンドウの外枠を外す。
    this.setUndecorated(true);
    // 背景色を透明にする。
    this.setBackground(new Color(0, 0, 0, 0));
    // タスクバーのアイコンを非表示
    this.setType(Type.UTILITY);
}

```

※ **this.setType(Type.UTILITY)**はwindowsでしか効かないらしいので注意

作成した**setUp**メソッドをコンストラクタで呼ぶようにします。

```java:JDMascot.java

public class JDMascot extends JFrame {

    public JDMascot() {
        // ウィンドウの設定
        setUp();
    }

    private void setUp() {
        // 枠を外す。
        this.setUndecorated(true);
        // 背景色を透明にする。
        this.setBackground(new Color(0, 0, 0, 0));
        // タスクバーのアイコンを非表示
        this.setType(Type.UTILITY) ;
    }
}

```

これで、透明なウィンドウの出来上がりです。

試しに起動・・・と行きたいところですが、透明なウィンドウは
起動しても見えないためうまくいっているかわかりません。
そのため、先にマスコット用の画像表示ができるように処理を追加していきます。

画像表示は画像表示用のクラスを作成して、JDMascotのコンポーネントとして追加するようにします。

任意のパッケージを選択してクラスを作成します。
（ここではJDImageとします）

当クラスはJFrameのコンポーネントとして追加する予定のため、**JPanel**を継承させます。

```java:JDImage.java

public final class JDImage extends JPanel {

    // 中身はまだ

}

```

**final**はこのクラスが継承できないクラスになるようにつけています。

当クラスでは自分自身に画像を描画する処理を追加しますが、
読み込む画像がないと描画できません。

そのため、コンストラクタもしくはsetterなどを介して情報をもらうようにします。
（ここではsetterで受け取るようにします）

```java:JDImage.java

/** 描画するイメージ */
private BufferedImage image;

public JDImage() {
}

public void setImage(BufferedImage image) {
    this.image = image;
}

```

このままPanel内にイメージを追加すれば表示が可能ですが、
マスコットが左右に動くようにしたい・・・
この時、右を向いたり、左を向いたりできなければ動きとして違和感が出ますよね？

そのため、左右反転ができる機能をこのクラスに追加します。

```java:JDImage.java

/** 反転フラグ */
private boolean isInvert;

public void turnLeft() {
    isInvert = false;
}

public void turnRight() {
    isInvert = true;
}

@Override
protected void paintComponent(Graphics g) {
    var width = image.getWidth();
    var height = image.getHeight();

    if (isInvert) {                                                          
        var scaleInstance = AffineTransform.getScaleInstance(-1.0, 1.0);     
        scaleInstance.translate(-image.getWidth(), 0);                       
                                                                             
        var formOp = new AffineTransformOp(scaleInstance, null);             
        g.drawImage(formOp.filter(image, null), 0, 0, width, height, this);  
    } else {                                                                 
        g.drawImage(image, 0, 0, width, height, this);                       
    }  
}

```

JPanelの**paintComponent**メソッドをオーバライドし、処理を上書きします。

**isInvert**は**true**が**右向き**、**false**が**左向き**として、
メソッドを介して値を変更できるようにしました。
isInvertフラグによって書き込む処理を分岐しています。

後はJDMascot側のコンストラクタに作成したJDImageを生成して
コンポーネントに追加する処理と画像の設定、反転を呼び出す処理を追加すれば完成です。

```java:JDMascot.java

private JDImage image;

private void setUp() {
    // ウィンドウの外枠を外す。
    this.setUndecorated(true);
    // 背景色を透明にする。
    this.setBackground(new Color(0, 0, 0, 0));
    // タスクバーのアイコンを非表示
    this.setType(Type.UTILITY);
    
    // ※ここから追加した箇所
    // 画像表示領域を作成
    image = new JDImage();
    // ウィンドウのフレームに追加
    this.getContentPane().add(image);
}

public void setMascot(BufferedImage image) {
    this.image.setImage(image);
    // 画像が変わるので再描画処理
    this.repaint();
}

public void invert(boolean isInvert) {

    if (isInvert) {
        image.turnRight();
    } else {
        image.turnLeft();
    }

    // 画像が変わるので再描画処理
    this.repaint();
}


```

# テストコードの作成

これで、マスコットを表示するための準備は整いました。
ちょっとテストしてみましょう。

```java:JDMascotTest.java

public class JDMascotTest {

    private static JDMascot win;
    private static boolean flag;

    public static void main(String[] args) throws Throwable {
        win = new JDMascot();
        // プロジェクト直下にdesktop.pngを配置しておくこと。
        BufferedImage image = ImageIO.read(new File("desktop.png"));

        win.setMascot(image);
        win.setVisible(true);

        // 一定期間で反転処理を行う
        Timer timer = new Timer(1000, e -> { testInvert(); });
        timer.start();
    }

    private static void testInvert() {
        flag = !flag;
        win.invert(flag);
    }
}

```

このテストで、マスコットの起動と反転処理の確認をします。

あと、このまま起動すると、閉じる手段がないので終了する際はEclipseから終了しましょう。
右のほうにあるの赤いボタンを押すと止まります。
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555408/457cb0e2-d0f5-77e9-7216-0cebfe0739cc.png)

実際に動かしてみた図
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555408/fabf73a6-1be5-5d22-56b3-041f73f99295.gif)

うむ。













# 終わりに
ここではマスコットの起動と反転のみでしたが、
実際はマウスでの操作を可能する必要があるため、
実際のクラスの処理はもう少しあります。

ただ、それはそれで結構量があるので、別の記事にしようと思います。

# リンク
- [デスクトップマスコットを作ってみる。【目次】](https://qiita.com/urado/items/4a810c457cb862e370e8)