グラフィック（見た目）は、ゲームにおいて非常な重要な部分です。今回は、Pythonを用いて画面を表示してみましょう。

1 もくじ

2 モジュール

モジュールをimportすることで、簡単に新たな機能を追加することができます。今回は、tkinterモジュールを追加してみましょう。これを使うと、ウィンドウや図形などのグラフィカルな要素を簡単に作成することができます。プログラムの最初の行にこの文を記述するだけで準備完了です。

import tkinter as tk

tkinterを利用するたびに、毎回毎回 tkinter.・・・と書くのは面倒なので省略できます。 import tkinterの後ろにas tkと記述することで、tkと書くだけで良くなりコードが簡潔で読みやすくなります。

3 ウィンドウを表示する

以下のコードを実行してみてください。

import tkinter as tk
# ウィンドウを表示する
root = tk.Tk()
root.title("test")
root.geometry("600x400") 

root.mainloop()

実行すると、ウィンドウが表示されます。

4行目の"test"と書かれた部分を変更することで、ウィンドウの名前を変更できます。
5行目の"600x400"はウィンドウのサイズを"幅x高さ"で指定しています。書き換えればサイズを変更できます。

3.0.1 Challenge10-1

ウィンドウの名前をtkに変更してください
ウィンドウのサイズを800x600に変更してください

答えは次のコードの該当部分を参照して確認してください。

4 キャンバスを設置する

キャンバスは、図形や画像を設置するために必要な下地です。

import tkinter as tk
# ウィンドウを表示する
root = tk.Tk()
root.title("tk")
root.geometry("800x600") 

# キャンバス設置
canvas = tk.Canvas(root,width = 600,height = 400,bg = "skyblue")
canvas.pack()

root.mainloop()

8行目でキャンバスの大きさや色を指定しています。 widthが幅、heightが高さ、bgが背景色に対応しています。

4.0.1 Challenge10-2

キャンバスのサイズをウィンドウと同じ800x600に設定してください。
キャンバスの色をオレンジ(orange)に変更してください。

答えは次のコードの該当部分を参照して確認してください。

5 図形を配置する

create_rectangleという命令を用いて、四角形を画面上に配置できます。

import tkinter as tk
# ウィンドウを表示する
root = tk.Tk()
root.title("tk")
root.geometry("800x600") 

# キャンバス設置
canvas = tk.Canvas(root,width = 800,height = 600,bg = "orange")
canvas.pack()

# 四角形を配置
rect_size = 50
x = 10
y = 10
canvas.create_rectangle(x,y,x+rect_size,y+rect_size,fill="blue",tag="rect")

root.mainloop()

以下のように四角形の左上と右下の座標、色、名前を指定しています。

ただし、プログラミングで用いられる座標軸は、数学で用いられるものと向きが違うので注意が必要です。

モニターの左上が原点で、Y軸が反転しています。

6 キーボードの入力を受け取る

bind()命令を用いれば、キーボードの入力も簡単に受け取ることができます。以下のプログラムを実行してみてください。キーボードを押すと、押したキーが出力されます。

import tkinter as tk
# ウィンドウを表示する
root = tk.Tk()
root.title("tk")
root.geometry("800x600") 

# キャンバス設置
canvas = tk.Canvas(root,width = 800,height = 600,bg = "orange")
canvas.pack()

# 四角形を配置
rect_size = 50
x = 10
y = 10
canvas.create_rectangle(x,y,x+rect_size,y+rect_size,fill="blue",tag="rect")

# 何かのキーが押されたときに実行される関数
def on_key_press(event):
    key = event.keysym # 変数keyに「w」や「a」など、押したキーの名前が格納される
    print(key)

# メインループ
root.bind("<KeyPress>", on_key_press)
root.mainloop()

18行目では、キーボードが押されたときに実行される関数を設定しています。今回は、print文で押されたキーを出力します。引数eventに、押されたキーボードの情報が渡されます。そして、event.keysymでキーの名前に変更できます。

23行目では、キーボードが押されたとき先ほどの関数が実行されるように設定しています。これをbind()命令と呼び、今回の場合は条件＝ボタンが押されたとき、実行する関数＝on_key_pressになります。今回のようにキーを押したときだけでなく、キーを離したとき、マウスを動かしたときなど、様々なことを検出できます。この記事に詳しく説明があります。

root.bind(条件, 実行する関数の名前)

7 キーボードの入力を判定する

keyの中身をif文で判定します。wキーか↑キーのときは上、aキーか←キーのときは左、…といった具合に場合分けしていきます。

先ほどのプログラムに手を加えて、移動方向を判定するプログラムを作成してみましょう。 WASDキーに対応して、以下のような出力を出せたら完成です。

→
→
↓
↓
↓
↓
←

関数on_key_pressの中身だけを改造して作成できます。以下のヒントをもとに自分で考えて、書いてみてください。新しいファイルtk2.pyを作成して、そこにtk.pyの中身をコピーしてから作業してください。

# 押されたキーを出力する
def on_key_press(event):
    key = event.keysym # 変数keyに「w」や「a」など、押したキーの名前が格納される
    if key == "w": # 「w」が押されたとき
        print("↑")
    elif ...   #以下省略

完成したら、以下の答えと照らし合わせて確認してください。

答え

import tkinter as tk
# ウィンドウを表示する
root = tk.Tk()
root.title("tk")
root.geometry("800x600") 

# キャンバス設置
canvas = tk.Canvas(root,width = 800,height = 600,bg = "orange")
canvas.pack()

# 四角形を配置
rect_size = 50
x = 10
y = 10
canvas.create_rectangle(x,y,x+rect_size,y+rect_size,fill="blue",tag="rect")

# 何かのキーが押されたときに実行される関数
def on_key_press(event):
    key = event.keysym # 変数keyに「w」や「a」など、押したキーの名前が格納される
    if key == "w":
        print("↑")
    elif key == "a":
        print("←")
    elif key == "s":
        print("↓")
    elif key == "d":
        print("→")

# メインループ
root.bind("<KeyPress>", on_key_press)
root.mainloop()

Challenge10-3　wasdだけでなく、矢印キーにも対応させてみましょう。矢印キーが押されたとき、keyにはUp Down Right Leftという文字が渡されます。

ヒント:key == "A" or key == "B"を使えば、「keyがAまたはBのとき」という条件になります。

答え

# 何かのキーが押されたときに実行される関数
def on_key_press(event):
    key = event.keysym # 変数keyに「w」や「a」など、押したキーの名前が格納される
    if key == "w" or key == "Up":
        print("↑")
    elif key == "a" or key == "Left":
        print("←")
    elif key == "s" or key == "Down":
        print("↓")
    elif key == "d" or key == "Right":
        print("→")

8 図形を動かす

キーボードの入力に合わせて四角形を動かせば、四角形の移動ができるようになります。

import tkinter as tk
# ウィンドウを表示する
root = tk.Tk()
root.title("tk")
root.geometry("800x600") 

# キャンバス設置
canvas = tk.Canvas(root,width = 800,height = 600,bg = "orange")
canvas.pack()

# 四角形を配置
rect_size = 50
x = 10
y = 10
canvas.create_rectangle(x,y,x+rect_size,y+rect_size,fill="blue",tag="rect")

# 何かのキーが押されたときに実行される関数
def on_key_press(event):
    global x,y
    speed = 5 # 四角形を一度にずらす大きさ
    key = event.keysym # 変数keyに「w」や「a」など、押したキーの名前が格納される
    if key == "w" or key == "Up":
        print("↑")
        y = y - speed
    elif key == "a" or key == "Left":
        print("←")
        x = x - speed
    elif key == "s" or key == "Down":
        print("↓")
        y = y + speed
    elif key == "d" or key == "Right":
        print("→")
        x = x + speed
    
    # 元の四角形を削除して、再配置する
    canvas.delete("rect")
    canvas.create_rectangle(x,y,x+rect_size,y+rect_size,fill="blue",tag="rect")

# メインループ
root.bind("<KeyPress>", on_key_press)
root.mainloop()