[게임메이커]고정 GUI버튼 만들기에 대해서

#게임메이커 GUI 버튼

게임을 제작할때 플레이어가 이동시 GUI가 고정되지 않고, 움직이는 현상이 벌어지는데 

Draw GUI로 보통 처리가 가능하며 어떤식으로 작동하는지에 대해 샘플을 보여주기 위해 포스팅 되었습니다.

게임메이커 스튜디오 1.4 버젼 이상에서 작동하며 윈도우용으로 설명합니다.

게임메이커 스튜디오 GUI버튼 만들기

(위 예제는 다른 플랫폼을 테스트 하면서 제작된 스샷이므로 아래의 코드를 참조 바랍니다)

먼저 gui를 콘트롤 할 시스템용 오브젝트를 만듭니다.

그곳에 크리에이트 이벤트로 전체 스케일을 구하는 코드 

-저는  obj_gui_setting 이라는 오브젝트를 작성하였고 이벤트 코드들은 아래와 같습니다.

[Create]

global.display_scale = display_get_gui_width()/view_wview[view_current];

그후 마우스 체크 부분,

global.gui_mouse_x=(mouse_x-view_xview[view_current])*global.display_scale;

global.gui_mouse_y=(mouse_y-view_yview[view_current])*global.display_scale;

(위 예제는 다른 플랫폼을 테스트 하면서 제작된 스샷이므로 아래의 코드를 참조 바랍니다)

[End Step]

global.gui_mouse_x=(mouse_x-view_xview[view_current])*global.display_scale;

global.gui_mouse_y=(mouse_y-view_yview[view_current])*global.display_scale;

• 그 전에 해야 할 일

룸을 만들고 룸 세팅에서 위와같이 뷰를 세팅할 수 있도록 한 뒤 각자 설정에 맞게 세팅합니다.

view in room 

보여주고 싶은 크기의 해상도

Port on screen

실제 맵 크기 

GUI 이미지 표시는 어디에다?

- 사실상 같은 오브젝트에 표시해도 상관없고

어떤 기능을 각각 버튼에 따로 구현하고 싶다면 각가의 버튼에 Draw GUI 이벤트를 통해 드로우와 

스텝 이벤트를 작성해야 합니다.

예를 들어, 위의 obj_gui_setting이라는 오브젝트로 모든 콘트롤을 하고 싶다면

그곳에서 Draw GUI 이벤트를 작성하여

draw_sprite(이름,서브이미지,X좌표,y좌표)

코드 예제;

draw_sprite(image,0,30,30)

위와 같이 코드를 작성하면 되며, 

버튼을 따로 오브젝트로 만들어 콘트롤 하고 싶다면, 

(위와 같은 형식으로 원하는 GUI를 설정하면 됩니다)

draw_sprite_ext 함수를 사용한 이유는맨 마지막 부분 알파값을 바꾸려고 이 함수를 썼지만, 

그 외에 이미지만을 표시할 목적이라면 draw_sprite 함수를 사용해도 충분합니다.

[Create]

width=버튼 가로 이미지 크기

height=버튼 세로 이미지 크기

hover=false;

display_x = xstart*global.display_scale;

display_y = ystart*global.display_scale;

[Step]

var xhover = (global.gui_mouse_x==median(display_x-width/2,global.gui_mouse_x,display_x+width/2));

var yhover = (global.gui_mouse_y==median(display_y-width/2,global.gui_mouse_y,display_y+width/2));

hover = xhover && yhover;

if (hover)

{

    if device_mouse_check_button_pressed(0,mb_left)

    {

        버튼을 눌렀을때 무엇을 할지에 대한 코드

    }

    if device_mouse_check_button_released(0,mb_left)

    {

        버튼을 떼었을때 무엇을 할지에 대한 코드

    }

}

• 이미지 자체로 크기를 설정하여 마우스가 롤오버 되었는지 판단 할 경우의 코드

[step]

if collision_point(mouse_x,mouse_y,self,true,false)

{

if device_mouse_check_button_pressed(0,mb_left)

{

무엇을 할지에 대한 코드 작성

}

}

맵에 배치

- 맵에 작성한 오브젝트를 배치를 하게 되면 플레이어가 화면을 스크롤 해도 인터페이스가 되는 버튼 GUI는 

화면에 고정되어 제 기능을 합니다.

- 주의 할 점은 윈도우용에서는 간단하게 작동을 하지만, 

복잡한 디스플레이 안드로이드, IOS , HTML5등에서는 화면사이즈를 예측하기 힘들기 때문에 

무척이나 많은 버그가 나오므로

그 부분에 대해서 필자도 해결을 못해서 이 코드를 공개하니 ...질문을 하셔도 답을 드릴 수 없습니다.