การใช้เซ็นเซอร์ไจโร

8min
เมื่อสร้าง ZEPETO World คุณสามารถใช้ Gyro Sensor เพื่อใช้แนวคิดการเล่นในโลกต่างๆ ขึ้นอยู่กับการเอียงของอุปกรณ์ คู่มือนี้จะแสดงให้คุณเห็นวิธีการใช้ Input.gyro ภายใน ZEPETOScript.
📘 ไจโรสโคป
https://docs.unity3d.com/ScriptReference/Gyroscope.html﻿
﻿
การตั้งค่าอ็อบเจ็กต์
1) เพิ่ม Hierarchy > [+] > 3D Object > Sphere object ลงใน Scene.
2) เปลี่ยนชื่ออ็อบเจ็กต์เป็น Ball และเพิ่มคอมโพเนนต์ Rigidbody.
﻿
﻿
การเขียนสคริปต์
1) เพิ่ม TypeScript และเปลี่ยนชื่อสคริปต์เป็น RollingBall.
เขียนสคริปต์ตัวอย่างตามที่แสดงด้านล่าง.
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Input, SystemInfo, Vector3, Rigidbody } from 'UnityEngine';
import { Text } from 'UnityEngine.UI';
 
export default class RollingBall extends ZepetoScriptBehaviour {
 
    public debugText: Text;
    public velocityMultiplier: number = 100;
 
    private _rollingBall: Rigidbody;
 
 
    Start() {
 
        // รับคอมโพเนนต์ Rigidbody ที่แนบอยู่กับ GameObject เดียวกันกับสคริปต์นี้
        this._rollingBall = this.GetComponent<Rigidbody>();
 
        // ตรวจสอบว่าอุปกรณ์รองรับ gyroscope หรือไม่
        if (SystemInfo.supportsGyroscope) {
            // เปิดใช้งาน gyroscope
            Input.gyro.enabled = true;
        } else {
            // ปิดสคริปต์หากไม่รองรับ gyroscope
            console.log("ไม่รองรับ gyroscope บนอุปกรณ์นี้.");
            Input.gyro.enabled = false;
        }
    }
 
    Update() {
        // ตรวจสอบว่า gyroscope ของอุปกรณ์อินพุตเปิดใช้งานอยู่หรือไม่
        if (Input.gyro.enabled) {
     
            // อ่านค่าจาก gyroscope ตามแกน x และ z
            // ปัดเศษเป็นทศนิยมหนึ่งตำแหน่งเพื่อให้การเคลื่อนไหวของวัตถุ Ball มีเสถียรภาพ
            let gyroValueX = Math.round(Input.gyro.gravity.x * 10) / 10;
            let gyroValueZ = Math.round(Input.gyro.gravity.y * 10) / 10;
     
            // ตั้งค่าความเร็วของ Ball ด้วย gyroValueX และ gyroValueZ
            this._rollingBall.velocity = new Vector3(gyroValueX * this.velocityMultiplier, 0, gyroValueZ * this.velocityMultiplier);
     
            // แสดงค่าปัจจุบันของ gyro บนหน้าจอ
            this.debugText.text = "Input.gyro.gravity : " + Input.gyro.gravity.ToString();
        }
    }
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Input, SystemInfo, Vector3, Rigidbody } from 'UnityEngine';
import { Text } from 'UnityEngine.UI';
 
export default class RollingBall extends ZepetoScriptBehaviour {
 
    public debugText: Text;
    public velocityMultiplier: number = 100;
 
    private _rollingBall: Rigidbody;
 
 
    Start() {
 
        // รับคอมโพเนนต์ Rigidbody ที่แนบอยู่กับ GameObject เดียวกันกับสคริปต์นี้
        this._rollingBall = this.GetComponent<Rigidbody>();
 
        // ตรวจสอบว่าอุปกรณ์รองรับ gyroscope หรือไม่
        if (SystemInfo.supportsGyroscope) {
            // เปิดใช้งาน gyroscope
            Input.gyro.enabled = true;
        } else {
            // ปิดสคริปต์หากไม่รองรับ gyroscope
            console.log("ไม่รองรับ gyroscope บนอุปกรณ์นี้.");
            Input.gyro.enabled = false;
        }
    }
 
    Update() {
        // ตรวจสอบว่า gyroscope ของอุปกรณ์อินพุตเปิดใช้งานอยู่หรือไม่
        if (Input.gyro.enabled) {
     
            // อ่านค่าจาก gyroscope ตามแกน x และ z
            // ปัดเศษเป็นทศนิยมหนึ่งตำแหน่งเพื่อให้การเคลื่อนไหวของวัตถุ Ball มีเสถียรภาพ
            let gyroValueX = Math.round(Input.gyro.gravity.x * 10) / 10;
            let gyroValueZ = Math.round(Input.gyro.gravity.y * 10) / 10;
     
            // ตั้งค่าความเร็วของ Ball ด้วย gyroValueX และ gyroValueZ
            this._rollingBall.velocity = new Vector3(gyroValueX * this.velocityMultiplier, 0, gyroValueZ * this.velocityMultiplier);
     
            // แสดงค่าปัจจุบันของ gyro บนหน้าจอ
            this.debugText.text = "Input.gyro.gravity : " + Input.gyro.gravity.ToString();
        }
    }
}
﻿
﻿
คำอธิบายสคริปต์
ดึงคอมโพเนนต์ Rigidbody ที่แนบมากับวัตถุ Ball
ปัดเศษ Input.gyro.gravity.x และ Input.gyro.gravity.z เพื่อให้ได้ค่า gyroValueX, gyroValueZ
ให้ความเร็วกับวัตถุ Ball โดยการแทนที่ค่า gyroValueX และ gyroValueZ ที่คูณด้วย velocityMultiplier ลงใน velocity.
ค่า Input.gyro.gravity จะแสดงบนหน้าจอผ่าน Text UI
📘 Gyroscope.gravity
https://docs.unity3d.com/ScriptReference/Gyroscope-gravity.html﻿
﻿
2) เพิ่ม RollingBall ZEPETOScript ที่คุณเขียนลงในวัตถุ Ball
ในหน้าต่าง Hierarchy เชื่อมต่อ Text UI กับ Property ที่แสดงในหน้าต่าง Inspector ของ ZEPETOScript โดยการลากและวาง
﻿
﻿
การทดสอบบนมือถือ
1) รันโลกตัวอย่างด้วยการทดสอบ QR บนมือถือ
2) วัตถุบอลเคลื่อนที่ตามการเอียงของอุปกรณ์.
﻿
﻿
❗️ ระวัง
โปรดทราบว่า Input.gyro ใช้งานได้เฉพาะในสภาพแวดล้อมมือถือเท่านั้น.
﻿
การใช้ตัวอย่าง
คุณสามารถเคลื่อนที่ตัวละคร ZEPETO ภายใน ZEPETO World โดยการใช้ Input.gyro.
1) เพิ่ม TypeScript และเปลี่ยนชื่อสคริปต์เป็น GyroMovement.
เขียนสคริปต์ตัวอย่างตามที่แสดงด้านล่าง.
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Input, SystemInfo, Vector3 } from 'UnityEngine';
import { ZepetoCharacter, ZepetoPlayers, LocalPlayer } from 'ZEPETO.Character.Controller';

export default class GyroMovement extends ZepetoScriptBehaviour {

    private _localCharacter: ZepetoCharacter;

    Start() {

        // เพิ่มผู้ฟังเมื่อผู้เล่นท้องถิ่นถูกเพิ่ม
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });

        // ตรวจสอบว่าอุปกรณ์รองรับ gyroscope หรือไม่
        if (SystemInfo.supportsGyroscope) {
            // เปิดใช้งาน gyroscope
            Input.gyro.enabled = true;
        }
        else {
            // ปิดการใช้งานสคริปต์หากไม่รองรับ gyroscope
            console.log("ไม่รองรับ gyroscope บนอุปกรณ์นี้.");
            Input.gyro.enabled = false;
        }
    }

    Update() {
        if (Input.gyro.enabled) {
            // รับค่าระนาบ x ของแรงโน้มถ่วง gyroscope\
            // ปัดเศษเป็นทศนิยมหนึ่งตำแหน่งเพื่อให้การเคลื่อนไหวของตัวละครมีเสถียรภาพ
            const gyroValue = Math.round(Input.gyro.gravity.x * 10) / 10;

            const direction = new Vector3(0, 0, -gyroValue);

            // เคลื่อนที่ตัวละครท้องถิ่น
            this._localCharacter.Move(direction);
        }
    }
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Input, SystemInfo, Vector3 } from 'UnityEngine';
import { ZepetoCharacter, ZepetoPlayers, LocalPlayer } from 'ZEPETO.Character.Controller';

export default class GyroMovement extends ZepetoScriptBehaviour {

    private _localCharacter: ZepetoCharacter;

    Start() {

        // เพิ่มผู้ฟังเมื่อผู้เล่นท้องถิ่นถูกเพิ่ม
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });

        // ตรวจสอบว่าอุปกรณ์รองรับ gyroscope หรือไม่
        if (SystemInfo.supportsGyroscope) {
            // เปิดใช้งาน gyroscope
            Input.gyro.enabled = true;
        }
        else {
            // ปิดการใช้งานสคริปต์หากไม่รองรับ gyroscope
            console.log("ไม่รองรับ gyroscope บนอุปกรณ์นี้.");
            Input.gyro.enabled = false;
        }
    }

    Update() {
        if (Input.gyro.enabled) {
            // รับค่าระนาบ x ของแรงโน้มถ่วง gyroscope\
            // ปัดเศษเป็นทศนิยมหนึ่งตำแหน่งเพื่อให้การเคลื่อนไหวของตัวละครมีเสถียรภาพ
            const gyroValue = Math.round(Input.gyro.gravity.x * 10) / 10;

            const direction = new Vector3(0, 0, -gyroValue);

            // เคลื่อนที่ตัวละครท้องถิ่น
            this._localCharacter.Move(direction);
        }
    }
}
﻿
﻿
คำอธิบายสคริปต์
เมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้าไปในฉาก ให้รับอินสแตนซ์ตัวละคร ZEPETO.
ปัดค่า Input.gyro.gravity.x เพื่อให้ได้ค่า gyroValue.
เคลื่อนที่ตัวละคร ZEPETO ในทิศทางแกน Z โดยการกำหนด direction เป็นพารามิเตอร์ให้กับ Move() ฟังก์ชัน.
2) เพิ่ม GameObject ลงในฉากและเปลี่ยนชื่อเป็น GyroGravity. เพิ่มสคริปต์ GyroMovement ZEPETO ที่คุณสร้างขึ้น.
﻿
﻿
3) เมื่อรันโลกตัวอย่างเป็นการทดสอบ QR บนมือถือ ตัวละคร ZEPETO จะเคลื่อนที่ตามการเอียงของอุปกรณ์.
﻿
﻿
👍 เคล็ดลับ
นอกจาก Input.gyro.gravity ที่ใช้ในตัวอย่างนี้ คุณสามารถใช้ฟังก์ชันต่าง ๆ ของ Input.gyro ได้.
คุณสามารถนำไปใช้กับแนวคิดต่าง ๆ ได้ ลองปล่อยโลกสนุก ๆ บน ZEPETO!
﻿
อัปเดต 11 Oct 2024
หน้านี้ช่วยคุณได้หรือไม่?
การตั้งค่า UI Canvas
การเปลี่ยนการหมุนของหน้าจอในขณะรันไทม์