[SSU::DoCode] # 04 타이틀 화면과 버튼 - 1

몇주간 저희 프로젝트 팀에 변화가 생겼습니다.

일단 컴학인 저희의 캐릭터 그리기 한계를 인정하고

글로벌 미디어 학부 2명을 디자이너로 영입하였습니다.

 

SSU::DoCode 로고 제작 완료

제작 : Crom

위 로고는 팀의 대표인 제가 직접 제작하였고 한땀한땀 도트를 찍어 제작하였습니다 ㅋㅋㅋ

 

버튼 클래스 제작

먼저 파이게임은 버튼 기능을 따로 제공하지 않는 것 같아 직접 클래스를 이용해서 버튼을 제작하였습니다.

코드는 아래와 같습니다.

인자로 버튼의 위치, 크기, 버튼에 넣을 텍스트, 폰트, 텍스트 색깔, 버튼 색깔, 버튼에 마우스가 올라갔을 때 색, 버튼 입력 시 작동할 함수를 받습니다.

class Button:
    def __init__(self, position, size, text, font, text_color, button_color, hover_color, action=None):
        self.position = position
        self.size = size
        self.text = text
        self.font = font
        self.text_color = text_color
        self.button_color = button_color
        self.hover_color = hover_color
        self.action = action
        self.rect = pg.Rect(position[0], position[1], size[0], size[1])

    def draw(self, screen):
        mouse = pg.mouse.get_pos()
        click = pg.mouse.get_pressed()

        # 마우스가 버튼 위에 있을 경우 색상을 변경
        if self.rect.collidepoint(mouse):
            pg.draw.rect(screen, self.hover_color, self.rect)
            self.text_color = black
            if click[0] == 1 and self.action:  # 왼쪽 마우스 버튼 클릭 시
                self.action()  # 지정된 함수 실행
        else:
            pg.draw.rect(screen, self.button_color, self.rect)
            self.text_color = white

        # 텍스트 렌더링
        text_surface = self.font.render(self.text, True, self.text_color)
        text_rect = text_surface.get_rect(center=self.rect.center)
        screen.blit(text_surface, text_rect)
        screen.blit(text_surface, text_rect)

 

타이틀 화면

타이틀 화면에 사용할 배경화면이 아직 제작되지 않은 관계로 하울의 움직이는 성의 한 장면을 임시 배경화면을 사용하였습니다.

일단 기본 화면은 이렇게 생겼습니다.

제목은 아직 미정이지만, 가제로 '주술회전 파이트'라는 제목을 넣어보았습니다.

그리고 마우스를 올려두면 

이렇게 색이 바뀌는 이펙트를 넣어두었습니다.

 

게임 시작 버튼을 누르면 전투 UI 화면으로 넘어가고

설명 버튼은 아직 구현이 완료되지는 않았지만 조작키들을 설명하고 게임 배경 설명을 위한 화면으로 넘어가도록 계획중에 있습니다.

게임 종료 버튼은 프로그램을 종료시킵니다.