문명 5 - 문명 초기의 건물 생성 (3) : 틀을 벗어나는 아이콘 만들기 취미생활


오늘은 인게임 스샷이 거의 없으니 카테고리도 럽라보다는 문명으로 잡겠습니다!

이긴 한데 결국은 러브라이브 관련이 넘쳐날듯. 늘 기승전럽라지 (...)


전에 건물을 아이콘까지 얘기했었네요.

그래서 이런 코딩이 나왔었습니다.


<IconTextureAtlases>
<Row>
<Atlas>ALPACA_ATLAS</Atlas>
    <IconSize>256</IconSize>
    <Filename>AlpacaAtlas256.dds</Filename>
      <IconsPerRow>4</IconsPerRow>
    <IconsPerColumn>1</IconsPerColumn>
    </Row>
<Row>
<Atlas>ALPACA_ATLAS</Atlas>
<IconSize>128</IconSize>
<Filename>AlpacaAtlas128.dds</Filename>
<IconsPerRow>4</IconsPerRow>
<IconsPerColumn>1</IconsPerColumn>
</Row>
<Row>
<Atlas>ALPACA_ATLAS</Atlas>
<IconSize>80</IconSize>
<Filename>AlpacaAtlas80.dds</Filename>
<IconsPerRow>4</IconsPerRow>
<IconsPerColumn>1</IconsPerColumn>
</Row>
<Row>
<Atlas>ALPACA_ATLAS</Atlas>
<IconSize>64</IconSize>
<Filename>AlpacaAtlas64.dds</Filename>
<IconsPerRow>4</IconsPerRow>
<IconsPerColumn>1</IconsPerColumn>
</Row>
<Row>
<Atlas>ALPACA_ATLAS</Atlas>
<IconSize>45</IconSize>
<Filename>AlpacaAtlas45.dds</Filename>
<IconsPerRow>4</IconsPerRow>
<IconsPerColumn>1</IconsPerColumn>
</Row>
<Row>
<Atlas>ALPACA_ATLAS</Atlas>
<IconSize>32</IconSize>
<Filename>AlpacaAtlas32.dds</Filename>
<IconsPerRow>4</IconsPerRow>
<IconsPerColumn>1</IconsPerColumn>
</Row>
</IconTextureAtlases>

여기서 다룰 건 두 가지. 우선 첫번째로 <IconsPerRow> 와 <IconsPerColumn> 입니다.

위에서는 4 / 1로 되어있는데...

Row는 가로, Column은 세로의 아이콘 갯수를 의미합니다.

즉 저건 한 줄짜리 네 개의 아이콘이 들어가겠네요.

만약...

<IconsPerRow>4</IconsPerRow>
<IconsPerColumn>2</IconsPerColumn>

이라고 되어있었으면 두 줄짜리 네 칸이니까, 8개의 아이콘이 있을 겁니다.

그렇다면
이건 제가 문명 5에서 러브라이브 모드를 만들면서 쓰고 있는 아이콘입니다.

보시면 가로로 8이고 세로로 5죠. 


<IconsPerRow>8</IconsPerRow>
<IconsPerColumn>5</IconsPerColumn>


이렇게 되어있고, 0번부터 시작하니 왼쪽 제일 위 0번부터 오른쪽 제일 아래 39번까지

총 40개의 아이콘이 들어갈 수 있는 파일이 되겠네요.

이 사이즈 자체는 자기가 쓰고 싶은 만큼 넓히면 됩니다.

다만 중요한 게 있죠. 바로 사이즈인데...


기본적으로 문명 5에서 아이콘을 만들 때는 256 / 128 / 80 / 64 / 45 / 32 여섯 사이즈를 만들어야 됩니다.

아이콘은 256 x 256 크기의 정사각형 네모 정중앙에 배치되어야 합니다.

하나를 만들고 나면 크기를 차례차례 줄여나가면서 저장해서 6개의 파일을 만들면 됩니다.

즉 저건 가로로 8개의 아이콘이 있으니 256 x 8 해서 2048 픽셀이고

세로로는 5개의 아이콘이 있으니 256 x 5 해서 1280 픽셀, 2048 x 1280 픽셀의 그림입니다.

128은 저 절반이니까 1024 x 640 이 될 것이고...

가장 간단하게 하는 건 저 위의 제가 올린 짤을 받으셔다가 적당히 잘라다 붙이는 겁니다. (...)

178 x 178 의 원형으로 자른 걸 갖다 붙이면 정확하게 가려진답니다.


위의 아이콘들은 각자 퀄리티가 제각각인데(...) 제가 잘 모르던 시절에 만든 거랑

어느정도 반복하면서 요령이 생긴 뒤의 것이 섞여있기 때문입니다.

그 중에서도 재미있는 아이콘이라면 원 밖으로 삐져나와 있는 녀석이겠는데요
보시면 머리와 꼬리 약간이 원 밖으로 삐져나와 있습니다.

문명의 모든 아이콘은 178 x 178 사이즈의 원 안에 표현되긴 합니다만...

실은 위에서 썼듯이 256 x 256 사이즈 캔버스를 사용하고 있습니다.

그런고로 사실 삐져나온 부분도 확실하게 표현이 되는거죠.

인게임에서 보면 이런 식이 됩니다.
이렇게 삐져나오게 표현이 된다는 거죠. 

요령은 간단합니다. 이를테면
여기 완전 예쁜 무녀복 다이아가 있습니다.

320 x 320 사이즈로 원형 선택도구를 지정해준 다음에 다이아 얼굴 부근을 선택합니다.
이대로면 이것저것 삐져나오겠군요.

여기서 좌측 네번째에 있는 빠른 선택 도구를 이용해서...

클릭을 이용해서 삐져나온 다이아의 머리와 소매부분을 선택해보겠습니다.
확대한 다음에 한 땀 한 땀
최대 확대를 하고 더 세심하게 한 땀 한 땀

선택도구의 사이즈를 1로 하면 좋습니다.

빠른 선택도구 / 자동 선택도구도 풀로 활용하면 더 편리합니다.

저는 상단의 선택 → 수정 → 매끄럽게도 꽤 써먹는답니다.

여하간 그래서 결과물이...
이렇게 머리 부분이랑 소매 부분은 밖으로 나온 게 완성되었습니다!

그럼 우선 320 x 320 으로 새 파일을 하나 만들어보죠.
만들어진 여기다가 방금의 다이아를 복사해서 붙이면...
이쁘게 붙어있긴 하지만 원형이 꽉 차게 해야합니다.

일단 아이콘을 상단으로 좀 올려주면 간단합니다.
좋아요 좋아 

그 다음에 이미지 사이즈를 178 x 178 로 줄여버린 다음에

캔버스 사이즈는 256 x 256 으로 늘려줍니다.
으오오오오

텐션 아가루냐

이걸 그럼 저 위의 아이콘 텍스쳐 모아놓은데다가 이식해줍시다.

전체 선택하고 복사해다가...

비어있는 뻘건 아이콘에다가 잘 맞게 붙여주면 끝납니다.

이번엔 비교를 위해서 한 번 이런 작업을 안 한 아이콘이랑 교체해보죠.

저쪽 31번에 있는 다이아에다가 붙여서 교체
깔끔하게 잘 나왔습니다!

그럼 이걸 SDK의 ModBuddy를 통해서 2번째 시간에 한 것처럼 교체해주면 됩니다.

몇 가지 조언을 드리자면...

DDS 파일로 만들기 전에 반드시 PNG 파일로 먼저 저장하고, 그걸 불러와서 DDS로 변환합시다.

진짜로 중요해요. 진짜로 진짜로 진짜로

DDS 파일을 6개 만들고 모드에 전부 넣은 뒤에 Import into VFS 를 True 로 하는 것도 잊지 마시고

그럼 확인해봅시다

우선 이게 머리와 테두리가 밖으로 안 나오게 그냥 원형으로 잘랐을 때 인게임
그리고 이게 위에서 작업한 아이콘의 인게임
이런 식으로 아이콘을 만들어서 얼마든지 새로이 적용시킬 수 있는 것입니다.



글의 전제가 포토샵이라는 걸 제외하면(...) 최대한 쉽게 설명한 것 같습니다.

사실 백문이불여일견 백견이불여일행이긴 하죠.

그럼 오늘은 뭘 추가해볼까...(재미들림)


덧글

댓글 입력 영역


통계 위젯 (화이트)

1359
514
1814583