메뉴 건너뛰기

창조도시 기록보관소

분류 캐릭도트 
출처 parksuyong1 

[2분의 1 : 자작 팔레트 만들기]


 


 


"제작강의가 아니라 갑자기 도트 강의라니?"


 


.....네 -_-;


요즘 할일이 너무 많아 제작강의는 거의 손을 못대고 있네여 ㅎ


일단 지금 "필요에 의한" (?) 도트 강의를 우선적으로 해보겠습니다. (무책임)


 


RPG2000 (2003 포함) 의 도트 작업을 할때 가장 많이 쓰이는 툴이 무엇일까요?


"그래픽 작업" 이라는 분야에서 흔히 쓰이는 그림툴을 몇가지 나열해보죠.


 



그림판 - 대표적인 그림툴이고  인터페이스가 편리하긴 하지만. 팔레트 조작이 힘들고 기능이 단순하다.


포토샵 - 독수리가 파리를 잡는게 훨씬 쉬울 것이다. 도트작업에 대한 배려가 전혀 되어있지 않다.


페인터 - 도트질이 가능하긴 할까...


오캔 - 페인터랑 다를게 별로 없다. (물론 도트 얘기)



 


도트 작업만을 놓고 본다면 솔직히 "케릭터 레이더"만한 그림툴이 없다고 자부합니다.


왜냐하면 케릭터레이더 라는 그림툴은 도트 작업에 특화되어 있는 툴이기 때문이지요.


 


도트(Dot)는 우리말로 "점"이라는 의미입니다. 그리고 지금 바로 여러분의 모니터가 표시할 수 있는 최소단위의 그래픽이라고도 할수 있죠. 모니터 화면은 수많은 도트로 구성되어 있으며, 1도트는 가로 1픽셀, 세로 1픽셀을 가지게 됩니다. 한마디로 "사각형"의 모습을 하고 있는 것이죠.


아무리 그래픽이 좋고, 물 흐르듯 하는 매끄러운 화면이라도 "컴퓨터"에서 나오는 그래픽은 모두가 이 "도트"로 이루어져 있습니다. 현존하는 게임중 가장 그래픽이 좋은 게임이 뭐죠? 그거 스크린샷 하나 받아서 마구 확대해보세요. 수많은 사각형들이 보일겁니다.


 


RPG2000 의 경우 해상도 320x240 을 갖는 화면이라, 이러한 도트작업이 거의 스크린의 생명이라고 해도 과언이 아닙니다. 이건 무슨 뜻이냐면, 가로 320픽셀, 세로 240픽셀이라는 의미이며 통합 76800 개의 도트로 구성되어 있는 화면이라는 뜻입니다.


...많게 느껴질수도 있지만 저건 엄청 작은 화면이지요 -_-; 스타크래프트의 경우만 봐도 640x480 의 해상도로, 307200 개의 도트로 되어있답니다.


320x240 의 스크린에서는, 도트 하나하나가 전체화면으로 볼 경우 몹시 선명하게 보입니다. 따라서 도트가 어디 하나 잘못 찍혀 있어도 굉장히 눈에 거슬리게되죠.


그래서 2000의 경우 도트작업이 생명이라고 말한 것이구요 ㅇㅅㅇ


케릭터 레이더는 이렇게 중요한 도트 작업을 위해 만들어진 그래픽 제작 툴 입니다.


 



(그림 1. 케릭터 레이더 실행화면)


 


케릭터 레이더를 처음 실행하면 이런 화면이 나옵니다. 작업창의 크기는 생각보다 자유롭게 조절이 가능하므로 현재 사용하는 모니터와 해상도의 크기에 맞게 조절해서 쓰시면 됩니다.


그럼 본격적인 케릭터 레이더의 사용법으로 파고 들어가 볼까요!


일단 이번 1회 에서는 자작 팔레트를 만드는 방법을 알아보기로 해요 ㅇㅅㅇ


 



(그림 2. 새로이 파일을 열었을 경우)


 


새 파일을 열 경우, 그리고 256색 (RPG2000 그래픽) 으로 지정할 경우 새로이 생성되는 화면입니다.


일단 저는 예시를 위해 100x100 으로 만들어 보았습니다.


"팔레트" 부분을 봅시다. 전형적인 무지개빛 색깔과 유채색, 무채색 들이 질서정연하게 표시되는군요.


케릭터 레이더에서 기본적으로 가지고 있는 초기 256색 입니다. 실제로 이 팔레트에 표시되는 색들을 세어보면 모두 256가지 입니다.


이것을 그대로 써도 큰 상관은 없습니다만, 일단 이 팔레트 부터 자유자재로 만들어 쓸 수 있어야 진정한 케릭터 레이더의 활용이 가능하기 때문에... 직접 팔레트를 만드는 작업 부터 한번 해볼까요? ^^


 



(그림 3. 팔레트 초기화)


 


이런식으로 과감히! 현재의 팔레트를 모조리 없애버립시다. 어떻게 없애냐구요? 팔레트 오른편에 있는 아이콘들 중에 "색상표 편집"이라는 아이콘을 누르면 이런 화면이 뜹니다.


 



(그림 4. 색상표 편집)


 


이 창에서는 색상들을 드래그 해서 복수 선택하는게 가능한데, 그 상태에서 삭제를 누르면 모조리 검은색이 됩니다.


팔레트를 만드는 것은 본인 취향대로 만들면 그만이긴 한데 ^^; 여기서는 걍 제 취향대로 만들어 보죠.


일단 투명색으로 쓸 색상을 팔레트의 가장 좌측 윗부분에 만듭니다. 원색(쌩 빨간색, 쌩 파란색 등)은 되도록 피해야 할 색이므로, 가급적이면 원색 계통을 투명색으로 만들어 주세요. 저는 쌩 파란색으로 하겠습니다.


 



(그림 5. RGB 조절 창)


 


팔레트 왼편을 보면 RGB 라고 스크롤바가 3개 있을거예요. 다들 잘 아시다시피 이 RGB는 각각 빨강, 녹색, 파랑 을 나타내지요. 팔레트의 가장 좌측 윗부분을 선택한 상태에서 이 스크롤바 중 B 를 최대(255)로 올려주세요. 그러면 선택되어 있는 (점선이 회전하고 있는 색이 선택되어 있는 색입니다.) 색이 파랗게 변합니다.


이렇게 RGB 스크롤바를 직접 조절할때에는, 열려있는 그림파일의 팔레트에 그대로 영향을 주기 때문에 그림 자체에도 동시에 변화가 온다는 것에 주의해야 합니다.


이제부터는 이 팔레트로 무엇을 작업할 것인가를 선택해야 하는데, 여기서는 케릭터 파트를 만드는 것으로 합시다. 그러면 알만툴 케릭터를 만드는데에 기본적으로 필요한 색상이 뭐가 있을까요?


일단 흰색과 검은색은 있어야겠고... 그렇죠, 살색이 있어야겠습니다.


그러면 먼저 흰색과 검은색, 그리고 그 중간쯤 되는 회색, 이 3가지 색을 마련해봅시다.


 



(그림 6. 검은색과 흰색을 설정)


 


중요한거 한가지만 짚고 넘어갈께요. 사람의 눈과 컴퓨터의 눈은 다릅니다. 사람이 아무리 구분하기 힘든, 예를 들어 똑같은 검은색 이라고 해도 컴퓨터가 볼때 RGB값이 1 이라도 틀리면 그건 엄연히 다른색입니다. 예를 들어 RGB 값이 0, 0, 0 인 검은색과 0, 0, 1인 검은색은 사람의 눈으로는 구분이 불가능합니다만, 컴퓨터가 보기에는 0, 0, 1의 검은색은 검은색이 아니라는 뜻입니다.


이 개념을 확실히 알고 있어야 팔레트를 자유롭게 다룰 수 있습니다.


 


자, 위의 그림에서 투명색 바로 오른쪽에 2칸까지를 검은색으로 놔두고, 세번째 칸에 흰색을 만들었습니다. 왜 이렇게 했을까요?


바로 회색을 만들기 위해서죠 ^^


마우스 좌클릭과 우클릭으로 각각 빨간 선택창, 파란 선택창을 옮길 수 있는데, 하나는 맨 처음 검은색을 선택하고 다른 하나는 흰색을 선택한 상태에서 RGB 스크롤바 위에 있는 "색상표의 점차적인 변화"를 누릅니다.


 



(그림 7. 자동으로 회색 생성)


 


앗! RGB 스크롤바를 건드리지도 않았는데 회색이 튀어나왔습니다. 이것이 바로 케릭터 레이더 팔레트 편집기의 막강한 기능입니다. 점차적인 변화 아이콘을 활용하여 선택되어 있는 두 색 사이에 있는 색상 영역을 단계적으로 변화하는 색상들로 채울 수 있습니다.


 


그러면 검은색, 회색, 흰색이 만들어졌으니 그 옆에 살색을 만들어 볼까요? 여기서는 여러분이 직접, 색의 명암을 몇단계로 할 것인가를 결정해야 합니다. 살색의 경우 4~5단계면 적당합니다. 여기서는 5단계로 하죠.


 



(그림 8. 5단계로 살색을 만들 영역을 선택)


 


살색은 대충 파랑이 약간 섞인 노란색(R255, G255, B50 정도)에서 G를 조금씩 줄이다보면 튀어나옵니다. 5단계 색상 영역중 첫번째에 제일 어두운 살색, 다섯번째에 제일 밝은 살색을 RGB 스크롤바를 이용해 지정해준다음, 역시 "점차적 변화" 아이콘을 눌러 단계적인 색상을 생성합니다.


 



(그림 9. 살색 완성)


 


그 뒤에 첫째줄 남은 검은색 칸들은 예비영역으로 남겨둡니다. 그러나! 이후 "순수 검은색"을 도트중 사용하게 될 때에는 반드시 투명색 옆에 있는 검은색을 사용하세요. 아무 검은색이나 상관 없다고 생각하고 오른쪽 빈칸들에 있는 검은색을 사용해버리면 나중에 거기에 필요한 색을 추가했을 경우 애써 찍어놓은 도트들이 엉망이 될 수 있습니다.


 


이제는 필요한 색을 최대한 종합해야 합니다. 무엇무엇이 있을까요? 검은색, 흰색, 회색, 빨간색, 파란색, 녹색, 노란색, 갈색, 보라색.... 필요에 따라 그때그때 만들어 써도 그만이긴 하지만 처음 만드는 김에 최대한 많이 만들고 보죠.


여기서는 대표적으로 검은색, 흰색, 빨간색, 파란색. 이 4가지를 만들어 보도록 하겠습니다.


 


"어? 검은색, 흰색 은 위에서 만들었잖아요?" 하는 분들이 있겠지만, 위에서 만든건 "원색"이지 "단계색"은 아니었죠. 여기서는 명암까지 고려한 단계적인 색상을 말하는 거랍니다.


세어보면 알겠지만, 이 팔레트는 한 줄에 16색 까지 넣을 수 있습니다. 그렇다면 한 색당 8단계 까지 명암의 단계색을 지정하면 한줄에 두가지 색상까지 넣을 수 있겠죠?


두번째줄 맨 첫칸은 검은색으로 두고, 이것을 조금 밝은 검은색으로 단계색을 줘 봅시다. 간단해요. 너무 밝아지지 않도록 RGB 스크롤바를 3개 나란히 올려주면 됩니다.


 



(그림 10. 처음과 끝에 가장 어두운 색(순수 검은색)과 가장 밝은 색을 지정)


 


이렇게 한 다음 팔레트 상에서 좌클릭, 우클릭 하는 것으로 처음과 끝을 선택한 다음 "점차적인 변화" 아이콘을 누릅시다. 주우욱! 검은색의 단계색이 생성됩니다. 같은 방법으로, 오른쪽에 비어있는 8칸 에도 흰색의 단계색을 넣어봅시다.


 



(그림 11. 흰색의 단계색 까지 생성한 모습)


 


그 다음은 빨간색과 파란색을 만들 차례죠. 그러나 위에서도 말했듯, 순수한 썡 빨간색, 쌩 파란색은 피해야 합니다. 원색은 그만큼 색을 단순하게 만들어 버리기 때문이죠.


어차피 단계색을 생성하는 방법 대로 하면 원색이 나올 일은 없을테니 조금만 주의하면 될겁니다 ㅡ.ㅡ;


현재 투명색이 쌩 파란색인데, 쌩 파란색은 R0, G0, B255 죠. 똑같은 파란색이 나와서 "어? 이거 중복되서 트러블 나는거 아냐?" 라고 생각할수도 있겠으나 걱정하실것 없습니다. R0, G0, B254 만 나와도 이미 컴퓨터는 다른 색으로 인식합니다.


그러나 파랑, 빨강 같은 유채색의 경우, 방법을 조금 달리해야 합니다. 검은색, 흰색과 같은 방법을 쓸 경우 원하는 단계색이 잘 안나올 수 있기 때문이죠.


 



(그림 12. 같은 방법으로 빨간색을 만들었을 경우)


 


자... -_-; 이걸 빨간색의 단계색이라고 볼순 없죠. 이럴때는 똑같이 맨 앞, 맨 뒤에 가장 어두운 색, 가장 밝은색을 넣되, 중간에 원색에 가까운 빨간색을 하나 넣어주고 따로따로 점차적인 변화 효과를 줘야 합니다.


 



(그림 13. 사이에 원색에 가까운 색을 따로 만들어서 넣었을 경우)


 


가장 어두운 빨간색은 거의 검은색으로 보일 정도, 그리고 가장 밝은 빨간색은 거의 흰색으로 보일 정도로 해주시는게 좋습니다. 그래야 실제 도트 찍을때도 명암이 확실해지거든요.


 



(그림 14. 파랑 단계색 까지 완성된 모습)


 


자! 같은 방법으로 파랑색까지 완성했습니다. 이제 스스로 필요한 색들을 같은 방법으로 만들어 보세요 ^^ 의외로 쉽습니다.


그리고, 처음부터 쭉 "왼쪽에는 가장 어두운, 오른쪽에는 가장 밝은"을 강조해왔는데, 반대로 해도 상관은 없습니다. 다만 색상의 단계가 좌에서 우로, 혹은 우에서 좌로. 이렇게 단계가 일정해야 보기도 쉽고 팔레트가 깔끔해보입니다. 어느색은 왼쪽이 가장 어두운데 또 어느색은 오른쪽이 가장 어둡더라 하면... -_-; 좀... X판 이겠죠?


 



(그림 15. 예시 - 판로4의 케릭셋 팔레트)


 


마무리 서비스로 보여드리는 이것은, 제가 직접 만들어서 판타지 로케이션 4 케릭셋에 적용중인 팔레트 입니다.


참 쉽죠? ^^;


 


그러면 조만간 "케릭터 레이더의 이해 -2편-"으로 다시 돌아오겠습니다.


허접한 제작자 찰드였습니다~

번호 제목 글쓴이 날짜 조회 수
50 효과적인 UI의 설계 - 배치 file 아싸사랑 2010.11.10 104
49 효과적인 UI의 설계 - 개론 아싸사랑 2010.11.09 103
48 플레이와 내러티브의 균형 조율 [1] 아싸사랑 2010.10.05 77
47 뭐 부터 시작해야 하나 [1] 아싸사랑 2010.09.18 136
46 게임은 쌍방향 엔터테인먼트이다. [4] 아싸사랑 2010.08.02 122
45 인사 올립니다. [1] 아싸사랑 2010.08.02 76
» 찰드 도트강의 "1" -케릭터 레이더의 이해 (1/2)- [6] ◈ÐÆЯΚ◈찰드 2009.08.14 2282
43 게임 기획 개요 3 [기획서 part 3 - 시나리오(1)] [1] Vermond 2009.02.15 1447
42 게임 기획 개요 3 [기획서 part 2 - 설정] [7] Vermond 2009.02.09 1463
41 찰드 제작강의 "2" -툴을 처음 접하면- [9] ◈ÐÆЯΚ◈찰드 2008.09.29 2890
40 찰드 제작강의 "1" -겜제작을 시작할때- [9] ◈ÐÆЯΚ◈찰드 2008.08.27 3574
39 게임 기획 개요 3 [기획서 part 1] [1] Vermond 2008.08.24 1583
38 게임 기획 개요 2 [기획서와 시나리오의 차이점] Vermond 2008.08.23 1342
37 게임 기획 개요 1 [기획자가 해야할 일] [8] Vermond 2008.01.16 2469
36 나는 어디로 가야하나.. [13] 천무 2007.12.03 3356
35 게임 시나리오 실전 - 텍스트 어드벤쳐 [5] Vermond 2007.11.05 2776
34 게임 시나리오 입문 [4] 작성하기 - 후반부 [4] Vermond 2007.10.29 1726
33 게임 시나리오 입문 [3] 작성하기 - 전반부 [4] Vermond 2007.10.23 1969
32 게임 시나리오 입문 [2] 개요 [1] Vermond 2007.10.18 1435
31 게임 시나리오 입문 [1] 정의와 종류 [12] Vermond 2007.10.17 3088