[황금캐기게임 1.0.2] 집게 만들기

안녕하세요! 게임 만드는 잉여 쏘코입니다!

지난번에는 화면에 보석을 띄우는 데까지 만들었는데요,

오늘은 드디어 황금캐기게임에서 "캐기"를 맡고 있는 집게를 만들어보려고 합니다!

이번 포스팅은 강의 영상에서 26:17~41:34까지의 내용을 담고 있습니다!

0. 집게 클래스

이제 왼쪽과 오른쪽을 왔다갔다하면서 보석을 주인공에게 전달해 줄 집게를 만들어 보도록 하겠습니다.

4_claw.py 파일을 만들고 3_gemstone.py를 copy&paste합니다!

집게 클래스는 보석 클래스 위쪽에 만들어줍니다. (7줄)

기본 형식은 보석 클래스와 동일합니다. Sprite를 이용해 만들어주고, image와 position을 매개변수로 받고, image와 rect를 변수로 가집니다.

이번엔 집게의 이미지를 불러옵시다. (66줄)

claw_image 변수를 만들어서 보석 이미지를 불러왔떤 것처럼 똑같이 claw.png 이미지를 불러와서 변수에 넣어줍니다.

그런데 claw.png가 아직 없죠?

그림판에서 집게 이미지를 한번 만들어봅시다!

50*35 크기의 캔버스를 만들고, 오른쪽을 향한 집게를 그려줍니다.

그리고 똑같은 곳에 claw.png라는 이름으로 저장해줍니다.

이제 불러온 이미지를 바탕으로 Claw 클래스를 이용해 객체를 만들어줍시다. (68줄)

claw라는 변수를 만들고, Claw 클래스에 이미지와 원하는 위치를 넣어준 값을 claw에 할당합니다.

이제 화면에 띄워줘야겠죠? (84줄)

gemstone_group을 출력했던 것처럼 claw에다가 draw 메소드를 사용하려고 했는데..?

Claw 클래스에는 draw 메소드가 없기 때문에 오류가 발생합니다.

gemstone_group는 sprite의 Group()메소드를 이용해서 만들었기 때문에 draw를 사용할 수 있지만,

claw는 Claw()클래스를 통해 바로 만들어줬죠? 그래서 오류가 발생한 것입니다.

이 오류를 없애기 위해서는 Claw 클래스에 draw 메소드를 만들어주면 됩니다! (14줄)

생성자 아래에 draw 메소드를 만드는데, 이전에 배경화면을 띄울 때 사용했던 screen.blit()함수를 사용합니다.

매개변수는 Claw 클래스의 image, rect를 그대로 사용하면 되겠죠?

이제 실행하면 집게가 원하는 위치에 나타나는 것을 보실 수 있습니다 😁

# 4_claw.py
# 집게 클래스 만들기
import os # 경로를 위해 os 라이브러리 불러오기
import pygame # 파이게임 라이브러리 불러오기


# 집게 클래스 (보석 클래스와 거의 동일!)
class Claw(pygame.sprite.Sprite):
    def __init__(self, image, position):
        super().__init__()
        self.image = image
        self.rect = image.get_rect(center = position)
    
    def draw(self, screen):
        screen.blit(self.image, self.rect) # 스크린의 blit을 이용해 Claw 클래스로 만든 객체의 이미지와 위치 정보를 이용해 그 내용을 화면에 출력한다! 


# 보석 클래스
class Gemstone(pygame.sprite.Sprite): # pygame의 Sprite를 상속해와서 사용한다!!
    def __init__(self, image, position): # 생성자 (사진인 image와 보석의 위치인 position을 매개변수로 받는다!)
        super().__init__() # 상속받은 Sprite의 생성자를 불러온다! (상속 받았으니 뭔지는 몰라도 초기화 해준다!)
        # 아래 2개의 변수는 Sprite 메소드를 사용하기 위해서 반드시 정의해야 함!!
        self.image = image # 캐릭터가 가진 이미지 정보 - 매개변수로 받아온다!
        self.rect = image.get_rect(center = position) # 캐릭터가 가지는 좌표, 크기 정보
        # 보석마다 위치가 달라져야 하기 때문에 받아온 이미지의 중앙이 매개변수로 받은 position에 맞춰서 rect를 가져오도록 설정한다!


def setup_gemstone(): # 보석 클래스에서 설정한 보석의 사진과 위치 정보를 gemstone_group에 넣는 함수! 작은 금은 이해를 위해 나눠서 작성했고, 큰 금부터는 한번에 작성!
    # 작은 금
    small_gold = Gemstone(gemstone_images[0], (200, 380)) # 0번째 이미지를 (200, 300) 위치에 둬라
    gemstone_group.add(small_gold) # 그룹에 추가
    # 큰 금
    gemstone_group.add(Gemstone(gemstone_images[1], (300,500)))
    # 돌
    gemstone_group.add(Gemstone(gemstone_images[2], (300,380)))
    # 다이아몬드
    gemstone_group.add(Gemstone(gemstone_images[3], (900,420)))


pygame.init() # 파이게임 초기화
# 스크린 크기 지정
screen_width = 1280
screen_height = 720
screen = pygame.display.set_mode((screen_width, screen_height)) # 이걸 통해 게임의 창 크기를 설정
pygame.display.set_caption("Gold Miner") # 게임 제목 설정 "Gold Miner"

clock = pygame.time.Clock() # 프레임값을 조정하기 위한 clock변수 설정


# 배경 이미지 불러오기
current_path = os.path.dirname(__file__) # os.path.dirname을 이용해서 현재 파일의 위치(2_background.py 위치) 반환 
background = pygame.image.load(os.path.join(current_path, "background.png")) # 현재 위치의 파일이 있는 폴더의 background.png파일을 선택하게 됨!!


# 4개 보석 이미지 불러오기 (작은 금, 큰 금, 돌, 다이아몬드) - 배경을 가져오는 과정과 동일!!
gemstone_images = [
    pygame.image.load(os.path.join(current_path, "small_gold.png")), # 작은 금
    pygame.image.load(os.path.join(current_path, "big_gold.png")), # 큰 금
    pygame.image.load(os.path.join(current_path, "stone.png")), # 돌
    pygame.image.load(os.path.join(current_path, "diamond.png")) # 다이아몬드
]


# 보석 그룹
gemstone_group = pygame.sprite.Group() # 젬스톤 그룹 생성
setup_gemstone() # 게임에 원하는 만큼의 보석을 정의


# 집게 이미지 불러오기 (보석 이미지 불러오는 방식과 동일!)
claw_image = pygame.image.load(os.path.join(current_path, "claw.png"))
claw = Claw(claw_image, (screen_width // 2, 110)) # Claw 클래스를 이용해서 객체 생성!!
# 가로 위치는 화면 가로 크기 기준으로 절반, 위에서 110px에 위치


# 게임이 반복해서 수행될 수 있도록 게임 루프를 만든다!
running = True
while running: # 게임이 진행중이라면? while문을 계속해서 반복하게 된다!
    clock.tick(30) # FPS 값이 30으로 고정

    for event in pygame.event.get(): # 이벤트를 받아오고
        if event.type == pygame.QUIT: # 게임이 꺼지는 이벤트가 발생했다면
            running = False # running 변수를 False로 바꿔준다!

    screen.blit(background, (0, 0)) # 맨 왼쪽 맨 위부터 ((0,0) 좌표부터)그림을 그려주도록 만들어준다!

    gemstone_group.draw(screen) # gemstone_group에 있는 모든 Sprite를 screen에다가 그려라!
    claw.draw(screen)

    pygame.display.update() # 설정한 배경화면 이미지를 pygame에 반영! (display에 업데이트!!)

pygame.quit() # while문을 빠져나가면 게임이 끝나도록 설정

1. 집게 중심점

이번에는 집게에 피벗(중심점)을 설정합니다.

방금 전에 만든 집게는 한 곳에 고정이었죠?

하지만 게임 내에서의 집게는 계속해서 시계추처럼 움직여야 합니다.

그래서 실제로는 우리가 아까 설정한 집게의 중심부로부터 조금 떨어진 위치에 집게가 위치해야 한다는 것이죠!

5_claw_pivot.py 파일을 새로 만들고, 4_claw.py의 소스 코드를 copy&paste 해줍니다.

우리가 집게를 어느 지점으로부터 떨어트려서 배치하기 위해서는 집게 클래스의 위치 정보를 가진 self.rect를 바꿔야 합니다.

Claw 클래스로 돌아가서, self.rect를 갱신하기 위한 용도로 update 메소드를 만들어줍니다. (17줄)

처음에 클래스가 만들어질 때 offset과 position을 가질 수 있도록 생성자 안에 변수를 만들어주고, update 메소드에서 그 변수들을 사용합니다.(14줄~15줄)

rect_center는 기존 position에 offset을 더한 수치가 되고, 이 위치가 집게의 새로운 center가 되도록 self.rect를 바꿔줍니다.(18줄~19줄)

이제 만든 claw를 업데이트 하기 위해서 while문 안에서 update() 메소드를 사용합니다.

약간 오른쪽으로 땡겨졌죠? x축으로 100만큼 이동한 곳에 집게가 위치하게 됩니다!

보다 명확하게 확인하기 위해서 중심에 빨간 점을 하나 찍어보도록 하겠습니다.

draw 메소드 내부에 pygame의 draw의 circle메소드를 이용해서 반지름이 3인 원을 하나 화면에 출력하도록 만들었습니다.

확실히 x축으로 100만큼 이동한 모습을 확인할 수 있죠?

이 빨간 점은 실제로 게임을 만들 때는 지워줄 예정입니다!

중심점과의 거리가 너무 긴 것 같으니 따로 조정을 해 주겠습니다.

x축으로 40픽셀 정도만 떨어지도록 만들겠습니다.

이전처럼 pygame.math.Vector2에 바로 40을 넣어도 되지만, 나중에 관리를 편하게 하기 위해 따로 변수를 지정해서 넣어주도록 하겠습니다.

바꾸고 실행시키면 집게가 설정한 중심으로부터 40만큼 떨어져서 출력되는 것을 확인하실 수 있습니다!

# 5_claw_pivot.py
# 집게를 어느 지점(pivot, 중심점)으로부터 떨어트려서 배치하는 것 - self.rect를 업데이트 해 주면 된다!
import os # 경로를 위해 os 라이브러리 불러오기
import pygame # 파이게임 라이브러리 불러오기


# 집게 클래스 (보석 클래스와 거의 동일!)
class Claw(pygame.sprite.Sprite):
    def __init__(self, image, position):
        super().__init__()
        self.image = image
        self.rect = image.get_rect(center = position)

        self.offset = pygame.math.Vector2(default_offset_x_claw, 0) # x위치는 100만큼 이동, y위치는 그대로
        self.position = position

    def update(self): # 보통 게임을 만들 때 캐릭터가 가만히 있을 때 숨쉬는 동작을 담당하는 부분!
        rect_center = self.position + self.offset # 위에서 만든 두 변수를 더해줌!!
        self.rect = self.image.get_rect(center = rect_center) # update 메소드를 실행하면 self.rect가 업데이트 되고, draw를 하면 바뀐 rect를 기준으로 화면에 출력!

    
    def draw(self, screen):
        screen.blit(self.image, self.rect) # 스크린의 blit을 이용해 Claw 클래스로 만든 객체의 이미지와 위치 정보를 이용해 그 내용을 화면에 출력한다! 
        pygame.draw.circle(screen, RED, self.position, 3) # screen에 빨간 점을 적겠다, 위치는 self.position, 반지름은 3으로 하겠다! - 중심점 표시


# 보석 클래스
class Gemstone(pygame.sprite.Sprite): # pygame의 Sprite를 상속해와서 사용한다!!
    def __init__(self, image, position): # 생성자 (사진인 image와 보석의 위치인 position을 매개변수로 받는다!)
        super().__init__() # 상속받은 Sprite의 생성자를 불러온다! (상속 받았으니 뭔지는 몰라도 초기화 해준다!)
        # 아래 2개의 변수는 Sprite 메소드를 사용하기 위해서 반드시 정의해야 함!!
        self.image = image # 캐릭터가 가진 이미지 정보 - 매개변수로 받아온다!
        self.rect = image.get_rect(center = position) # 캐릭터가 가지는 좌표, 크기 정보
        # 보석마다 위치가 달라져야 하기 때문에 받아온 이미지의 중앙이 매개변수로 받은 position에 맞춰서 rect를 가져오도록 설정한다!


def setup_gemstone(): # 보석 클래스에서 설정한 보석의 사진과 위치 정보를 gemstone_group에 넣는 함수! 작은 금은 이해를 위해 나눠서 작성했고, 큰 금부터는 한번에 작성!
    # 작은 금
    small_gold = Gemstone(gemstone_images[0], (200, 380)) # 0번째 이미지를 (200, 300) 위치에 둬라
    gemstone_group.add(small_gold) # 그룹에 추가
    # 큰 금
    gemstone_group.add(Gemstone(gemstone_images[1], (300,500)))
    # 돌
    gemstone_group.add(Gemstone(gemstone_images[2], (300,380)))
    # 다이아몬드
    gemstone_group.add(Gemstone(gemstone_images[3], (900,420)))


pygame.init() # 파이게임 초기화
# 스크린 크기 지정
screen_width = 1280
screen_height = 720
screen = pygame.display.set_mode((screen_width, screen_height)) # 이걸 통해 게임의 창 크기를 설정
pygame.display.set_caption("Gold Miner") # 게임 제목 설정 "Gold Miner"

clock = pygame.time.Clock() # 프레임값을 조정하기 위한 clock변수 설정


# 게임 관련 변수
default_offset_x_claw = 40 # 중심점으로부터 집게까지의 기본 x 간격


# 색깔 변수
RED = (255, 0, 0) # RGB값


# 배경 이미지 불러오기
current_path = os.path.dirname(__file__) # os.path.dirname을 이용해서 현재 파일의 위치(2_background.py 위치) 반환 
background = pygame.image.load(os.path.join(current_path, "background.png")) # 현재 위치의 파일이 있는 폴더의 background.png파일을 선택하게 됨!!


# 4개 보석 이미지 불러오기 (작은 금, 큰 금, 돌, 다이아몬드) - 배경을 가져오는 과정과 동일!!
gemstone_images = [
    pygame.image.load(os.path.join(current_path, "small_gold.png")), # 작은 금
    pygame.image.load(os.path.join(current_path, "big_gold.png")), # 큰 금
    pygame.image.load(os.path.join(current_path, "stone.png")), # 돌
    pygame.image.load(os.path.join(current_path, "diamond.png")) # 다이아몬드
]


# 보석 그룹
gemstone_group = pygame.sprite.Group() # 젬스톤 그룹 생성
setup_gemstone() # 게임에 원하는 만큼의 보석을 정의


# 집게 이미지 불러오기 (보석 이미지 불러오는 방식과 동일!)
claw_image = pygame.image.load(os.path.join(current_path, "claw.png"))
claw = Claw(claw_image, (screen_width // 2, 110)) # Claw 클래스를 이용해서 객체 생성!!
# 가로 위치는 화면 가로 크기 기준으로 절반, 위에서 110px에 위치


# 게임이 반복해서 수행될 수 있도록 게임 루프를 만든다!
running = True
while running: # 게임이 진행중이라면? while문을 계속해서 반복하게 된다!
    clock.tick(30) # FPS 값이 30으로 고정

    for event in pygame.event.get(): # 이벤트를 받아오고
        if event.type == pygame.QUIT: # 게임이 꺼지는 이벤트가 발생했다면
            running = False # running 변수를 False로 바꿔준다!

    screen.blit(background, (0, 0)) # 맨 왼쪽 맨 위부터 ((0,0) 좌표부터)그림을 그려주도록 만들어준다!

    gemstone_group.draw(screen) # gemstone_group에 있는 모든 Sprite를 screen에다가 그려라!
    claw.update()
    claw.draw(screen)

    pygame.display.update() # 설정한 배경화면 이미지를 pygame에 반영! (display에 업데이트!!)

pygame.quit() # while문을 빠져나가면 게임이 끝나도록 설정

2. 집게까지 직선긋기

이번에는 중심점으로부터 집게까지 직선을 그려보겠습니다.

6_claw_line.py 파일을 만들고, 5_claw_pivot.py를 copy&paste 합니다.

우리는 집게가 어디에 있든 상관 없이 중심으로부터 항상 연결되있을 수 있도록 만들어야 합니다.

먼저 집게가 쭉 늘어났을 때 연결되는 선을 검은색으로 만들기 위해서 검은색 색깔변수를 추가합니다. (65줄)

이제 draw 메소드에서 pygame.draw.line을 이용해 선을 그려줍니다.

설정한 중심부터 집게까지 연결하는 선을 두께 5, 검은색으로 스크린에 그려주겠다는 의미의 코드입니다!

이제 파일을 실행하면, 집게 이미지의 중간 위치까지 선이 연결되었습니다!

완전 신기합니다 🙂

만약 집게가 아래로 쭉 이동한다면 어떨까요?

self.offset을 변화시켜서 집게의 현재 위치를 바꿔봅시다!

쭉 늘어나서 잘 연결되었습니다! 진짜 신기해요 😁😁

# 6_claw_line.py
# 집게까지 직선을 그리기
import os # 경로를 위해 os 라이브러리 불러오기
import pygame # 파이게임 라이브러리 불러오기


# 집게 클래스 (보석 클래스와 거의 동일!)
class Claw(pygame.sprite.Sprite):
    def __init__(self, image, position):
        super().__init__()
        self.image = image
        self.rect = image.get_rect(center = position)

        self.offset = pygame.math.Vector2(default_offset_x_claw, 0) # x위치는 100만큼 이동, y위치는 그대로
        self.position = position

    def update(self): # 보통 게임을 만들 때 캐릭터가 가만히 있을 때 숨쉬는 동작을 담당하는 부분!
        rect_center = self.position + self.offset # 위에서 만든 두 변수를 더해줌!!
        self.rect = self.image.get_rect(center = rect_center) # update 메소드를 실행하면 self.rect가 업데이트 되고, draw를 하면 바뀐 rect를 기준으로 화면에 출력!

    
    def draw(self, screen):
        screen.blit(self.image, self.rect) # 스크린의 blit을 이용해 Claw 클래스로 만든 객체의 이미지와 위치 정보를 이용해 그 내용을 화면에 출력한다! 
        pygame.draw.circle(screen, RED, self.position, 3) # screen에 빨간 점을 적겠다, 위치는 self.position, 반지름은 3으로 하겠다! - 중심점 표시
        pygame.draw.line(screen, BLACK, self.position, self.rect.center, 5) # 직선 그리기
        # 스크린에 선을 그릴 것이고, 검은 색이고, self.position(중심점)부터 rect.center(집게의 중심점)까지 직선의 두께는 5로 연결하겠다!


# 보석 클래스
class Gemstone(pygame.sprite.Sprite): # pygame의 Sprite를 상속해와서 사용한다!!
    def __init__(self, image, position): # 생성자 (사진인 image와 보석의 위치인 position을 매개변수로 받는다!)
        super().__init__() # 상속받은 Sprite의 생성자를 불러온다! (상속 받았으니 뭔지는 몰라도 초기화 해준다!)
        # 아래 2개의 변수는 Sprite 메소드를 사용하기 위해서 반드시 정의해야 함!!
        self.image = image # 캐릭터가 가진 이미지 정보 - 매개변수로 받아온다!
        self.rect = image.get_rect(center = position) # 캐릭터가 가지는 좌표, 크기 정보
        # 보석마다 위치가 달라져야 하기 때문에 받아온 이미지의 중앙이 매개변수로 받은 position에 맞춰서 rect를 가져오도록 설정한다!


def setup_gemstone(): # 보석 클래스에서 설정한 보석의 사진과 위치 정보를 gemstone_group에 넣는 함수! 작은 금은 이해를 위해 나눠서 작성했고, 큰 금부터는 한번에 작성!
    # 작은 금
    small_gold = Gemstone(gemstone_images[0], (200, 380)) # 0번째 이미지를 (200, 300) 위치에 둬라
    gemstone_group.add(small_gold) # 그룹에 추가
    # 큰 금
    gemstone_group.add(Gemstone(gemstone_images[1], (300,500)))
    # 돌
    gemstone_group.add(Gemstone(gemstone_images[2], (300,380)))
    # 다이아몬드
    gemstone_group.add(Gemstone(gemstone_images[3], (900,420)))


pygame.init() # 파이게임 초기화
# 스크린 크기 지정
screen_width = 1280
screen_height = 720
screen = pygame.display.set_mode((screen_width, screen_height)) # 이걸 통해 게임의 창 크기를 설정
pygame.display.set_caption("Gold Miner") # 게임 제목 설정 "Gold Miner"

clock = pygame.time.Clock() # 프레임값을 조정하기 위한 clock변수 설정


# 게임 관련 변수
default_offset_x_claw = 40 # 중심점으로부터 집게까지의 기본 x 간격


# 색깔 변수
RED = (255, 0, 0) # RGB값, 빨간색
BLACK = (0, 0, 0) # 검은색


# 배경 이미지 불러오기
current_path = os.path.dirname(__file__) # os.path.dirname을 이용해서 현재 파일의 위치(2_background.py 위치) 반환 
background = pygame.image.load(os.path.join(current_path, "background.png")) # 현재 위치의 파일이 있는 폴더의 background.png파일을 선택하게 됨!!


# 4개 보석 이미지 불러오기 (작은 금, 큰 금, 돌, 다이아몬드) - 배경을 가져오는 과정과 동일!!
gemstone_images = [
    pygame.image.load(os.path.join(current_path, "small_gold.png")), # 작은 금
    pygame.image.load(os.path.join(current_path, "big_gold.png")), # 큰 금
    pygame.image.load(os.path.join(current_path, "stone.png")), # 돌
    pygame.image.load(os.path.join(current_path, "diamond.png")) # 다이아몬드
]


# 보석 그룹
gemstone_group = pygame.sprite.Group() # 젬스톤 그룹 생성
setup_gemstone() # 게임에 원하는 만큼의 보석을 정의


# 집게 이미지 불러오기 (보석 이미지 불러오는 방식과 동일!)
claw_image = pygame.image.load(os.path.join(current_path, "claw.png"))
claw = Claw(claw_image, (screen_width // 2, 110)) # Claw 클래스를 이용해서 객체 생성!!
# 가로 위치는 화면 가로 크기 기준으로 절반, 위에서 110px에 위치


# 게임이 반복해서 수행될 수 있도록 게임 루프를 만든다!
running = True
while running: # 게임이 진행중이라면? while문을 계속해서 반복하게 된다!
    clock.tick(30) # FPS 값이 30으로 고정

    for event in pygame.event.get(): # 이벤트를 받아오고
        if event.type == pygame.QUIT: # 게임이 꺼지는 이벤트가 발생했다면
            running = False # running 변수를 False로 바꿔준다!

    screen.blit(background, (0, 0)) # 맨 왼쪽 맨 위부터 ((0,0) 좌표부터)그림을 그려주도록 만들어준다!

    gemstone_group.draw(screen) # gemstone_group에 있는 모든 Sprite를 screen에다가 그려라!
    claw.update()
    claw.draw(screen)

    pygame.display.update() # 설정한 배경화면 이미지를 pygame에 반영! (display에 업데이트!!)

pygame.quit() # while문을 빠져나가면 게임이 끝나도록 설정

코드가 점점 길어지면서 내가 어디에 어떤 요소를 넣었는 지 헷갈리기 시작했습니다..

아무래도 주석을 잔뜩 달다보니 좀 더 풍성해졌네요 ㅋㅋㅋ

잘 확인해 가면서, 그래도 헷갈리시다면 영상을 참고하시면서 따라오시면 금방 따라하실 수 있을 겁니다 ㅎㅎ

그렇다면 다음 포스팅에서 뵙겠습니다!

감사합니다 :)