Xây dựng hệ thống đối thoại Unity sử dụng Ink

Mục Lục

1. Giới thiệu
2. Xây dựng hệ thống hiển thị và quản lý tên NPC, hình ảnh và giao diện đối thoại trong Unity sử dụng Ink
3. Cài đặt hệ thống hiển thị tên và hình ảnh
   1. Tag và Key của tên người nói
   2. Tag và Key của hình ảnh
   3. Gắn tag và key vào game object tương ứng
4. Xây dựng các đoạn đối thoại sử dụng ink tags
5. Xử lý các tag và các hành động trong game
   1. Xử lý tag của tên người nói bằng script
   2. Xử lý tag của hình ảnh bằng script
   3. Xử lý tag của giao diện đối thoại bằng script
6. Tạo các layout cho giao diện đối thoại
   1. Tạo folder Layouts cho các animation
   2. Xây dựng animator controller và animation cho layout Left
   3. Xây dựng animator controller và animation cho layout Right
   4. Xử lý switch layout trong script
7. Reset các giá trị mặc định khi bắt đầu đối thoại
8. Kết luận

Tổng quan về Hệ thống hiển thị và quản lý tên NPC, hình ảnh và giao diện đối thoại trong Unity sử dụng Ink

Trong video này, tôi sẽ hướng dẫn các bạn một cách đơn giản nhưng hiệu quả để hiển thị và quản lý tên NPC, hình ảnh và giao diện đối thoại trong Unity sử dụng Ink. Cuối cùng, chúng ta sẽ có hệ thống mà tên và hình ảnh có thể dễ dàng thay đổi cho mỗi dòng đối thoại và cũng dễ dàng thay đổi giao diện của bảng đối thoại. Trong trường hợp này, chúng ta sẽ làm cho hình ảnh và tên xuất hiện ở phía trái hoặc phải. Hãy tiếp tục xem cách chúng ta làm điều đó trong tập tin đối thoại Ink.

Xây dựng hệ thống hiển thị tên và hình ảnh

Tag và Key của tên người nói

Chúng ta sẽ sử dụng các tag để thêm metadata vào mỗi dòng đối thoại. Mỗi tag sẽ được đọc trong Unity dưới dạng chuỗi, và cách chúng ta muốn cấu trúc chúng hoàn toàn thuộc về chúng ta. Một cách tốt là thiết lập các tag và cặp khóa-giá trị, trong đó khóa đại diện cho một hành động mà chúng ta muốn thực hiện trong mã C# cho dòng đối thoại đó, và giá trị đại diện cho dữ liệu sẽ được sử dụng cho hành động đó.

Trong trường hợp này, ký hiệu '#' cho biết đây là một tag, 'speaker' là tên người nói và 'Bob' là giá trị của nó, và chúng được phân tách nhau bằng dấu hai chấm. Chúng ta có thể đọc tag này vào Unity dưới dạng chuỗi, sau đó phân tích nó thành cặp khóa-giá trị và thực hiện hành động cho khóa đó bằng cách sử dụng giá trị tương ứng. Điều này chính xác là những gì chúng ta sẽ làm để thiết lập tên hiển thị của bảng đối thoại.

Tag và Key của hình ảnh

Tương tự như việc thiết lập tên người nói, chúng ta cũng sẽ sử dụng các tag để thiết lập hình ảnh và giao diện của bảng đối thoại. Tuy nhiên, trong trường hợp này, các giá trị sẽ khớp với tên của trạng thái animation mà chúng ta sẽ thiết lập trong Unity. Khi chúng ta đọc tag đó trong code, chúng ta có thể phát animation đó, từ đó thay đổi hình ảnh hoặc giao diện tương ứng.

Gắn tag và key vào game object tương ứng

Để thực hiện việc thiết lập tên người nói, hình ảnh và giao diện của bảng đối thoại, chúng ta sẽ gắn tag và key vào các game object tương ứng trong Unity. Chúng ta sẽ sử dụng script để đọc các tag này và thực hiện các hành động phù hợp trong game.

Xây dựng các đoạn đối thoại sử dụng ink tags

Với hệ thống hiển thị tên người nói và hình ảnh đã sẵn sàng, chúng ta có thể bắt đầu xây dựng các đoạn đối thoại sử dụng ink tags. Chúng ta có thể thêm các tag vào mỗi dòng đối thoại khi chúng ta muốn kích hoạt một thay đổi. Chúng ta không cần thêm tag cho mỗi dòng đối thoại.

Xử lý các tag và các hành động trong game

Trong phần này, chúng ta sẽ xử lý từng tag một và thực hiện các hành động tương ứng trong game. Chúng ta sẽ xử lý từng tag của tên người nói, hình ảnh và giao diện đối thoại bằng script.

Xử lý tag của tên người nói bằng script

Chúng ta đã tạo một biến display name text như một thành phần UI và gắn nó với script DialogManager. Khi chúng ta gặp một tag với khóa "speaker", chúng ta chỉ cần đặt giá trị của display name text bằng giá trị của tag đó.

Xử lý tag của hình ảnh bằng script

Chúng ta đã tạo một biến portrait animator để quản lý hình ảnh và gắn nó với script DialogManager. Khi chúng ta gặp một tag với khóa "portrait", chúng ta sẽ chơi một animation dựa trên tên của animation đó và chúng ta sẽ truyền giá trị của tag vào.

Xử lý tag của giao diện đối thoại bằng script

Chúng ta đã tạo một biến layout animator để quản lý giao diện đối thoại và gắn nó với script DialogManager. Khi chúng ta gặp một tag với khóa "layout", chúng ta sẽ chơi một animation dựa trên tên của animation đó và chúng ta sẽ truyền giá trị của tag vào.

Tạo các layout cho giao diện đối thoại

Chúng ta sẽ tạo các layout cho giao diện đối thoại bằng cách tạo các animation tương ứng và thêm chúng vào animator controller. Chúng ta sẽ tạo một folder Layouts cho các animation và sau đó tạo animator controller và animation cho layout Left và layout Right.

Tạo folder Layouts cho các animation

Chúng ta sẽ tạo một folder Layouts trong thư mục Assets của dự án và tạo folder mới có tên là Portraits trong thư mục đó.

Xây dựng animator controller và animation cho layout Left

Chúng ta sẽ tạo animator controller mới và đặt tên là layout animator trong folder Layouts. Sau đó, chúng ta sẽ tạo hai animation tên là Left và Right. Chúng ta sẽ kéo các animation này vào animator controller để thêm chúng vào animator.

Xử lý switch layout trong script

Trong script DialogManager, chúng ta đã tạo một biến Animator để quản lý giao diện đối thoại. Trong switch statement, chúng ta sẽ gọi phương thức layout animator Play và truyền giá trị của tag vào.

Reset các giá trị mặc định khi bắt đầu đối thoại

Chúng ta sẽ reset các giá trị mặc định của tên người nói, hình ảnh và giao diện đối thoại khi bắt đầu đối thoại để không kéo dài thông tin của tag từ đối thoại trước đó. Chúng ta sẽ thêm một số dòng code vào phương thức enter dialog mode trong script DialogManager để đặt lại animator và display name text về giá trị mặc định.

Kết luận

Trong video này, chúng ta đã xây dựng thành công một hệ thống hiển thị và quản lý tên NPC, hình ảnh và giao diện đối thoại trong Unity sử dụng Ink. Nhờ việc sử dụng các tag và script phù hợp, chúng ta có thể dễ dàng thay đổi tên và hình ảnh cho mỗi dòng đối thoại và cũng dễ dàng thay đổi giao diện của bảng đối thoại. Hy vọng rằng video này đã hữu ích cho bạn.