파이썬으로 배우는 게임 개발 실전편 chapter 1

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=285102792 

[전자책] 파이썬으로 배우는 게임 개발 실전편

나름 전공이라고 기본편 말고 실전편으로 공부해보겠다고 샀는데

파이썬 과목 학점이 너덜너덜해서... (심지어 이마저도 1년전이라 가물가물...)

하다가 정 이해가 안돼서 미치겠으면 기본편으로 다시 살 예정이다...

 

 

1. 키 입력

- 윈도우 표시하기

• tkinter 모듈 임포트 : import tkinter
• Tk()명령으로 윈도우 객체 생성 : root = tkinter.Tk()
• geometry() 명령으로 윈도우 사이즈 지정 : root.geometry("400x200")
• title() 명령으로 윈도우 타이틀 지정 : root.title("Hello World!")
• 라벨 컴포넌트 생성 : label = tkinter.Label(root, text="챕터 1", font=("Times New Roman", 20))
• └ Label() 명령으로 라벨 생성, root는 라벨을 배치할 윈도우, text=는 표시할 문자열, font=는 그 문자열의 글꼴
• └ 윈도우에 라벨을 배치할 때 Label()의 인수인 root를 생략 가능
• place() 명령으로 인수 x=, y=를 사용해 라벨을 배치할 위치 지정 : label.place(x=80, y=60)
• └ 원점(0, 0) 기준은 왼쪽 위 모서리
• mainloop() 명령으로 윈도우 표시 : root.mainloop()

import tkinter

root = tkinter.Tk()
root.geometry("400x200")
root.title("Hello World!")
label = tkinter.Label(root, text="chapter 1", font=("Times New Roman", 20))
label.place(x=80, y=60)
root.mainloop()

 

 

 

- GUI : 그래피컬 유저 인터페이스(Graphical User Interface)

컴포넌트	명령	사용 예시
라벨	Label()	label = tkinter.Label(text=문자열, font = 폰트)
버튼	Button()	button = tkinter.Button(text=문자열)
1행 텍스트 입력 필드	Entry()	entry = tkinter.Entry(width = 폭)
다중 텍스트 입력 필드	Text()	text = tkinter.Text()
체크 버튼 (체크 박스)	CheckButton()	cbtn = tkinter.Checkbutton(text=문자열)
캔버스	Canvas()	canvas = tkinter.Canvas(width = 폭, height = 높이)

 

- bind() 명령으로 키 입력 수행

 

함수 key_down(e) 

함수를 호출할 때 전달하는 값을 인수라고 한다.

파이썬에서는 인수를 넘겨주지 않아도 인수가 자신의 기본 값을 취하도록 하는 기능이 있다. 함수 오버로딩을 지원하는 언어에서는 이를 여러개 취하는 형식으로 지원하는데 파이썬은 조금 독특한 방법을 사용한다. 

다른 언어와 달리 파이썬은 인자를 생략할 수도 있고, 인자의 순서를 마음대로 변경하여 지정할 수 있다. 더욱이 함수에서 어떤 인자를 받을지 이름과 갯수를 정하지 않고서도 함수를 정의할 수 있다.

출처 : https://engineer-mole.tistory.com/97

 

이런 글은 사실 봐도봐도 이해가 안간다.... 나쁜 머리를 탓하자.

- 파이썬에서는 def로 함수를 지정한다.

* 함수 정의

 

def 함수명 :

     처리

- 키 입력 이벤트를 받는 함수이므로 def key_down(e):로 작성하고 인수 e로 이벤트를 받아낸다.

- 변수 key_c에 keycode 값을 대입하고 label1에 해당 값을 표시한다.

- 마찬가지, 변수 key_s에 keysym 값을 대입하고 label2에 해당 값을 표시한다.

 

bind()명령은 <KeyPress>이벤트 발생시 함수를 실행한다.

- <KeyPress>는 그냥 말그대로... 키를 누른 이벤트 

 

바로 위 예제와 달리 이 예제에서는 라벨의 컴포넌트 중 font 값을 미리 변수를 만들어서 이를 대입한다.

 

import tkinter

def key_down(e):
    key_c = e.keycode
    label1["text"] = "keycode " + str(key_c)
    key_s = e.keysym
    label2["text"] = "keysym " + str(key_s)

root = tkinter.Tk()
root.geometry("400x200")
root.title("키 입력")
root.bind("<KeyPress>", key_down)
fnt = ("Times New Roman", 30)
label1 = tkinter.Label(text="keycode", font = fnt)
label1.place(x = 0, y = 0)
label2 = tkinter.Label(text="keysym", font = fnt)
label2.place(x = 0, y = 80)
root.mainloop()

 

이건 캡쳐하려고 단축키를 누르니까 이렇게 되는 모양... win+shift+s키를 눌렀는데 _L은 뭔지 잘 모르겠다.

 

책에서는 키 값이 keycode와 keysym 이 두 가지가 있는데,

keycode는 윈도우와 맥에서의 값이 달라서 keysym값을 받아서 키 입력을 판정했다고 한다...

좀 통일할 것이지 떼잉... 

 

이 외에도 bind() 명령으로 실행할 수 있는 이벤트들

• <KeyPress> / <Key> : 키 누름
• <KeyRelease> : 키를 눌렀다 뗌
• <Motion> : 마우스 포인터 이동
• <ButtonPress> / <Button> : 마우스 버튼 클릭
• <ButtonRelease> : 마우스 버튼 클릭 후 뗌

 

 

2. 실시간 처리

import tkinter
import datetime

def time_now():
    d = datetime.datetime.now()
    t = "{0}:{1}:{2}".format(d.hour, d.minute, d.second)
    label["text"] = t
    root.after(1000, time_now)

root = tkinter.Tk()
root.geometry("400x100")
root.title("간이 계산")
label = tkinter.Label(font = ("Times New Roman", 60))
label.pack()
time_now()
root.mainloop()

 

 

- 날짜와 시간을 얻어와 after() 명령으로 실시간 처리 수행

import datetime

def time_now():
    d = datetime.datetime.now()
    t = "{0}:{1}:{2}".format(d.hour, d.minute, d.second)
    label["text"] = t
    root.after(1000, time_now)
    
# 중략...

time_now()

위 예제에서 실시간 처리를 수행하는 부분이다.

 

datetime 모듈을 import하고,

datetime.now() 명령으로 현재 날짜와 시간을 얻어 변수 d에 대입한다.

5번 행의 d.hour로 시간, d.minute로 분, d.second로 초를 얻어왔는데

양력으로 년, 월, 일은 각각 d.year, d.month, d.day로 쓰면 된다.

 

그리고 실시간 처리 수행 과정은 생각보다 간단했다. (코드가 간단하니까...)

 

먼저 맨 마지막의 time_now() 함수를 실행하면

time_now 안에 있는 코드중 d, t, label ~을 처리하면서 현재 시각을 얻은 후, 라벨을 업데이트 한다.

그 다음 코드인 root.after(1000, time_now)가 처리될텐데, 이 때 1000은 단위가 ms이므로 1초를 뜻한다.

따라서 1초 뒤 다시 time_now 함수를 실행시켜줌으로써 1초가 지날때 마다 현재 시각을 표시해주게 된다.

이런 식으로 after()명령은 이 함수를 계속 실행시켜서 계속해서 시간이 업데이트 되는 것이다.

 

 

- format() 명령

 

t = "{0}:{1}:{2}".format(d.hour, d.minute, d.second)

format() 명령으로 문자열의 {}를 인수값으로 치환한다.

{} 순서대로 인수값을 치환하고 싶으면 {} 안의 숫자값을 생략할 수 있다는데...

그럼 여기서도 생략할 수 있다는건가?

 

여기서도 순서대로 치환하려는 거니까 생략이 가능한듯... 근데 글 좀 수정하고 더 썼다고 벌써 30분이 훌쩍 지난게... 쩝&nbsp;

 

 

3. 캐릭터 애니메이션

- 이미지 그리기

 

  tkinter 모듈에서는 canvas라는 컴포넌트에 이미지나 도형을 그릴 수 있다.

• Canvas() 명령으로 캔버스 컴포넌트를 생성
• pack()으로 캔버스를 배치 (윈도우 안에 GUI를 쌓고 배치함으로써 캔버스 크기에 맞춰 윈도우 크기를 결정)
• tkinter.PhotoImage(file="")로 이미지 로딩 (이 때 file은 인수)
• create_image(x좌표, y좌표, 인수 = 이미지를 로딩할 변수)로 이미지를 그림
• └ img_bg가 변수, image는 인수
• └ 이 때 create_image 명령으로 지정한 좌표는 화면의 중심

import tkinter

root = tkinter.Tk()
root.title("Canvas에 화면 그리기")
canvas = tkinter.Canvas(width = 480, height = 300)
canvas.pack()
img_bg = tkinter.PhotoImage(file = "park.png")
canvas.create_image(240, 150, image = img_bg)
root.mainloop()

참고로 이미지들은 책에서 안내하는 깃헙 주소에서 다운받을 수 있다.

 

- 배경 스크롤하기

 

위 코드에서 배경을 스크롤 할 함수만 추가해주면 된다.

이번에도 after() 명령이 쓰였는데, after() 명령으로 50ms마다 계속해서 실시간으로 처리되어 배경이 스크롤되는 것 처럼 보인다.

 

참고로 변수 x를 scroll_bg() 함수의 외부에서 선언했기 때문에,

함수 내부에서는 global x 를 작성하여 전역 변수로 선언해야 변수의 값을 바꿀 수 있다.

(x = 0을 scroll_bg 안에서 선언하면 after 명령을 거쳐도 계속 x = 0이기 때문에 안되는 것 같다. 안에서 선언하고 싶다면 for문을 이용하면 될 것 같기도...? 하지만 여러번 시도해봤는데 안돼서 일단 이 방법을 익혀두기로... )

 

 

- tag 인수

 

파이썬에서는 캔버스에 이미지나 도형이 계속해서 덧그려지면 SW 동작이 이상해지는 경우가 종종 발생한다. 

이를 방지하기 위해 그려졌던 그림은 delete() 명령으로 삭제한 뒤, 새롭게 그리고, 삭제하고, 새롭게 그리는데 이는 아래 코드의 9~11번 행에서 수행된다.

 

create_image() 명령 인수인 tag로 표시할 이미지의 태그명을 정하고, delete() 명령의 인수로 해당 태그를 지정해 이미지를 삭제한다.

참고로 확장 모듈인 Pygame을 이용해 이러한 과정없이 그냥 덧그릴 수 있다고 한다.

 

import tkinter

x = 0 # 스크롤 위치를 관리해줄 변수 x 선언
def scroll_bg(): # 함수 정의
    global x # 지역변수 x를 스크롤 변수로 취급
    x = x + 1 # x값이 1씩 증가
    if x == 480 : # x가 480이 되면
        x = 0 # x에 0을 대입
    # 즉 x는 if 구문에 의해 0~479 사이의 값으로 바뀌며 480이 되면 0으로 돌아감.
    canvas.delete("BG") # 배경 이미지를 삭제
    canvas.create_image(x - 240, 150, image = img_bg, tag = "BG") # 배경 이미지 그리기(왼쪽)
    canvas.create_image(x + 240, 150, image = img_bg, tag = "BG") # 배경 이미지 그리기(오른쪽)
    # 이해가 잘 안된다면 왼쪽, 오른쪽 이미지를 그리는 각 행을 주석처리를 해보면 이해할 수 있다.
    root.after (50, scroll_bg)

root = tkinter.Tk()
root.title("Canvas에 화면 그리기")
canvas = tkinter.Canvas(width = 480, height = 300)
canvas.pack()
img_bg = tkinter.PhotoImage(file = "park.png")
canvas.create_image(240, 150, image = img_bg)

scroll_bg() # scroll_bg 함수 불러오기

root.mainloop()

 

오른쪽 이미지를 그리는 행을 주석처리했을 때, 즉 왼쪽 이미지를 그리는 행만 출력되고 있을 때의 모습

잘 흘러가는 중....  

 

이제 스크롤되는 배경에 따라 움직이는 개 애니메이션을 추가하는 코드를 작성해봤다.

 

 

- 캐릭터 애니메이션 만들기

 

import tkinter

x = 0 # 스크롤 위치 관리 변수
ani = 0 # 개 애니메이션 변수

def animation() : 
    global x, ani # 전역변수 x, ani 선언
    x = x + 4 
    if x == 480 :
        x = 0
	# 배경 스크롤 코드
    canvas.delete("BG")
    canvas.create_image(x-240, 150, image = img_bg, tag = "BG")
    canvas.create_image(x+240, 150, image = img_bg, tag = "BG")
    # 개 애니메이션 코드
    ani = (ani + 1) % 4 # ani의 값을 4로 나눈 나머지인 0~3 범위에서 변경
    canvas.create_image(240, 200, image = img_dog[ani], tag = "BG") # 개 이미지 그리기
    root.after(200, animation) # 200ms 후 함수 재실행 => 애니메이션이 됨

root = tkinter.Tk()
root.title("애니메이션")
canvas = tkinter.Canvas(width = 480, height = 300)
canvas.pack()
img_bg = tkinter.PhotoImage(file = "park.png") 
img_dog = [ # img_dog 리스트에 개 이미지 4장 로딩
    tkinter.PhotoImage(file="dog0.png"),
    tkinter.PhotoImage(file="dog1.png"),
    tkinter.PhotoImage(file="dog2.png"),
    tkinter.PhotoImage(file="dog3.png")
]
animation()
root.mainloop()

 

img_dog 리스트에 이미지들을 담아 animation() 함수에서 불러와서 이를 ani라는 변수에 지정했는데,

이 때 ani = (ani + 1) % 4 에 따라 after() 명령이 실행될 때 마다 개가 움직이는 것 처럼 보이는 것이다.

%는 나눗셈의 나머지를 구하는 연산자로 ani = (ani + 1) % 4에 처음 선언된 ani의 값 0이 들어가면

(0+1) % 4 = 1이 된다. 그리고 after 명령이 실행되고 ani의 값 1이 들어가면

(1+1) % 4 = 2가 된다. 그리고 after 명령이 실행되고 ani의 값 2가 들어가면 그 다음의 ani 값은 3이 될 것이다. 그 다음은 다시 0이 되고, 1이 되고, 2가 되고 ... 최종적으로 애니메이션이 만들어진다.

 

    x = x + 4
    if x == 480 :
        x = 0

마찬가지로 이 %를 이용하여 바로 위의 3줄짜리 코드를

 

x = (x + 4) % 480

이와 같이 바꿀 수 있다.

 

뚜벅뚜벅

 

4. 2차원 리스트를 활용한 맵 데이터 처리

- 리스트

• 1차원 리스트 : data[n] (0 ~ n-1까지 n개의 원소를 가지고 있으며, 이 때 0 ~ n-1까지의 숫자는 인덱스)
• 2차원 리스트 : data[n][m]

- 2차원 리스트로 맵 표시하기

import tkinter

root = tkinter.Tk()
root.title("맵 데이터")
canvas = tkinter.Canvas(width = 336, height = 240) # 캔버스 컴포넌트 생성
canvas.pack() # 캔버스 배치
img = [ # 리스트에 이미지 로딩
    tkinter.PhotoImage(file="chip0.png"),
    tkinter.PhotoImage(file="chip1.png"),
    tkinter.PhotoImage(file="chip2.png"),
    tkinter.PhotoImage(file="chip3.png")
]
map_data = [ # 2차원 리스트로 맵 데이터 정의
    [0, 1, 0, 2, 2, 2, 2],
    [3, 0 ,0 ,0 ,2 ,2 ,2],
    [3, 0, 0, 1, 0, 0, 0],
    [3, 3, 0, 0, 0, 0, 1],
    [3, 3, 3, 3, 0, 0, 0]
]
for y in range(5)  # for문으로 y 값은 0~4에서 1씩 증가를 반복
    for x in range(7) : # for문으로 x 값은 0~6에서 1씩 증가를 반복
        n = map_data[y][x] # 변수 n에 리스트 값 대입
        canvas.create_image(x * 48 + 24, y * 48 + 24, image = img[n]) # 맵 칩 그리기
root.mainloop() # 윈도우 표시

 

map_data 라는 2차원 리스트에 맵 데이터를 정의해 이를 이중 for문을 이용해 map_data[y][x]의 값을 변수 n에 넣어 그 n 값의 맵칩을 표시한다. 

 

결과 화면

 

이 때 이해가 안가는 부분이 있었는데,

맵 칩을 표시하는 좌표가 x * 48 + 24, y * 48 + 24인데

왜 24가 더해져야하는지 모르겠었다.

원점은 왼쪽 모서리를 기준이 아니었나?

가로 48픽셀, 세로 48픽셀인데 왜 24를 더해야만 올바르게 출력되는 것인가?

 

좌표를 x * 48, y * 48 + 24로 설정했을 때

 

원점이 왼쪽 모서리였던 것은 윈도우에서의 좌표다. 그리고 이는 윈도우 안의 캔버스고,

위에서 create_image() 명령으로 지정한 좌표가 화면의 중심이 된다고 했으니,

48픽셀의 반인 24픽셀을 중심으로 잡아야만

맨 처음 x, y에 0이 입력될 때도

중심을 (24, 24)로 하여 (0, 0)부터 채워져 생각한대로 출력되는 것이다.

 

 

5. 바닥과 벽 판정

- 마우스 포인터 사용

 

바로 위에서 만들었던 맵을 토대로 마우스 포인터의 위치에 무엇이 있는지 출력을 해보는 프로그램이다.

 

import tkinter

def mouse_click(e) : # 함수 정의
    px = e.x # px에 마우스 포인터 x 좌표 대입
    py = e.y # py에 마우스 포인터 y 좌표 대입
    print("마우스 포인터 좌표 : ({}, {})".format(px, py)) # px와 py 값 출력
    mx = int(px / 48) # mx에 px / 48의 정수 값 대입 
    my = int(py / 48) # my에 py / 48의 정수 값 대입
    if 0 <= mx and mx <= 6 and 0 <= my and my <= 4 : # mx와 my가 데이터 범위 안이면
        n = map_data[my][mx] # n에 맵 칩 번호 대입
        print("여기에 있는 맵 칩은 " + CHIP_NAME[n]) # 맵 칩 이름 출력

root = tkinter.Tk()
root.title("맵 데이터")
canvas = tkinter.Canvas(width = 336, height = 240)
canvas.pack()
canvas.bind("<Button>", mouse_click) # 마우스로 캔버스 클릭 시 실행할 함수 지정
CHIP_NAME = ["풀", "꽃", "숲", "바다"] # 맵 칩 이름을 리스트로 정의

img = [
    tkinter.PhotoImage(file="chip0.png"),
    tkinter.PhotoImage(file="chip1.png"),
    tkinter.PhotoImage(file="chip2.png"),
    tkinter.PhotoImage(file="chip3.png")
]
map_data = [
    [0, 1, 0, 2, 2, 2, 2],
    [3, 0 ,0 ,0 ,2 ,2 ,2],
    [3, 0, 0, 1, 0, 0, 0],
    [3, 3, 0, 0, 0, 0, 1],
    [3, 3, 3, 3, 0, 0, 0]
]
for y in range(5) :
    for x in range(7) :
        n = map_data[y][x]
        canvas.create_image(x * 48 + 24, y * 48 + 24, image = img[map_data[y][x]])
root.mainloop()

 

px = e.x, py = e.y로 포인터의 (x, y)좌표를 얻고 이를 48로 나누는 이유는 48로 나눠야 map_data에 있는 맵 데이터의 인덱스 값을 알 수 있기 때문이다.

mx와 my를 int() 명령으로 소수점 이하를 버려주는 이유는

내가 클릭한 위치가 48로 딱 나눠 떨어지지 않는 (74, 100)인 경우 소수점이 나오고,

그런 인덱스는 전혀 없기 때문에 찾을 수 없기 때문이다. 

 

조금만 길게 눌러도 두번 출력이 된다..^^;;...&nbsp;

이를 이용하여 바다 부분은 못들어가게 이동을 제한하고,

풀, 숲, 꽃은 바닥으로 취급해 플레이어 캐릭터가 그 곳을 걸어다니게 할 수 있다.