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.

Part 2: Banners – The Voice of the Interface

 

GUI Asset Research Series – Part 2: Mystic Realms GUI

Mystic Realms GUI Asset: Unity Store

Vietnamese Version: Link

---

+ Introduction

If buttons are the heartbeats of a GUI, then banners are its voice — they announce, introduce, and frame the player’s attention.
A good banner tells players where they are, what’s happening, and why it matters — all before they press a single button.

In Mystic Realms GUI, banners are more than decorative headers; they’re carefully crafted communication anchors.
Each banner conveys tone, hierarchy, and worldbuilding through style, typography, and light.

---

1. The Role of Banners in GUI Design

Banners serve three fundamental roles:

1. Introduce content: “Quest Complete”, “Victory”, “Shop”, “Chapter 1” — a clear title immediately orients the player.

2. Create identity: consistent framing ties every screen together into one world.

3. Guide emotion: font, glow, and ornamentation set the mood (joy, mystery, urgency).

Mystic Realms GUI leverages banners not only for labeling, but as narrative transitions — every banner feels like a line of dialogue between the game and the player.

Mystic Realms Panels

---

2. Hero Banners – Announcing the World

The hero banner is the first voice a player hears — usually on the Title Screen, Main Menu, or Win/Lose Scene.

Mystic Realms GUI gives hero banners a distinct design language:

• Wide frame with ornate rune engravings along the border.

• Soft inner glow, creating depth and “magical energy.”

• Golden gradient edges that respond beautifully to ambient light.

• Typography framed within the ornament, not floating above.

It’s not just an image — it’s a moment of presentation.
When “Mystic Realms” appears with its luminous edge, it sets the expectation: this world has magic, craftsmanship, and warmth.

+ Design Tip:
Always treat your main banner as part of your game’s logo system. It’s not just decoration — it’s your brand statement.

---

3. Panel Banners – Readability and Function

Panel banners are the working banners — they name screens, panels, and features like “Inventory”, “Shop”, “Settings”, or “Quests”.

Mystic Realms makes these banners:

• Readable: thick serif font, neutral glow, no overpowering effect.

• Adaptable: provided as 9-slice prefabs so the width can adjust dynamically.

• Anchored: prefab alignment at top-center of panels for instant integration.

Each banner can hold both text and icon (e.g., sword icon next to “Equipment”), helping users instantly recognize context.

+ [Suggested Image: “Shop Panel” banner on a wooden frame, compared to “Quest Log” with parchment banner and icon.]

These banners are functional, but still carry the same rune and light accent as the hero ones — giving every screen cohesion.

---

4. Tag Banners – The Smallest Voice

Tiny banners or “tags” appear throughout the interface — next to icons, rewards, or shop items — and though small, they’re powerful.

Mystic Realms includes mini banners for quick labeling:

• NEW, HOT, LIMITED, BEST VALUE, RARE, LEGENDARY.

• Simple yet expressive — flat shape with color-coded edges.

Color hierarchy:

• Green: standard or unlocked items.

• Purple: rare content.

• Gold: premium or paid content.

• Red: warning or limited-time offers.

These mini banners use simple block contrast + rune sparkle highlights, making them easy to recolor for different UI themes (Wooden, Sci-fi, Halloween).

+ Developer Insight:
In Unity, these are best used as child objects within shop item prefabs, toggled on/off dynamically during sales or events.

---

5. Banner Layout and Typography

A banner is only as strong as its text composition.
Mystic Realms standardizes typography rules to maintain visual balance:

• Font size ratios: title font = 1.6× body font.

• Kerning control: wide spacing for main titles, tight for sub-tags.

• Shadow color: 70% black at 40% opacity offset downward (for fantasy glow).

• Text placement: always centered, never aligned to edges — keeps energy contained.

Mystic Banners

The result is clean, legible banners even on small portrait displays — a major win for mobile readability.

---

6. Banner Animation and Flow

Static banners are functional; animated banners are memorable.

Mystic Realms GUI suggests gentle, elegant motion:

• Ease-in-out scale (1.05x) when entering a scene.

• Soft glow pulse every 3–5 seconds for life-like rhythm.

• Rune flicker animation for magical emphasis.

+ Unity Implementation Tip:
Use DOTween’s DOScale and DOFade in sequence to build a breathing banner effect.
Small, 10–15% amplitude oscillations are enough — avoid excessive motion on UI text.

These subtle animations elevate the experience — turning what could be static titles into moments of fantasy delight.

---

7. Color Palettes and Emotion in Banners

In UI, color is language, and banners are where this language is loudest.

Mystic Realms employs emotional color schemes:

• Warm golds for achievement and victory.

• Cool blues for calm, magical, or informational screens.

• Soft greens for progression and success.

• Rich reds for urgency, alerts, or defeat.

Each palette includes a gradient blend + rune glow, keeping harmony across the entire UI.

+ Visual Design Tip:
Never use pure white text on glowing backgrounds — Mystic Realms uses off-white (RGB 240,230,210) for warmer tone integration.

---

8. Consistency & Brand Recognition

Players may not consciously notice banners — but their brain does.
Consistent banners create a sense of place; inconsistent ones break immersion.

Mystic Realms GUI maintains branding through:

• Identical outline thickness across all banners.

• Unified corner fillets and border ornaments.

• Soft global lighting direction (from top center, same as buttons).

This consistency makes the GUI feel “handcrafted” yet scalable — a rare balance many assets miss.

+ [Suggested Image: 3 banners in one frame – “Shop”, “Quest”, “Victory” – showcasing visual unity.]

---

+ Conclusion: Banners Speak Before the Player Reads

A great banner isn’t about size or decoration — it’s about voice.
Before the player even reads the text, they feel the tone through design.

Mystic Realms GUI turns banners into the emotional narrator of the game world.
From the glowing hero title that welcomes players, to the mini tag that marks a legendary item — every banner speaks the same magical language.

“Before the story begins, the banner whispers its first words.”
— Mystic Realms GUI Design Philosophy

Part 1: Buttons – The Soul of a GUI Asset

 

GUI Asset Research Series – Part 1: Mystic Realms GUI

Mystic Realm GUI Asset: Unity Store

Vietnamese Version: Link

---

+ Introduction

In every great GUI Asset, one element always defines the entire visual identity — the button.
It’s the first thing the player interacts with, the first touchpoint for usability, and often the most iconic part of the interface.

Look at any top-selling GUI pack on the Unity Asset Store — Super Casual GUI, GUI Pro Fantasy RPG, or Mystic Realms GUI — and you’ll notice something:
Their buttons are instantly recognizable.
Even without reading the title, you can tell which asset a game came from simply by looking at its buttons.

In this article, we’ll dive deep into how Mystic Realms GUI treats button design as the soul of its visual system — not just decoration, but a fundamental language of interaction and branding.

---

1. Buttons as the Face of the Brand

The button is not just a functional UI element — it’s the logo of your interface philosophy.

In Mystic Realms GUI, each button carries a clear identity:

• Bold outlines define strong shape contrast, ensuring visibility on both light and dark backgrounds.

• Smooth gradients and magical highlights give each surface depth — it feels tactile, like polished crystal or enchanted wood.

• Consistent corner rounding ensures harmony across round, square, and elongated buttons.

Button With Decoration

The result?
Whether it’s a “Start” button on the title screen or a “Buy” button inside the shop, it feels like it belongs to the same world — the Mystic Realm.

---

2. The Common Button: Speed, Clarity, and Comfort

In mobile development, the “common button” (like Play, Confirm, Cancel, Back) must be:

• Readable at a glance, even on small screens.

• Tappable with one thumb, avoiding overly thin shapes.

• Optimized for text length, supporting dynamic localization.

Mystic Realms uses a clean fantasy font with clear kerning and shadow for legibility.
Every button text area has generous padding, and the asset’s prefabs use auto-layout anchors so resizing is painless.

This makes it ideal for rapid prototyping — you can plug it into a Unity project, type a label, and it’s ready.

+ Developer Tip:
A “standard button prefab” should never need re-alignment.
Mystic Realms’ base prefabs include pivot-centered anchors and pressed states that are animation-ready via DOTween or Unity’s UI transitions.

---

3. Geometric Variants – Circles, Squares, Triangles

Geometry is part of the identity too.
Mystic Realms GUI includes three fundamental shapes for flexible use cases:

Shape	Purpose	Example Usage
🔵 Circle	Simple, playful actions	Skill trigger, inventory slot, quick tap
⬛ Square	Utility / Menu	Navigation buttons, item confirm
🔺 Triangle	Directional / Symbolic	Next / Previous, Attack / Defense

Each variant maintains the same outline thickness, shadow direction, and light source, so even across shapes the visual balance stays consistent.

This consistency allows devs to mix shapes freely without making the UI feel chaotic.

Collection of Buttons

---

4. Micro Buttons – The Unsung Heroes

Small icon-only buttons often get ignored in GUI design — yet they’re everywhere:
close (X), help (?), settings, info (i), and navigation arrows.

Mystic Realms handles them with care:

• Simplified outlines to keep them readable at small scale.

• Single-glow edges instead of layered textures to maintain crispness.

• Shared color hierarchy: gold = action, blue = info, red = cancel.

Because they are vector-based, these micro-buttons can scale infinitely — perfect for 2D or 4K UI.
They’re small, yes, but visually “alive,” with the same fantasy aura as larger components.

Cancel Buttons on panel

---

5. Button States – Breathing Life into the Interface

Every button should react — it’s what separates static art from interactive design.

Mystic Realms GUI defines three core states for every button prefab:

1. Normal: soft lighting, calm gradient.

2. Pressed: deeper shadows, slight scale-down (0.95x).

3. Disabled: grayscale or muted tone, reduced opacity.

Optional states like Hover (for desktop) and Selected (for toggles) use the same gradient direction and hue shift to maintain harmony.

+ Implementation Tip:
In Unity, pair these sprites with a Button Color Transition or a DOTween scale punch to give feedback without scripting.
The asset includes separated button layers (background, outline, text) — ready for animation control.

---

6. The Color System – Defining Emotion Through Hue

In a fantasy GUI, colors are not random; they’re emotional cues.

Mystic Realms defines a compact but expressive palette:

• Green: Confirm / Proceed / Success.

• Blue: Info / Neutral / Magic.

• Gold: Primary Action / Shop / Reward.

• Red: Cancel / Warning / Negative.

This system allows designers to communicate intent instantly — players know what to tap before reading the text.

+ Pro Tip: Keep your color language consistent across all UI layers — the “green confirm” should look identical on both small and large panels.

---

7. Brand Cohesion: Recognizable at a Glance

When viewers see Mystic Realms’ buttons in a random screenshot, they immediately recognize the pack — that’s visual branding done right.

The asset achieves this through:

• Consistent silhouette (thick outline, soft bevel, minimal glow).

• Light source from top-center (matching the fantasy lighting direction).

• Balanced ornamentation — decorative but never noisy.

This subtle branding helps make Mystic Realms stand out on the Unity Store, where most GUI packs look either too flat or overly complex.

---

8. Developer Usability – Prefabs That Just Work

A beautiful button is useless if it’s hard to integrate.
Mystic Realms GUI emphasizes plug-and-play usability:

• Prefabs are set to Anchors + Pivot Centered (no misalignment on resize).

• Buttons support TextMeshPro by default, with pre-styled fonts.

• PSD / Vector source files allow recoloring in seconds.

You can drop it into any Unity scene — no need to tweak anchors, canvases, or scale.

⚙️ Quick Test:
Try changing CanvasScaler to “Scale with Screen Size.”
Mystic Realms buttons hold perfect proportions even on extreme ratios like 21:9 or 4:3.

---

+ Conclusion: Why Buttons Define the Asset’s Soul

A GUI’s success begins and ends with its buttons.
They carry the identity, rhythm, and emotional language of the entire interface.

Mystic Realms GUI treats buttons not as decoration, but as interactive symbols — handcrafted elements that blend art, usability, and storytelling.
From the large “Start Game” banner to the smallest “X” micro-button, everything speaks the same fantasy tone: warm, alive, and intuitive.

“When your button feels alive, your world feels alive.”
— Mystic Realms GUI Design Philosophy

Secret Adventure GUI Gear

Download: Assetstore Link

All images are cut and add to the scene. All boards are prefabs can be used very easy. If you want to use board, you only need to add PopupControler prefabs and you can open any board. 

Including:

+ Menu Scene

+ Mission Choose Scene

+ Play Scene

+ Info Scene With Old Book

=> All scene have code and display with script C# and ready for you to make your game. Each scene have button to go to other scene like a game.

Prefabs with:

+ Option Board

+ Pause Board

+ Quit Confirm Board

+ Mission Board

Download: Assetstore Link

Size: 26.7 MB (including AI file for you to customer and export with higher quality)

(NOT LIKE OTHER ASSETS with more than 1GB with only PSD and Image)

Hyper Casual Game Tutorial

A great tutorial from Awesome Tuts:

https://www.youtube.com/watch?v=gc5a_Z6M4hs

Asset download at:

https://learn.awesometuts.com/courses/199187/lectures/9141041

Description:
Player control a character try to move down to avoid a death from the spike at the top

+ Have 5 different platforms can interact with player:
- Standard platform
- Spike platform
- Speed platform with left and right
- Breakable platform

+ What you learn:
- Custom the screen resource in Unity
- Create platform with different type with prefabs
- Create wave that random platform
- Control player: Movement and Bounding
* Movement control Input and move the player
* Bound will avoid player move out of the box
- Using V shortcut to move exactly fix with other Object
- Add function to any frame of an animation (like do in 0.3 seconds)