본문 바로가기
GameMaker강좌[GM8]/기타장르강좌

[게임메이커강좌-기타]타이틀 메뉴 만들기

by 타락카얀 2013. 7. 19.
728x90



GAME MAKER 강좌



KAYAN









◈타이틀 메뉴 만들기



이번 강좌에서는 타이틀 메뉴에 대해 만들어 보도록 해요.

타이틀 메뉴는 게임의 분위기, 또는 게임 조작 방식등과 같이 여러가지를 고려해 어떻게 만드느냐에

따라 달라질 수도 있지습니다.

제작자는 플레이어가 시작하기를 눌러 게임을 플레이할 수 있도록 타이틀 화면 또한 정성있게

제작해야합니다.

강좌에선 간단하게 시작하기, 종료하기 이 두버튼을 사용하여, 마우스를 클릭하면 다음 화면으로

넘어가도록 만들어 볼 것입니다.



(▲ 타이틀 메뉴)


음... 그다지 눌러보고 싶지 않는 타이틀 화면이군요.

여러분은 멋지게 꾸미시면 됩니다.


어째든 기본 원리에 대해 알아봅시다.






먼저 메뉴에 사용할 이미지들을 준비합니다.



(▲ 강좌에서 사용할 메뉴. 2 종류의 스프라이트로 구성)


첫번째 흰색이미지는 선택하지 않았을 때이고, 두번째는 선택했을 때 이미지입니다.

강좌에서는 버튼이 "나 선택되었어요"라고 알수 있게끔, 선택되었을 때는 색상도 바뀌고, 이미지를

조금 크게 만들었습니다.

이제 준비된 이미지들을 이용하여 스프라이트를 만들어야 합니다.

강좌에서는 메뉴 스프라이트를 시작하기(spr_game_start)에 해당하는 첫번째 스프라이트와

종료하기(spr_game_end) 해당하는 두번째 스프라이트, 2가지로 구성할 거에요.


각 메뉴 스프라이트 이미지의 서브이미지 0번이 선택 안했을 때, 1번이 선택했을 때 이미지로

구성하시면 됩니다.








◈ 시작 메뉴 이미지 구성



먼저, 메뉴의 시작 버튼으로 사용할 스프라이트(spr_game_start)를 만듭니다.

비선택 이미지는 0번, 선택이미지는 1번 2장을 추가합니다.

그리고 스프라이트 이미지의 중심점을 가운데로 맞춥니다.



(▲ 시작 버튼 이미지. 비선택, 선택 2장으로 구성)


그리고 Modify Mask를 눌러 충돌 마스크를 설정합니다.



(▲ 시작 버튼의 마스크)


마스크 설정은 충돌 이벤트에서 반응하는 범위입니다. 범위를 벗어나면 실행이 안 되는 것이죠.

즉, 메뉴를 클릭했을 때 이벤트를 발생할 수 있는 범위를 지정하는 겁니다.
강좌에서는 클릭하기 쉽도록 Automatic - Rectangle 조합으로 설정했습니다.







◈ 종료 메뉴 이미지 구성


마찬가지로 종료하기 버튼도 만들어 봅시다.
준비된 이미지를 스프라이트(spr_game_end)로 만들고, 중심점을 가운데로 맞춥니다.



(▲ 종료 버튼 이미지. 비선택, 선택 2장으로 구성)


그리고 마찬가지로 마스크 설정을 설정합니다.

간단하죠?
다음은 오브젝트를 만들어 간단하게 이벤트를 짜봅시다.






◈ 시작 버튼 설정(obj_game_start)



이미지만으로 작동할 수 없죠.

이제 시작하기 버튼의 이벤트를 만들어 봅시다.
시작하기 버튼으로 사용할 오브젝트(obj_game_start)를 하나 만들고, sprite 설정란에 준비한 이미지를

지정합니다.



(▲ 시작하기 버튼 오브젝트)



오브젝트에 지정한 서브이미지가 1장으로 구성되었다면 굳이 정지 시킬 필요가 없지만, 현재 지정한

스프라이트에는 서브 이미지가 2장이 있기 때문에 애니메이션이 재생되지 않도록 정지 시켜주어야

합니다.



(▲ 애니메이션을 정지시키기도 하지만, 처음에 표시할 이미지를 초기화시키는 것이기도 함)


Create 이벤트를 추가하고, Main1 탭 - Sprite - Change Sprite 액션을 삽입하여 애니메이션을

정지시킵니다.



     ★ obj_game_start - Create 이벤트

     sprite : spr_game_start
     subimage : 0          ◀선택 안했을 때의 이미지로 설정
     speed : 0               ◀애니메이션 정지



다음은 마우스 커서가 버튼에 위치했을 때 이미지가 바뀌도록 해봅시다.



(▲ 오호~ 버튼에 커서가 위치하면 이미지가 바뀜)


이벤트 메뉴에서 Mouse - Mouse enter 이벤트를 추가합니다.
이 이벤트는 오브젝트에 커서가 위치했을때 발생되는 이벤트입니다.



(▲ 이미지를 변경함)


그리고 스프라이트 변경 액션인 Main1 탭 - Sprite - Change Sprite액션을 삽입하고, 선택되는

이미지로 변경해줍니다.



     ★ obj_game_start - Mouse enter 이벤트

     sprite : spr_game_start
     subimage : 1             ◀선택했을 때의 서브이미지
     speed : 0



이제 다시 커서를 떼었을 때 원래의 이미지로 돌아가게 만들어야합니다.
안그러면 이미지는 변경된 상태로 남아있게 되기 때문이죠.



(▲ 이미지를 원래대로 되돌림)


이벤트 메뉴에서 Mouse - Mouse leave 이벤트를 추가합니다.
마찬가지로 스프라이트 변경 액션인 Main1 탭 - Sprite - Change Sprite액션을 삽입하고 이미지를

변경해줍니다.



     ★ obj_game_start - Mouse Leave 이벤트

     sprite : spr_game_start
     subimage : 0            ◀선택하지 않은 메뉴의 이미지로 변경
     speed : 0



다음은 버튼을 클릭했을 때 다음 룸으로 이동시켜보도록 합시다.
이벤트 메뉴에서 Mouse - Left Released 이벤트를 추가합니다.



(▲ 다음 룸으로 이동)


그리고 다음 룸으로 이동하도록 Main1 탭 - Rooms - Next Room액션을 삽입합니다.



     ★ obj_game_start - Left Released 이벤트

     transition : <?>          ◀화면 전환 이펙트는 취향대로 선택하시면 됩니다.



강좌에선 그냥 효과없이 룸을 이동하도록 했지만, transition에서 이펙트를 선택하면 룸 이동시

화면에 해당 효과를 줄 수 있습니다.

시작하기 버튼이 완성되었습니다.



(▲ 시작하기 메뉴 버튼)


마찬가지로 종료하기 버튼도 작성해봅시다.









◈ 종료 버튼 설정(obj_game_end)


종료하기 버튼으로 사용할 오브젝트(obj_game_end)를 하나 만들고, 스프라이트에 해당 이미지를 지정합니다.


(▲ 종료하기 버튼 오브젝트)


시작 버튼과 마찬가지로 Create이벤트를 추가하고, Main1 탭 - Sprite - Change Sprite액션을

삽입하여 애니메이션을 정지시킵니다.



     ★ obj_game_end - Create 이벤트

     sprite : spr_game_end
     subimage : 0          ◀선택 안했을 때의 서브 이미지로 설정
     speed : 0               ◀애니메이션 정지



다음은 이벤트 메뉴에서 Mouse - Mouse enter 이벤트를 추가하고, Main1 탭 - Sprite

- Change Sprite액션 삽입하고 선택하는 이미지로 변경해줍니다.



     ★ obj_game_end - Mouse enter 이벤트

     sprite : spr_game_end
     subimage : 1             ◀선택했을 때의 서브이미지
     speed : 0



이제 다시 커서를 떼었을 때 원래의 이미지로 돌아가게 만들어야 되죠.
이벤트 메뉴에서 Mouse - Mouse leave 이벤트를 추가하고, Main1 탭 - Sprite

- Change Sprite액션을삽입하고, 원래의 이미지로 변경해줍니다.



     ★ obj_game_start - Mouse Leave 이벤트

     sprite : spr_game_end
     subimage : 0            ◀원래 흰색 서브이미지로 변경
     speed : 0



다음은 버튼을 클릭했을 때 게임을 종료하도록 해봅시다
이벤트 메뉴에서 Mouse - Left Released 이벤트를 추가합니다.

그리고 Main2 탭 - Game - End Game액션을 삽입합니다.


 

    ★ obj_game_end - Left Released 이벤트

     End Game



그러면 종료하기 메뉴를 클릭했을 때 바로 종료됩니다.



(▲ 종료하기 메뉴 버튼)


드디어 버튼 이벤트가 모두 완성되었습니다.







◈ 테스트


이제 테스트할 시간!!!
먼저 메뉴 버튼을 배치할 타이틀 룸 1개와 다음 화면으로 이동할 룸 1개를 만듭니다.



(▲ 룸 생성. 맨 위에 있는 룸이 가장 먼저 실행되므로 타이틀 룸을 맨위에 배치.)


타이틀 룸에는 배경을 깔고, 이전에 만든 시작 버튼 오브젝트와 종료 버튼 오브젝트를 배치합니다.



(▲ 타이틀 룸에 버튼을 배치함)


두번째 룸에는 시작하기 버튼을 눌렀을 때 이동하는 룸으로 꾸미시면 됩니다.


강좌에서는 제대로 되었는지 확인만 하면 되니 대강 꾸며보았습니다.



(▲ 시작하기 버튼을 누르면 다음 룸으로 이동!)


굳! 간단하게 완성되었네욧!
이제 제대로 되었는지 테스트 해봅시다.



(▲ 테스트 화면)


강좌였기 때문에 간단하게 메뉴를 만들었습니다만, 여러분이 제작하신 게임에 맞게 여러가지 메뉴와

타이틀 화면을 구성하시면 됩니다.








---------- 예 제 ----------



title_menu.gmk


title_menu.exe




300x250

댓글