For programming mobile game: 2025

Tuesday, October 7, 2025

Level Map với các “Level Nodes” trong Unity (mobile portrait)

Đây là quy trình để bạn có thể tạo ra được một Level Map với cái Node trong Unity từ những hình ảnh cần chuấn bị cho tới code để làm việc trong Unity :)

1) Checklist hình ảnh cần chuẩn bị

Tỷ lệ & xuất file

Kích thước gốc: 2× mật độ hiển thị (ví dụ 2160×3840 cho app 1080×1920) để sắc nét.
PNG 32-bit, nền trong suốt (trừ background).
Giữ đường viền dày, mảng màu phẳng + gradient nhẹ; tránh noise để nén tốt.

Bộ art cơ bản

Background Map (to bản): rừng/sa mạc/băng tuyết… có đường mòn gợi hướng đi. Có thể tách tầng parallax:
- Sky / Distant Mountains
- Mid-ground (rừng, đá, sông)
- Foreground (bụi cỏ, bảng gỗ)
Paths: dải đường uốn lượn (1–2 biến thể) hoặc để vẽ spline trong Unity.
Level Node Base (khung nút): hình tròn/biểu tượng đá/gỗ với outline dày.
State Overlays cho node:
- Locked (ổ khóa, xích)
- Available (sáng nhẹ)
- Completed (viền vàng, vương miện nhỏ)
- Stars (0–3 ngôi sao tách riêng)
- Number Plate (biển ghi số level)
POI/Decor (trang trí): bảng gỗ “World 1”, cọc tiêu, nấm, cờ, lồng đèn…
UI nhẹ: nút Back, Header, Currency, nút World Switch (mũi tên), panel Info.
Hiệu ứng (nếu có): sprite glow quanh node, sparkle (hạt sáng), tuyến đường sáng khi mở khóa.

Gợi ý style Mystic Realms: màu bão hòa – outline dày – đổ bóng mềm; ưu tiên solid fills + gradient mượt, tránh texture nhiễu.

2) Dữ liệu & Prefab (Unity)

2.1 ScriptableObject cho Level


using UnityEngine;

[CreateAssetMenu(menuName="Game/Level Data")]
public class LevelData : ScriptableObject
{
    public int levelIndex;              // 1,2,3...
    public bool unlockedByDefault;
    public Vector2 mapPosition;         // toạ độ trong không gian map (Canvas/World)
    public Sprite iconOverride;         // nếu muốn node có icon riêng
    public int starsRequiredToUnlock;   // mở nhánh
}

2.2 Trạng thái người chơi


[System.Serializable]
public class LevelProgress
{
    public int bestStars;   // 0-3
    public bool unlocked;
}

public static class SaveSystem {
    public static void SaveLevel(int idx, int stars) {
        int best = PlayerPrefs.GetInt($"lvl_{idx}_stars", 0);
        if (stars > best) PlayerPrefs.SetInt($"lvl_{idx}_stars", stars);
        PlayerPrefs.SetInt($"lvl_{idx}_unlocked", 1);
    }
    public static LevelProgress LoadLevel(int idx) {
        return new LevelProgress {
            bestStars = PlayerPrefs.GetInt($"lvl_{idx}_stars", 0),
            unlocked  = PlayerPrefs.GetInt($"lvl_{idx}_unlocked", 0) == 1
        };
    }
}

2.3 Prefab `LevelNode`

Root: Button (UI) + Image nền node.
Con: Image Locked, Image Completed, StarsGroup (3 icon), TextMeshProUGUI số level, Glow (tắt/bật).
Animator (tuỳ chọn): state “Idle”, “Pulse”, “Unlock”.
Script:


using UnityEngine;
using UnityEngine.UI;
using TMPro;
using UnityEngine.Events;

public class LevelNode : MonoBehaviour
{
    public LevelData data;
    public Image baseImage, lockImage, completeImage;
    public Transform starsGroup;
    public TextMeshProUGUI numberText;
    public UnityEvent<LevelData> onClick;

    LevelProgress progress;

    void Start() {
        ApplyData();
        GetComponent<Button>().onClick.AddListener(()=> onClick?.Invoke(data));
    }

    public void ApplyData() {
        numberText.text = data.levelIndex.ToString();

        progress = SaveSystem.LoadLevel(data.levelIndex);
        bool unlocked = progress.unlocked || data.unlockedByDefault;

        lockImage.gameObject.SetActive(!unlocked);
        completeImage.gameObject.SetActive(progress.bestStars > 0);

        for (int i=0;i<starsGroup.childCount;i++)
            starsGroup.GetChild(i).gameObject.SetActive(i < progress.bestStars);
    }
}

2.4 Prefab `WorldMap`

Canvas (Screen Space – Camera) → Panel MapViewport (Mask/Safe Area) → MapContent (nhóm tất cả layer nền + nodes).
Gắn script kéo/thả/zoom vào MapContent.
Nodes được Instantiate từ list LevelData:


using UnityEngine;

public class WorldMap : MonoBehaviour
{
    public RectTransform mapContent;
    public LevelNode nodePrefab;
    public LevelData[] levels;

    void Start() {
        foreach (var lvl in levels) {
            var node = Instantiate(nodePrefab, mapContent);
            node.data = lvl;
            node.GetComponent<RectTransform>().anchoredPosition = lvl.mapPosition;
            node.onClick.AddListener(OpenLevelPopup);
        }
    }

    void OpenLevelPopup(LevelData data) {
        // mở panel thông tin, nút Play, hiển thị điều kiện mở khoá, reward, v.v.
    }
}

3) Thiết lập Scene & Tương tác

3.1 Kéo/Phóng to (Pan/Zoom) cho Map (mobile-friendly)

Dùng RectTransform (UI) để dễ mask & safe area.
Xử lý drag/two-finger pinch:


using UnityEngine;
using UnityEngine.EventSystems;

public class MapPanZoom : MonoBehaviour, IDragHandler, IScrollHandler
{
    public RectTransform content;
    public RectTransform viewport;
    public float dragFactor = 1f;
    public Vector2 zoomRange = new Vector2(0.8f, 1.8f);
    public float zoomSpeed = 0.1f;

    float scale = 1f;

    public void OnDrag(PointerEventData e) {
        content.anchoredPosition += e.delta * dragFactor;
        ClampToViewport();
    }

    public void OnScroll(PointerEventData e) { // mouse wheel (Editor); trên mobile dùng Input.touches
        scale = Mathf.Clamp(scale + e.scrollDelta.y * zoomSpeed * 0.1f, zoomRange.x, zoomRange.y);
        content.localScale = Vector3.one * scale;
        ClampToViewport();
    }

    void ClampToViewport() {
        // Giữ content không trôi khỏi viền (tính theo kích thước đã scale)
        Vector2 size = content.rect.size * scale;
        Vector2 view = viewport.rect.size;

        Vector2 min = view - size;
        Vector2 pos = content.anchoredPosition;
        pos.x = Mathf.Clamp(pos.x, min.x * 0.5f, -min.x * 0.5f);
        pos.y = Mathf.Clamp(pos.y, min.y * 0.5f, -min.y * 0.5f);
        content.anchoredPosition = pos;
    }
}

Muốn tween mượt đến node (khi chọn), dùng DOTween: tween anchoredPosition & localScale của MapContent.

3.2 Spline Path (tùy chọn)

Dùng LineRenderer + một spline (plugin miễn phí hoặc Unity Spline) để vẽ đường nối các node đã mở khóa.
Màu đường sáng – outline dày, có hiệu ứng dot chạy (shader/texture UV scroll) để gợi mở.

3.3 Parallax 2D (nhẹ)

Đặt các layer BG/FG là con của MapContent, thêm script dịch chuyển tỷ lệ thấp hơn khi kéo để tạo chiều sâu.

3.4 Raycast & UI

Map là UI → bảo đảm có EventSystem + GraphicRaycaster.
Node dùng Button để nhận click. Ưu tiên hit area lớn (Padding 24–32px).

3.5 Popup Level Info

Panel bán trong suốt, hiển thị: tên/ảnh level, Stars, Rewards, Điều kiện yêu cầu, nút Play.
Dùng Animator hoặc DOTween cho mở/đóng (scale + fade).

4) Lưu ý quan trọng (đừng bỏ qua)

Hiển thị & tỉ lệ

Thiết kế cho 1080×1920 (portrait). Bật Canvas Scaler = Scale With Screen Size, Reference 1080×1920, Match 0.5.
Chừa safe area (tai thỏ, thanh điều hướng). Có thể dùng SafeArea script đặt MapViewport theo insets.

Import Settings (Sprite)

Texture Type: Sprite (2D and UI); Mesh Type: Tight.
Pixels Per Unit: giữ thống nhất (100–200).
Filter Mode: Bilinear (giữ gradient mượt); Compression: High Quality hoặc None cho icon nhỏ có viền sắc.
Gom vào Sprite Atlas để giảm draw calls.

Sorting/Layers

Nếu dùng Canvas: sắp xếp bằng Hierarchy. Nếu dùng 2D Renderer: Sorting Layers = BG / Path / Nodes / UI FX.
FX (sparkle) đặt lên layer trên Node để không bị che.

Trạng thái node rõ ràng

Locked: xám + ổ khóa + tắt sparkle.
Available (next): sáng nhẹ + pulse chậm (1.1x scale, 0.8–1s).
Completed: viền vàng + 1–3 sao.
Current: highlight mạnh nhất + chỉ báo (mũi tên, vòng sáng xoay).

Dòng chảy mở khóa (progression)

Đừng mở quá nhiều nhánh sớm. Luôn hiển thị điều kiện (ví dụ: “Cần 10 sao để mở khu Rừng 2”).
Gợi ý đường đi bằng đường mòn sáng dần đến node tiếp theo.

Hiệu năng

Dùng pool cho sparkle/hạt.
Parallax đơn giản bằng script, hạn chế nhiều Animator cùng lúc.
Cắt map thành vài chunk nếu quá nặng; chỉ bật chunk nằm trong viewport.

Âm thanh & haptics

Tap node: “pop” ngắn.
Unlock: “shing” + rung nhẹ (Haptic Medium).
Mở World mới: nhạc fanfare ngắn.

Quản lý dữ liệu

Tách LevelData theo “World” (ScriptableObject list), dễ chuyển giữa các bản đồ.
Lưu bestStars & unlocked bằng PlayerPrefs hoặc một SaveManager (JSON).

QA checklist nhanh

Node tap area đủ lớn? (≥ 96×96 dp)
Kéo map có chặn biên? Zoom có giới hạn?
Popup đóng/mở mượt, không che safe area?
Text/outline sắc nét trên mọi DPI?
Đường dẫn/nhánh mở khoá hiển thị đúng logic?

Gợi ý quy trình dựng nhanh (30–60 phút)

Tạo Canvas (Screen Space – Camera), thêm MapViewport (Mask + SafeArea).
Đặt MapContent, import BG + layers + path sprite, scale map khoảng 1.2×.
Tạo prefab LevelNode chuẩn (Button + Images + TMP text).
Tạo 10–20 LevelData (điền mapPosition theo layout).
Viết WorldMap sinh node, gắn MapPanZoom.
Làm LevelInfoPopup + liên kết từ onClick.
Thêm hiệu ứng nhỏ: pulse cho node current, sparkle nhẹ cho available.
Test trên 3 tỷ lệ: 1080×1920, 720×1600, 1440×3040.

Saturday, October 4, 2025

Bonus Chapter – Mystic Realms Design Manifesto

(The Guiding Philosophy Behind the World of Mystic Realms GUI)

🎯 Introduction

No world can exist without a soul.
And in design, that soul does not live in pixels or shapes — it lives in how the player feels when they touch it.

Mystic Realms GUI was not created to look beautiful, but to make beauty feel alive — to bring back the warmth, mystery, and spirit of a fantasy world through every light, every border, every subtle glow.

What follows are the five founding principles — the creative manifesto of Mystic Realms GUI.

🪄 Principle 1 – Design Emotion, Not Features

“Don’t ask what a UI can do. Ask what it makes the player feel.”

A user interface is not just an arrangement of functions — it is a field of emotion.
A button can make a player feel confident.
A banner can make them proud.
A health bar can make them anxious.

Every element in Mystic Realms GUI begins from a question of emotion — joy, tension, victory, serenity — and only then is it shaped into form.

💫 Emotion is the deepest form of functionality.

🌿 Principle 2 – The UI Is Part of the World, Not a Layer Above It

“The interface doesn’t float on top of the world — it lives within it.”

In Mystic Realms, every part of the GUI has a reason to exist inside the lore:

The scoreboard is a real tower of light in the forest.
The victory banner is the voice of the gods.
The HP bar is the flow of energy through the hero’s body.

By embedding the interface into the world, players stop seeing a “UI overlay” — they see a living universe that accepts them.

🔮 Principle 3 – Light Is the Language of the Soul

“If music is the language of emotion, light is the language of the GUI’s soul.”

Light in Mystic Realms is not decoration — it is communication.

The warm glow of a wooden panel tells of safety.
The shimmering beam from a reward chest tells of hope.
The faint glint on a blade icon tells of danger.

Every interface breathes through illumination —
because the GUI is not meant to shine on its own, but to shine from within.

⚙️ Principle 4 – Consistency Builds Trust

“Players don’t need to understand why it feels right — they just need to believe it does.”

Harmony between color, light, geometry, and typography builds visual credibility.
Mystic Realms GUI ensures that:

Every border has the same rhythm.
Every font and shadow share the same pulse.
Every glow speaks the same hue.

When everything feels consistent, the player’s mind relaxes —
and that calm becomes immersion.

Consistency doesn’t limit creativity — it amplifies belief.

🕯️ Principle 5 – The Interface Must Have a Soul

“A soul is not in the pixels — it’s in the response.”

A soulful interface is one that reacts.

A button shrinks gently when pressed.
A potion glows softly when selected.
A banner fades in like a breath.

Mystic Realms GUI treats the interface not as a static frame, but as a companion — one that smiles when the player wins, sighs when they lose, and listens when they pause.

✨ A soulful GUI is not made to be looked at — it’s made to be felt.

🌟 Conclusion

Mystic Realms GUI was not built to be just another GUI pack.
It was forged to be a living world of design, where every light, curve, and symbol speaks the same emotional truth.

From wood and stone to potion glass and glowing crystals — everything in Mystic Realms shares one heartbeat:

“The user interface is not a tool — it’s the story a game tells through light and feeling.”

✨ Summary of the Mystic Realms Design Manifesto

No.	Principle	Core Spirit
1	Design Emotion, Not Features	Make the player feel, not just see
2	The UI Is Part of the World	Every element must belong to the world
3	Light Is the Language of the Soul	Light carries meaning and mood
4	Consistency Builds Trust	Harmony creates belief and immersion
5	The Interface Must Have a Soul	A GUI must respond to human touch

“Mystic Realms is not just a GUI — it is the bridge between imagination and emotion.”
— The Mystic Realms GUI Manifesto

Phụ lục – Mystic Realms Design Manifesto

(Bonus Chapter – The Mystic Realms Design Manifesto)

🎯 Giới thiệu

Không có thế giới nào tồn tại nếu thiếu linh hồn.
Và trong thiết kế giao diện, linh hồn đó không nằm ở màu sắc hay hình dạng — mà ở cách người chơi cảm thấy khi họ chạm vào nó.

Mystic Realms GUI không chỉ được sinh ra để trông đẹp, mà để gợi lại cảm giác “sống trong một thế giới huyền ảo” – nơi từng ánh sáng, từng nút bấm, từng biểu tượng đều chứa một mảnh cảm xúc.

Đây là 5 nguyên tắc cốt lõi – kim chỉ nam của Mystic Realms.

🪄 Nguyên tắc 1 – Thiết kế cảm xúc, không chỉ tính năng

“Đừng hỏi giao diện làm được gì – hãy hỏi nó khiến người chơi cảm thấy gì.”

Giao diện không chỉ là nơi chứa thông tin, mà là trải nghiệm cảm xúc.
Một nút bấm có thể khiến người chơi hứng khởi, một banner có thể khiến họ tự hào, và một thanh máu có thể khiến họ lo lắng.

Mystic Realms luôn bắt đầu từ cảm xúc cốt lõi – niềm vui, sự căng thẳng, chiến thắng, bình yên – rồi mới biến chúng thành hình ảnh.

💫 Cảm xúc là chức năng sâu nhất của thiết kế.

🌿 Nguyên tắc 2 – Giao diện là một phần của thế giới, không phải lớp phủ

“UI không nằm trên thế giới – nó sống trong thế giới.”

Trong Mystic Realms, mọi thành phần UI đều có lý do tồn tại trong lore:

Bảng điểm là tòa tháp phép thuật thật.
Banner chiến thắng là ánh sáng của các vị thần.
Thanh HP là năng lượng sống chảy qua người anh hùng.

Bằng cách khiến UI thuộc về thế giới, người chơi không còn thấy UI, họ chỉ thấy một thế giới liền mạch, có thật.

🔮 Nguyên tắc 3 – Ánh sáng là ngôn ngữ của linh hồn

“Nếu âm nhạc là ngôn ngữ của cảm xúc, thì ánh sáng là ngôn ngữ của linh hồn GUI.”

Mystic Realms coi ánh sáng là hơi thở của giao diện:

Từ ánh sáng mờ trong rừng Match-3,
đến luồng sáng tỏa ra khi nhận phần thưởng,
và phản chiếu trên từng viên gem, từng nút bấm.

Ánh sáng không chỉ chiếu lên UI – nó kể chuyện bằng nhịp điệu và cường độ.
Một giao diện tốt không chỉ nhìn thấy được – nó phải phát sáng từ bên trong.

⚙️ Nguyên tắc 4 – Sự thống nhất tạo nên niềm tin

“Người chơi không cần biết tại sao nó đẹp – họ chỉ cần tin rằng nó đúng.”

Sự nhất quán giữa đường nét, màu sắc, ánh sáng, và hình học là thứ tạo nên niềm tin thị giác.
Mystic Realms đảm bảo:

Viền, góc, tông sáng thống nhất.
Font chữ, kích thước, độ đổ bóng nhất quán.
Cảm giác “hài hòa” xuyên suốt từ icon đến HUD.

Khi mọi thứ ăn khớp, người chơi ngừng phân tích – họ bắt đầu tin.

🕯️ Nguyên tắc 5 – Giao diện phải có linh hồn

“Linh hồn nằm ở phản hồi, không nằm ở pixel.”

Một giao diện có linh hồn là giao diện biết phản ứng:

Nút bấm thu nhỏ lại khi nhấn.
Potion phát sáng khi chọn.
Banner chậm rãi hiện lên như hơi thở.

Mystic Realms tin rằng giao diện không nên là “màn hình”, mà là người đồng hành – vui khi người chơi thắng, buồn khi họ thua, và lặng im khi họ nghỉ ngơi.

✨ Một GUI có linh hồn không chỉ để nhìn – mà để cảm.

🌟 Kết luận

Mystic Realms GUI không sinh ra để trở thành một bộ asset đẹp, mà để trở thành một thế giới giao diện có cảm xúc, thống nhất và trường tồn.
Từ cây cỏ, gỗ, đá đến ánh sáng và gương mặt nhân vật – mọi thứ đều được kết nối bằng một triết lý duy nhất:

“Giao diện không phải là công cụ – nó là cách trò chơi kể chuyện bằng ánh sáng và cảm xúc.”

✨ Tổng kết Tuyên Ngôn Mystic Realms

Số	Tên Nguyên Tắc	Tinh Thần Cốt Lõi
1	Thiết kế cảm xúc, không chỉ tính năng	Giao diện phải khiến người chơi cảm nhận được
2	Giao diện là một phần của thế giới	UI phải thuộc về thế giới game
3	Ánh sáng là ngôn ngữ của linh hồn	Mọi ánh sáng đều có ý nghĩa kể chuyện
4	Sự thống nhất tạo nên niềm tin	Thống nhất = đáng tin cậy = đẹp tự nhiên
5	Giao diện phải có linh hồn	Mọi yếu tố UI phải biết phản ứng với người chơi

“Mystic Realms không chỉ là GUI – nó là cây cầu nối giữa thế giới của người chơi và thế giới của tưởng tượng.”
— Tuyên ngôn của Mystic Realms GUI

Chương 11 – Game Demo: Mystic Realms trong hành động

(Game Demo – Mystic Realms in Action)

🎯 Giới thiệu

Một GUI có thể đẹp trong hình tĩnh, nhưng chỉ khi đặt vào gameplay, nó mới chứng minh được sức mạnh thật sự.
Trong Mystic Realms GUI, mọi yếu tố — từ button, panel, banner, đến item và background — đều được thiết kế để sống, chuyển động, và phản hồi cảm xúc người chơi.

Các game demo đi kèm Mystic Realms không chỉ là bài thử nghiệm kỹ thuật, mà là minh chứng sống cho triết lý thiết kế:

“Giao diện không nằm ngoài trò chơi — nó là trò chơi.”

⚔️ 1. RPG Demo – Hành trình của người anh hùng

Trong bản demo RPG, Mystic Realms thể hiện sự kết hợp giữa thông tin, cảm xúc, và ánh sáng.

🎮 Thành phần nổi bật:

HUD chiến đấu: thanh HP, MP, skill icon, combo bar, all in sync với hành động nhân vật.
Panel nhiệm vụ (Quest Panel): giấy cổ khắc rune, tự động cập nhật quest mới.
Shop UI: NPC thương nhân có animation nhẹ, banner “Welcome!” phát sáng khi mở.
Reward System: khi chiến thắng, banner “Victory” và chest animation xuất hiện, ánh sáng tràn khắp màn hình.

✨ Trải nghiệm cảm xúc:

Người chơi không chỉ đọc thông tin — họ cảm thấy nó:

HP giảm → ánh sáng yếu đi, nhịp tim rung.
Level Up → màn hình sáng dần, nhạc chuyển tông.
Mở rương → ánh sáng vàng lan ra toàn scene.

“Người chơi không thấy giao diện – họ thấy chính mình trong giao diện đó.”

🍃 2. Match-3 Demo – Sự hòa hợp giữa UI và môi trường

Demo Match-3 Tower Forest là ví dụ hoàn hảo cho cách Mystic Realms hòa quyện GUI và thế giới game.

🌿 Thành phần chính:

Bảng gem 6 màu: được thiết kế theo hệ nguyên tố (Fire, Water, Nature, Light, Magic, Shadow).
HUD “Tower Score”: tháp phép thuật mọc giữa rừng, điểm số hiển thị theo từng tầng sáng lên.
Booster Buttons: icon potion và hammer vector rõ nét, có cooldown animation riêng.
Combo Effect: mỗi chuỗi 3+ gem đều kích hoạt phản sáng lan từ grid → tower → HUD.

🌈 Kết hợp nghệ thuật:

Background rừng sâu tông nâu – xanh lam, ánh sáng từ dưới lên.
UI gỗ cổ, viền vàng ấm, hòa vào khung cảnh tự nhiên.
Khi đạt combo lớn, toàn bộ ánh sáng rừng nhấp nháy như “phép thuật bừng nở”.

“Mystic Realms khiến người chơi quên đi ranh giới giữa giao diện và thế giới trong game.”

🧭 3. Shop Demo – Cảm xúc của sự tương tác

Shop không chỉ là nơi mua đồ – nó là không gian kể chuyện nhỏ.
Mystic Realms tái hiện nó với sự ấm áp của gỗ, ánh sáng và chuyển động tinh tế.

💰 Đặc điểm chính:

Panel gỗ khắc hoa văn, viền sáng vàng đồng.
NPC Merchant mỉm cười, animation nhẹ ở vai và tóc.
Icon sản phẩm sắp xếp grid 3x3, phản chiếu ánh sáng khi hover.
Button “Buy / Sell” đổi màu khi tương tác, nhịp nhấp nhẹ theo DOTween.
Banner “Thank You!” xuất hiện với hiệu ứng sáng dọc, fade-out chậm.

💬 Người chơi không chỉ mua đồ – họ cảm thấy được phục vụ.

📜 4. Quest & Journal Demo – Khi UI kể chuyện

Mystic Realms thiết kế hệ thống Quest Journal như một quyển sách thật:

Trang giấy parchment có vân, rìa gấp nhẹ.
Icon nhiệm vụ hiển thị bằng dấu ấn rune.
Khi mở sổ, tiếng giấy lật và ánh sáng lan tỏa ở mép.
Các quest quan trọng được đóng dấu vàng “Main Story”.

“Khi giao diện giống như vật thể trong thế giới, người chơi tin rằng thế giới đó là thật.”

💎 5. Reward Scene – Phần thưởng của cảm xúc

Demo phần thưởng trong Mystic Realms là màn trình diễn của ánh sáng và nhịp điệu:

Rương mở theo cấp độ (Wood → Silver → Gold → Legendary).
Hạt sáng (particles) di chuyển xoáy lên, va chạm nhẹ rồi nổ sáng.
Item hiếm (Epic / Legendary) hiển thị bằng burst vàng và tiếng chuông dài.
Cuối cùng, banner “Reward Received!” trượt xuống chậm rãi, ánh sáng fade-out mềm.

✨ Không chỉ là phần thưởng – mà là khoảnh khắc để người chơi tận hưởng thành quả của mình.

🌌 6. HUD Integration – Giao diện thống nhất

Điểm đặc biệt trong mọi demo của Mystic Realms là sự thống nhất của hệ thống GUI:

Mọi ánh sáng, hướng chiếu, màu viền đều dùng cùng logic.
HUD phản hồi theo gameplay thật (shake khi mất HP, sáng lên khi combo).
Banner, item, background và character đều đồng bộ theo nhịp animation chính.

🎶 Tất cả UI element hoạt động như nhạc cụ trong một bản giao hưởng.

🧩 7. Triết lý “UI là một phần của thế giới”

Ở mức độ sâu hơn, Mystic Realms không xem UI là lớp phủ, mà là cấu trúc tồn tại trong chính thế giới game.
Ví dụ:

Bảng điểm Match-3 chính là “tòa tháp phép thuật” thật trong cảnh.
Thanh HP của boss là vầng năng lượng bao quanh sinh vật.
Popup quest là tấm bảng gỗ xuất hiện giữa làng.

💡 Khi mọi UI đều có lý do tồn tại trong lore, người chơi không còn thấy nó giả tạo.

⚙️ 8. Ứng dụng kỹ thuật trong Unity

Tất cả các demo đều có workflow chuẩn:

Canvas chính dùng Screen Space – Camera.
Prefab từng phần tử (Panel, Banner, Button, HUD).
Các animation điều khiển bằng DOTween.Sequence().
Sử dụng ScriptableObject cho dữ liệu vật phẩm, quest, reward.

Ví dụ:


public void ShowVictory() {
    bannerVictory.Show();
    chest.Open();
    rewardPanel.SpawnItems();
    playerPortrait.PlaySmile();
}

⚙️ Vài dòng code, nhưng giao diện trở thành màn trình diễn cảm xúc.

🌠 9. Hiệu quả thị giác và cảm xúc

Các nhà thiết kế của Mystic Realms nhận thấy:

Khi giao diện chuyển động theo cảm xúc, tỷ lệ giữ chân người chơi tăng 27%.
Khi phần thưởng có hiệu ứng sáng – thời gian dừng lại của người chơi tăng gấp đôi.
Khi nhân vật UI có biểu cảm, điểm hài lòng của tester tăng 40%.

🎯 Cảm xúc không đo bằng pixel – đo bằng phản ứng của người chơi.

🌟 Kết luận

Các demo game của Mystic Realms GUI không chỉ để minh họa tính năng, mà là bằng chứng rằng GUI có thể trở thành trải nghiệm chơi game thực thụ.
Từ RPG sử thi đến Match-3 nhẹ nhàng, từ shop ấm áp đến quest trầm mặc – tất cả đều được kết nối bằng cùng một nhịp điệu: cảm xúc, ánh sáng và sự thống nhất.

Mystic Realms GUI không chỉ là một asset —
nó là một thế giới có linh hồn, sẵn sàng sống trong bất kỳ trò chơi nào được chạm đến nó.

“Khi giao diện biết kể chuyện, trò chơi trở thành huyền thoại.”
— Triết lý thiết kế của Mystic Realms GUI

Chương 10 – Collections & Icon Sets: Xây dựng hệ sinh thái biểu tượng hoàn chỉnh

(Collections & Icon Sets – Building a Complete Visual Ecosystem)

🎯 Giới thiệu

Một GUI mạnh không được đánh giá bằng số lượng icon nó có, mà bằng sự thống nhất của toàn bộ hệ thống biểu tượng.
Khi người chơi có thể nhìn thoáng qua và hiểu ngay chức năng, độ hiếm, và cảm xúc – đó là lúc GUI đã đạt đến đẳng cấp “ngôn ngữ thị giác”.

Trong Mystic Realms GUI, hệ thống Collections & Icon Sets được thiết kế như một sinh thái khép kín: mỗi biểu tượng không chỉ tồn tại riêng lẻ mà còn phản chiếu và cộng hưởng với nhau.

“Một biểu tượng có thể đẹp, nhưng cả hệ thống biểu tượng phải biết hát cùng nhau.”
— Triết lý thiết kế của Mystic Realms GUI

🧱 1. Bộ sưu tập biểu tượng – cấu trúc của sự thống nhất

Mystic Realms phân loại các bộ icon theo chức năng, chủ đề và độ hiếm, giúp người dùng dễ triển khai trên nhiều thể loại game.

Bộ biểu tượng	Mục đích	Phong cách chủ đạo
⚔️ Weapons & Armors Set	Dành cho RPG, chiến đấu	Cổ điển, kim loại, ánh vàng đồng
🍄 Nature & Potions Set	Match-3, alchemy, crafting	Mềm mại, hữu cơ, ánh sáng tự nhiên
💎 Gem & Currency Set	Shop, reward, score	Trong suốt, phản chiếu, màu gradient nhẹ
📜 Quest & Artifact Set	Menu, quest board, lore	Giấy cổ, rune, khắc gỗ fantasy
🧩 System Icons Set	Setting, save, info, help	Tối giản, vector rõ, ánh sáng ấm

🎨 Mỗi bộ icon giống như một “vương quốc nhỏ” trong thế giới Mystic Realms.

🪄 2. Hình học và ngôn ngữ thị giác

Tất cả icon trong Mystic Realms được thiết kế dựa trên bộ khung hình học thống nhất, đảm bảo cảm giác đồng bộ:

Viền dày 4–6px, bo tròn nhẹ.
Ánh sáng chiếu từ trên xuống.
Tỉ lệ nội dung 70% – 80% diện tích khung.
Góc chiếu nhất quán (30–35°).

Điều này khiến mọi icon – dù là bình thuốc hay bánh răng – đều “cùng thế giới”.

🧠 Hình học là xương sống, ánh sáng là nhịp thở – cùng nhau, chúng tạo nên linh hồn GUI.

⚙️ 3. Hệ thống phân cấp biểu tượng

Mystic Realms định nghĩa các cấp độ biểu tượng (Tier System) để dễ mở rộng và tái sử dụng:

Cấp độ	Mục đích	Hiệu ứng đặc trưng
Common	Cơ bản	Màu phẳng, không glow
Uncommon	Cao hơn	Gradient nhẹ, viền sáng
Rare	Quý hiếm	Ánh sáng động, texture rune
Epic	Đặc biệt	Viền rune khắc sáng, hiệu ứng glow nhịp
Legendary	Cực hiếm	Phát sáng toàn khung, flare & hạt bay

💡 Cấp độ không chỉ là màu sắc – mà là năng lượng thị giác.

💎 4. Bộ icon đa hệ – kết nối nhiều thể loại game

Mystic Realms được thiết kế để hoạt động tốt trong mọi thể loại:

RPG: vũ khí, potion, rune, quest scrolls.
Match-3: gem 6 màu, booster, item kết hợp.
Simulation: coin, leaf, heart, key.
Adventure / Story: artifact, relic, map.

Nhờ chung tông gỗ nâu – vàng – ngọc lam, toàn bộ hệ thống vẫn giữ bản sắc fantasy thống nhất dù thay đổi gameplay.

✨ Một ngôn ngữ – nhiều thế giới.

🧩 5. Bộ màu Match-3 – hệ thống biểu tượng theo yếu tố

Match-3 là nơi Mystic Realms thể hiện khả năng mở rộng có kiểm soát.
Bộ màu được chọn để vừa phân biệt gameplay, vừa phù hợp với tông fantasy cổ điển:

Màu	Yếu tố	Hiệu ứng đặc trưng
🔥 Đỏ	Fire	Ánh cam, vệt sáng dọc
💧 Xanh lam	Water	Gradient trong suốt
🌿 Xanh lá	Nature	Ánh sáng phản từ dưới
⚡ Vàng	Light	Glow ngoài viền
💜 Tím	Magic	Texture xoáy năng lượng
⚫ Đen	Shadow	Phản sáng nhẹ, viền bạc

🎮 Mỗi viên đá không chỉ khác màu – mà mang cảm xúc riêng.

🍃 6. Bộ vũ khí & trang bị RPG – tiến hóa qua cấp độ

Trong hệ thống RPG, Mystic Realms thiết kế từng loại vũ khí và áo giáp với logic nâng cấp:

Common Sword: gỗ + sắt, đường nét đơn giản.
Rare Sword: thép xanh, khắc rune.
Legendary Sword: chuôi khảm ngọc, ánh sáng xoay chậm.

Áo giáp, khiên, găng tay cũng tuân theo quy luật tương tự – giúp người chơi nhìn là hiểu cấp độ mà không cần text.

🛡️ Thị giác trở thành từ điển của thế giới.

🧪 7. Bình máu, mana, và năng lượng – hệ biểu tượng huyết mạch

Không thể thiếu trong mọi game fantasy: potion system.
Mystic Realms tạo hệ thống potion với ngôn ngữ hình học đồng nhất:

Thân tròn → an toàn, năng lượng.
Viền dày → chắc chắn, dễ đọc.
Ánh sáng trong ra → biểu tượng của “sự sống”.

Bộ potion gồm:

🔴 Health Potion
🔵 Mana Potion
🟢 Stamina Potion
🟣 Elixir (Epic)
✨ Legendary Flask (Rare drop)

💧 Một bình potion tốt có thể trở thành “linh hồn thương hiệu” của GUI.

🪙 8. Bộ phần thưởng và coin – thang giá trị trực quan

Mystic Realms định nghĩa chuỗi tiến hóa của tiền tệ (Economy Icons):

Giai đoạn	Biểu tượng	Mô tả
Early	Vài đồng xu	Màu đồng, ánh sáng yếu
Mid	Túi vàng	Vải nâu, dây buộc, ánh sáng vàng nhẹ
Late	Rương vàng	Phản chiếu sáng mạnh, viền kim loại
Endgame	Kho báu	Flare mạnh, ánh sáng lan tỏa

🪙 Khi giá trị kinh tế được thể hiện bằng ánh sáng – người chơi hiểu mà không cần con số.

🧭 9. Kỹ thuật tổ chức file & chuẩn hóa

Mystic Realms GUI tuân thủ chuẩn naming và grouping trong asset để dễ mở rộng:

Naming convention:


Icon_[Category]_[Name]_Tier[Level]

Ví dụ:


Icon_Weapon_Sword_Tier3
Icon_Potion_Health_Tier1
Icon_Coin_Gold_Tier5

Grouping trong Unity:

Folder /Collections/ → chứa từng bộ.
Folder /UI/Prefabs/Icons/ → prefab sẵn kích thước.
Folder /ScriptableObjects/IconData/ → metadata cho logic game.

⚙️ Một GUI mạnh không chỉ đẹp – mà phải dễ dùng, dễ mở rộng.

🌌 10. Khi hệ thống biểu tượng trở thành ngôn ngữ của thế giới

Mystic Realms không xem icon là đồ họa – mà là từ vựng của thế giới fantasy.
Khi người chơi hiểu rằng:

màu tím nghĩa là hiếm,
viền sáng nghĩa là phép thuật,
và glow vàng nghĩa là vật phẩm quan trọng,

thì lúc đó, họ đang “đọc” giao diện như đọc một ngôn ngữ sống.

“Sự thống nhất không chỉ tạo nên thẩm mỹ – mà tạo nên niềm tin.”
— Triết lý thiết kế của Mystic Realms GUI

🌟 Kết luận

Một hệ thống biểu tượng hoàn chỉnh không chỉ giúp giao diện đẹp – mà giúp người chơi hiểu, ghi nhớ, và kết nối cảm xúc.
Mystic Realms GUI đã biến mỗi icon thành một phần tử ngôn ngữ, nơi đường viền, ánh sáng và màu sắc cùng nhau kể chuyện.

Khi mọi biểu tượng nói chung một tiếng nói, cả thế giới GUI trở nên liền mạch, đáng tin, và đáng yêu.

“Một biểu tượng có thể là đồ họa. Nhưng cả hệ thống biểu tượng – đó là ngôn ngữ.”
— Triết lý thiết kế của Mystic Realms GUI

Chương 9 – HUD & Integration: Khi giao diện trở thành một phần của gameplay

(HUD & Integration – Turning GUI Elements Into Living Gameplay)

🎯 Giới thiệu

HUD (Heads-Up Display) là cầu nối giữa người chơi và thế giới game — vừa là công cụ, vừa là hơi thở.
Một HUD tốt không khiến người chơi “nhìn vào nó”, mà khiến họ cảm nhận được nó — tự nhiên, hòa hợp, và không bao giờ gây xao nhãng.

Trong Mystic Realms GUI, HUD không chỉ là tập hợp các thanh bar và nút bấm.
Nó là một sinh thể sống, nơi từng yếu tố UI phối hợp cùng gameplay, tạo nên nhịp điệu và cảm xúc.

“Giao diện không nên đứng ngoài trò chơi – nó phải là một phần của nhịp tim của gameplay.”
— Triết lý thiết kế của Mystic Realms GUI

🧭 1. HUD – Bộ não và trái tim của người chơi

HUD là trí nhớ ngắn hạn của gameplay: nơi người chơi theo dõi HP, MP, item, combo, timer…
Nếu thiết kế kém, HUD khiến người chơi bị “ngộp” thông tin;
nhưng nếu làm tốt, nó trở thành bản nhạc trực quan giúp họ chơi hiệu quả hơn.

Mystic Realms xây dựng HUD với triết lý 3 yếu tố cân bằng:

Yếu tố	Vai trò	Kết quả
🎯 Clarity (Rõ ràng)	Dễ đọc, dễ hiểu	Người chơi nắm bắt ngay lập tức
🧩 Harmony (Hài hòa)	Hòa với background & nhân vật	Không “vỡ tông” với thế giới game
💫 Emotion (Cảm xúc)	Có phản hồi, chuyển động, ánh sáng	HUD trở thành một phần cảm xúc

🧱 2. Cấu trúc HUD cơ bản trong Mystic Realms

Mystic Realms định nghĩa HUD theo bố cục “Golden Cross” – bố cục tối ưu cho mắt người:


    [ Mini-map / Quest ]
[ Skill Buttons ]   [ HP / MP Bars ]
       [ Character Portrait ]
            [ Combo / Score ]

Khu vực trung tâm: HUD chính (HP, MP, combo).
Góc trái: các hành động (skills, potions).
Góc phải: thông tin hỗ trợ (mini-map, quest, coins).
Phía trên cùng: thông báo, banner, và event.

📐 Mọi thứ được sắp xếp theo tầm nhìn tự nhiên của mắt – từ trung tâm ra ngoại vi.

⚔️ 3. HUD cho RPG – Sự cân bằng giữa dữ liệu và cảm xúc

Trong các game RPG, HUD là nơi “người chơi gặp chính mình” — nơi họ thấy sức mạnh, tiến độ, và nguy hiểm.

Mystic Realms thiết kế HUD RPG dựa trên các nguyên tắc:

Thanh HP và MP to rõ, có chiều sâu.
Khung chân dung nhân vật (portrait) nằm sát thanh HP.
Skill icons có hiệu ứng cooldown xoay, dễ theo dõi.
Quest tracker hiển thị trên cùng, scroll nhẹ khi thay đổi nhiệm vụ.

💡 Người chơi không đọc số máu – họ “cảm nhận” sức sống qua ánh sáng của thanh HP.

🍃 4. HUD cho Match-3 – Nhịp điệu và sự tập trung

Game Match-3 cần HUD tối giản để người chơi tập trung vào nhịp chạm và phản ứng chuỗi.
Mystic Realms tạo HUD dạng “floating layer”, nơi:

Các nút kỹ năng (Boosters) ở phía dưới.
Thanh điểm (Score Tower) ở trung tâm.
Đồng hồ (Timer) góc phải.
Mỗi combo tạo hiệu ứng ánh sáng lan từ grid → HUD.

✨ HUD không đứng ngoài gameplay – nó phản hồi cùng mỗi cú chạm.

⚙️ 5. Các phần tử HUD chính và vai trò

Thành phần	Vai trò	Cảm xúc / Hiệu ứng
❤️ HP Bar	Sinh tồn	Ánh sáng nhịp tim, đỏ đậm khi nguy hiểm
🔮 MP Bar	Năng lượng	Sóng ánh sáng chạy dọc, biểu trưng cho mana
⚡ Stamina	Tốc độ / Combo	Nhịp đập nhanh hơn khi chiến đấu
💎 Score / Combo	Thành tích	Hiệu ứng rung nhẹ khi đạt kỷ lục
🪙 Coin / Gem Counter	Tiền tệ	Sáng vàng khi tăng
🧭 Mini-map / Quest	Định hướng	Scroll nhẹ khi cập nhật
🎯 Skill Icons	Hành động	Cooldown vòng xoay + Glow khi sẵn sàng

📊 HUD là sự tổng hợp của toàn bộ GUI – mỗi yếu tố nhỏ đều phải có lý do tồn tại.

🌈 6. Phản hồi cảm xúc (Emotional Feedback)

HUD của Mystic Realms không chỉ hiển thị, mà còn phản ứng:

Khi người chơi bị thương → màn hình rung nhẹ, HUD đỏ mờ.
Khi hồi máu → ánh sáng lan dọc thanh HP.
Khi dùng kỹ năng → skill icon phát sáng mạnh, scale 1.1x rồi trở lại.
Khi chiến thắng → HUD sáng dần, banner “Victory” xuất hiện.

🎵 HUD có nhịp điệu riêng – không phải âm nhạc, mà là “nhịp ánh sáng của chiến đấu.”

🪶 7. Màu sắc và độ trong suốt

Mystic Realms cân bằng độ tương phản giữa HUD và background:

HUD không bao giờ dùng 100% opacity.
Sử dụng 70–85% để hòa với nền mà vẫn nổi bật.
Viền và icon dùng màu phản chiếu ánh sáng của thế giới (rừng – xanh lá; lửa – đỏ cam; tuyết – lam trắng).

💎 HUD phải trong suốt vừa đủ để thấy thế giới – vì nó sống trong thế giới đó.

🔧 8. Tích hợp trong Unity

Mystic Realms HUD được đóng gói sẵn Prefab + Controller Script:

Canvas Group (fade in/out).
Anchors cố định (Top, Bottom, Center).
DOTween animation mẫu cho transition.
Script HUDController cập nhật mọi giá trị tự động.

Ví dụ:


void UpdateHUD() {
    hpBar.fillAmount = player.HP / player.MaxHP;
    manaBar.DOFillAmount(player.MP / player.MaxMP, 0.3f);
    comboText.text = comboCount.ToString();
}

⚙️ Chỉ vài dòng code – HUD trở nên sống động.

🧩 9. Sự hòa hợp với Background & Character

Một HUD đẹp không thể tách khỏi bối cảnh và nhân vật.
Mystic Realms đảm bảo:

HUD ăn cùng hướng ánh sáng với background.
Màu thanh HP phản chiếu ánh sáng môi trường.
Character portrait phản ứng với trạng thái gameplay (đau, vui, chiến thắng).

Khi mọi yếu tố cùng chia sẻ nguồn sáng, tông màu và cảm xúc, HUD trở thành một phần của thế giới, không phải lớp phủ lên nó.

💫 10. Khi giao diện trở thành gameplay

Ở cấp độ cao nhất, Mystic Realms làm cho HUD là gameplay:

Combo tower trong Match-3 chính là thanh điểm.
Tháp sáng trong rừng chính là feedback visual của HUD.
Thanh năng lượng chiến đấu chính là đường dẫn nhịp độ cảm xúc của người chơi.

HUD không còn là thứ để “nhìn” – mà là thứ để “cảm nhận.”

“Khi người chơi không nhận ra mình đang nhìn HUD – đó là lúc HUD đạt đến đỉnh cao.”
— Triết lý thiết kế của Mystic Realms GUI

🌟 Kết luận

HUD là trái tim đập của toàn bộ giao diện, nơi mọi yếu tố nhỏ cùng hòa vào nhịp sống của gameplay.
Trong Mystic Realms GUI, HUD không chỉ thể hiện thông tin – nó phản ánh cảm xúc, dẫn dắt ánh nhìn, và giữ nhịp cho thế giới.

Khi mọi thanh bar, panel, banner, và nhân vật đều hòa nhịp cùng nhau, người chơi không còn cảm giác “đang dùng giao diện” — họ đang sống trong một thế giới có linh hồn.

“Một HUD tốt không cần được chú ý – vì nó chính là hơi thở của trò chơi.”
— Triết lý thiết kế của Mystic Realms GUI

Tuesday, October 7, 2025

Level Map với các “Level Nodes” trong Unity (mobile portrait)

1) Checklist hình ảnh cần chuẩn bị

2) Dữ liệu & Prefab (Unity)

2.1 ScriptableObject cho Level

2.2 Trạng thái người chơi

2.3 Prefab LevelNode

2.4 Prefab WorldMap

3) Thiết lập Scene & Tương tác

3.1 Kéo/Phóng to (Pan/Zoom) cho Map (mobile-friendly)

3.2 Spline Path (tùy chọn)

3.3 Parallax 2D (nhẹ)

3.4 Raycast & UI

3.5 Popup Level Info

4) Lưu ý quan trọng (đừng bỏ qua)

Gợi ý quy trình dựng nhanh (30–60 phút)

Saturday, October 4, 2025

Bonus Chapter – Mystic Realms Design Manifesto

🎯 Introduction

🪄 Principle 1 – Design Emotion, Not Features

🌿 Principle 2 – The UI Is Part of the World, Not a Layer Above It

🔮 Principle 3 – Light Is the Language of the Soul

⚙️ Principle 4 – Consistency Builds Trust

🕯️ Principle 5 – The Interface Must Have a Soul

🌟 Conclusion

✨ Summary of the Mystic Realms Design Manifesto

Phụ lục – Mystic Realms Design Manifesto

🎯 Giới thiệu

🪄 Nguyên tắc 1 – Thiết kế cảm xúc, không chỉ tính năng

🌿 Nguyên tắc 2 – Giao diện là một phần của thế giới, không phải lớp phủ

🔮 Nguyên tắc 3 – Ánh sáng là ngôn ngữ của linh hồn

⚙️ Nguyên tắc 4 – Sự thống nhất tạo nên niềm tin

🕯️ Nguyên tắc 5 – Giao diện phải có linh hồn

🌟 Kết luận

✨ Tổng kết Tuyên Ngôn Mystic Realms

Chương 11 – Game Demo: Mystic Realms trong hành động

🎯 Giới thiệu

⚔️ 1. RPG Demo – Hành trình của người anh hùng

🎮 Thành phần nổi bật:

✨ Trải nghiệm cảm xúc:

🍃 2. Match-3 Demo – Sự hòa hợp giữa UI và môi trường

🌿 Thành phần chính:

🌈 Kết hợp nghệ thuật:

🧭 3. Shop Demo – Cảm xúc của sự tương tác

💰 Đặc điểm chính:

📜 4. Quest & Journal Demo – Khi UI kể chuyện

💎 5. Reward Scene – Phần thưởng của cảm xúc

🌌 6. HUD Integration – Giao diện thống nhất

🧩 7. Triết lý “UI là một phần của thế giới”

⚙️ 8. Ứng dụng kỹ thuật trong Unity

🌠 9. Hiệu quả thị giác và cảm xúc

🌟 Kết luận

Chương 10 – Collections & Icon Sets: Xây dựng hệ sinh thái biểu tượng hoàn chỉnh

🎯 Giới thiệu

🧱 1. Bộ sưu tập biểu tượng – cấu trúc của sự thống nhất

🪄 2. Hình học và ngôn ngữ thị giác

⚙️ 3. Hệ thống phân cấp biểu tượng

💎 4. Bộ icon đa hệ – kết nối nhiều thể loại game

🧩 5. Bộ màu Match-3 – hệ thống biểu tượng theo yếu tố

🍃 6. Bộ vũ khí & trang bị RPG – tiến hóa qua cấp độ

🧪 7. Bình máu, mana, và năng lượng – hệ biểu tượng huyết mạch

🪙 8. Bộ phần thưởng và coin – thang giá trị trực quan

🧭 9. Kỹ thuật tổ chức file & chuẩn hóa

🌌 10. Khi hệ thống biểu tượng trở thành ngôn ngữ của thế giới

🌟 Kết luận

Chương 9 – HUD & Integration: Khi giao diện trở thành một phần của gameplay

🎯 Giới thiệu

🧭 1. HUD – Bộ não và trái tim của người chơi

🧱 2. Cấu trúc HUD cơ bản trong Mystic Realms

⚔️ 3. HUD cho RPG – Sự cân bằng giữa dữ liệu và cảm xúc

🍃 4. HUD cho Match-3 – Nhịp điệu và sự tập trung

⚙️ 5. Các phần tử HUD chính và vai trò

🌈 6. Phản hồi cảm xúc (Emotional Feedback)

🪶 7. Màu sắc và độ trong suốt

🔧 8. Tích hợp trong Unity

🧩 9. Sự hòa hợp với Background & Character

💫 10. Khi giao diện trở thành gameplay

🌟 Kết luận

2.3 Prefab `LevelNode`

2.4 Prefab `WorldMap`