Unity - Character Select dengan ScriptableObject

February 12, 2018 in #Coding #Unity | | | Share on Google+

ScriptableObject adalah salah satu fitur Unity yang sangat bermanfaat dan mempermudah kita dalam membuat game. Kali ini, kita akan belajar menggunakannya untuk membuat character select sederhana.


Layouting

Bentuk dari layout game yang saya buat adalah sebuah grid di mana pemain memilih salah satu karakter di dalamnya. Oleh karena itu, kita berikan komponen Grid Layout Group ke dalam sebuah RectTransform di dalam Canvas. Hasilnya, setiap child di dalamnya akan otomatis disusun secara rapi di dalam grid tersebut.



Scripting Karakter

Karena cuma tutorial, data karakter saya buat sederhana saja. Cuma berisi nama karakter dan sprite yang dipakai.

// Filename : Character.cs

using UnityEngine;

[CreateAssetMenu(fileName = "Character", menuName = "Character Select / Character")]
public class Character : ScriptableObject  
{
    public Sprite sprite;
    public string characterName;
    public int health;
}

1.) Prefab

Selanjutnya, kita perlu pembuat prefab agar bisa menampilkannya di dalam scene secara dinamis. Prefab terdiri dari sebuah RectTransform Character yang memiliki child berupa Text dan Image. Kemudian, kita tambahkan juga komponen Button dengan Transition = none;

Tampilan hirarki CharacterSelectPanel menjadi seperti di bawah.

2.) Asset Karakter

Setelah ScriptableObject selesai dibuat, kamu bisa membuat sebanyak mungkin asset karakter. Karakter yang saya buat adalah hewan-hewan lucu. Pembuatan karakter dilakukan dengan cara Klik kanan > Create > Character Select > Character.



Menu Character Select

3.) CharacterSelectManager

Kita perlu membuat manager untuk mengatur proses pembuatan daftar karakter sekaligus untuk mengurus karakter mana yang akan dipilih pemain.

// Filename : CharacterSelectManager.cs

using UnityEngine;  
using UnityEngine.UI;  
using UnityEngine.SceneManagement;

public class CharacterSelectManager : MonoBehaviour  
{
    public static CharacterSelectManager Singleton;
    public Character[] characters;
    public GameObject characterPrefab;
    public Character selectedCharacter;

    private GameObject characterSelectPanel;

    // inisialisasi singleton
    private void Awake()
    {
        if (Singleton  null)
        {
            Singleton = this;
        }
        else if (Singleton != this)
            Destroy(this);
    }
}

4.) Menampilkan daftar karakter

Kita looping setiap asset Character yang telah kita masukkan ke dalam variabel characters.
// Filename : CharacterSelectManager.cs  
private void Start()  
{
    characterSelectPanel = GameObject.Find("CharacterSelectPanel");     

    for (int i = 0; i < characters.Length; i++)
    {
        // buat gameobject untuk setiap karakter
        Character character        = characters[i];

        // instantiate
        // set parent ke GameObject yang memiliki Grid Layout Group
        GameObject newCharacter = Instantiate(characterPrefab, characterSelectPanel.transform);

        // set nama dan sprite sesuai dengan data array  ke-i
        newCharacter.GetComponentInChildren<Text>().text  = character.name;
        newCharacter.GetComponentInChildren<Image>().sprite = character.sprite;

        // nanti digunakan untuk mengetahui karakter ke (dalam array) berapa yang dipilih
        newCharacter.GetComponent<SelectCharacterFromList>().index = i;
    }
}
Sampai tahap ini, setiap karakter yang tadi kita buat sudah ditampilkan.

5.) Menerima input

Dalam tahap sebelumnya, kita memberikan indeks looping. Angka tersebut digunakan untuk mengetahui karakter dalam indeks array ke berapa yang dipilih. Tambahkan script berikut ke dalam prefab Character.
// Filename : SelectCharacterFromList.cs

using UnityEngine;  
using UnityEngine.UI;

public class SelectCharacterFromList : MonoBehaviour  
{
    public int index;

    private Button button;

    private void Start()
    {
        button = GetComponent<Button>();

        // karena button dibuat via script
        // tidak bisa melakukan assign event ketika OnClick lewat editor
        button.onClick.AddListener(delegate { Pick(); });
    }

    // dipanggil ketika pemain men-klik salah satu karakter
    private void Pick()
    {
        GameManager.Singleton.character = CharacterSelectManager.Singleton.characters[index];
        CharacterSelectManager.Singleton.GoToScene("Game");
    }
}

6.) Menyimpan data karakter dan menampilkan karakter yang dipilih ke scene lain

Setelah memilih karakter, kita perlu menyimpannya agar sistem tau karakter mana yang dipilih. Jika datanya sedikit, kita cukup membuat PlayerPrefs, tapi jika datanya banyak dan non-primitif agak susah. Oleh karena itu saya menggunakan GameManager untuk menyimpan data karakter dipilih (dan kemungkinan konfigurasi lain yang mungkin kamu butuhkan).
// Filename : GameManager.cs

using UnityEngine;

public class GameManager : MonoBehaviour  
{
    public static GameManager Singleton;
    public Character character;

    private void Awake()
    {
        if (Singleton  null)
        {
            Singleton = this;
            DontDestroyOnLoad(this.gameObject);
        }
        else if (Singleton != this)
            Destroy(this);
    }
}


Menampilkan karakter yang dipilih di scene lain

Di scene lain, kita membutuhkan manager lagi untuk mengatur data karakter dan yang lainnya (posisi spawn, jumlah musuh, dan lain-lain tergantung game kamu). Dalam tutorial ini saya namakan LevelManager.

// Filename : LevelManager.cs

using UnityEngine;  
using UnityEngine.UI;  
using UnityEngine.SceneManagement;

public class LevelManager : MonoBehaviour  
{
    public static LevelManager Singleton;
    public Image playerSprite;
    public Text playerNameText;

    private void Start()
    {
        // tampilkan karakter yang dipilih
        playerSprite.sprite = GameManager.Singleton.character.sprite;
        playerNameText.text = GameManager.Singleton.character.characterName;
    }

    public void GoToScene(string sceneName)
    {
        SceneManager.LoadScene("Character Select");
    }
}

Hasil

Hasil dari tutorial ini adalah seperti berikut.

Download Source Code

Source code dapat di download di sini.

February 12, 2018 in #Coding #Unity | | | Share on Google+