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

1. 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ỗ)

2. Paths: dải đường uốn lượn (1–2 biến thể) hoặc để vẽ spline trong Unity.

3. Level Node Base (khung nút): hình tròn/biểu tượng đá/gỗ với outline dày.

4. 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)

5. POI/Decor (trang trí): bảng gỗ “World 1”, cọc tiêu, nấm, cờ, lồng đèn…

6. UI nhẹ: nút Back, Header, Currency, nút World Switch (mũi tên), panel Info.

7. 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)

1. Tạo Canvas (Screen Space – Camera), thêm MapViewport (Mask + SafeArea).

2. Đặt MapContent, import BG + layers + path sprite, scale map khoảng 1.2×.

3. Tạo prefab LevelNode chuẩn (Button + Images + TMP text).

4. Tạo 10–20 LevelData (điền mapPosition theo layout).

5. Viết WorldMap sinh node, gắn MapPanZoom.

6. Làm LevelInfoPopup + liên kết từ onClick.

7. Thêm hiệu ứng nhỏ: pulse cho node current, sparkle nhẹ cho available.

8. Test trên 3 tỷ lệ: 1080×1920, 720×1600, 1440×3040.

Bài 2 — Panels & Windows: Khung xương của mọi giao diện

 

Panels & Windows: Khung xương của mọi giao diện

Link: Unity Store

Trong thiết kế UI game, panel và cửa sổ đóng vai trò như “khung” bao quanh mọi tương tác. Bộ Mystic Realm GUI Asset mang đến nhiều loại panel khác nhau, phù hợp từ menu chính đến popup nhỏ gọn, tất cả đều đồng bộ về phong cách fantasy.

---

1. Setting Panel

• Dùng để tinh chỉnh trải nghiệm cá nhân: âm lượng, đồ họa, gameplay.

• Bao gồm: header (tiêu đề), body (các lựa chọn), footer (nút Close/Save).

• Gọn gàng, dễ mở rộng thêm toggle, slider, checkbox.

👉 Thường dùng trong Menu Scene hoặc pause menu.

---

2. Shop Panel

• Thiết kế dạng grid hiển thị item (sword, armor, potion...).

• Góc trên hiển thị currency HUD (coin/gem).

• Mỗi item card có ảnh, giá, nút Buy.

👉 Đi kèm popup xác nhận giao dịch, đảm bảo trải nghiệm quen thuộc cho người chơi.

---

3. Quest Panel

• Hiển thị danh sách nhiệm vụ với icon, mô tả, progress bar.

• Có nút Claim để nhận thưởng.

• Hỗ trợ phân loại Daily / Weekly / Main quest.

👉 Kết hợp tuyệt vời với Notification Badge để báo hiệu quest mới.

---

4. Popup Windows

• Confirm/Warning: “Bạn có chắc muốn mua?”, “Thoát game?”.

• Reward Popup: hiển thị coin/gem/sao bay vào HUD.

• Error Popup: báo lỗi nhẹ nhàng, dễ đọc.

👉 Popup thường nhỏ gọn, với Primary/Secondary button rõ ràng.

---

5. Modularity trong Panels

Điểm mạnh của Mystic Realm GUI là mỗi panel được thiết kế modular:

• Header, body, footer tách biệt → dễ hoán đổi, tái sử dụng.

• Có thể lồng panel này vào panel khác (ví dụ: Shop Panel mở trong Setting Scene).

• Style đồng bộ → ghép lại vẫn thống nhất.

---

👉 Kết luận

Panels & Windows trong Mystic Realm GUI Asset mang lại bộ khung UI mạnh mẽ, từ menu cài đặt, shop, quest board, đến popup nhỏ. Chúng không chỉ đẹp mắt mà còn dễ dàng gắn vào logic code, giúp dev tiết kiệm rất nhiều thời gian.

Bài 1 — Buttons: Linh hồn của tương tác

 

Mystic Realm GUI Asset

Bài 1 — Buttons: Linh hồn của tương tác

Link Unity Asset Store: Unity Store

Trong bất kỳ game nào, nút bấm là cầu nối trực tiếp giữa người chơi và trải nghiệm. Bộ Mystic Realm GUI mang đến một hệ thống Button đầy đủ, thống nhất, và cực kỳ linh hoạt.

1. Primary Buttons

• Dành cho hành động chính: Play, Start, Next.

• Thiết kế nổi bật với khung viền fantasy, ánh sáng nhấn mạnh.

• Thích hợp đặt ở màn hình menu, end game panel, popup quan trọng.

👉 Điểm nhấn: Người chơi dễ dàng nhận diện và nhấn ngay không cần suy nghĩ.

---

2. Secondary Buttons

• Dùng cho hành động phụ: Back, Option, Close.

• Nhẹ nhàng, ít gây phân tán sự chú ý.

• Thường được đặt ở góc panel hoặc popup.

👉 Tạo cảm giác UI “có thứ bậc” rõ ràng.

---

3. Icon Buttons

• Dạng hình tròn/vuông chứa biểu tượng: Shop, Quest, Mail, Setting, Inventory.

• Có thể dùng badge đỏ (notification) để báo hiệu có thông tin mới.

👉 Ví dụ: icon Shop nhấp nháy khi có khuyến mãi.

---

4. State Variants

Mỗi button đi kèm đủ trạng thái:

• Normal: bình thường.

• Hover: sáng lên khi rê chuột.

• Pressed: thụt nhẹ, đổi màu khi nhấn.

• Disabled: mờ đi, không bấm được.

👉 Cho phép dễ dàng tạo animation nhỏ, làm UI thêm sống động.

---

5. Use Case trong Mystic Realm

• Menu Scene: Play (Primary), Option/Quit (Secondary).

• Shop: Buy (Primary), Close (Secondary).

• HUD: Icon Buttons cho Quest, Inventory, Mail.

• Popup: Confirm (Primary), Cancel (Secondary).

---

👉 Kết luận

Buttons trong Mystic Realm GUI không chỉ đẹp mắt mà còn có hệ thống logic rõ ràng, giúp game dev dễ sắp xếp UI theo mức độ ưu tiên. Đây là lý do tại sao nhiều indie dev thích dùng Mystic Realm GUI: chỉ cần kéo thả button là đã có ngay tương tác chuyên nghiệp.

Buttons đa dạng nhiều loại, 9-sliced đầy đủ

Weapon Evolution

Sword Evolution Tree

 Upgrade your weapons from Trash to Legendary with clear rarity tiers and elemental variants. Fully vector (AI), PSD editable, and PNG ready-to-use – perfect for RPG loot, crafting, and progression systems.

Mystic Realms: Premium Fantasy UI System

Mystic Realms is a complete premium fantasy UI system crafted for mobile and desktop RPG, adventure, and hero-based games in a cute cartoon style.

Link Asset: Unity Store

It includes everything you need to create polished, modular interfaces – from menus, icons, and buttons to HUD elements, banners, and panels – all fully customizable with layered PSD and vector AI source files.

🎨 Features

• 1000+ PNG game-ready assets – optimized for Unity’s UI workflow
• 14+ prebuilt UI layouts – Inventory, HUD, Success, Fail, Daily Rewards, and more
• 200+ vector game icons – items, skills, buffs, currencies, crafting materials
• 1400+ button variants – 80 symbols × 5 colors × 4 shapes, plus blank versions for customization
• 4 background previews – ready to use or replace with your own
• PSD & AI sources included – full control over colors, text, and layout
• 9-slice ready panels – scalable without distortion in Unity’s UI system
• 5 player characters & 5 enemy characters – fully vector, animation-ready
• Demo scenes & scripts – show navigation, HUD behavior, and scene transitions inside Unity

🧩 Perfect for

• Mobile & desktop RPGs
• Adventure and quest-based games
• Hero collector or party-based games
• Fantasy-themed strategy or simulation
• Seasonal & event-based UI skins

📂 File Formats

• PNG – ready-to-use in Unity UI
• PSD – layered for easy editing (Photopea / Photoshop)
• AI – scalable vector source for advanced customization

💡 Why choose Mystic Realms?

• Consistent art style – every asset designed to match the same fantasy cartoon look
• Fully modular – mix, match, and resize without losing quality
• Unity-optimized – organized files, named layers, and 9-slice support for panels
• Expandable – add your own icons or seasonal skins with ease

🎯 Whether you’re building an epic RPG, a casual fantasy adventure, or a hero

Website for purchasing: https://ngochi8.gumroad.com/l/yrbcam