Skip to main content

README.md

Unity Screen Navigator (trong bài này gọi tắt là USN) là thư viện cho screen transitions, transition animations, transition history stacking, và quản lý screen trong uGUI của Unity

USN0.gif

Tổng quan

Tính năng

  • Tạo pages, modals, tabs và chuyển động của chúng một cách dễ dàng và linh hoạt.
  • Quản lý screen và bộ nhớ từ khi load cho đến khi destroy.
  • Quy trình tách biệt với các animator cho các hoạt ảnh chuyển đổi màn hình phức tạp.
  • Thư viện được phân tách tốt không có các chức năng phụ (ví dụ: thư viện GUI, máy trạng thái).
  • Và các tính năng tiêu chuẩn như history stacking và ngăn chặn nhấp chuột trong quá trình chuyển đổi.

Demo

Bạn có làm theo những bước sau để chơi thử

  1. Clone repo
  2. Mở và chạy scene DemoEntryPoint

Cài đặt

Yêu cầu

  • Unity 2021.3 hoặc cao hơn
  • uGUI (không hỗ trợ UIElements)

Cài đặt

Unity Package Manager
  1. Mở Package Manager (Window > Package Manager).
  2. Nhấn nút (+) > Add package from git URL.
  3. Nhập https://github.com/Haruma-K/UnityScreenNavigator.git?path=/Assets/UnityScreenNavigator và nhấn Add.
    image.png
Chỉnh sủa file Manifest

Mở Packages/manifest.json và thêm dòng sau:

{
"dependencies": {
  "com.harumak.unityscreennavigator": "https://github.com/Haruma-K/UnityScreenNavigator.git?path=/Assets/UnityScreenNavigator"
  }
}

Nếu muốn cài phiên bản khác thì thêm số phiên bản vào cuối đường link (VD: #1.0.0) https://github.com/Haruma-K/UnityScreenNavigator.git?path=/Assets/UnityScreenNavigator#1.0.0

Chuyển màn hình cơ bản

Khái niệm về màn hình (screens) và chuyển tiếp (transitions)

USN chia màn hình (screens) thành 3 loại: Page, Modal và Sheet.

  • Page là một màn hình được chuyển đổi theo trình tự. (Nhìn giống các screen)
    • Khi chuyển từ Page A → Page B. Page A sẽ được stack trong lịch sử. Và khi từ Page B → Page A. Page A sẽ được hiển thị lại với trạng thái không đổi.
      USN1.gif
  • Modal là một màn hình được stack trong một của window. (Nhìn giống popup)
    • Khi nó được hiển thị. tất cả các tương tác ngoại trừ modal phía đều bị chặn.
      USN2.gif
  • Sheet được sừ dụng giống như các tab.
    • Lịch sử không quản lý sheet và chỉ có một sheet được hiển thị cùng lúc.
      USN3.gif
  • Các screen có thể được lồng vào nhau.
    • Và khu vực của mỗi màn hình có thể được chỉ định tự do (không bất buộc full màn hình).
      USN4.gif

Tạo page

Để tạo page. Đầu tiên, tạo Page Container bằng cách gắn component PageContainer vào một GameObject bên trong Canvas. Pages sẽ hiển thị fit với container nên hãy điều chỉnh kích thước cho phù hợp.

Tiếp theo, tạo Page bằng cách tạo gameObject mới (tương ứng với một page) bên trong PageContainer và thêm component Page. Đặt GameObject này trong thư mục Resource với tên bất kỳ.

Và gọi PageContainer.Push() với đường dẫn Resources để hiển thị page.

Ví dụ cho push page được đặt tại Assets/Resources/ExamplePage.prefab.

PageContainer pageContainer;

// Push the page named "ExamplePage".
var handle = pageContainer.Push("ExamplePage", true);

// Wait for the transition to finish.
yield return handle;
//await handle.Task; // You can also use await.
//handle.OnTerminate += () => { }; // You can also use callback.

Gọi PageContainer.Pop() để deactive page và hiển thị page trước đó.

PageContainer pageContainer;

// Pop the active page.
var handle = pageContainer.Pop(true);

// Wait for the transition to finish.
yield return handle;

Nếu muốn bỏ qua một trang nhất định khi gọi Pop(). có thể tắt stacking history bằng cách sử dụng tham số tuỳ chỉnh.

















Back to top