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: