Project RPG BÀI 7. TÙY BIẾN GIAO DIỆN VỚI GUI.SKIN VÀ GUI.STYLE

Bài viết này mình sẽ hướng dẫn các bạn cách tùy biến giao diện của menu Khởi Tạo Nhân Vật đã tạo ở bài viết trước với thư viện GUI trong Unity 3D. Giao diện đồ họa trong game có thể nói là phần khá quan trọng trong khâu lập trình game.



B1. Double click vào file CharacterGenarator rồi xóa tất cả đi và chèn lại đoạn code sau vào:

using UnityEngine;
using System.Collections;
using System; //used for Enum class

public class CharacterGenerator : MonoBehaviour {
private PlayerCharacter _toon;
private const int STARTING_POINTS = 350;
private const int MIN_STARTING_ATTRIBUTE_VALUE = 10;
private const int STARTING_VALUE = 50;
private int pointsLeft;

private const int OFFSET = 5;
private const int LINE_HEIGHT = 20;

private const int STAT_LABEL_WIDTH = 100;
private const int BASEVALUE_LABEL_WIDTH = 30;
private const int BUTTON_WIDTH = 20;
private const int BUTTON_HEIGHT = 20;

private int statStartingPos = 40;

public GUISkin mySkin;


// Use this for initialization
void Start () {
_toon = new PlayerCharacter();
_toon.Awake();

pointsLeft = STARTING_POINTS;
for(int cnt = 0; cnt < Enum.GetValues(typeof(AttributeName)).Length; cnt++){
_toon.GetPrimaryAttribute(cnt).BaseValue = STARTING_VALUE;
pointsLeft -= (STARTING_VALUE - MIN_STARTING_ATTRIBUTE_VALUE);
}
_toon.StatUpate();
}

// Update is called once per frame
void Update () {

}

void OnGUI(){
GUI.skin = mySkin; 
DisplayName();
DisplayPointsLeft();
DisplayAttributes();
DisplayVitals();
DisplaySkills();
}

private void DisplayName(){
GUI.Label(new Rect(10, 10, 50, 25),"Name:", GUI.skin.GetStyle("styleMiddle"));
_toon.Name = GUI.TextField(new Rect(65, 10, 100, 25), _toon.Name );

}

private void DisplayAttributes(){
for(int cnt = 0; cnt < Enum.GetValues(typeof(AttributeName)).Length; cnt++){
GUI.Label(new Rect( OFFSET, //x
                   statStartingPos + (cnt * LINE_HEIGHT), //y
                   STAT_LABEL_WIDTH, //width
                   LINE_HEIGHT //height
                  ), ((AttributeName)cnt).ToString());
GUI.Label(new Rect( STAT_LABEL_WIDTH + OFFSET, //x
                   statStartingPos + (cnt * LINE_HEIGHT), //y
                   BASEVALUE_LABEL_WIDTH, //width
                   LINE_HEIGHT //height
                  ), _toon.GetPrimaryAttribute(cnt).AdjustedBaseValue.ToString(), GUI.skin.GetStyle("styleMiddle"));
if(GUI.Button(new Rect( OFFSET + STAT_LABEL_WIDTH + BASEVALUE_LABEL_WIDTH, //x
                       statStartingPos + (cnt*BUTTON_HEIGHT), //y
                      BUTTON_WIDTH, //width
                      BUTTON_HEIGHT //height
                      ),"-")){
if(_toon.GetPrimaryAttribute(cnt).BaseValue > MIN_STARTING_ATTRIBUTE_VALUE){
_toon.GetPrimaryAttribute(cnt).BaseValue--;
pointsLeft++;
_toon.StatUpate();
}
}

if(GUI.Button(new Rect( OFFSET + STAT_LABEL_WIDTH + BASEVALUE_LABEL_WIDTH + BUTTON_WIDTH, //x
                       statStartingPos + (cnt*BUTTON_HEIGHT), //y
                       BUTTON_WIDTH, //width
                       BUTTON_HEIGHT //height
                      ),"+")){
if(pointsLeft > 0){
_toon.GetPrimaryAttribute(cnt).BaseValue++;
pointsLeft--;
_toon.StatUpate();
}
}
}
}

private void DisplayVitals(){
for(int cnt = 0; cnt < Enum.GetValues(typeof(VitalName)).Length; cnt++){
GUI.Label(new Rect( OFFSET, //x
                   statStartingPos + ((cnt + 7)* LINE_HEIGHT), //y
                   STAT_LABEL_WIDTH, //width
                   LINE_HEIGHT //height
                  ), ((VitalName)cnt).ToString());
GUI.Label(new Rect( OFFSET + STAT_LABEL_WIDTH, 
                   statStartingPos + ((cnt + 7) * LINE_HEIGHT), 
                   BASEVALUE_LABEL_WIDTH, 
                   LINE_HEIGHT
                  ), _toon.GetVital(cnt).AdjustedBaseValue.ToString(),GUI.skin.GetStyle("styleMiddle"));

}

}

private void DisplaySkills(){
for(int cnt = 0; cnt < Enum.GetValues(typeof(SkillName)).Length; cnt++){
GUI.Label(new Rect( OFFSET + STAT_LABEL_WIDTH + BASEVALUE_LABEL_WIDTH + BUTTON_WIDTH * 2 + OFFSET * 2, //x
                   statStartingPos + (cnt * LINE_HEIGHT), //y
                   STAT_LABEL_WIDTH, //width
                   LINE_HEIGHT //height
                  ), ((SkillName)cnt).ToString());
GUI.Label(new Rect( OFFSET + STAT_LABEL_WIDTH + BASEVALUE_LABEL_WIDTH + BUTTON_WIDTH * 2 + OFFSET * 2 + STAT_LABEL_WIDTH, //x
                   statStartingPos + (cnt * LINE_HEIGHT), //y
                   BASEVALUE_LABEL_WIDTH, //width
                   LINE_HEIGHT //height
                  ), _toon.GetSkill(cnt).AdjustedBaseValue.ToString(),GUI.skin.GetStyle("styleMiddle"));

}

}

private void DisplayPointsLeft(){
GUI.Label(new Rect(250, 10, 100, 25), "Points Left: " + pointsLeft.ToString(),GUI.skin.GetStyle("styleMiddle"));

}
}

B2. Tại thẻ Project, nhấp nút Create | Folder và đặt tên là Skin.

B3. Nhấp phải vào thư mục Skin và chọn Create | GUI Skin và đặt tên là mySkin.

B4. Tải các file Skin.rar này về (Bấm vào Tệp | Tải Xuống - Ctrl + S), giải nén và kéo thả các file .png vào folder Skin vừa tạo.

B5. Bấm chuột vào mySkin đã tạo ở bước 3, tại thẻ Inspector bấm vào mục Button và kéo thả các file btn vào background của Normal, Hover và Active như sau:

B6. Vẫn ở trong mục Button, click chuột vào Border và điều chỉnh Left = 4, Right = 4 như sau:

 

B7. Vẫn ở mục Button, đổi Alignment thành Middle Center, Image Position thành Text Only.

B8. Qua mục Label và thiết lập các giá trị như hình sau:

Bấm vào hình để phóng to

B9. Qua mục Text Field và tiếp tục thiết lập các giá trị như hình sau:

Bấm vào hình để phóng to

B10. Cuối cùng qua mục Custom Style, nhập giá trị Size là 1, đặt Name là styleMiddle và điều chỉnh các giá trị như hình sau:

Bấm vào hình để phóng to

 B11. Nhấp chọn Main Camera ở thẻ Project, kéo thả mySkin ở thư mục Skin vào thẻ Inspector như sau:

B12. Ấn nút Play và xem thành quả đạt được.