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

はじめに

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

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

また、こちらのURLではWeb版もプレイできます。Kotlin言語はJava言語と1:1に近いぐらい互換するので、第4回のJava言語の回の解説を書き換えて記事にしました。

Colorゲームについて

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

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

KotlinはJetBrainsが開発した、静的型付けのプログラミング言語です。特にAndroidアプリ開発で広く使われており、Googleは2017年にAndroidの公式開発言語としてサポートを発表しました。

既存のJavaライブラリをそのまま利用できるJavaとの高い互換性があり、Javaより少ないコードで同じ処理を書けることが多く、NullPointerExceptionを防ぐ仕組み(Null Safety)が言語レベルで組み込まれています。Androidだけでなく、サーバーサイド、デスクトップ、Web、iOS向けの開発にも利用できます。ビルドして書き出すのはJavaバイナリなので、Java同様JVMで動作します。

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

「Swing」「Java2D」について

「Swing」はウィンドウ、ボタン、メニューなどのGUIを作るライブラリで、「Java2D」は図形、画像、文字などを描画するためのAPIです。通常はSwingでウィンドウを作り、その中でJava2Dを使って描画します。どちらもJavaライブラリなので、KotlinではこのようにJavaのライブラリがそのまま使えます。

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

今回必要となる「JDK(Java Development Kit)」と「Kotlinコンパイラ」と「Visual Studio Code」を準備します。Windowsのみ解説します。

Javaの準備

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

Kotlinの準備

Kotlinのセットアップは次のURLから「kotlin-compiler-2.*.*.zip」をダウンロードし、その絶対パス「c:\****\kotlinc\bin」を「環境変数」の「Path」に追加してください。

Visual Studio Codeの準備

次のURLからVS Codeをダウンロードしてインストールしてください。セットアップの手順は省略します (第1回を参照)。

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

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

・階層図

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

次のサンプルコードをコーディングし、VS Codeで次のビルドコマンドを実行します。次の起動コマンドで「color.jar」を起動するとJVMが実行され、図1のように真っ白なウィンドウが表示されます。これがSwingでGUIを表示する最小限のコードです。

・.jarファイルにビルドするコマンド

$ kotlinc main.kt Title.kt -include-runtime -d color.jar

・.jarファイル実行コマンド

$ java -jar color.jar

・サンプルコード「main.kt」ファイル

import javax.swing.JFrame

fun main() {
    val frame = JFrame("2")
    frame.defaultCloseOperation = JFrame.EXIT_ON_CLOSE
    frame.add(Title(frame)) // JFrameを渡す
    frame.setSize(1800, 900)
    frame.isVisible = true
}

【サンプルコードの解説】
Kotlinのコードは「main」関数から開始します。
「JFrame」クラスのインスタンスでウィンドウの画面フレームを作ります。この際ウィンドウタイトルを"2"にします。
デフォルトの終了操作をセットします。
「Title」クラスのインスタンスを生成し画面フレームに追加します。
画面フレームサイズを1800x900にセットし、可視にします。

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

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

class Title(frame: JFrame) : JPanel() {
  init {
    // 初期化処理を書く
  }
}

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

タイトル画面を表示する

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

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

import java.awt.Graphics
import java.awt.Graphics2D
import java.awt.image.BufferedImage
import java.io.File
import java.io.IOException
import javax.imageio.ImageIO
import javax.swing.JFrame
import javax.swing.JPanel

class Title(private val frame: JFrame) : JPanel() {
  private var image: BufferedImage? = null

  init {
    try {
      image = ImageIO.read(File("./images/Title.png"))
    } catch (e: IOException) {
      e.printStackTrace()
    }
  }

  override fun paintComponent(g: Graphics) {
    super.paintComponent(g)
    image?.let { img ->
      val g2d = g as Graphics2D
      val imgW = img.width
      val imgH = img.height
      val x = (width - imgW) / 2
      val y = (height - imgH) / 2
      g2d.drawImage(img, x, y, this)
    }
  }
}

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