「Java」の「Swing」「Java2D」でデスクトップゲーム「Color」を開発してみよう

はじめに

この連載では、さまざまなプログラミング言語やライブラリで同じゲームを開発することで、容易にそのプログラミング言語に入門します。

今回はプログラミング言語「Java」を使って、次のURLのようなColorゲームを作ります。こちらからアセットをダウンロードしておいてください。

Colorゲームについて

Colorゲームの内容は第1回でも解説した通り、ゲームを開始したら、赤緑青の色ブロックをクリックします。すると背景色にその色が混ぜられるので、どんどんクリックして真っ白な背景にしていこうというゲームです。

プログラミング言語について

第4回の今回はプログラミング言語Javaで「Swing」「Java2D」を使ってデスクトップアプリを開発します。Javaは「JVM(Java仮想マシン)」で3大OSのどれでも同じプログラムが動くプログラミング言語です。JVMは「インタプリタ」「JITコンパイラ(Just-In-Time)」を使って処理を高速化します。

【JVM(Java Virtual Machine、Java仮想マシン)】
Java言語で書かれたソースコード
↓
「中間言語」にコンパイル
↓
WindowsやmacOSやLinuxなどのJVMでどのOSでも同じ中間言語が動作

JavaのSwingとJava2Dについて

Java言語に標準で搭載されているSwingライブラリを使って、GUI(グラフィカル・ユーザー・インターフェース、つまりウィンドウやメニューやボタンなどのUIで操作できる仕組み)が構築できます。「Java2D」APIはSwingのカスタムグラフィックスを描くための2Dライブラリです。矩形を描いたり、PNG画像を読み込んで表示したりできます。

開発のために必要となる環境の準備

今回必要となる「JDK(Java Development Kit)」と「Visual Studio Code」を準備します。

Javaの準備

Javaのセットアップは次のURLからJDKをダウンロードしてインストールしてください。この開発キットをインストールするとJavaランタイムの「JRE(Java Runtime Environment)」も同時にインストールされます。

Visual Studio Codeの準備

次のURLからVS Codeをダウンロードしてインストールしてください。セットアップの手順は省略します (第1回を参照)。また、拡張機能「Extension Pack for Java」もインストールしておいてください。

.javaファイルを作成しよう

「colorJava2D」フォルダを作って「ColorJava2D.java」ファイルと「Title.java」ファイルを新規作成します。それから次の階層図のように画像の「images」フォルダなどを配置します。今回もサウンドはなしです。

・階層図

colorJava2Dフォルダ
┠imagesフォルダ(画像フォルダ)
┃┠0.pngファイル(赤の色ブロック画像)
┃┠1.pngファイル(緑の色ブロック画像)
┃┠2.pngファイル(青の色ブロック画像)
┃┠GameOver.pngファイル(ゲームオーバー画像)
┃┠StageClear.pngファイル(ステージクリア画像)
┃┗Title.pngファイル(タイトル画像)
┠ColorBlock.javaファイル(色ブロックファイル)
┠ColorJava2D.javaファイル(メインファイル)
┠GameOver.javaファイル(ゲームオーバーファイル)
┠MainLoop.javaファイル(メインループファイル)
┠StageClear.javaファイル(ステージクリアファイル)
┗Title.javaファイル(タイトルファイル)

次のサンプルコードをコーディングして、VS Codeで「ColorJava2D.java」ファイルを開いた状態で「▷」をクリックするとJavaが実行され、図1のように真っ白なウィンドウが表示されます。これらがSwingでGUIを表示する最小限のコードになります。

・サンプルコード「ColorJava2D.java」ファイル

import javax.swing.JFrame;

public class ColorJava2D {
  public static void main(String[] args) {
    JFrame frame = new JFrame("2");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.add(new Title(frame)); // JFrameを渡す
    frame.setSize(1800, 900);
    frame.setVisible(true);
  }
}

【サンプルコードの解説】
ColorJava2Dファイルと「ColorJava2D」クラスの名前は必ず一緒にしなければなりません。
Javaのコードは「main」関数から開始します。
「JFrame」クラスのインスタンスでウィンドウの画面フレームを作ります。この際ウィンドウタイトルを"2"にします。
デフォルトの終了操作をセットします。
「Title」クラスのインスタンスを生成し画面フレームに追加します。
画面フレームサイズを1800x900にセットし、可視にします。

・サンプルコード「Title.java」ファイル

import javax.swing.JPanel;
import javax.swing.JFrame;

public class Title extends JPanel {
  public Title(JFrame frame) {
  }
}

【サンプルコードの解説】
空のコンストラクタだけのTitleクラスを作成します。

タイトル画面を表示する

図2のように最初に表示するタイトル画面を作成します。Titleクラスのコンストラクタでタイトル画像を読み込み、「paintComponent」メソッドでタイトル画像を画面中央に描画します。paintComponentメソッドは最初に1回呼び出されたり「repaint」メソッドで呼び出したりできます。

・サンプルコード「Title.java」ファイル

import javax.swing.JPanel;
import javax.swing.JFrame;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

public class Title extends JPanel {
  private BufferedImage image;

  public Title(JFrame frame) {
    try {
      image = ImageIO.read(new File("./images/Title.png"));
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);

    if (image != null) {
      Graphics2D g2d = (Graphics2D) g;
      int imgW = image.getWidth();
      int imgH = image.getHeight();
      int x = (getWidth() - imgW) / 2;
      int y = (getHeight() - imgH) / 2;
      g2d.drawImage(image, x, y, this);
    }
  }
}

【サンプルコードの解説】
Titleクラスのコンストラクタで"./images/Title.png"画像をファイルから読み込みます。この際、例外処理(try)してエラーが起こったらエラー文を表示します。
paintComponent メソッドでは、「super」 で親クラスのpaintComponentを呼び出し、「Graphics」型の引数「g」を「Graphics2D」型の「g2d」にキャストして、drawImageメソッドでタイトル画像を描画します。