CREATE YOUR WORLD
User Interface
Utilizing the Gyro Sensor
8min
when creating zepeto world, you can use the gyro sensor to implement various world play ideas depending on the tilt of the device this guide will show you how to utilize input gyro within zepetoscript ๐ gyroscope https //docs unity3d com/scriptreference/gyroscope html https //docs unity3d com/scriptreference/gyroscope html setting up object 1\) add hierarchy > \[+] > 3d object > sphere object to the scene 2\) change the object's name to ball and add a rigidbody component writing a script 1\) add typescript and rename the script to rollingball write a sample script as shown below 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() { // get the rigidbody component attached to the same gameobject as this script this rollingball = this getcomponent\<rigidbody>(); // check if the device supports gyroscope if (systeminfo supportsgyroscope) { // enable the gyroscope input gyro enabled = true; } else { // disable the script if gyroscope is not supported console log("gyroscope not supported on this device "); input gyro enabled = false; } } update() { // check if the gyroscope of the input device is enabled if (input gyro enabled) { // read gyro values along the x and z axes // round to one decimal place for stable movement of the ball object let gyrovaluex = math round(input gyro gravity x 10) / 10; let gyrovaluez = math round(input gyro gravity y 10) / 10; // set the ball's velocity with the gyrovaluex and gyrovaluez this rollingball velocity = new vector3(gyrovaluex this velocitymultiplier, 0, gyrovaluez this velocitymultiplier); // display the current gyro values on the screen this debugtext text = "input gyro gravity " + input gyro gravity tostring(); } } } script description gets the rigidbody component attached to the ball object round the input gyro gravity x and input gyro gravity z values โโto get gyrovaluex, gyrovaluez values give speed to the ball object by substituting the gyrovaluex and gyrovaluez values โโmultiplied by velocitymultiplier into velocity the input gyro gravity value is displayed on the screen through text ui ๐ gyroscope gravity https //docs unity3d com/scriptreference/gyroscope gravity html https //docs unity3d com/scriptreference/gyroscope gravity html 2\) add the rollingball zepetoscript you wrote to the ball object in the hierarchy window, connect the text ui to the property displayed in the zepetoscript inspector window by dragging and dropping testing on mobile 1\) run the example world with qr mobile test 2\) the ball object moves according to the device tilt โ๏ธ caution please note that input gyro only works in mobile environments applying the example you can move the zepeto character within zepeto world by applying input gyro 1\) add typescript and rename the script to gyromovement write a sample script as shown below 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() { // add a listener for when a local player is added zepetoplayers instance onaddedlocalplayer addlistener(() => { this localcharacter = zepetoplayers instance localplayer zepetoplayer character; }); // check if the device supports gyroscope if (systeminfo supportsgyroscope) { // enable the gyroscope input gyro enabled = true; } else { // disable the script if gyroscope is not supported console log("gyroscope not supported on this device "); input gyro enabled = false; } } update() { if (input gyro enabled) { // get the x axis value of the gyroscope gravity\\ // round to one decimal place for stable movement of the character const gyrovalue = math round(input gyro gravity x 10) / 10; const direction = new vector3(0, 0, gyrovalue); // move local character this localcharacter move(direction); } } } script description when a local player is added to the scene, receive a zepeto character instance round the input gyro gravity x value to get the gyrovalue value move the zepeto character in the z axis direction by assigning direction as a parameter to the move() function 2\) add a gameobject to the scene and rename it gyrogravity add the gyromovement zepetoscript you created 3\) when running the example world as a qr mobile test, the zepeto character moves according to the tilt of the device ๐ tips in addition to input gyro gravity used in this example, you can use various input gyro functions you can apply this to various ideas try releasing a fun world on zepeto!