การสร้าง จอยสติก ในแอนดรอย(create virtual joystick) จาก unity3d

วันนี้ จะมา นำเสนอ วิธีการสร้าง virtual joysitck โดยใช้โปรแกรม unity3d ครับ

ภาพจอยสติ๊กจาก http://cmmakerclub.com/

• โปรแกรมที่ต้องเตรียม คือ unity3d(โปรแกรมสร้างเกมส์แต่สามารถประยุกใช้ได้)  https://unity3d.com
  
  link video การสร้าง ครับ
  part1 https://www.youtube.com/watch?v=bIVeuMZ3iUo
  part2 https://www.youtube.com/watch?v=n2QbREspUQw
  
  จากความรู้ที่ผมได้ศึกษาโปรแกรม unity3d มาพอสมควร การเขียนโปรแกรมบน unity3d นั้นเขียนแบบ OOP เต็มรูบแบบ 

1 2 3 4

using UnityEngine; using System.Collections; using UnityEngine.UI; using UnityEngine.EventSystems;

• เราจะใช้ library ที่ต้องเพิ่มเข้ามา บรรทัดที่ 2 คือจะนำ object ที่มาจาก UI ใน unity3d ใช้งาน ในพวก UI ก็จะแบ่งเป็นพวก Image,Button,Canvas เป็นต้น ซึ้ง
• บรรดทัดที่ 4 จะเป็น class ที่ทำหน้าที่เกี่ยวกับ event ที่มาจาก user เช่น การ กดปุ่ม touch(ที่อยู่ใน mobile) เป็นต้น

1 2 3 4 5 6 7 8 9 10 11 12 13

public class ScripteJoyStick : MonoBehaviour ,IDragHandler,IPointerUpHandler,IPointerDownHandler{ public Image BgImg; public Image JoyStick; private Vector3 InputVector; // Use this for initialization void Start () { } // Update is called once per frame void Update () { } }

เราจะสืบทอดคุณสมบัติจาก namespace ที่มาจาก   using UnityEngine.EventSystems; คือเครื่องมือจำพวก 

• IDragHandler,IPointerUpHandler,IPointerDownHandler

ต่อมาเราจะทำการ ประกาศ Image ขึ้นมา เพื่อจะให้ code ของเราควบคุมตัว objact อีกทีโดยการทำงานของโค็ดโปรแกรมเราจะสร้าง 3 method ขึ้นมาคอยดักจับการทำงานของ

• void OnPointerDown(PointerEventData ped) // เมื่อมีการกดปุ่มหรือสัมผัส หน้าจอ 
• void OnPointerUp(PointerEventData ped) // เมื่อไม่ได้กดปุ่ม โดยในที่นี้ผมจะสั่งให้ตัว object ที่เป็น Image เคลื่อนที่ไปยัง ตำแหน่งที่ 0 หรือ ต่ำแหน่งตรงกลางที่มันเคย อยู่ 
• void OnDrag(PointerEventData ped) // เมือหน้าจอถูกกด แล้ว มีการเลื่อน pointer ไปจาก ตำแหน่งเดิม จะทำการย้าย ที่ตั้งของตัวภาพ ไหม่ตามโค็ดด้านล่าง

 using UnityEngine;  
 using System.Collections;  
 using UnityEngine.UI;  
 using UnityEngine.EventSystems;  
 public class ScripteJoyStick : MonoBehaviour ,IDragHandler,IPointerUpHandler,IPointerDownHandler{  
      private Image BgImg;  
      private Image JoyStick;  
      private Vector3 InputVector;  
      // Use this for initialization  
      void Start () {  
           BgImg = GetComponent<Image> (); // get component ที่เป็น Img ที่ script ไปฝั่งอยู่   
           JoyStick = transform.GetChild (0).GetComponent<Image> (); // get ตัวลูก หรือ ตัว subset ที่อยู่ ใน object ที่เป็น img อีกที   
      }  
      // Update is called once per frame  
      void Update () {   
      }  
      public virtual void OnPointerDown(PointerEventData ped){  
           OnDrag(pad);  
      }  
      public virtual void OnPointerUp(PointerEventData ped){ // จะเข้า มาทำงานก็ต่อเมื่อ เราไม่ได้ touch หรือกดปุ่มบนหน้าจอ   
     //ปรับตำแหน่งของ img ที่เป็น joy ให้แนวแกน x =0 และแนวแกน y = ตำแหน่งสุดท้ายที่เราเลือก pointer ไป  
           JoyStick.rectTransform.anchoredPosition = new Vector3(0,InputVector.z*(BgImg.rectTransform.sizeDelta.y/2));   
      }  
      public virtual void OnDrag(PointerEventData ped){  
           Vector2 pos = Vector2.zero;  
           if(RectTransformUtility.ScreenPointToLocalPointInRectangle(BgImg.rectTransform,ped.position,ped.pressEventCamera,out pos)) //  
           {  
                pos.x = (pos.x/BgImg.rectTransform.sizeDelta.x); // pos.x = ตำแหน่งของ joy หารด้วย ขอบ  
                pos.y = (pos.y/BgImg.rectTransform.sizeDelta.y);  
                InputVector = new Vector3(pos.x,0,pos.y);  
                InputVector =(InputVector.magnitude>0.8f)?InputVector.normalized:InputVector;  
                JoyStick.rectTransform.anchoredPosition = new Vector3(InputVector.x *(BgImg.rectTransform.sizeDelta.x/2),  
                                           InputVector.z*(BgImg.rectTransform.sizeDelta.y/2));  
                Debug.Log(JoyStick.rectTransform.anchoredPosition.y);  
           }  
      }  
 }