GMS2 zUI in Android 안드로이드 환경에서 ZUI 사용

Windows에서 주로 작업을 하다보니 Android 환경에서 의도한대로 동작이 안되는 현상이 있었습니다.

GUI 크기 문제

간혹 안드로이드에서 ZUI가 표시 안되는 경우가 있습니다. 확인해보니 gui영역이 생각했던 크기보다 큰 경우가 발생합니다. 임의의 room을 만들고 해당 room에 room creation code에 아래 내용을 넣어줍니다. 마지막에 room_goto_next()를 호출하여 우리가 원하는 room을 가도록 만들어 줍니다. 그리고 여기에서 WIDTH, HEIGHT 는 가로 세로이며, 크기는 원하는 크기로 넣어줍니다.

WIDTH = 480
HEIGHT = 320
if(os_type==os_android){
 //WIDTH = display_get_height()
 //HEIGHT = display_get_height()
}
window_set_size(WIDTH,HEIGHT)
surface_resize(application_surface,WIDTH,HEIGHT)
display_set_gui_size(WIDTH, HEIGHT);

room_goto_next();

Hover 문제

ZUI 는 hover가 된 Object에 대해서만 동작합니다. Step 이벤트에서 마우스를 지속적으로 감시하고 hover를 변경합니다.

objZUIMain 의 Step 이벤트

global.__zui_mx = device_mouse_x_to_gui(0);
global.__zui_my = device_mouse_y_to_gui(0);

zui_update_begin();
zui_update();

이것은 모바일 환경에서 불편을 만듭니다. 왜냐하면 마우스를 사용하지 않기 때문에 hover가 일어나지 않습니다. 그래서 버튼을 두번 눌러야지 동작을 하게됩니다. 이것을 개선하려면 클릭전에 hover 처리를 해주면됩니다.
zui 의 모든 object의 global left pressed 코드의 hover 처리가 있다면 위 코드를 한번더 실행하게 해줍니다.
이러한 처리는 상속을 받으므로서 쉽게 처리가 가능합니다.
objUIOneClickHoverParent object를 만들고 global left pressed 에 위 코드를 만들고 나머지 object 에 event_inherited(); 를 한줄 넣습니다.

윈도우 Close 버튼 없음

여러개의 윈도우가 있다면 당연히 우측 상단에 Close가 없으면 불편할겁니다. ZUI에는 없네요. 그러면 버튼 형태로 만들어서 넣으면 됩니다.

버튼과 비슷하나 Global Left Released 에 아래와 같이 zui_destory를 넣습니다. closeall 옵션에 따라 모든 윈도를 닫을지 현재 윈도우를 닫을지 결정 합니다.

Global Left Released 이벤트

if (pressed) {
 pressed = 0;
 if (zui_get_hover()) {
  if(closeall==true){
   with(zui_main()){
    zui_destroy()
   }
  }else{
   with(zui_get_parent()){
    zui_destroy()
   }
  }
 }
}

Draw 이벤트에서는 sprClose 이미지를 추가하였습니다. check box위에 X 표시를 추가한 이미지 입니다.

if (zui_get_hover()) {
 if (pressed)
  draw_set_color($cccccc);
 else
  draw_set_color($eeeeee); 
} else {
 draw_set_color($ffffff);
}

draw_sprite_ext(sprClose, 0, -1, -1, 1, 1, 0, draw_get_color(), 1);

if (value)
 draw_sprite_ext(sprClose, 1, -1, -1, 1, 1, 0, draw_get_color(), 1);

테스트 코드에 아래 코드를 넣습니다.

with (zui_create(400-20, 4, objUIClosebox)) {
 zui_set_anchor(0, 0);
}

앞에 인자는 좌표이므로 적당이 넣으면 됩니다.
objTestWindow의 Create 이벤트 입니다.

zui_set_size(400, 216);
 
with (zui_create(0, 0, objUIWindowCaption)) {
 caption = "Window";
 draggable = 1;
}

with (zui_create(400-20, 4, objUIClosebox)) {
 zui_set_anchor(0, 0);
}

with (zui_create(12, 38, objUIButton)) {
 zui_set_anchor(0, 0);
 zui_set_size(120, 32);
 caption = "Button 1";
 callback = test_callback_button;
}

with (zui_create(140, 38, objUIButton)) {
 zui_set_anchor(0, 0);
 zui_set_size(120, 32);
 caption = "Button 2";
 callback = test_callback_button;
}

with (zui_create(268, 38, objUIButton)) {
 zui_set_anchor(0, 0);
 zui_set_size(120, 32);
 caption = "Button 3";
 callback = test_callback_button;
}

실행화면

전체 소스

https://drive.google.com/open?id=1guCs-DUhfdszIgI4062y9b_Dz4etH9tS

안드로이드용 apk

https://drive.google.com/open?id=16RIOcmZriQum-EveywNwY-FFRJWI6FzE