[cocos2d-x] Makeschool 강좌 (2) 화면 만들기.

---

게임 화면을 만들어봅시다. 

위와같은 화면을 만들건데, 간단해보여도 xcode상에서 코딩할라면 배치스프라이트를 만들어서 배경깔아주고, 생성하고... 생각보다 작업양이 많습니다. 좌표도 일일이 찍어줘야 하구요. 코코스 스튜디오를 통해 간단히 스프라이트를 만들어서 적용해 봅시다.

일단 그림파일들을 다운받습니다.  --> 다운

압축을 풀고 코코스 스튜디오에 추가합니다. 리소스패널에서 오른쪽 클릭을 하고, Import Resources를 누릅니다.

짜잔~ 추가됬습니다. 받은 이미지들을 셋팅하기 전에 기존 배경화면을 지워야 겠지요~?

Scene안에 있는 HelloWorld 화면을 과감하게 지웁니다.

그럼 기존에 있던 화면이 없어지고~ 까~~만 화면이 생깁니다. 이제 원하는 이미지를 넣어봅시다~

MainScene을 클릭하고 넣고싶은 이미지를 화면에 드래그하면 이미지가 삽입됩니다. 이미지의 위치는 마우스로 조절할 수 있지만 정확하게 배치하기는 어렵죠. 이럴때는 좌표를 사용하는데( X-Code 상에서는 좌표로 밖에 못하지만..) 앵커포인트와 포지션을 조절할 수 있습니다. 앵커포인트는 이미지의 기준이되는 점의 위치를 뜻하며 0~1, 0~1의 값을 가질수 있습니다. 0,0 은 그림의 제일 왼쪽 아래를 뜻하고 1,1은 오른쪽 위입니다. 0.5, 0.5 은 그림의 중앙을 기준좌표로 삼습니다. 포지션은 말 그대로 화면에서의 그림의 위치를 나타냅니다. 그림을 화면 중앙에 위치시키기 위해서 앵커포인트를 0.5,0.5로 잡고, 포지션을 전체 화면 크기의 중앙인 480,320으로 잡아줍니다.

이제 패널을 추가해 봅시다. 왼쪽에 Objects 들에서 Panel을 찾아서 드래그 해줍니다. 패널 추가하기 참 쉽죵~?

패널의 속성은 다음과 같이 정의합니다.

옆에가 px이 아니라 %로 되어있습니다. 클릭하면 바꿀수 있어요~! 

같은방법으로 패널을 하나 더 만들어줍니다. 이름은 RightPanel로~! (앵커 : 0.5,0.5 포지션 : 50,60 크기 : 80,100)

 

그리고 새로만들기로 노드를 하나 만들어 줍니다. 리소스 탭에서 오른쪽 클릭하고 Create New를 누릅니다.

이름은 Grid~!

그리고 스프라이트이미지폴더에 있는 grid.png 이미지를 Grid.csd에 넣어주고 중앙을 맞춰줍니다.

다시 메인으로 돌아가서 만든 그리드를 rightPanel에 추가합니다. 드래그만 하면 되용~!

화면에 추가하고 아래 Animation에서 드래그로 rightPanel 아래로 이동시켜 줍니다. 포지션을 50%, 50%으로 해주세요~! 

오른쪽 패널엔 판을 놓고 왼쪽에는 버튼들을 배치할 예정입니다. 왼쪽에 Objects윈도우에서 버튼을 찾아 화면으로 드래그합니다.

두 버튼의 설정값을 위에 그림을 보고 확인하시고, 버튼을 더블클릭해서 button으로 입력된 텍스트를 지웁니다. 자 이제 버튼의 이미지를 넣을 차례인데, 코코스 스튜디오에서는 버튼의 상태별로 이미지를 저장할 수 있습니다!!!! 

버튼을 누르고 오른쪽 클릭을 하면 버튼 스타일이란 메뉴가 보입니다. 마우스를 올리면 Normal, pressed, disabled 라고 나오는데, 각각 일반적인 상태, 눌렀을때 상태, 사용불가 상태를 의미합니다. 즉 버튼을 누를때 모습이 변하게 할 수 있다는 소리죠~ 우선 Play버튼의 일반상태를 눌러서 다운받은 이미지셋에 있는 Play를 누르고, pressed상태는 Play-pressed를 선택합니다. pause도 마찬가지!!

다음으로 풍선과 현미경을 추가합니다. 그냥 냅다 이미지를 드래그~! 해서 위와같이 설정합니다. leftPanel안에 넣는거 잊지마세요~!  

방금 추가한 풍선이 점수판 역할을 합니다. 점수를 표시하는 글자를 넣어야하는데,, 왼쪽에서 Label위젯을 찾아서 드래그합니다. 

흔히 볼 수 있는 텍스트 뷰가 생겼습니다. 라벨의 텍스트 폰트를 지정할 수 있는데, 오른쪽에 라벨 옵션을 내리다보면 아래 Font File이라는 옵션이 있습니다. import file을 누르고 폰트를 지정하면 완료~!

4개의 Label을 생성하고 다음과 같이 만듭니다.

자 이제 대충 게임 화면처럼 생겼군요!! 이제 Xcode로 옮겨봅시다~! 퍼플리쉬~!!!

헐랭 실행이 됩니다~!!! 

심지어 버튼 누르는 거까지 자동으로 되있음!!!!! 

자 이제 화면을 다만들었으니, 다음 포스팅엔 코딩을 해보도록 하겠습니다. ㅎㅎ