지난주에..
지난주에는 저를 포함한 총 4명의 팀으로 팀/팀원 소개 웹 페이지 미니 프로젝트를 진행하였습니다.
처음으로 하는 협업에 있어 시행착오를 겪었지만 금방 적응하고 팀원분들과의 의사소통을 하니 문제 해결 능력이 좋아졌고, 협업의 중요성을 깨달았습니다.
이제는 다음 주부터 개인 프로젝트를 진행한다고 합니다.
과연, 무슨 프로젝트가 기다리고 있었을까요?
파이썬으로도 게임을 만들 수 있다고??
처음 마주한 개인 프로젝트는 pygame을 이용하여 파이썬 게임을 만드는 프로젝트였지만..
이제 막 기초 문법을 떼었는데.. 게임을 만들라니..
처음에는 조금 막막하기도 하고, 해보지 않으면 결과를 알 수 없다는 생각이 들어 파이썬 게임에 대한 정보를 수집하고 또 수집했다!
내가 만들고 싶은 게임
그래서 내가 시작한 파이썬 게임 프로젝트는?
'내가 만들고 싶은 게임은?'이라는 개인적인 물음에 나는 여러 가지 후보들을 선정을 하였습니다.
1. 횡스크롤 RPG
2. 리듬게임
3. 벽돌깨기
4. 같은 그림 찾기
여기서 맨 처음 생각하던 것은 리듬게임!!
내가 만든 게임 내에 음악을 넣고 그것에 대해 음을 맞추면서 게임을 진행한다면 재미있겠다!라는 생각을 했지만, 여러 자료 조사를 거쳐보고 '내가 이걸 만들 수 있을까?'라는 의구심이 들었습니다..
다른 후보들 중 과연 맘에 드는 것이 있을까.. 하고 고르던 도중, 한 가지 생각이 스쳐 지나갔습니다.
'그냥 다른 게임을 만들고 거기에 음악을 넣으면 되지 않을까?'
그렇게 다른 후보들 중 같은 그림 찾기라는 게임을 만들기로 정하였고, 거기에 음악을 넣어보자는 것으로 파이썬 게임 프로젝트를 시작하였습니다.
그렇게 시작된 같은 그림(라쿤) 찾기 게임
과연 잘 만들 수 있을까?
이제 막 큰 타이틀을 잡았다!
지식의 깊이가 아직 깊지 않은 저는 구글링을 통해 다른 같은 그림 찾기 게임을 참고하려고 정보를 우선적으로 습득하였습니다.
찾고.. 찾고.. 찾아다니던 도중 기본적인 틀에 대해 설명을 잘해주는 블로그를 찾았고, 그 블로그를 참고하며 게임의 틀을 구성하였고 본격적으로 게임 만들기에 돌입하였고, 해당 틀을 보며 내가 추가해볼 기능들을 생각해보았습니다.
- 게임 Title 이름과 아이콘 변경
- 게임 시작 시 음악 재생
- 그림(도형, 색깔) → 그림(이미지) 변경
- 성공(Success), 실패(Fail) 텍스트 추가 및 값 저장
- 백그라운드 이미지 변경
- 게임 종료 시 백그라운드 이미지 전환
- Game Clear 및 Game Over 관련 기능
이제 하나씩 살펴보도록 하죠!
- 게임 Title 이름과 아이콘 변경
# 게임 타이틀 제목
pygame.display.set_caption('A racoon trick')# pygame 아이콘 이미지 변경
racoon_image = pygame.image.load('image/icon_racoon.png')
pygame.display.set_icon(racoon_image)
다음과 같이 pygame.display.set_caption('A racoon trick')을 통해 게임의 타이틀 제목을 바꿨습니다.
그리고 라쿤 이미지를 넣기 위해 pygam.image.load로 경로에 있는 라쿤 이미지를 불러온 뒤, racoon_image 변수에 넣고 pygame.display.set_icon(racoon_image)로 pygame아이콘을 내가 원하는 라쿤 이미지의 아이콘으로 변경했습니다.
- 게임 시작 시 음악 재생
# 게임 시작 시 음악 재생
pygame.mixer.init()
pygame.mixer.music.load("sound/easy.mp3")
pygame.mixer.music.play(-1, 0.0)
pygame.mixer.init()를 통해 pygame 시작 시 해당 사운드를 출력하게끔 설정해주고 .music.load()를 통해 내가 원하는 노래를 경로상으로 지정해준 뒤, .music.play(-1, 0.0)로 0초 부분부터 계속 반복시켜주도록 해주었습니다.
- 그림(도형, 색깔) → 그림(이미지) 변경
# 박스 이미지 그리기
def drawIcon(shape, color, boxx, boxy): # 결정된 모양과 색상으로 이미지를 그리는 함수
quarter = int(BOXSIZE * 0.25)
half = int(BOXSIZE * 0.5)
# leftTopCoordsOfBox의 boxx, boxy에 left, top 순서로 값을 집어넣음
left, top = leftTopCoordsOfBox(boxx, boxy)
# 순서 : pygame.draw.모양이름(Surface, color, Rect, Width)
# Surface : pygame 실행 시 전체적으로 화면을 선언한 변수 값
# color : 해당 모양의 색깔
# Rect : 해당 모양의 축
# Width : 기본적으로 0, 테두리의 굵기
if shape == DONUT: # 원 (1,2,Pos,Radius,4)
# Pos : 원의 위치 x,y값
# Radius : 원의 반지름 길이 값
pygame.draw.circle(DISPLAY, color, (left + half, top + half), half - 5)
pygame.draw.circle(DISPLAY, BGCOLOR, (left + half, top + half), quarter - 5)
elif shape == SQUARE: # 사각형 (x축,y축,가로,세로)
pygame.draw.rect(DISPLAY, color, (left + quarter, top + quarter, BOXSIZE - half, BOXSIZE - half))
elif shape == DIAMOND: # 삼각형 ((x축,y축),(x축,y축),(x축,y축))
pygame.draw.polygon(DISPLAY, color, (
(left + half, top), (left + BOXSIZE - 1, top + half), (left + half, top + BOXSIZE - 1), (left, top + half)))
elif shape == LINES: # 선 (1,2,Start_pos,End_pos,3)
# Start_pos : 선이 시작하는 점, x,y값
# End_pos : 선이 끝나는 점, x,y값
for i in range(0, BOXSIZE, 4):
pygame.draw.line(DISPLAY, color, (left, top + i), (left + i, top))
pygame.draw.line(DISPLAY, color, (left + i, top + BOXSIZE - 1), (left + BOXSIZE - 1, top + i))
elif shape == OVAL: # 타원 (x축,y축,가로,세로)
pygame.draw.ellipse(DISPLAY, color, (left, top + quarter, BOXSIZE, half))
해당 코드는 기존의 같은 그림 찾기에서 사용한 도형과 색깔을 생성해주는 코드입니다.
하지만 나는 원하는 이미지를 사용하여 같은 그림 찾기를 하고 싶은 것이었기에 해당 코드는 잠시 지워주고 새로운 코드를 작성해주었습니다.
def draw_Card(pic, num, boxx, boxy): # 결정된 이미지를 그리는 함수
eight = int(BOXSIZE * 0.01)
# left_Top_Coords_Of_Box의 boxx, boxy에 left, top 순서로 값을 집어넣음
left, top = left_Top_Coords_Of_Box(boxx, boxy)
racoon1Img = pygame.image.load('image/racoon1.png')
racoon2Img = pygame.image.load('image/racoon2.png')
racoon3Img = pygame.image.load('image/racoon3.png')
if pic == 'racoon1':
DISPLAY.blit(racoon1Img, (left + eight, top + eight))
elif pic == 'racoon2':
DISPLAY.blit(racoon2Img, (left + eight, top + eight))
elif pic == 'racoon3':
DISPLAY.blit(racoon3Img, (left + eight, top + eight))
하드코딩으로 길게 되어있는 부분을 보기 쉽도록 짧게 가져왔습니다.
eight = int(BOXSIZE * 0.01)을 통해 박스의 크기를 정수 형태로 eight 변수에 담아주었습니다. left_Top_Coords_Of_Box(boxx, boxy)가 박스 좌표를 설정하는 함수인데, 해당 박스 좌표를 left와 top에 담아준 뒤 후에 이미지를 그릴 수 있도록 DISPLAY.blit(racoon1Img, ~ 안에 이미지의 크기를 지정해주었습니다.
해당 이미지를 쓰기 위해 .image.load를 통해 이미지를 불러와 racoon~Img 변수 안에 넣어주면 끝입니다.
- 성공(Success), 실패(Fail) 텍스트 추가 및 값 저장
message_Success = FONT.render("Success : {} / 10".format(Success), True, BLACK)
message_Fail = FONT.render("Fail : {} / 15".format(Fail), True, BLACK)
DISPLAY.blit(message_Success, (5, 2))
DISPLAY.blit(message_Fail, (5, 32))
Success와 Fail 텍스트를 적어주기 위해 font 형태를 따로 변수(FONT)로 만들어 준 뒤 Success : {들어갈 값}과 Fail : {들어갈 값}을 정해주었습니다.
이제 DISPLAY.blit을 통해 게임 화면 (가로, 세로)에 해당 메시지가 담긴 변수를 넣어주면 됩니다.
# 만약 이미지가 서로 다르다면? 서로 다르니 둘 다 닫기
if icon1shape != icon2shape or icon1color != icon2color:
pygame.time.wait(500) # 0.5초 후
# 박스를 덮는다.
cover_Boxes_Animation(mainBoard, [(firstSelection[0], firstSelection[1]), (boxx, boxy)])
# 선택된 첫번째와 두번째 박스를 닫는다.
revealedBoxes[firstSelection[0]][firstSelection[1]] = False
revealedBoxes[boxx][boxy] = False
# Fail 점수 추가
Fail += 1
# 만약 이미지가 모두 같을 경우? Success 점수 추가
# or로 설정 시 이미지1.1, 이미지2.1이 같아도 점수가 추가됐었음 > and로 바꾸니 해결
if icon1shape == icon2shape and icon1color == icon2color:
pygame.time.wait(500) # 0.5초 후
Success += 1
이번엔 Success와 Fail 텍스트의 생성과 위치를 정해주었으니 해당 조건들에 맞을 경우 해당 값들이 추가되도록 설정해 주었습니다.
그렇게 이미지가 서로 다르면 Fail += 1을 통해 Fail에 1을 담아주었고, 이미지가 서로 같으면 Success += 1을 통해 Success에 1이 추가되도록 해주었습니다.
마지막으로 해당 코드를 while문과 같은 반복문 안에 넣어주면 계속 점수가 갱신되는 것을 확인할 수 있었습니다.
- 백그라운드 이미지 변경 및 게임 종료 시 백그라운드 이미지 전환
def game_Won_Animation(board):
wimage1 = WONIMAGE1
wimage2 = WONIMAGE2
for i in range(9):
wimage1, wimage2 = wimage2, wimage1
DISPLAY.blit(wimage1, (0, 0))
pygame.display.update()
pygame.time.wait(500)
해당 백그라운드 이미지는 화면 전환에 있는 DISPLAY.blit()으로 지정해주었고, 백그라운드 이미지를 변경을 위해 해당 game_Won_Animation() 함수를 선언해주었습니다.
WONIMAGE1과 WONIMAGE2에는 각각 .image.load를 통해 이미지 경로가 저장되어 있고 해당 변수를 wimage1과 wimage2에 각각 넣어준 뒤, 반복문(for문)을 통해 총 9번 반복하도록 지정해주었고 0.5초 간격으로 wimage1과 wimage2 이미지가 반복되도록 설정해주었습니다.
마지막으로 패배 시스템도 예정되어 있기 때문에 game_Lose_Animation() 함수를 추가로 만들어주고 이미지만 바꿔주었습니다.
- Game Clear 및 Game Over 관련 기능
# 게임 Clear 함수
def game_clear():
DISPLAY = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))
font_clear = pygame.font.Font('font/LeeSeoyun.ttf', 70)
font_after = pygame.font.Font('font/LeeSeoyun.ttf', 50)
clear_message = font_clear.render("Game Clear!!", True, YELLOW)
next_message = font_after.render("End after 5 seconds.", True, YELLOW)
DISPLAY.blit(WONIMAGE2, (0, 0))
DISPLAY.blit(clear_message, (120, 140))
DISPLAY.blit(next_message, (75, 220))
pygame.display.update()
sleep(5)
pygame.quit()
sys.exit()
# 게임 Over 함수
def game_over():
DISPLAY = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))
font_clear = pygame.font.Font('font/LeeSeoyun.ttf', 70)
font_after = pygame.font.Font('font/LeeSeoyun.ttf', 50)
clear_message = font_clear.render("Game Over.", True, RED)
next_message = font_after.render("End after 5 seconds.", True, RED)
DISPLAY.blit(LOSEIMAGE2, (0, 0))
DISPLAY.blit(clear_message, (140, 140))
DISPLAY.blit(next_message, (75, 220))
pygame.display.update()
sleep(5)
pygame.quit()
sys.exit()
#########################################################################
# Fail 구간
# Fail 점수 추가
Fail += 1
# Fail의 값이 10일 경우
if Fail == 3:
game_Lose_Animation(mainBoard)
game_over()
# Success 구간
Success += 1
# Success의 값이 10일 경우
if Success == 3:
game_Won_Animation(mainBoard)
game_clear()
Game Clear와 Game Over를 위해 함수를 각 하나씩 선언해주었습니다.
그리고 해당 함수 안에 게임에서 이기거나 지면 텍스트를 출력하도록 font 지정을 해주고 DISPLAY.blit()을 통해 해당 화면에 출력하도록 설정해주었고, 해당 문구가 출력된 뒤 sleep(5)를 통해 5초 동안 화면을 멈추고 pygame.quit()와 sys.exit()로 게임을 완전히 종료해주도록 만들었습니다.
마지막으로 Success와 Fail 점수를 더하는 곳에 각 값이 조건에 만족하면 Clear와 Over를 해주도록 함수를 실행하도록 해주면 끝입니다!
다음은 이렇게 완성된 같은 그림 찾기 'A racoon trick' 영상입니다.
파이썬 게임을 만들며 느낀 점
아직은 기초 문법을 익히고 난 뒤라 아직은 많이 부족하는 것을 느꼈습니다..
당장 파이썬 게임을 만드려니 막막하기도 하고 '내가 이걸 잘 만들 수 있을까?'라는 의구심이 제일 먼저 들었지만, 막상 자료를 조사하며 열심히 만들다 보니 처음 만든 것치곤 그럴싸한 형태가 나왔다고 생각합니다.
그래도 내가 자발적으로 무언가 기능들을 추가해가며 게임을 완성해가니 기분이 좋았고, 파이썬 공부에 있어 큰 도움이 되었다고 생각됩니다.
곧이어 시작된 인스타 UI 클론 코딩?!
이번에도 개인 프로젝트!
쉬는 시간을 그렇게 길지 않았습니다.
왜냐? 추가 프로젝트가 바로 있었기 때문입니다.
이거는 또 어떻게 해야 하는 것일까? 여태 배운 것이 도움이 될까?
생각만 하지 말고 인스타 UI 클론 코딩을 만들어보며 한번 다가가 보았습니다.
1. 일단은 80% 정도? 완성된 Instagram 페이지
Instagram의 페이지 형태와 다른 블로그에서 만든 Instagram 페이지를 참고하여 만들었습니다.
html 전체 구간을 담당하는 common.css와 페이지 상단의 navigation을 담당하는 navi.css, 게시글의 내용물을 담아주는 article.css, 마지막으로 우측에 있는 프로필과 친구 추천을 받을 수 있는 main.right.css 파일을 각각 따로 만들어뒀습니다.
저번 팀 프로젝트 때는 처음 만들어보는 웹 페이지이기도 해서 html 코드와 css코드를 한 파일 내에서 작업하였습니다.
그래서 두 번째로 있는 웹 페이지 제작에는 코드가 길어지는 것을 방지하고 코드를 좀 더 쉽게 찾기 위해 html과 css를 분리해주었고, css도 각 부분별로 분리하여 코드를 제작하였습니다.
아직은 만족하지 못한다!
100% 완성을 목표로..!
아직은 100% 완성을 하지 못했습니다.
처음으로 Git을 사용해 코드를 관리해보려고 했으나 거듭되는 실패로 컨디션이 저조해졌고, 시간적 손실과 파일이 날아가는 불상사까지 겹쳐지면서 많이 피곤했었습니다.
하지만 이대로 포기할 수 없었기에 컨디션은 조절하면서 쉬는 시간을 조금씩 줄여가며 추가 작업을 하였습니다.
그렇게 빠른 시일 내에 80% 정도의 완성도를 달성할 수 있었고, 기본적인 틀을 갖췄다 생각하여 후에 추가적인 기능들을 추가해보려고 합니다.
우선적으로 추가하려고 하는 것들은 다음과 같습니다.
- 상단 검색(search) 칸 좌측에 아이콘 달아주기
- carousel을 이용하여 게시글에 있는 사진 여러 장 배치하기
- 게시글의 글자 수가 일정 수준 이상으로 작성되면 more 등과 같은 버튼으로 더 볼 수 있도록 하기
이런 식의 기능을 조금씩 추가해볼까 생각하고 있습니다.
이번 주도 끝을 향해..
이번 주는 Python의 pygame을 이용해 내가 직접 게임을 만들어보기도 하고, Instagram 페이지를 따라 하여 클론 코딩을 해보기도 했습니다.
남은 Instagram 클론 코딩은 주말에 시간이 생기면 짬 내서 공부해보거나 빠르게 여러 가지 기능들을 추가해보고 싶네요.
이렇게 놓고 보니 단기간에 많은 프로젝트와 시행착오를 겪은 것 같습니다.
개인 프로젝트라고 해서 혼자만의 힘만으로 이끌어 올라간 것이 아니라, 함께하는 팀원들과 주변의 도움 또한 있었기에 계속해서 나아갈 수 있었다고 생각됩니다.
그래도 아직 많이 부족한 지식을 이끌고 여기까지 온 것이 약간 신기할 따름이네요.
역시 포기하지 않고 계속해서 노력하면 안 되는 것은 없을 것이라는 생각이 크게 와닿았습니다.
뭐라도 시도해보지 않으면 결과를 도출해낼 수 없고, 성장해나가는 계기가 생기지 않을 것이라 생각됩니다.
이것을 끝으로 포스팅을 마치겠습니다.
긴 글 읽어주셔서 감사합니다.
'TIL 및 WIL > WIL (Week I Learned)' 카테고리의 다른 글
| [WIL] 22.05.23 ~ 22.05.27 (사물인식 팀 프로젝트 끝, Django 시작) (0) | 2022.05.27 |
|---|---|
| [WIL] 22.05.16 ~ 22.05.20 (머신러닝 강의, 사물인식 팀 프로젝트) (0) | 2022.05.20 |
| [WIL] 22.05.09 ~ 22.05.13 (인스타 팀 프로젝트의 끝, Git과 머신러닝) (0) | 2022.05.14 |
| [WIL] 22.05.02 ~ 22.05.06 (시작, 팀 프로젝트) (0) | 2022.05.06 |
| [WIL] 22.04.18 ~ 22.04.22 (첫 만남부터 첫 미니 프로젝트까지!) (0) | 2022.04.22 |
