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

はじめに

今回はプログラミング言語Pythonを使って、次のURLのようなColorゲームを作ります。こちらからアセットをダウンロードしておいてください。Pythonの文法については、「Kritaで楽しく学ぶ Pythonプログラミング」の第2回を参考にしてください。

Pythonはシンプルでイージーなプログラミング言語ですが、AI開発やWebアプリ開発まで対応できます。あのChatGPTもPythonで構築されているそうです。Pythonさえプログラミングできれば何でも作れてしまうんじゃないかと思ってしまいますね。

Colorゲームについて

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

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

今回はプログラミング言語Pythonで「Tkinter」モジュールを使って、デスクトップアプリのColorゲームを開発します。

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

まず、今回必要となる「Python」と「Visual Studio Code」を準備します。

Pythonの準備

こちらのURLからPythonをダウンロードしてインストールします。セットアップウィザードで「Add Python 3.** to PATH」にチェックを入れるのを忘れないようにしてください。

Visual Studio Codeの準備

こちらのURLからVisual Studio Codeをダウンロードしてインストールしてください。なお、インストール方法は第1回でも解説したので、そちらを参照してください。ここでは省略します。

Visual Studio Codeで.pyファイルを作成しよう

「main.py」ファイルを新規作成します。次の最小限のサンプルコードをコーディングし、「▷」をクリックしてmain.pyファイルをターミナルで起動します。図1のように真っ白なウィンドウが表示されましたね。
画像フォルダとの階層図は次のようになります。今回はサウンドなしです。

図1：真っ白なウィンドウ

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

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

import tkinter as tk
# tkinterのルート
root = tk.Tk()
# 幅x高さ
root.geometry("1800x900")
# tkinterのメインループ
root.mainloop()

【サンプルコードの解説】
「tkinter」モジュールを「tk」として読み込みます。
tkinterの「Tk」クラスのインスタンスを生成し「root」変数に代入します。
ウィンドウサイズを幅高さ1800x900にします。
tkinterをループ処理します。

画像を表示する

図2のようにタイトル画像を表示するには「ラベル(Label)」を使います。「PhotoImage」クラスで画像ファイルを読み込み、Labelの「image」プロパティにそれをセットします。

図2：タイトル画面

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

import tkinter as tk
# tkinterのルート
root = tk.Tk()
# 幅x高さ
root.geometry("1800x900")
# 画面に反映させる
root.update_idletasks()
width = root.winfo_width()
height = root.winfo_height()
# ゲームクラス
class Game():
 # コンストラクタ
 def __init__(self):
   self.stage = 2
 # タイトル表示
 def title(self):
   # 画像読み込み
   img = tk.PhotoImage(file="images/Title.png")
   self.label = tk.Label(root, image=img)
   # 中央配置
   self.label.pack(expand=True)  
   self.label.image = img
# ゲームクラスのインスタンス生成
game = Game()
# ゲームクラスのタイトル画面へ
game.title()
# tkinterのメインループ
root.mainloop()

【サンプルコードの解説】
幅高さのサイズを取得するために更新し、widthとheightを取得します。
「Game」クラスを宣言します。
コンストラクタで第1面(「stage」プロパティ)を2にします。
「title」メソッドで「Title.png」を読み込んで表示します。
Gameクラスのインスタンスを生成し「game」変数に代入します。
「title」メソッドを呼び出します。

背景色をセットする

背景色で塗り潰すには「キャンバス(Canvas)」を使います。Canvasクラスのconfigメソッドでbgに背景色を指定します。タイトル画像をクリックしたら図3のように背景色が塗り潰されます。

図3：背景色で塗り潰し

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

import tkinter as tk
import random
# tkinterのルート
root = tk.Tk()
# 幅x高さ
root.geometry("1800x900")
# 画面に反映させる
root.update_idletasks()
width = root.winfo_width()
height = root.winfo_height()
# ゲームクラス
class Game():
  # コンストラクタ
  def __init__(self):
    self.stage = 2
  # タイトル表示
  def title(self):
    # 画像読み込み
    img = tk.PhotoImage(file="images/Title.png")
    self.label = tk.Label(root, image=img)
    # 中央配置
    self.label.pack(expand=True)  
    self.label.image = img
    self.label.bind("<Button-1>", self.on_start)
  # ゲーム開始
  def on_start(self,event):
    self.label.destroy()
    # CanvasアイテムID
    self.canvas = tk.Canvas(root, bg="white")
    self.canvas.pack(fill="both", expand=True)
    self.rgb = [0,0,0]
    num = self.stage-1
    while self.rgb[0] == self.rgb[1]:
      self.rgb = [random.randint(0,num),random.randint(0,num),random.randint(0,num)]
    self.bg_color()
  # 背景色
  def bg_color(self):
    indexed = list(enumerate(self.rgb))
    max = sorted(indexed,key = lambda x: x[1])[2][0]
    i = 0.0
    if self.rgb[max] > 0:
      i = 255.0/float(self.rgb[max])
    r = i * self.rgb[0]
    g = i * self.rgb[1]
    b = i * self.rgb[2]
    self.canvas.config(bg=f"#{int(r):02x}{int(g):02x}{int(b):02x}")
# ゲームクラスのインスタンス生成
game = Game()
# ゲームクラスのタイトル画面へ
game.title()
# tkinterのメインループ
root.mainloop()

【サンプルコードの解説】
タイトル画像を「bind」メソッドで左クリック<Button-1>されたかバインドし、クリックされたら「on_start」メソッドをトリガーします。
on_startメソッドでラベルを削除します。
Canvasクラスのインスタンスを生成し「canvas」プロパティに代入します。
「rgb」プロパティに[Red,Green,Blue]の配列を宣言し、ランダムな正の整数を代入します。
「bg_color」メソッドでrgb配列の中で1番大きい数字の色のインデックスを取得します。
255.0を1番大きい数字の色で除算し、それをrgb配列それぞれの要素に乗算して「r」「g」「b」変数に代入します。
キャンバスの背景色は「CSS(スタイルシート)」のように16進数にして指定します。