[포폴] 2D 한달 포트폴리오 "블라스퍼머스(Blasphemous)"모작

 

2D 포트폴리오 블라스퍼머스 Blasphemous 모작

 

11월 부터 4월까지 2D 프로그래밍 기초반 수업을 듣고 마지막 한달 포트폴리오 제작을 진행했다.

그동안의 배움을 기초로 4주간(게임선정 & 이미지작업 기간 제외한) 열심히 만들어본 게임은 블라스퍼머스!

 

이게임은 2D도트  + 횡스크롤 + 어두운배경 + 플레이어와 몬스터의 세세한모션과 상태  + 어두운배경에 맞는 어두운 음악 + 그로테스크한 게임이다.

 

재미있기도 했고 힘들기도 했던 포폴이 끝나서

3D포폴 제작할때 다시한번 참고 하기위해 블로그에 정리해본다.(참고가 될지는 아직은 모르겠다)

---

1. 사전 준비

한달이라는 긴 시간의 계획을 세우려니 이전 1주일 포폴을 했던 경험으로 미루어 시간이 많아 느긋하게 생각했다.

(이때 왜이렇게 생각했을까....다시한번 느끼지만 시간이라는게 엄청 빠르게 지나가는걸 느꼈다.)

 

아무튼.. 처음 사전준비를 시작할떄 느긋한 마음으로 무슨 게임을 시작할까? 생각해보고 여러가지 스팀게임을 찾아보고

에셋을 뜯을수 있는 Unity 기반의 게임들 위주로 찾아다녔다.

이때 선생님께서 말씀하시길.(☆중요☆)

"얘들아 시간이 많은 것 같아도 포폴 시작하기전에 이미지작업은 서둘러 시작하는게 좋을 거야"

(이거진짜 꿀팁이었다)

 

그렇게 약 1주일이라는 귀한 시간을 허무하게 보냈던 것 같다.

(반정도는 조사하고 나머지는 직접게임플레이해보고)

 

그때 선발 했던 게임 4가지!

 

1. 스컬 Skul :: The Hero Slayer

2. 던그리드 GUNGREED

3. 블레이드어썰트 BLADE ASSAULT

4. 블라스퍼머스 BLASPHEMOUS

 

총 네가지의 후보가 있었지만 우선 던그리드는 후보에서 바로 탈락했다.. 

지난번 1주일 단기프로젝트 포폴 모작으로 도전했었기 때문에 미리 추출한 아주 깔끔한 에셋들이 있었지만 정말정말 아쉽게도 이번에는 다른 게임을 도전해 보기로 했다.  2. 던그리드 GUNGREED 탈락!

https://rhksgml78.tistory.com/180

[포폴] - 2D 1주 포트폴리오 "던그리드(Dungreed)모작"

 

그다음 순위로 해보고싶었던 게임이 스컬 이었는데 에셋추출 정말 잘 되었고...

사운드 추출도 정말 잘 되었고..

흠잡을 곳이 없었으나! 스프라이트가 문제였다..

VS C++ 을 이용해서 게임을 제작해야하다보니.. 스프라이트가 한장한장 깔끔하게 혹은 

한장에 모여져있더라도 간격이 깔끔하게 있어야 애니매이션이 가능한 스프라이트를 제작하겠는데

이모양이었다... 도저히 정해진 시간안에 이스프라이트를 쪼개서 깔끔하게 만들 자신이 없었다.

스컬 재미있게 했던거라 해보고싶었지만 ..

때문에 스컬도 후보에서 탈락. 1. 스컬 Skul :: The Hero Slayer 탈락!

 

다음으로 블레이드어썰트 게임은.. 에셋추출조차 안되어서 실패했다.(되는것같다가 중간에 안되는)

다른분들 보니까 만든분도  있던데 어떻게추출했던걸까 ...

때문에 추출 실패로 탈락. 3. 블레이드어썰트 BLADE ASSAULT 탈락!

 

정해둔 게임 4개중 3개의 후보가 사라지고.. 솔찍히 이때 엄청 초조했다.

일주일 이라는 기간동안 꼴랑 4개게임 정해놓고.. 혹시 마지막게임도 에셋추출이안되거나 스컬처럼 되있으면어떻게하지?? 싶었는데 ...

결론적으로 이미지 에셋이 깔끔하게 잘 추출되었다.

그렇기때문에 블라스퍼머스 게임을 목표로 잡았다.

솔~~찍히 이게임은 엄청 재미있던것도아니고 내취향게임도아니고.. (도트그래픽 + 세세한모션 만큼은 마음에듬)

이미지가 깔끔하게 잘 추출된것에 감사하며 다음 계획을 세우기 시작했다.

 

Ps. 게임 정하고 계획잡기전에는 몰랐었다.. 이미지만 깔끔하게 뜯기고 사운드가 추출이 안된다는걸....이걸 뒤늦게 알아차리고 나중에 온갖 사운드를 찾아다니는데 많은 시간을 소비하게 된다...

---

2. 이미지작업 & 계획 세우기

우선 추출된 이미지를 바탕으로 스프라이트를 제작하기 시작했다.

 

이미지 추출은 이전 일주일 포트폴리오 제작때처럼 추출! (https://rhksgml78.tistory.com/176)

[참고자료] 2D 게임 에셋 추출 하기

 

처음에는 스테이지를 몇개로 나눌지 어떤몬스터를 만들지 계획도..생각하지않고 마음에드는 이미지는 모조리 작업을 하기 시작했다.(무슨일이든 계획이 중요한 것 같다..뭐든 계획적으로해야 시간도아낄 수 있었다.)

 

스프라이트 제작을 하면서 처음으로 구글시트 라는 것을 이용해 주/일 단위로 계획표를제작했다.

 

https://docs.google.com/spreadsheets/d/e/2PACX-1vTSdwKjlmLhEzSvB8bC42A0WSFi4H7fWK2yxoCSfvaiSFfEyiPZbZ3N87DEe1m6LKHFZczQXGZMva19/pubhtml?gid=0&single=true 

포트폴리오 일정표 - Google Drive

이전 직장생활할때 엑셀썼던거랑 비슷하지만 무료로 사용할 수 있고 공유도 쉽다는게 너무 신기했다..

진짜 구글최고

 

이미지작업은 주로 Krita & piskel 처럼 무료로 사용가능한 것들로만 작업했다.

Krita Desktop | Krita

 

Piskel - Free online sprite editor

이미지를 나누거나 편집할때는 Krita를 포토샵처럼 사용할 수 있었고

여러장의 이미지를 하나의 스프라이트로 제작할수있는 것이 Piskel 이었다.

 

이때 주의할점은 피스켈에서 편집&완성된 이미지는 출력시 색상이 어둡게 노출되는 현상이 있는데

이미지를 그냥 단순하게 Krita에 불러와서 그대로 저장하면 원본의 색으로 노출 시킬 수 있다.

 

이미지작업을하면서 제일 큰 문제점은 

스프라이트를 만들었을때 이미지의 중심점들이 동일한 위치가 아니었던 것이다.

특히 보스와 플레이어 캐릭터의 이미지 중심은 정말 제멋대로 였다..

단순하게 이미지를 이어붙여 스프라이트를 제작했을때

이미지를 출력시켜 움직이는 ANIMATION을 만들면 ......플레이어가 바닥에있다가 갑자기 중간에 떠있거나하는 경우가 생기기도 한다.

 

중심점이 완벽하게 맞춰지지 않는 이미지는 코드에서 각각의 위치를 세세하게 조정하는 것으로 어떻게든 맞출수 있었다.

 

때문에 이미지의 중심을 한곳에 맞추어 이동시키는 작업을 하는것에 시간이 매우 많이 소비되었다.

이미지작업의 80% 이때문에 시간이 소모 되었다.

 

원래라면 플레이어와 보스 이미지완료후 어떤몬스터를 넣을지 정하고 바로 몬스터 이미지를 작업해야했으나

맵을 구성하지않고 어떤 몬스터를 내야할지 정하는것은 순서가 틀린 것 같았다.

누가봐도 실내의 맵인데 밖에있을 법한 몬스터가 있으면 분위기가 이상하지 않나 ..? 라는 생각에

타일맵처럼 맵을 만들어줄 이미지의 정리를 시작했다.

 

하지만 이때 또 문제가 생기는데 ... 스프라이트로 추출 한 이미지들이 오브젝트 처럼 낱개로 나뉘어져 있거나 분해되어있어서 타일맵처럼 이용하기 쉽지가 않았다..

 

아래처럼 한조각 한조각 레고처럼 따로따로 있던 이미지들을 타일맵처럼 배치하기위해서 

가로세로 픽셀단위로 크기를 맞춰주고 한장의 이미지로 만드는 작업을 진행했다.

결과 적으로 아래와 같은 이미지를 여러장 만드는데 또 시간이 괸장히 많이 필요했다..

지저분해보이지만 .. 이때는 이것이 나의 최선이었던 ..

 

어찌저찌 타일맵이미지까지 만들고나니 이제 진짜!

본격적으로 전체적인 흐름이나 컨셉등을 생각하기로 했다.

 

Ps. 생각해둔 컨셉의 맵의 분위기에 맞는 몬스터도 이때 선정했고

몬스터 스프라이트는 무난~하게 진행되었다.

몬스터 스프라이트가 무난했던것은 플레이어와 보스에서 고생한 탓인지몰라도 쉽게 느껴졌었다..

---

3. 기본 틀 만들기

처음만들어진 것은 게임의 시작인 메뉴화면 ~ 엔딩화면까지의 각각의 씬(Scene)을 구성하는 것이었다.

실제 코드로 짜기전 미리 시작부분부터 끝까지 어떻게 진행하는 느낌으로할까 ... 생각해 둔것이있기 때문에

시간이 오래 걸리지는 않았다.

 

MainScene - 게임시작시 첫화면 (단순한 배경 애니매이션 + 게임실행 버튼1개만 있는 화면)

LoadingScene - 본격적인 게임 시작전 화면 (로딩 애니매이션 + Event Scene)

Scene1(비전투구역) - 플레이를 위한 조작법을 확인하는 스테이지

Scene2(전투구역) - 조작법을 익히고 처리가 간단한 몬스터 + 함정이 설치되어있는 스테이지

Scene3(전투구역) - 좀더 많은 몬스터(다양한)종류로 전투중심 스테이지

BossScene(보스전) - 다양한 패턴을 가진 보스를 상대하는 보스 스테이지 (CutScene + Ending 포함)

 

위처럼 스테이지 구별은 간단하게 되어있다.

각 스테이지를 기초로 어떤 오브젝트를 구성할지는 조금더 뒤의 계획으로 세워두고

일단은 플레이어와 보스몬스터의 FSM 을 우선적으로 생각해야 했었다.

이전 1주일 포폴을 제작했을때 플레이어의 FSM은 생각보다 적었던 것이었다 ... 

 

보스 & 몬스터의 FSM은 생각보다 간단하게 진행되었지만

플레이어의 FSM은 상태가 생각보다 많았고 플레이어 클래스자체에서만 판단하기에 어려워

각씬에서도 변경해야 하는 경우도 있었기 때문에 플레이어 상태구분이 많이 힘들었다.

 

이것저것 플레이어의 상태가 필요하다보니 점점 늘어났다.. 아래는 플레이어 캐릭터의 틀을 짜면서 만들어진 FSM 이다.

플레이어의 상태는 기본상태에서 파생된 형태이다.

기본에서 달리기 점프 회피 앉기 막기 피격상태 등으로 크게 분류되고

변한 상태에서 그다음의 상태로 자연스럽게 이어지는 느낌으로 구성해 보았다.

원작에는 플레이어의 상태가 이보다 훨씬 많지만 작업하지 못한 상태가 있어 조금 아쉽기는 했다.

 

여기서 문제가되는것이 플레이어 Class 내에서 만 판단할수 없는 것들이 있었고 그런부분들은 각 스테이지

Scene 에서 판단을 진행하고 플레이어 객체의 상태에 변화를 주었다.

 

예를들자면 몬스터와 충돌했을때 플레이어는 지상에서 충돌했는가 혹은 점프상태에서 충돌했는가

플레이어의 체력이 없어져 사망상태에 이르렀는가 플레이어가 바닥에 위치해있는가

혹은 달리는도중 바닥이 없어져 추락해야하는가 등이 이에 해당되었다.

 

일단 기본적인틀은 IDLE 상태에서부터 시작해서 만들었었다.

처음부터 계획을잡아놓고 계획대로 대지 않는 경우도 많았기때문에 필요하면 그때그때 FSM을 수정 및 추가 보완해 나가며 진행 했다.

 

Ps. 보스의 FSM은 패턴화 되어있기때문에 생각보다 쉬웠고 기타 몬스터류등은

기본상태, 공격상태, 이동상태, 사망상태 + 특수이벤트용상태 만으로 구성되어있어 간단했다.

 

이렇게 기본틀은 만들어 졌고 이어서 상세한 기능들으 구현 하기 시작했다.

---

4. 기능 구현

본격적으로 코드를 짜고 Class 를 구성하기 시작했다.

기본적으로 플레이어와 보스는 단 하나의 객체가 필요하기때문에 최상위 클래스인

Character Class 를만들어 가장 기본적인 범위를 설정할수 있는 정도만 상속 받았다.

플레이어의 FSM을 짜고나니 아무리생각해도 플레이어와 보스는 따로 나누어 세세하게 설정하는 게 좋을 것 같았다.

 

몬스터의경우 대부분이 비슷한 기능이 요구되었기 때문에 

최상위 클래스로 Monster Class 를 만들어 충돌용 콜라이더, 공격용 콜라이더, 피격용 히트박스

상태변화, 업데이트, 렌더 등등 거의 상속받아 사용되었다.

다만 한두가지의 몬스터를 대량으로 사용하기보다 하나하나의 몬스터마다의 특성을 살려 만들어 보고 싶었기 때문에 상세한 FSM 등을 조금씩차이가 있다.

다양하게 연출해 보고 싶었기 때문에 각각 몬스터 클래스들은 시간이 많이 소요되었지만 어려움은 없었다.

 

세세한 기능 구현중 가장 어려웠던 부분은 플레이어의 중력 기능 부분이었다.

우선 플레이어의 각상태마다 가지게 되는 중력이 다르도록 설정하였고 플레이어의 상태는 입력 혹은

플레이어가 가지고 있는 다양한 충돌점들을 통하여 타일맵의 맵 상태에 따라 변하도록 하였다.

하지만 플레이어가 점프를 하는상태에서도 좀더 세세하게 다음 동작으로 이어지기 때문에

여기서 각각의 중력과 충돌판정을 위해서 다수의 콜라이더가 필요하게 되었다.

이것저것 추가하다보니 정말 지저분해 보인다.

 

맵구성은 기본적으로 플레이어의 충돌을 담당할 Wall 상태의 타일맵과

단순히 배경의 이미지를 연출하는 Background 타일맵

마지막으로 조금더 화려하게 보일수있도록 장식하는 Object 타일맵의 3가지를 사용하였다.

가장 기본적으로 3가지를 동시에 사용하였지만

각스테이지마다 조금더 자연스럽고 멋있어보이게 상호작용이 가능한 Object는 따로 클래스를 만들어 사용하였다.

 

맵의 오브젝트는 최상위 클래스 MapObject 클래스를 만들고 그대로 상속받아 사용되었다.

상속받은 각 클래스는 간단히 콜라이더의 사이즈를 조절하거나 이미지를 변경시켜 사용하기만 하면 되었기 때문에 편리했고 플레이어와 Object 간의 상호작용은 각 Scene 에서 판단하였다.

오브젝트의 종류는 크게 두가지로 나뉘었다.

1. 플레이어와 상호작용 오브젝트(Scene1에서 기도할수있는 제단, 파괴가능한 촛대, 함정)

2. 단순히 맵을 장식용(Scene2의 그림자느낌의 펄럭이는 장식, Scene3의 바람에움직이는 풀, 안개)

이외의 보이는 것들은 단순한 이미지 혹은 맵의 일부분이다.

 

 

이렇게 상세하게 만들다보니 조금 아쉬운 부분이 있었는데 바로 조명 LIGHT 부분이었다.

LIGHT의 경우 C++에서 간단하게 적용할 수 없었기때문에 실제 눈으로 보여지는 색상 부분을 조절해야 했다.

Shader에서 Color 를 조절하여 일정범위 안의 색을 원본색에 가깝게 표현하고

범위 밖의 색을 조금더 어둡게 표현하여 마치 조명의 하이라이트 같은 느낌으로 적용시키는 것이 가능했다.

아래의 이미지를 보자면

윗부분의 샹들리에 부분은 Shader에서 컬러값을 더하고 빼고 한 효과등으로 적용된 조명 부분이다,

일정범위의 색상을 조절하기때문에 단순히 선으로 그린듯한 동그란 경계선이 생기는 부분이문제였는데 이부분을 흐릿하게하여 부드러운 조명의 연출을 만드는 것이 어려웠다.

 

스테인드글라스의 아래쪽에 위치한 조명은 사실 조명이 아니다 ..

대각선 그것도 직선적인 느낌의 조명을 만들 수 없었기 떄문에

대각선 형태의 도형이미지를 만들고 이미지의 투명도 값을 조절하여 반투명한 이미지로 빛이 비추는 느낌을 주었다.

작업하고나니 생각보다 너무 자연스럽고 예뻐서 뿌듯했다.

 

그리고 Scene2 몬스터와 전투하는 구간에서 촛대가 9개 배치되어있는데

각 촛대마다 조명의 위치를 잡아주었고 촛대가 파괴될 경우 조명이 꺼지는 느낌을 주었는데

생각지도못하게 조명이 하나씩 없어지면서 배경이 점점 어두워 지는 효과가 나왔다!

이부분은 생각하지 못하게 재미있는 효과가 나와서 너무 신기했다.

 

조명기능을 넣는 작업을하면서 조금 불편한 점이 있었는데 바로 화면에 보여지는 플레이어의 위치였다.

즉 플레이어를 보여주는 카메라 시점의 위치가 너무 중앙에 위치해 있어 플레이어의 윗부분 화면의 상단 부분이너무 답답한느낌이 들었다. 

 

때문에 기본적인 시점의 범위는 맵의 범위로 제한 하되

플레이어를 기준점으로 화면이 보여지는것이아닌 플레이어보다 약간 위쪽을 기준점으로 잡아주는것으로

시야의 답답함을 해결하였다.

이때 시점을 조절하면서 플레이어의 클래스에 시점의 위치를 설정할수 있도록 만들었고

차후 보스전에서 CutScene를 노출시킬때 시점을 변경해주거나 Scene2 에서 게이트가 열리는 이벤트를 보여주기 위해 시점을 변경하는데 유용하게 사용하였다.

 

플레이어가 레버를 자동시키면 시점이 변경되고 게이트가 열리는 장면을 보여준다

BossStage에 진입하여 플레이어가 일정구간내로 접근할 경우 화면의 시점이 변경되고 CutScene 연출이 시작된다.

 

이런식으로 이렇게 저렇게 다양한 기능들의 도움을 받아 조금더 게임답게 구성해 보려고 노력했던 것 같다.

기능구현이 끝나고 슬슬 정말 게임답게 사운드를 넣어보려고하는 순간..

여기서 또 힘든 상황이 생기게 되었다.

이전 게임의 에셋을 추출할때 음원만 전혀 추출 할 수 없었는데

이전에 모작했던 던그리드나 다른게임의 사운드를 사용하면 될 듯 하였다.

하지만 보다싶이 게임의 분위기 자체가 매우 어둡기때문에 미리 준비해둔 사운드들이 분위기에 너무 어울리지 않았다.

무료로 사운드를 구할수 있는 곳을 여기저기찾아다니고 유튜브를 찾아보고...

어찌저찌 나의 기준으로 게임의 분위기에 맞는 사운드들을 구하고 적용 해 보았다.

 

사운드 적용 작업에서 가장힘들었던것은 어울리는 사운드를 찾는것도 문제였지만

각몬스터의 특정한 행동에서 필요한 사운드를 이미지의 프레임에 맞추어 재생 시키는 것도 쉽지 않았던 것 같다. 특히 타격 직후에나는타격음이 0.0초 단위로 늦게나오거나 빨리나오거나 하는 등의 문제로

게임이 렉이걸려 느려지는 현상이있을때처럼 출력되는것이 정말 .....하....

때문에 포폴이완성했어도 사운드에 너무 아쉬운 느낌이 남는 것 같다.

이때 게임은 역시 비주얼이라고 생각했던 관념이 조금은 바뀌게 되었다. 눈으로 보여지는것도 그렇지만

귀로 들리는 것도 모두가 소중한 것이었다..(사운드 만드시는 분들 감사합니다)

---

5. 녹화 및 편집 작업

예전에 1주일 포폴때 태어나서 처음으로 영상녹화+자막넣는편집 을 해보았는데 쉽지 않았었기 때문에 이번에도 쉽지 않을 것을 예상하고 빨리 진행하고자 했었으나...

이미지작업+기능구현에서 너무나도 많은 시간이 소비되어 결국 정말 마감 2일전에 복습해서 영상 찍고 편집을 시작하였다.

 

영상 촬영은 https://obsproject.com/ko

Open Broadcaster Software | OBS

무료로 다운 받아 사용가능한 OBS를 사용하였다.

여기서 또 문제점이 생겼는데..OBS로 녹화할때 mkv 확장자로 고화질 녹화를 할 경우 영상이 버벅이거나 사운드가 틀어지는 오류들이 너무 많이 발생했다.

때문에 검색을 통해서 좀더 가볍게 녹화할 수 있도록 설정을 변경할 필요가 있었고 전문가가 아니기 때문에 쉽지 않았다..

그래도 이것저것 찾아보면서 조금이라도 배울 수 있었던 것 같다.

다양한오류들로 영상을 찍고 지우고 찍고 지우고 하다보니 하루의 시간이 또 소모 되었고..

만족스럽지는 못하지만 최대한 정상적으로 찍힌 영상을 사용하여 편집을 진행하였다.

 

영상 편집또한 무료 프로그램을 사용하였다 https://www.blackmagicdesign.com/kr/products/davinciresolve

DaVinci Resolve 18 | Blackmagic Design

지난번 일주일 포폴 제작후 사용했던 다빈치리졸브 프로그램이다..

사용한지 오랜기간이 지났고 사용할일이 없었기에 예전의 기억은 초기화 된 상태였다.

때문에 이것도 유튜브를 찾아 다시 사용법을 익히고 영상자르고 멈춰있는 화면을 만드는 것을 배우고 ..

또 하루의 시간이 소모되었다. 뭐하나 쉬운게 없는 것 같다.... 정말로.

 

포폴제작의 마감 마지막날 같은 시기 포폴을 제작했던 분들과 밤새 디스코드로 서로 모르는것들을 질문하고 알려주고 힘들었지만 재미있었다.

그렇게 마지막날 밤샘으로 포폴제작이 끝이났다.

한달+a(사전조사 준비기간등)을 포함하여 긴시간 이라고 생각했지만

원하는 기능을 넣고 이것저것 하다보니 정말 순식간에 시간이 지나간 것 같다.

 

이렇게 낙서장처럼 아니면 일기장처럼 남겨두면 다음에 뭐든 만들때 도움이 되지 않을까? 생각해본다.

반성할 점으로는 기간이 많이 남아있다고 너무 여유 부리지 말자.

 

나중에 언리얼을 배우고 3D게임 포폴을 만들때 그때는 꼭 부지런하게 준비도 철저하자.