'모바일 UX'에 해당되는 글 1건

  1. 2016/09/22 글뻥 NGUI Mobile Button UX 구현하기

많은 인디 개발자 또는 프로개발자 조차도 모바일 UX를 지키지 않고 그냥 개발하고 있어 안타깝더군요.

PC 마우스 UX의 경우는

- Hover In / Out
- Click
- Double Click 

이렇게 이벤트를 먹이지만, 

모바일의 경우는 
- Pressed 
- Unpressed 로

- Press 됐을때 버튼을 확대하고
- 만약 사용자가 버튼 영역을 벗어나서 손을 떼면 원상복귀되면서 명령이 취소됩니다.
- 만약 사용자가 버튼 영역을 벗어나지 않고 손을 떼면 원상복귀되면서 명령이 실행됩니다.

일전에 작성했던 이벤트 통합하기로 구현하였으니 참고하시고 다음 소스를 보시면 이해가 쉬우실거 같네요.

참고 링크 : http://www.wolfpack.pe.kr/909


먼저 버튼을 2개 만들어 놓으시고 이벤트 통합용 스크립트는 다음과 같습니다.

using UnityEngine;
using System.Collections;
using UnityEngine.SceneManagement;

public class UIManager_Intro : MonoBehaviour {

    const float workTerm = 0.2f;

    public static UIManager_Intro instance;
    public void Awake()
    {
        UIManager_Intro.instance = this;
     }

     private void SetScaleUp(GameObject _obj, bool isPressed)
     {
         if (isPressed)
         {
             iTween.ScaleTo(_obj, new Vector3(1.1f, 1.1f, 1.1f), workTerm);
         }
         else
         { 
             iTween.ScaleTo(_obj, new Vector3(1f, 1f, 1f), workTerm);
         }
     }

     private bool DetectHoverSameObject(GameObject _obj)
     {
         RaycastHit hit;
         Ray ray = NGUITools.FindCameraForLayer(_obj.layer).ScreenPointToRay(Input.mousePosition);
         if (Physics.Raycast(ray, out hit, Mathf.Infinity))
         {
             return (hit.collider.gameObject == _obj);
         }
         return false;
     }

     public void Button1_OnPress(GameObject _obj, bool isPressed)
     {
         SetScaleUp(_obj, isPressed);
         if (!isPressed && DetectHoverSameObject(_obj)) StartCoroutine(LoadingScene("usingAnchor"));
    }
 
    public void Button2_OnPress(GameObject _obj, bool isPressed)
     {
         SetScaleUp(_obj, isPressed);
         if (!isPressed && DetectHoverSameObject(_obj)) StartCoroutine(LoadingScene("inputField"));
     }

     IEnumerator LoadingScene(string _sceneName)
     {
         yield return new WaitForSeconds(workTerm);
         SceneManager.LoadScene(_sceneName);
     }
}


버튼1에만 우선 적용합니다. 스크립트는 다음과 같습니다. 
using UnityEngine;
using System.Collections;

public class Behavior_Button1 : MonoBehaviour {

    void Start () {
        UIEventListener.Get(gameObject).onPress += UIManager_Intro.instance.Button1_OnPress;
    }
}



결과 1. 마우스를 클릭하여 Press 시뮬레이팅
사용자 삽입 이미지
결과2. 취소 (드레그하여 다른곳에서 손 뗌)
사용자 삽입 이미지
결과 3. 명령실행 (원상복귀후 다른씬으로 이동)
사용자 삽입 이미지


2016/09/22 09:23 2016/09/22 09:23