python tkinter の描画処理に関する疑問

Question

前提・実現したいこと

勉強のためpythonとtkinterでブロック崩しゲームを作成しています。
参考にしたサイト
上記リンクを参考にしながら、ひとまず枠の中でボールが跳ね返り続けるコードを書いてみましたが、
不明点があるので教えてください。

【疑問】

下記コードの場合、ボールが壁（ウィンドウの枠）にぶつかった判定の時、ボールの半分が壁に沈み込む（見えなくなる）ような描写になるはずですが、
そうなっていません。（ボールの端が壁にぶつかったときに跳ね返っているように見える）
これはどうしてでしょうか？

import tkinter as tk
ball = {"dirx": 15,
         "diry": -15,
         "x": 350,
         "y": 300,
         "w": 10}

win = tk.Tk()
buff = tk.StringVar()
buff.set("")
label = tk.Label(win, textvariable = buff)
label.pack()

cv = tk.Canvas(win, width = 600, height = 400)
cv.pack()

def draw_ball():
    cv.delete("all")
    cv.create_oval(ball["x"] - ball["w"], ball["y"] + ball["w"], ball["x"] + ball["w"], ball["y"] - ball["w"], fill = "red")

def move_ball():
    bx = ball["x"] + ball["dirx"]
    by = ball["y"] + ball["diry"]
    
    buff.set("posi x = " + str(bx) + " posi y = " + str(by))
    
    if bx <= 0 or bx >= 600:
        ball["dirx"] *= -1
    
    if by <= 0 or by >= 400:
        ball["diry"] *= -1
    
    if 0 < bx < 600:
        ball["x"] = bx
        
    if 0 < by < 400:
        ball["y"] = by

def gameloop():
    draw_ball()
    move_ball()
    
    win.after(50, gameloop)

gameloop()
win.mainloop()

【疑問に思った理由】

ボールの描画は、Canvasのcreate_oval()で行っています。create_oval(円の左端, 円の上端, 円の右端, 円の下端)で描画されます。
今回のコードでは、create_ovalにボールの中心位置座標からの相対距離を入力しています。
ボールの中心位置座標を(x,y) , ボールの幅 = 10 として、
create_oval( x-10, y+10, x+10, y-10)で、ボールの中心をx,yとした直径20の円が描画されます。

ボールの移動・跳ね返りは、ボールの中心位置座標(x,y)の値を変更し、(x,y) が ウィンドウの端(0,0) (600,400)の位置に来た時に反射させています。
ということは、ボールの中心がウィンドウの端に来た時、ボールの半径10の部分はウィンドウの外に消えるような描写となっているべきです。
しかし、ボールの端がウィンドウの端とぶつかって反射しているように見えます。
（本当はボールの端がウィンドウの端とぶつかるように見えたほうがリアルで喜ばしいのですが、このコードでそうなるべきではないと考えています）
教えていただけるとうれしいです。

Answer 1

下記コードの場合、ボールが壁（ウィンドウの枠）にぶつかった判定の時、ボールの半分が壁に沈み込む（見えなくなる）ような描写になるはずですが、そうなっていません。（ボールの端が壁にぶつかったときに跳ね返っているように見える）

これはどうしてでしょうか？

xy 方向の移動量 dirx, diry が15でボールの半径が10なので、多くの場合はボールがはみ出す位置にくる前に if bx <= 0 or bx >= 600 または if by <= 0 or by >= 400 の条件判定で移動方向が反転しているためです。
ただ必ずこの条件ではみ出さないかというと、はみ出してしまうことがあります。
実際、よく見てみると、左側の壁にぶつかって反転する際にはみ出しています。

以下、コードに確認しやすいようにいくつか変更を加えましたので、動かしてみるとわかると思います。

• 1. キャンバスの背景色を水色に変更

→ どこまでがキャンバスかわかりづらいため

• 1. move_ball() と draw_ball() の順番を逆にした。

→ 移動した今の位置にボールを描画したほうがわかりやすいため

• 1. 反転するタイミングでの円の4点の座標を出力し、3秒間止まるようにした。

3の反転するタイミングが壁に一番近づいたタイミングであり、このときの4点の座標がはみ出していなければ、円がキャンバスからはみ出していないことになります。

import tkinter as tk
import time

ball = {"dirx": 15,
         "diry": -15,
         "x": 350,
         "y": 300,
         "w": 10}

win = tk.Tk()
buff = tk.StringVar()
buff.set("")
label = tk.Label(win, textvariable = buff)
label.pack()

cv = tk.Canvas(win, width = 600, height = 400)
cv.pack()
cv.config(background="lightblue")

def draw_ball():
    cv.delete("all")
    cv.create_oval(ball["x"] - ball["w"], ball["y"] + ball["w"], ball["x"] + ball["w"], ball["y"] - ball["w"], fill = "red")

def move_ball():
    bx = ball["x"] + ball["dirx"]
    by = ball["y"] + ball["diry"]

    buff.set("posi x = " + str(bx) + " posi y = " + str(by))

    if bx <= 0 or bx >= 600:
        ball["dirx"] *= -1

    if by <= 0 or by >= 400:
        ball["diry"] *= -1

    if not (0 < bx < 600 and 0 < by < 400):
        # デバッグ用
        time.sleep(3)
        print(ball["x"] - ball["w"], ball["y"] + ball["w"], ball["x"] + ball["w"], ball["y"] - ball["w"])

    if 0 < bx < 600:
        ball["x"] = bx

    if 0 < by < 400:
        ball["y"] = by

def gameloop():
    move_ball()
    draw_ball()

    win.after(50, gameloop)

gameloop()
win.mainloop()

Comments

[mas_555]

条件式とボールの幅と移動の刻み幅によるものということですね。
コードの変更した内容も非常に勉強になりました。
わかりやすく回答いただきありがとうございました。