JPG PNG BMP GIF 3 MB

Tata Letak Tetap vs Tata Letak Otomatis

Ada dua mode yang berbeda yang dapat Anda gunakan untuk mengatur dan mengatur UI(User Interface) Memungkinkan pengguna untuk berinteraksi dengan aplikasi Anda. Unity saat ini mendukung tiga sistem UI. More info
Lihat di Glossary Anda saat menggunakan sistem IMGUI: Tetap dan Otomatis. Hingga sekarang, setiap contoh IMGUI yang diberikan dalam panduan ini telah menggunakan Tata Letak Tetap. Untuk menggunakan Tata Letak Otomatis, tulis GUILayout bukan GUI ketika memanggil fungsi kontrol. Anda tidak perlu menggunakan satu mode Layout di atas yang lain, dan Anda dapat menggunakan mode sekaligus dalam fungsi OnGUI() yang sama.

Tata letak tetap masuk akal untuk digunakan ketika Anda memiliki antarmuka yang dirancang sebelumnya untuk bekerja dari. Tata letak otomatis masuk akal untuk digunakan ketika Anda tidak tahu berapa banyak elemen yang Anda butuhkan di depan, atau tidak ingin khawatir tentang posisi tangan setiap kontrol. Misalnya, jika Anda membuat sejumlah tombol yang berbeda berdasarkan Simpan file Game, Anda tidak tahu persis berapa banyak tombol akan ditarik. Dalam kasus ini Tata Letak otomatis mungkin membuat lebih banyak rasa. Sangat tergantung pada desain permainan Anda dan bagaimana Anda ingin menyajikan antarmuka Anda.

Ada dua perbedaan utama saat menggunakan Tata Letak Otomatis:

• GUILayout digunakan bukan GUI
• Tidak ada fungsi Rect() diperlukan untuk Kontrol Tata Letak Otomatis

/* Two key differences when using Automatic Layout */


// JavaScript
function OnGUI () {
    // Fixed Layout
    GUI.Button (Rect (25,25,100,30), "I am a Fixed Layout Button");

    // Automatic Layout
    GUILayout.Button ("I am an Automatic Layout Button");
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        // Fixed Layout
        GUI.Button (new Rect (25,25,100,30), "I am a Fixed Layout Button");
    
        // Automatic Layout
        GUILayout.Button ("I am an Automatic Layout Button");
    }

}

Mengatur Kontrol

Tergantung pada Mode Tata Letak yang Anda gunakan, ada kait yang berbeda untuk mengendalikan di mana Anda Kontrol diposisikan dan bagaimana mereka dikelompokkan bersama. Di Tata Letak Tetap, Anda dapat menempatkan Kontrol yang berbeda menjadi Groups. Di Tata Letak Otomatis, Anda dapat menempatkan Kontrol yang berbeda menjadi Areas, Horizontal Groups, dan Vertical Groups

Tata Letak Tetap - Kelompok

Kelompok adalah konvensi yang tersedia dalam Mode Tata Letak Tetap. Mereka memungkinkan Anda untuk menentukan area layar yang mengandung beberapa Kontrol. Anda mendefinisikan Kontrol yang ada di dalam Grup dengan menggunakan fungsi GUI.BeginGroup() dan GUI.EndGroup(). Semua Kontrol di dalam Grup akan diposisikan berdasarkan sudut kiri atas Grup bukan sudut kiri atas layar. Cara ini, jika Anda memposisikan kelompok pada runtime, posisi relatif dari semua Kontrol dalam kelompok akan dipertahankan.

Sebagai contoh, sangat mudah untuk pusat beberapa kontrol di layar.

/* Center multiple Controls on the screen using Groups */


// JavaScript
function OnGUI () {
    // Make a group on the center of the screen
    GUI.BeginGroup (Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
    // All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.
    
    // We'll make a box so you can see where the group is on-screen.
    GUI.Box (Rect (0,0,100,100), "Group is here");
    GUI.Button (Rect (10,40,80,30), "Click me");
    
    // End the group we started above. This is very important to remember!
    GUI.EndGroup ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        // Make a group on the center of the screen
        GUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
        // All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.
    
        // We'll make a box so you can see where the group is on-screen.
        GUI.Box (new Rect (0,0,100,100), "Group is here");
        GUI.Button (new Rect (10,40,80,30), "Click me");
    
        // End the group we started above. This is very important to remember!
        GUI.EndGroup ();
    }

}

Anda juga dapat bersarang beberapa Grup di dalam satu sama lain. Ketika Anda melakukan ini, setiap kelompok memiliki kontennya dipetik ke ruang induknya.

/* Using multiple Groups to clip the displayed Contents */


// JavaScript
var bgImage : Texture2D; // background image that is 256 x 32
var fgImage : Texture2D; // foreground image that is 256 x 32
var playerEnergy = 1.0; // a float between 0.0 and 1.0

function OnGUI () {
    // Create one Group to contain both images
    // Adjust the first 2 coordinates to place it somewhere else on-screen
    GUI.BeginGroup (Rect (0,0,256,32));

    // Draw the background image
    GUI.Box (Rect (0,0,256,32), bgImage);
    
    // Create a second Group which will be clipped
    // We want to clip the image and not scale it, which is why we need the second Group
    GUI.BeginGroup (Rect (0,0,playerEnergy * 256, 32));

    // Draw the foreground image
    GUI.Box (Rect (0,0,256,32), fgImage);

    // End both Groups
    GUI.EndGroup ();
    GUI.EndGroup ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    // background image that is 256 x 32
    public Texture2D bgImage; 
    
    // foreground image that is 256 x 32
    public Texture2D fgImage; 
    
    // a float between 0.0 and 1.0
    public float playerEnergy = 1.0f; 
    
    void OnGUI () {
        // Create one Group to contain both images
        // Adjust the first 2 coordinates to place it somewhere else on-screen
        GUI.BeginGroup (new Rect (0,0,256,32));
    
        // Draw the background image
        GUI.Box (new Rect (0,0,256,32), bgImage);
    
            // Create a second Group which will be clipped
            // We want to clip the image and not scale it, which is why we need the second Group
            GUI.BeginGroup (new Rect (0,0,playerEnergy * 256, 32));
        
            // Draw the foreground image
            GUI.Box (new Rect (0,0,256,32), fgImage);
        
            // End both Groups
            GUI.EndGroup ();
        
        GUI.EndGroup ();
    }

}

Tata letak otomatis - Area

Area digunakan dalam mode Layout otomatis saja. Mereka mirip dengan Kelompok Tata Letak Tetap dalam fungsi, karena mereka mendefinisikan bagian yang tak terbatas dari layar untuk mengandung Kontrol GUILayout. Karena sifat Tata Letak Otomatis, Anda akan hampir selalu menggunakan Area.

Dalam mode Tata Letak Otomatis, Anda tidak mendefinisikan area layar di mana Kontrol akan ditarik pada tingkat Kontrol. Kontrol akan secara otomatis ditempatkan pada titik kiri atas daerah yang mengandungnya. Ini mungkin layar. Anda juga dapat membuat Area yang diposisikan secara manual. Kontrol GUILayout di dalam area akan ditempatkan di titik kiri atas daerah itu.

/* A button placed in no area, and a button placed in an area halfway across the screen. */


// JavaScript
function OnGUI () {
    GUILayout.Button ("I am not inside an Area");
    GUILayout.BeginArea (Rect (Screen.width/2, Screen.height/2, 300, 300));
    GUILayout.Button ("I am completely inside an Area");
    GUILayout.EndArea ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        GUILayout.Button ("I am not inside an Area");
        GUILayout.BeginArea (new Rect (Screen.width/2, Screen.height/2, 300, 300));
        GUILayout.Button ("I am completely inside an Area");
        GUILayout.EndArea ();
    }

}

Perhatikan bahwa di dalam Area, Kontrol dengan elemen yang terlihat seperti Tombol dan Kotak akan membentang lebar mereka ke panjang penuh Area.

Tata Letak Otomatis - Grup Horizontal dan Vertikal

Saat menggunakan Tata Letak Otomatis, Kontrol akan secara default muncul satu setelah yang lain dari atas ke bawah. Ada banyak kesempatan yang Anda inginkan tingkat kontrol yang lebih halus di mana Anda Meme it Kontrol ditempatkan dan bagaimana mereka diatur. Jika Anda menggunakan mode Layout Otomatis, Anda memiliki opsi Grup Horizontal dan Vertikal.

Seperti tata letak lain Kontrol, Anda memanggil fungsi terpisah untuk memulai atau mengakhiri kelompok ini. Fungsi spesifik adalah GUILayout.BeginHorizontal(), GUILayout.EndHorizontal(), GUILayout.BeginVertical(), dan GUILayout.EndVertical().

Setiap Kontrol di dalam Grup Horizontal akan selalu diletakkan secara horizontal. Setiap Kontrol di dalam Grup Vertikal akan selalu diletakkan secara vertikal. Suara ini polos sampai Anda memulai kelompok bersarang di satu sama lain. Ini memungkinkan Anda untuk mengatur sejumlah kontrol dalam konfigurasi yang dapat dibayangkan.

/* Using nested Horizontal and Vertical Groups */


// JavaScript
var sliderValue = 1.0;
var maxSliderValue = 10.0;

function OnGUI()
{
    // Wrap everything in the designated GUI Area
    GUILayout.BeginArea (Rect (0,0,200,60));

    // Begin the singular Horizontal Group
    GUILayout.BeginHorizontal();

    // Place a Button normally
    if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
    {
        maxSliderValue += 3.0 * Time.deltaTime;
    }

    // Arrange two more Controls vertically beside the Button
    GUILayout.BeginVertical();
    GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
    sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0, maxSliderValue);

    // End the Groups and Area
    GUILayout.EndVertical();
    GUILayout.EndHorizontal();
    GUILayout.EndArea();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    private float sliderValue = 1.0f;
    private float maxSliderValue = 10.0f;
    
    void OnGUI()
    {
        // Wrap everything in the designated GUI Area
        GUILayout.BeginArea (new Rect (0,0,200,60));
    
        // Begin the singular Horizontal Group
        GUILayout.BeginHorizontal();
    
        // Place a Button normally
        if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
        {
            maxSliderValue += 3.0f * Time.deltaTime;
        }
    
        // Arrange two more Controls vertically beside the Button
        GUILayout.BeginVertical();
        GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
        sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);
    
        // End the Groups and Area
        GUILayout.EndVertical();
        GUILayout.EndHorizontal();
        GUILayout.EndArea();
    }

}

Menggunakan GUILayoutOptions untuk mendefinisikan beberapa kontrol

Anda dapat menggunakan GUILayoutOptions untuk menimpa beberapa parameter Tata Letak Otomatis. Anda melakukan ini dengan menyediakan opsi sebagai parameter akhir dari Kontrol GUILayout.

Ingat dalam contoh Area di atas, di mana tombol membentang lebarnya menjadi 100% lebar Area? Kita bisa menimpa bahwa jika kita ingin. Meme it

/* Using GUILayoutOptions to override Automatic Layout Control properties */


//JavaScript
function OnGUI () {
    GUILayout.BeginArea (Rect (100, 50, Screen.width-200, Screen.height-100));
    GUILayout.Button ("I am a regular Automatic Layout Button");
    GUILayout.Button ("My width has been overridden", GUILayout.Width (95));
    GUILayout.EndArea ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
        
    void OnGUI () {
        GUILayout.BeginArea (new Rect (100, 50, Screen.width-200, Screen.height-100));
        GUILayout.Button ("I am a regular Automatic Layout Button");
        GUILayout.Button ("My width has been overridden", GUILayout.Width (95));
        GUILayout.EndArea ();
    }

}

Untuk daftar lengkap kemungkinan GUILayoutOptions, silakan baca Halaman Referensi Scripting GUILayoutOption.