5.4 화면에 파이프(오브젝트) 나타내기와 움직이기

이제 우리는 우리의 게임무대에서 필요한 파이프 객체 배우(Actor)들을 등장시킬 차례이다. 코드를 적기 전에 먼저 이 객체들에 대해 생각해보자. 실제 코딩을 시작하기 전 어떻게 코딩할지를 생각으로 먼저 틀을 잡는게 항상 선행되어야 하는 일인 것이다. 일단 우리에겐 파이프 객체가 2개가 필요하다. 왜냐하면 화면 위쪽에 매달린 파이프와 화면 아래쪽에 붙은 파이프가 필요하고, 두 파이프 사이는 일정한 간격의 공간 존재해야만 하는데, 이 게임의 목적은 플래피버드가 파이프에 닿지 않고, 그 공간을 통과하는 게임이기 때문이다. 마지막으로 파이프 객체들의 움직임(애니메이션)에 대해 생각해보자. 화면 우측 끝에서 등장해 화면 좌측방향으로 움직여가며 화면 좌측 끝까지 이동하여 화면 밖을 빠져나가는 것과 동시에 다시 처음 등장 때처럼 화면우측 끝에서부터 재등장이 필요하다. 다만, 이때 게임의 재미를 위해서는 파이프는 항상 같은 위치에서 등장하면 안되고, 등장 때마다 무작위(랜덤)한위치가 변화를 동반해야만 할 것이다. 이것이 우리의 파이프 객체가 가져야 할 요구사항인 것이다.

자, 이것을 코드로 어떻게 표현할 수 있는지 살펴보자.

TITLE = 'Flappy Bird'
WIDTH = 400
HEIGHT = 708

GRAVITY = 0.3
drop_speed = 0

# Actor 객체들
flappy_bird = Actor('bird1', (75, 350))
top_pipe = Actor('top', (350,0))
bottom_pipe = Actor('bottom', (350, 500))

def draw():
    screen.blit('background', (0, 0))
    flappy_bird.draw()
    top_pipe.draw()
    bottom_pipe.draw()

def update():
    global drop_speed
    drop_speed += GRAVITY
    flappy_bird.y += drop_speed

def on_mouse_down():
    global drop_speed
    drop_speed = -6.5

🔢 10-11번 라인의 코드에서 화면 위쪽 파이프와 화면 아래쪽 파이프 각각을 Actor 객체로 생성해 각각을 top_pipe, bottom_pipe의 변수에 담아놓았다(다른 표현으로는 변수에게 생성된 객체를 접근할 수 있는 참조점을 할당). 이전 장에서 했던 것처럼 객체를 생성했고, 생성된 객체를 draw 콜백함수 안에서 화면에 그린 것으로 이미 익숙한 코드이기 때문에 이해에 어려움이 없을 것이다. 코드를 실행시켜보면 한 가지 문제가 있는데, 상하 두 파이프가 붙어져 있는 모습으로 그려진다. 그러나, 우리 게임 무대에서의 파이프 배우(Actor)들의 요구사항은 두 파이프 사이는 어느정도의 공간이 존재하도록 그려져야 하는데 왜냐하면 그 사이로 플래피버드가 통과해야 하기 때문이다. 이제 그 부분을 코딩해 보자.

TITLE = 'Flappy Bird'
WIDTH = 400
HEIGHT = 708

GRAVITY = 0.3
drop_speed = 0
GAP = 140

# Actor 객체들
flappy_bird = Actor('bird1', (75, 350))
top_pipe = Actor('top', (350,0))
bottom_pipe = Actor('bottom', (350, top_pipe.height + GAP))

def draw():
    screen.blit('background', (0, 0))
    flappy_bird.draw()
    top_pipe.draw()
    bottom_pipe.draw()

def update():
    global drop_speed
    drop_speed += GRAVITY
    flappy_bird.y += drop_speed

def on_mouse_down():
    global drop_speed
    drop_speed = -6.5

🔢 기존 코드에서의 변화는 2곳인데 먼저 7번 라인에 두 파이프 사이에 존재해야 하는 어느정도의 공간의 크기를 표현하는 의미로 GAP 라고 이름짓고(이전 장에서 언급한 의도적 대문자표기임을 기억할 것) , 그 공간의 크기는 140픽셀이라고 정의하였다. 두 번째로 12번 라인에서 아래 파이프의 위치를 위 파이프의 높이로부터 GAP 크기만큼 공간을 띄어(기존 위치에서 GAP 크기만큼 아래로 밀어내어) 위치시키는 코드로 변경했다. 여기서 top_pipe.height 라는 값은 직관적으로 어떤 값일지 와닿긴 하나,즉, 상위 파이프 객체 이미지의 높이로 라이브러리가 제공하는 모든 Actor객체마다 기본적으로 제공하고 있는 위치정보 속성값으로 그에 대한 상세는 다음과 같다.

파이프들 사이에 공간이 확보되었으니 이제 그 다음 요구사항인 파이프들이 플래피버드가 존재하는 방향으로 전진하는 움직임(애니매이션)이 필요하고, 5.2절에서 배운 플래피버드를 애니메이션 시키는 방법과 크게 다르지 않아 코드이해에 어려움은 없을 것이다.

TITLE = 'Flappy Bird'
WIDTH = 400
HEIGHT = 708

GRAVITY = 0.3
drop_speed = 0
GAP = 140
PIPE_SPEED = -3

# Actor 객체들
flappy_bird = Actor('bird1', (75, 350))
top_pipe = Actor('top', (350,0))
bottom_pipe = Actor('bottom', (350, top_pipe.height + GAP))

def draw():
    screen.blit('background', (0, 0))
    flappy_bird.draw()
    top_pipe.draw()
    bottom_pipe.draw()

def update():
    global drop_speed
    drop_speed += GRAVITY
    flappy_bird.y += drop_speed
    top_pipe.x += PIPE_SPEED
    bottom_pipe.x += PIPE_SPEED

def on_mouse_down():
    global drop_speed
    drop_speed = -6.5

🔢 8번 라인에서 파이프가 이동하는 속도는 변하지 않는 값이고, 코드의 가독성을 높이고, 추후 요구사항 변화의 빠른 대응을 위해 숫자값을 대치하는 기능(Macro, 매크로라고 함)의 의미로 전체 대문자 변수명으로 적용하였고, 파이프들은 화면상의 좌측방향으로 이동해야 하므로 변수값은 음수가 되었다. 파이프 애니메이션을 만들기 위해 1초에 60번 호출되는(60 FPS(Frames Per Second)라고 함) update 함수 내에서 파이프들의 x좌표값을 계속 변화시킨다. 이 코드를 실행시켜보자. 의도했던데로 잘 동작할 것이다. 다만 단점이 하나 있다면, 좌측화면 끝까지 이동해버린 파이프들이 다시 재등장하는 것이 없다는 것이다. 우리가 엔트리에서 이런류의 게임을 만들어봤다면, 이 상황을 어떻게 대응해야하는지에 대한 알고리즘에 대해 익숙할 것이다. 그렇다 파이프가 좌측 화면밖을 빠져나감과 동시에 파이프를 화면이 맨 우측의 눈에 보이지 않는 바깥쪽 넘어로 순간이동시켜버리는 것이다. 이렇게 하면 파이프는 무한하게 계속 순환(rotation)하는 구조를 만들 수 있다. 이를 코드로 표현해 보도록 하자.

TITLE = 'Flappy Bird'
WIDTH = 400
HEIGHT = 708

GRAVITY = 0.3
drop_speed = 0
GAP = 140
PIPE_SPEED = -3

# Actor 객체들
flappy_bird = Actor('bird1', (75, 350))
top_pipe = Actor('top', (350,0))
bottom_pipe = Actor('bottom', (350, top_pipe.height + GAP))

def draw():
    screen.blit('background', (0, 0))
    flappy_bird.draw()
    top_pipe.draw()
    bottom_pipe.draw()

def update():
    global drop_speed
    drop_speed += GRAVITY
    flappy_bird.y += drop_speed
    top_pipe.x += PIPE_SPEED
    bottom_pipe.x += PIPE_SPEED
    
    if top_pipe.right < 0 or bottom_pipe.right < 0: #파이프의 무한순환
        top_pipe.x = WIDTH
        bottom_pipe.x = WIDTH

def on_mouse_down():
    global drop_speed
    drop_speed = -6.5

🔢 알고리즘은 예상하는 바와 같이 28번 라인처럼 드디어 조건문이 등장해 파이프의 이동 애니메이션하는 매순간마다의 파이프의 현재위치의 점검이 필요하다. 위쪽 파이프 또는 아래쪽 파이프 중 둘 중 하나의(이 목적으로 비교문 안에 or 를 사용했음을 주목하자!) 현재 위치가 화면의 좌측 빠져나간 상태(파이프의 right값 위치값이 0보다 작아지는 상태)인가? 그렇다면, 파이프들의 위치를 순간이동 시키는데 화면 최우측의 바로 넘어로(x값이 WIDTH값이 되는) 그 위치를 옮겨버리면 될 것이다.

이제 남은 요구사항은 게임의 재미를 위해 파이프의 재등장시 항상 같은 위치에서 등장하면 안되고, 등장 때마다 무작위(랜덤)한 위치변화를 동반해야만 할 것이다. 이 부분의 코딩은 일단은 뒤에 추가기능 구현으로 미뤄두겠다. 이 책은 순한맛 버전이므로 아무래도 처음에는 최대한 난이도를 최대한 낮춰 배우는 것에 중점을 두는 것이 필요하기 때문이다.