List games by Sprite Kit

▼

Saturday, October 4, 2025

Chương 3 – Panel: Khung xương của toàn bộ giao diện

 (Panels – The Framework of Every GUI)

🎯 Giới thiệu

Nếu button là hành động và banner là giọng nói, thì panel chính là bộ xương của toàn bộ giao diện.
Panel tạo ra cấu trúc, định hình không gian, và giúp mọi thành phần khác — từ nút bấm, thanh trạng thái đến biểu tượng — có chỗ đứng rõ ràng trong bố cục.

Trong Mystic Realms GUI, panel không chỉ là khung chứa; nó là nền tảng tổ chức trải nghiệm người dùng, đồng thời mang phong cách mỹ thuật fantasy cổ điển.
Từ popup nhỏ trong shop đến bảng nhiệm vụ phức tạp, mọi panel đều được thiết kế có tỉ lệ, độ dày, ánh sáng và cảm xúc riêng.

“Một giao diện đẹp không bắt đầu bằng màu sắc — mà bắt đầu từ cấu trúc.”

🪶 1. Vai trò của panel trong GUI

Panel đóng vai trò là khung nền cho thông tin và tương tác.
Chúng giữ giao diện không bị rối, đồng thời đảm bảo các thành phần luôn được sắp xếp hợp lý.

Trong Mystic Realms, panel được thiết kế với ba nguyên tắc:

  1. Rõ ràng về mục đích – Mỗi panel chỉ nên phục vụ một loại nội dung (Shop, Quest, Inventory...).

  2. Cân bằng giữa trang trí và công năng – Đẹp nhưng không rườm rà.

  3. Thống nhất về phong cách – Dù khác kích cỡ, vẫn cùng một hệ thống hình học và ánh sáng.

💡 Panel tốt giống như bức tường của một ngôi nhà đẹp: người chơi không chú ý đến nó, nhưng nó làm nên toàn bộ không gian.

🧱 2. Cấu trúc cơ bản của một panel

Một panel trong Mystic Realms được chia thành ba lớp chính:

LớpChức năngMô tả
🪵 Frame (Khung viền)Trang trí & định hìnhGỗ, đá, hoặc kim loại khắc fantasy, độ dày 4–6px
🧊 Body (Thân nền)Giữ nội dungGradient nhẹ, bán trong suốt, ánh sáng mờ ở trung tâm
📜 Content Layer (Nội dung)Chứa text, icon, hoặc buttonSắp xếp bằng Grid hoặc Vertical Layout Group

Mỗi lớp được thiết kế để có thể tùy chỉnh dễ dàng trong Unity, mà không mất bố cục hoặc hiệu ứng ánh sáng tổng thể.

🪄 3. 9-Slice – Bí quyết co giãn hoàn hảo

Mystic Realms sử dụng kỹ thuật 9-slice sprite cho mọi panel — cho phép co giãn mà không méo viền hoặc biến dạng hoa văn.

🎨 Nguyên tắc:

  • 4 góc: giữ nguyên (không co giãn).

  • 4 cạnh: kéo dãn đều theo trục.

  • 1 vùng trung tâm: mở rộng linh hoạt cho nội dung.

Điều này giúp mỗi panel có thể tự động thích ứng với kích cỡ khác nhau, từ panel nhỏ hiển thị thông báo đến cửa sổ lớn chứa inventory hoặc quest log.

⚙️ 4. Loại panel trong Mystic Realms

Mystic Realms GUI chia panel thành nhiều nhóm, mỗi nhóm có công năng và phong cách riêng:

Loại PanelCông dụngĐặc điểm hình ảnh
🪶 Main PanelKhung chính của menu, shop, questViền gỗ sáng, hoa văn fantasy, ánh sáng trung tâm vàng nhẹ
📦 Popup PanelCửa sổ nhỏ hiển thị thông báo hoặc xác nhậnViền mỏng, độ trong cao, animation xuất hiện nhanh
🧭 HUD PanelThanh trạng thái trong gameplayMàu nền nhẹ, viền đơn giản, không che tầm nhìn
⚗️ Special PanelDành cho hệ thống đặc biệt (Crafting, Alchemy...)Tông màu theo chủ đề (xanh lá, tím, cam tùy hệ nguyên tố)

Mỗi loại đều tuân theo cùng một logic bố cục, giúp người chơi dễ nhận biết, không bị lẫn lộn giữa các loại cửa sổ.

🧩 5. Màu sắc và chất liệu của panel

Panel trong Mystic Realms được vẽ bằng vector, giúp dễ chuyển đổi chất liệu:

  • Gỗ: cho cảm giác tự nhiên, thân thiện (menu, shop).

  • Đá: tạo cảm giác nặng, vững chắc (quest, archive).

  • Kim loại: cảm giác công nghệ cổ xưa, uy nghi (achievement, boss info).

  • Parchment (giấy cổ): dùng cho text dài, bảng nhiệm vụ hoặc thư.

💡 Phối chất liệu hợp lý khiến thế giới GUI trở nên chân thật — như thể từng panel có “trọng lượng” riêng.

🪟 6. Tỉ lệ và bố cục trong panel

Mystic Realms tuân theo nguyên tắc bố cục 3 phần:

  1. Header (Đầu) – Tiêu đề panel, thường có banner hoặc icon nhỏ.

  2. Body (Thân) – Vùng nội dung chính.

  3. Footer (Cuối) – Nút điều hướng hoặc hành động (OK, Cancel...).

Khoảng cách giữa các phần được định chuẩn theo tỷ lệ 10–20–10px để đảm bảo nhịp thị giác ổn định khi người chơi di chuyển mắt từ trên xuống.

🧠 7. Animation và cảm giác trọng lượng

Một panel không chỉ cần đẹp – nó cần “cảm giác xuất hiện hợp lý”.
Mystic Realms áp dụng animation xuất hiện chậm rãi, giống như mở một quyển sách gỗ hoặc cửa sổ ma thuật:

  • Fade-in nhẹ (0.2s)

  • Scale nhỏ → 1.0x (0.3s, Ease.OutBack)

  • Âm thanh click gỗ hoặc tiếng rung kim loại (nếu có)

“Khi panel mở ra, người chơi cảm thấy như mình đang bước vào một không gian khác — không chỉ mở một cửa sổ.”

🔧 8. Thiết kế panel trong Unity

Panel của Mystic Realms được dựng sẵn dưới dạng Prefab modulable:

  • Canvas Group hỗ trợ fade.

  • RectTransform Anchors căn giữa tự động trên mọi độ phân giải.

  • Layout Group kiểm soát lề và phân bố nội dung.

  • Có sẵn script PanelController để mở/đóng qua animation.

Ví dụ:

public void OpenPanel() {
    panelCanvasGroup.DOFade(1, 0.3f);
    panelTransform.DOScale(1f, 0.25f).From(0.8f);
}

Hai dòng code, nhưng đủ để panel “thở”.

🌈 9. Sự hài hòa giữa panel và phần còn lại của GUI

Panel không đứng một mình — chúng là khung nền cho toàn bộ giao diện.
Mystic Realms đảm bảo:

  • Màu panel không “nuốt” các button hoặc banner.

  • Viền panel cùng hướng ánh sáng với HUD.

  • Không có khoảng trống “chết” trong UI layout.

Điều này khiến toàn bộ GUI trở thành một hệ thống thống nhất – không có yếu tố nào lạc tông.

🕯️ 10. Panel như linh hồn kiến trúc của UI

Cuối cùng, panel là kiến trúc sư thầm lặng.
Nó định hình cảm giác của cả giao diện – vững, nhẹ hay cổ điển đều nằm trong panel.

Trong Mystic Realms, panel được ví như “cửa sổ thế giới”:
mỗi khi mở, người chơi không chỉ đọc thông tin – họ bước vào một không gian nhỏ thuộc về thế giới đó.

“Nút khiến bạn hành động, banner khiến bạn cảm xúc, nhưng panel khiến bạn tin rằng thế giới này có thật.”
— Triết lý thiết kế của Mystic Realms GUI

at

No comments:

Post a Comment