[유튜브 / 업로드 대본] 빌드박스와 포토샵으로 게임만들기 #1

https://www.youtube.com/watch?v=15VOmGuUq3k 

좋아요 , 댓글, 구독 감사합니다 :D

---

글자 : 6,982자

영상 길이 : 19:06

---

 

안녕하세요. 공부하는 다해입니다.

포토샵과 빌드 박스를 이용해서

직접 게임을 만들어 보고자 해요.

 

처음이라 모르는 게 많지만 공부하며 얻은 팁이나

실수를 공유하기 위해 영상을 제작하기로 했습니다.

 

이번 영상은 빌드박스 설치, 빌드박스 튜토리얼 영상 번역,

포토샵을 이용해서 배경과 캐릭터를 분리하는 방법,

분리한 이미지를 빌드 박스에 적용하기로 구성되어 있습니다.

아무래도 포토샵을 다루는 부분이 많을 것 같네요.

 

설명란에 해당 위치 링크를 걸어놨으니

이동해서 원하는 부분만 보셔도 괜찮습니다.

 

그럼 시작하겠습니다.

 

빌드박스 설치를 위해 사이트에 접속해주세요.

영어지만 우리에게는 듬직한 번역기가 있습니다.

버튼을 누르면 다운로드 페이지가 나옵니다.

현재 우리는 유료 플랜을 이용할 필요가 없으니

무료를 다운 받으면 됩니다.

 

그런데 빌드박스는 2D와 3D로 나뉘어져 있어요.

우리는 요기, 우측 탭을 클릭합니다.

클릭, 클릭, 저장합니다.

설치합니다.

가입 과정이 필요한데 구글 아이디가 있으면 편합니다.

 

실행 첫 화면입니다.

우선 튜토리얼을 볼까요?

홈페이지의 튜토리얼 페이지로 연결되네요.

 

텍스트 위에서 우클릭, 번역을 눌러줍니다.

 

영상을 눌러보면 역시 영문입니다.

전 영어가 약하기에 유튜브 기본 기능인

자막 번역을 이용하겠습니다.

 

자막, 설정, 자동 번역 버튼을 눌러 한국어로 바꿔주세요.

드래그로 자막의 위치 변경도 가능합니다.

 

시간 되실 때 튜토리얼 영상을 보실 것을 추천드려요.

툴 사용 방법과 게임에 대한 아이디어를 얻을 수 있습니다.

다른 영상도 한글 번역이 잘 되고 있습니다.

 

다시, 실행 첫 화면입니다.

새로 만들기 버튼을 눌러주세요.

여기서 게임플레이 타입을 고를 수 있어요.

저는 비행기 게임을 선택했습니다.

아래에서 게임의 설정을 선택 할 수 있습니다.

뭔가 많지만 차차 알아보고,

지금은 그냥 기본으로 하겠습니다.

 

개발 화면입니다.

우측 상단의 버튼을 누르면 게임을 직접 플레이 할 수 있습니다.

 

폰 기종에 따른 미리보기 화면을 지원하고 있습니다.

자동으로 미사일이 나가는 비행기 ㅅ

자동으로 미사일이 나가는 비행기 슈팅 게임이네요.

이 쪽 버튼을 누르면 해당 방향으로 360도 회전 합니다.

맵 확인을 위해 더 진행해보았는데요.

같은 맵이 반복되는 구조입니다.

이제 비행기의 이미지를 바꿔볼게요.

 

포토샵에서 이미지를 불러옵니다.

현재 opensea에서 판매 중인

저의 NFT 캐릭터입니다.

이미지를 찾기 어려우시면

픽사 베이 같은 저작권 프리 사이트를 이용해주세요.

 

지금 보이는 이미지는 배경과 토끼가 합쳐져 있어요.

제가 제작한 이미지라 분리된 파일은 가지고 있으나

직접 만든 사람이 아니면

분리된 이미지를 가지고 있는 경우는 드물죠.

 

웹에서 분리된 이미지를 다운 받지 않으면

직접 배경과 캐릭터를 분리 시켜야합니다.

캐릭터를 배경과 분리하는 방법은

펜툴, 올가미 툴, 마법봉, 지우개, 퀵마스크 등

무척 다양합니다.

 

이미지에 따라 적당한 방법을 사용하면 되는데요.

이렇게 외곽선이 뚜렷하고 배경 색과 차이가 많이 날수록

쉽게 분리 할 수 있습니다.

 

최대한 따라 하기 쉬운 방법으로 분리를 해보겠습니다.

일단 백그라운드 레이어를 복제 해야 되는데요.

레이어를 클릭하신 다음에 단축키 Ctrl+J

혹은 역시 상단 레이어 메뉴에 가서

여기 있는 Duplicate layer를 눌러 주세요.

복제가 되었으면 이 사이에 빈 레이어를 추가합니다.

 

빈 레이어는 내가 선택한 레이어 위에 생기므로

하단의 백그라운드 레이어를 누르시고

Ctrl+Shift+N. 새 창이 뜨죠.

OK 누르시면 되고요.

혹은 직접 이쪽에 있는 플러스 버튼을 누르세요.

 

레이어가 위에 생겼을 경우에는

누른 상태에서 바로 내려주시면 됩니다.

 

이제 빈 레이어가 선택된 상태에서 단축키 G

혹은 이쪽의 툴바에 있는 페인트 버튼을 눌러 주세요.

 

혹시 단축키를 눌러도 변하지 않는 경우가 있어요.

그럴 때에는 상태 표시줄에 있는 언어를 확인해 주세요.

이렇게 한글의 경우에는 단축키가 먹지 않고요.

영어로 되어 있을 때만 단축키가 원활히 작동합니다.

 

확인이 되셨으면 이제 이쪽 툴바 하단에 있는 컬러 피커를 눌러

전경색을 눈이 좀 편한 색으로 바꿀게요.

어두운 녹색을 선택해 보겠습니다.

 

이쪽 색상이 바뀌었죠.

이제 빈 레이어가 선택된 상태에서

캔버스쪽에 있는 바탕을 클릭합니다.

 

변화가 없는 것처럼 보이지만

이쪽 레이어창의 미리보기 아이콘이

방금 뿌린 색이 채워져 있는 것을 확인하실 수 있어요.

바로 위 레이어의 눈을 꺼주시면

캔버스에서 바로 확인이 가능합니다.

 

이 작업을 하는 이유는 나중에 배경을 지웠을 때

캐릭터가 잘 분리되어 있는지 확인하기 위해서예요.

 

기본 작업이 끝났으면

백그라운드의 눈을 꺼주시고 작업할 레이어의 눈을 켜주세요.

 

이쪽 툴바에서 지우개 모양이 보이시나요.

길게 눌러서 매직 지우개 를 선택해 주세요.

지우개의 단축키는 알파벳 E 고요.

Shift+E를 누르면 다른 지우개의 변경이 가능합니다.

Shift+E 바뀌는 게 보이시나요.

지우개 선택 후 작업 할 레이어를 눌러 주시고요.

바탕을 눌러주세요.

 

배경이 지워지는 것이 바로 보이시죠.

하늘색과 민트색이 구분돼서 지워지는 것을 확인할 수 있어요.

이렇게 일일이 누르셔도 되고요.

상단의 Tolerance 수치를 좀 올리면

한 50 정도?

민트와 하늘이 같이 지워집니다.

 

이 수치가 커지면 비슷한 색이라고

인식하는 허용치가 높아 져서

같이 삭제가 되는 겁니다.

 

이제 얼추 커다란 부분은 삭제가 되었는데요.

이런 작은 부분은 단축키 Z

혹은 이쪽에 있는 돋보기 버튼을 클릭하시고

 

캔버스에서 아래로 드래그를 하시면 확대가 됩니다.

돋보기 상태에서 위로 드래그를 하거나

Alt를 누르고 클릭하면 화면이 축소됩니다.

 

작업을 하시다가 지우지 말아야 될 곳을 지우는 경우가 있어요.

이렇게 이런 경우에는

History 메뉴에서 위로 요렇게 누르시면

내가 작업한 부분을 거슬러 올라 갈 수가 있습니다.

 

History 메뉴가 보이지 않으시면

상단 Window 메뉴에서 History를 찾아

눌러주시면 확인하실 수 있습니다.

 

이제 얼추 바탕을 다 지웠습니다.

다음은 토끼와 다른 객체가 겹치는 부분을 분리해야겠습니다.

올가미 툴 을 사용해도 되지만

마우스를 사용할 때 조금 불편하더라고요.

일단 손이 좀 아프고 떨려서

제가 원하는 퀄리티를 내기 힘들 더라고요.

 

그래서 전 펜 툴을 사용하겠습니다.

이쪽 툴바에 있는 펜촉 모양을 눌러주시거나

단축키 P를 눌러주시면 됩니다.

 

시작점을 클릭해주시구요.

내가 가야 할 방향의 지점의 끝에서

클릭 후 마우스를 떼지 말고 드래그 해 주세요.

모양이 얼추 맞다 싶으면 떼주시면 됩니다.

 

실수로 손가락을 뗄 수가 있는데요.

이때에는 Ctrl을 누른 상태에서

이 방향 점을 잡고 돌리면 곡선을 다시 조절할 수 있습니다.

 

이 과정에서 확대와 축소를 해야 할 경우가 있어요.

그럴 때는 Alt를 누른 상태에서

마우스휠을 돌리시면 축소와 확대가 가능합니다.

 

확대 후 캔버스의 위치를 바꾸고 싶으실 때가 있는데요.

이럴 때에는 스페이스를 눌러주세요.

마우스 포인터가 손바닥 모양으로 바뀌면

이때 화면을 누르고 원하시는 방향으로

드래그를 하시면 화면이 이동이 됩니다.

 

이런 식으로 한 바퀴 돌려서 객체를 분리해보도록 하겠습니다.

거의 한 바퀴를 다 돌렸는데요.

이렇게 돌린 상태에서 시작 지점이 가까워지면

완성하셔도 되지만

이렇게 연결하지 않은 상태에서

바로 Ctrl+Enter를 누르면 선택 모드로 바뀌어요.

이 상태에서 Ctrl+Shift+J를 누르면

이렇게 레이어가 분리가 됩니다.

 

레이어 창에서 분리된 모습을 확인 하실 수 있어요.

이제 분리된 레이어의 눈을 꺼주시고요.

이렇게 파먹은 부분을 메꿔줍니다.

타블렛이 없어도 마우스로도 충분히 가능한 작업입니다.

 

이제 새 레이어를 하나 추가해야 하는데요.

Ctrl+Shift+N 혹은 하단 레이어 창에 있는

플러스 박스를 눌러서 빈 레이어를 추가해 주세요.

 

원본에 바로 그리는 것보다

이렇게 레이어를 추가하여 그리는 게 편하고 안전합니다.

빈 레이어 선택 후 다시 펜툴를 눌러서 선을 그려주실 건데요.

이 작업을 할 때에는 상단 옵션창에 있는

펜툴의 옵션이 Path로 되어 있어야 합니다.

 

확인하셨으면 이제 선을 만들어 볼 건데요.

시작 할 부분을 누른 후 귀의 끝나는 부분을 클릭

드래그를 하여 귀의 모양을 만들어줍니다.

귀 모양의 곡선이 나왔죠.

 

이 다음에 알파벳 B, 툴바에 있는 브러쉬 툴을 눌러 주세요.

마우스 오른쪽 버튼을 눌러서 기본 브러쉬에 있는

딱딱해 보이는 원 브러시를 선택합니다.

 

이 창은 캔버스 바깥쪽 아무 부분을 누르면 사라져요.

실수로 캔버스를 눌러도 괜찮습니다.

Ctrl+Z로 직전 취소를하시거나

History 메뉴에 들어가셔서

브러시 툴을 사용한 부분을 없애주시면 됩니다.

 

이제 브러시 사이즈를 외곽선의 폭에 맞춰 주세요.

우측 클릭해서 사이즈를 조절하는 방법도 있지만

이걸 조절하셨을 때 사이즈가

바로 보이지 않아서 좀 불편해요.

그래서 브러시 사이즈를 조절하는 단축키를 이용합니다.

 

키보드 P 옆에 있는 대괄호 인데요.

왼쪽 대괄호 이 모양은 브러시를 작게 주고요.

이 모양의 대괄호는 브러시를 크게 해 줍니다.

크게

작게

 

혹시 브러시 사이즈를 나타내는 원이 보이지 않고

이렇게 십자가 모양으로 나오는 분들이 계시면

키보드에 Caps Lock키가 켜져 있는지 확인해 주세요.

 

브러시의 크기를 맞췄으면 이제 이쪽의 Paths창을 봐주세요.

Paths창이 보이지 않으시는 분들은

Window에서 Paths를 찾아

누르시면 이 작업 창이 나타납니다.

 

이 창에 보이는 Work Paht는

조금 전 저희가 그린 패스라인입니다.

이 Work Paht를 선택한 뒤에요.

하단에 있는 두 번째 동그라미를 눌러주세요.

 

이건 브러시의 현재 사이즈에 맞게

획을 그어 주는 편리한 기능입니다.

혹시 선이 그려지지 않거나

브러쉬 의 굵기가 맞지 않다면

그럴 때에는 반드시 이쪽 툴바에 있는 브러쉬를 눌러서

브러쉬 사이즈를 다시 조절 해주신 뒤

Work Paht를 선택해 주신 뒤

Storke path with brush를 눌러주세요.

 

선이 생성 되었으면 이 패스는 필요가 없으니

패스창에 빈 곳을 눌러 선택을 취소합니다.

 

이렇게 좀 맞지 않는 부분이 있을 때에는요

단축키 V, 툴바에서 이 십자 화살표 모양을 눌러 주세요.

그 다음 레이어 선택이 되어 있는 걸 확인해 주시고요.

Ctrl+T를 눌러 레이어를 변형 시켜주시면 됩니다.

그냥 이동을 하셔도 되지만 잘 맞지 않으실 때에는

옵션 바에 있는 이 버튼을 눌러 주세요.

 

이렇게 격자 모양이 생기신 걸 확인할 수 있는데요.

이제 맞추고 싶은 영역을 잡고 만져주시면 됩니다.

어느 정도 맞으면

상단에 있는 체크 혹은 엔터 버튼을 눌러 주세요.

이런 식으로 나머지의 선을 그려주시면 됩니다.

 

이렇게 위아래가 선택되어 있을 때는

정밀한 조절을 하기 힘들어요.

이럴 때에는 단축키 L을 눌러 주셔서

원하는 부분만 드래그로 둘러주시면 됩니다.

그 다음에 Ctrl+T를 눌러 조절해 주시면 됩니다.

 

외곽 정리가 되었습니다.

이제 비어 있는 안을 채우면 되는데요.

 

토끼 위에 레이어를 누른 상태에서

Ctrl+E 혹은 우측 클릭 Merge Down을 누릅니다.

아래에 있는 레이어와 합치는 기능이라

내가 합치고 싶은 레이어의 위 아래를 잘 확인하고 눌러주세요.

 

합쳐졌으면 페인트 버튼 단축키 G를 눌러주시고요.

뒤에 색을 칠합니다.

그런데 지금 색이 검정색이죠.

색을 바꿔야 하는데 이거는 흰색이지만

예를 들어 다른 색을 칠하고 싶을 때에는

정확한 색을 저희가 알 수 없잖아요.

이럴 때에는 Alt를 잠깐 눌러주세요.

그런 포인터가 이렇게 스포이드모 양으로 바뀝니다.

이때 내가 원하는 색부분에 대고

클릭을 하면 이쪽의 전경색이 바뀝니다.

노란색 부분은 요렇게 바뀌는 걸 확인 하실 수가 있죠.

그러면 이번에는 흰색

 

이제 원하는 색을 선택하셨으면 빈곳에 페인트를 붓습니다.

깔끔하지가 않네요.

이럴 때는 그냥 브러시를 눌러서 바로 채워주세요.

다 칠해진 걸 확인하실 수 있습니다.

토끼를 한번 움직여보세요.

배경과 깔끔이 분리된 것을 확인하실 수 있네요.

이제 토끼를 PNG로 내보내면 이미지 작업은 완료가 됩니다.

 

내보내고 싶은 레이어를 선택 후 우측 버튼을 눌러서

상단에 위치한 Quick Export as PNG를 선택합니다.

그럼 내가 저장할 폴더를 선택하라는 창이 떠요.

이때 파일명이 내가 만든 레이어명이 됩니다.

저장을 누르면 끝이에요.

 

이 방법이 참 좋은 게 여러 레이어를

한 번에 저장할 수 있다는 점 인데요.

예를 들어서 아까 우리가 도너츠와 지팡이를 분리했었죠.

나중에 아이템으로 쓸 예정이기에

이것도 PNG로 저장해보겠습니다.

 

지팡이와 도너츠를 분리해 볼게요.

단축키 L, Lasso툴(올가미)을 사용해 보겠습니다.

이쪽 끈 부분만 도너츠와 연결되어 있으니

이 부분만 주의에서 한바퀴 둘러볼게요.

 

선택이 완료 되었으면

Ctrl+Shift+J를 눌러 레이어를 분리합니다.

V를 눌러서 지팡이를 클릭 후 이동해보면

두 개의 레이어가 깔끔히 분리된 것을 확인하실 수 있습니다.

 

이제 저장할 것은 지팡이, 도너츠, 토끼

세 개의 객체가 되었습니다.

 

레이어의 이름에 마우스를 올리고 더블 클릭을 합니다.

다른 곳을 누르면 레이어 스타일 창이 뜰 수 있어요.

그럴 때는 그냥 끄시고 다시 더블 클릭

이제 이름을 다 바꿨으니 PNG로 내보내겠습니다.

 

여러 레이어를 선택하기 위해서는 처음 레이어를 누르고

Shift를 누른 상태로 마지막 레이어를 누르면 선택이 됩니다.

중간에 다른 레이어가 끼어있는 경우에는

Ctrl을 누른 상태로 원하지 않은 레이어를 눌러주시면

그 레이어를 빼고 선택을 하실 수 있습니다.

 

원하는 레이어가 선택이 되셨으면

우측 클릭 후 빠른 내보내기를 눌러주세요.

원하는 폴더 선택이 되셨으면 저장을 누릅니다.

해당 폴더를 확인해 보겠습니다.

사탕지팡이, 도넛, 토끼 잘 저장 되었네요.

레이어가 투명하게 잘되어 있는지도 확인해보겠습니다.

배경과 잘 분리되어 저장이 된 걸 확인하실 수 있습니다.

 

아, 잠시만요.

토끼를 게임 진행 방향에 맞춰서

돌려야 하는 것을 깜박 했습니다.

 

상단의 Image에 들어가셔서

Image Rotation,

그 다음 Flip Canvas Horizontal 누르면

좌우반전이 됩니다.

그리고 Ctrl+S를 눌러서 저장 해주세요.

 

이제 이미지 처리는 전부 끝이 났습니다.

 

빌드 박스로 돌아가 볼게요.

게임 소스창에서 캐릭터를 눌러 메뉴를 펼친 뒤

썸네일을 클릭합니다.

그럼 우측에 속성창이 뜨는데요.

해당 위치에 교체할 이미지를 드래그해 주세요.

 

사이즈는 직접 움직여 맞춰도 되고,

우측에 있는 Scale 수치로 맞출수 있습니다.

 

전 스케일 숫자를 작게하여 크기를 줄였는데요,

이게 비율이 깨지지 않아 괜찮은 것 같네요.

 

적용이 되었으면 우측 상단의

미리보기 버튼을 눌러 확인합니다.

토끼가 잘 적용이 되었습니다.

 

이상으로 빌드박스와 포토샵을 이용한

게임 만들기 1화를 마치겠습니다.

 

감사합니다.

---

 

썸네일!

---

 

실시간 녹음을 처음 해봐서 버벅대고, 소리도 들쑥날쑥 하구...ㅠㅠ

시간도 너무 오래 걸렸고.....ㅠㅠㅠ......다음에는 더 매끄럽게 만들어야겠습니다...

혼자서 다 모든 작업 다 하시는 분들 진짜 존경합니다.