퍼즐 게임 만들기2 - 배경 이미지, 아이콘 등 리소스 만들기

리소스 만들기

프로젝트에서 사용되는 이미지 파일을 제작할 필요가 있다.

결론만 얘기하면 포토샵에서 해상도 고려해서 png파일로 대충 만들어 오면 된다.

디자인 해상도를 고려해 1080x1920으로 제작한다.

 

 

귀찮은 사람은 맨 아래로 내려가면 이 게시물에서 만들 리소스파일을 다운 받을 수 있다.

 

 

 

Backround 배경 이미지

 프렌즈팝을 참고하여 디자인하였다.

상단 : 1080x450

중앙 : 1080x1270

하단 : 1080x200

 

 

 미술에 재능이 없어서 예쁘게는 못만든다.

레이어 분리해서 대충 페인트통으로 색 채운 다음

조금 어두운 색으로 끝 부분에만 그라이데션을 준다.

Shift키를 누르면 마우스를 수직으로만 움직일 수 있다.

 

 상단 하단을 따로 관리하는 것이 유지관리면에서 좋지만

예제 작품이니 간단하게 그냥 통으로 만든다.

background.png로 저장하였다.

 

 

 

 

육각형 테두리 만들기

150x130 Pixel사이즈로 새 이미지를 생성한다.

좌측 툴 바의 다각형 그리기 도구를 사용해 육각형을 그린다.

Shift키를 누른 상태로 드래그하면 위 와 같은 모양으로 만들어진다.

 상단 메뉴에서 칠을 활성화하고 획은 비활성화 한다.

우측의 W 와  H를 설정해 150x130을 꽉 채우도록 한다.

 

레이어를 우 클릭하면 혼합 옵션을 열 수 있다.

탭에서 획을 활성화하고 위치를 안쪽, 색상을 조금 어두운 색으로 설정한다.

 

 

 

 

 

 

블록 만들기

 육각형 테두리 내부에 위치할 블록을 만든다.

육각형 테두리와 동일한 좌표를 사용할 것이므로 같은 크기로

150x130 Pixel사이즈로 새 이미지를 생성한다.

 적당한 위치에 좌측 툴바의 타원 그리기 도구를 사용해 원을 그린다.

Shift키를 누른 상태로 드래그하면 타원이 아닌 원을 그릴 수 있다.

육각형테두리와 마찬가지로 상단 메뉴에서 칠과 획을 설정한다.

 

레이어를 우 클릭하면 혼합 옵션을 열어 경사와 엠보스 탭에서 다음과 같이 설정한다.

경사와 엠보스 기능은 도형을 입체적으로 만들어주는 역할을 한다.

 

색 상 오버레이 탭에서 색상을 변경하여 여러가지 색을 나타낼 수 있다.

원하는 블록의 종류만큼 원하는 색으로 만들어 .png파일로 저장한다.

 

 

 

 

투명도?

 배경을 채우지 않은 상태로 .png파일로 저장하면

cocos2d-x에서 출력했을때 배경이 투명한 상태로 적용이 된다.

배경색을 투명으로 하는 법은 고려하지 않아도 된다는 얘기다.

 

 

일단 여기까지만 만들고 다음 게시물에서 게임화면에 배치해보도록 하겠다.

 

 

지금까지 만든 리소스 파일은 아래 압축파일에서 받을 수 있다.

puzzleTest.zip