Mẫu nhúng

Hướng dẫn này mô tả các thành phần tạo nên trải nghiệm đắm chìm đơn giản, dưới dạng trò chơi Charades. Trò chơi là một trường hợp sử dụng hoàn hảo cho trải nghiệm nhập vai vì hầu hết đều yêu cầu giao diện người dùng tuỳ chỉnh và các chế độ điều khiển đầu vào.

Đồng thời, bạn cũng sẽ tìm hiểu các mẹo thiết kế, phát triển và phân phối quan trọng để tự chế tạo Đồ thuỷ tinh của riêng mình.

Trước khi bắt đầu

Bạn có thể xem toàn bộ nguồn của trò chơi Charades trên GitHub. Hãy nhập tệp này vào Android Studio trước khi bạn bắt đầu, vì hướng dẫn này đề cập đến rất nhiều.

  1. Từ màn hình Bắt đầu nhanh, hãy nhấp vào Check out from version Control > Git (Kiểm tra từ phiên bản Quản lý > Git).
  2. Sao chép URL bản sao từ Charades.
  3. Dán URL bản sao vào URL kho lưu trữ Vcs rồi nhấp vào Sao chép.
  4. Nhấp vào Yes (Có) trên màn hình tiếp theo.
  5. Nhấp vào OK trên màn hình tiếp theo.
  6. Tạo bản dựng và chạy dự án trên Glass đã kết nối bằng cách nhấp vào nút Play (Phát). Hãy nhớ kiểm tra README của mẫu để biết thông tin chi tiết về lệnh gọi.

Kiến thức bạn sẽ học được

Bạn sẽ tìm hiểu cách sử dụng các thành phần từ SDK Android để xây dựng phần lớn chế độ chìm đắm và sau đó là GDK để kết nối với trải nghiệm Glass. Dưới đây là danh sách các chủ đề mà bạn sẽ tìm hiểu:

  • Thiết kế luồng giao diện người dùng bằng tài nguyên thiết kế mà chúng tôi cung cấp
  • Thiết kế trình kích hoạt giọng nói để khởi động Phần mềm thuỷ tinh
  • Sử dụng hoạt động Android để xác định cấu trúc giao diện người dùng của trò chơi
  • Xây dựng các mục trong trình đơn Android cho phép người dùng chọn các tuỳ chọn trò chơi
  • Tích hợp vào trải nghiệm Glass bằng tính năng kích hoạt bằng giọng nói trên trình đơn chính
  • Sử dụng trình phát hiện cử chỉ GDK giúp phát hiện hoạt động đầu vào của người dùng và thực hiện các thao tác tuỳ chỉnh
  • Tìm hiểu cách triển khai giao diện người dùng Android đơn giản để trau chuốt hơn và tuân theo phong cách Glass
  • Tìm hiểu về quy trình phân phối và những điều chúng tôi mong đợi khi phát hành Glassware

Thiết kế

Trước khi bạn bắt đầu phát triển, hãy dành thời gian và thiết kế Đồ thuỷ tinh của bạn. Nhờ vậy, bạn sẽ nắm được luồng giao diện người dùng nào hoạt động tốt nhất trên Glass, bạn sẽ sử dụng lệnh thoại nào và giao diện thẻ của mình.

Tất nhiên, thiết kế Đồ thuỷ tinh là một quy trình lặp lại và một số thứ mà bạn thiết kế bây giờ sẽ thay đổi, nhưng việc thực hiện một phần công việc này ngay từ đầu là điều rất quan trọng để tạo ra một trải nghiệm tuyệt vời.

Quy trình giao diện người dùng

Thiết kế luồng giao diện người dùng là một bài tập đơn giản và cho phép bạn hình dung phần mềm Glassware của mình trước khi viết một dòng mã. Chúng tôi luôn làm việc này cho Đồ thuỷ tinh mà chúng tôi tạo ra!

Hãy cùng tìm hiểu các thành phần chính trên giao diện người dùng của trải nghiệm nhúng Charades để bạn nắm được cách hoạt động của giao diện người dùng và mức độ hữu ích của quy trình này khi tạo Đồ thuỷ tinh của riêng bạn.

Màn hình chờ

Màn hình này là màn hình đầu tiên mà người dùng nhìn thấy khi họ bắt đầu tham gia vào Charades. Đây là một cấu trúc trò chơi chung mà người dùng đã quen thuộc và cho phép người dùng tự định hướng trước khi bắt đầu trải nghiệm trò chơi.

Khi người dùng nhấn vào bàn di chuột, một hệ thống trình đơn có hai mục sẽ xuất hiện, New Game (Trò chơi mới) và Guide (Hướng dẫn).

Chế độ hướng dẫn

Khi tạo trải nghiệm nhập vai, đôi khi cơ chế đầu vào khá mới lạ. Vì vậy, bạn nên cho người dùng biết cách tương tác với trải nghiệm đắm chìm, đặc biệt là với một trò chơi.

Bộ thẻ này đưa ra hướng dẫn cho trò chơi và hướng dẫn người dùng cách chơi cũng như những cử chỉ nên sử dụng để di chuyển trên giao diện người dùng. Người dùng có thể truy cập vào ứng dụng bằng cách nhấn vào mục trong trình đơn Hướng dẫn trên màn hình chờ.

Chế độ chơi trò chơi

Những màn hình này bao gồm luồng trò chơi chính. Người dùng có thể truy cập quy trình này bằng cách nhấn vào mục trong trình đơn New game (Trò chơi mới) trên màn hình chờ.

Bộ thẻ này hiển thị một từ ngẫu nhiên (tối đa 10 từ). Người dùng sẽ bỏ qua một từ bằng cách vuốt về phía trước và nhấn vào bàn di chuột khi họ mô tả chính xác từ đó.

Màn hình kết quả trò chơi

Màn hình này hiển thị kết quả của trò chơi. Màn hình "Trò chơi kết thúc" ban đầu xuất hiện và người dùng có thể vuốt về phía trước để xem kết quả trò chơi. Khi người dùng nhấn vào một thẻ kết quả bất kỳ, mục trong trình đơn New Game (Trò chơi mới) sẽ xuất hiện để cho phép người dùng bắt đầu một trò chơi khác.

Lệnh thoại

Bạn nên tìm ra lệnh thoại từ sớm trong quá trình thiết kế. Lệnh thoại cho phép người dùng khởi động Glassware từ trình đơn bằng giọng nói của Glass Home (thẻ đồng hồ) nếu cần. Đây cũng là một phần quan trọng trong cách bạn thiết kế Glassware.

Ví dụ: lệnh Post an update (Đăng bản cập nhật) hoạt động hiệu quả trong mô hình bắn và quên, trong đó người dùng ra lệnh và một số văn bản, còn Glassware sẽ xử lý lệnh đó mà không cần người dùng can thiệp thêm. Điều này giúp người dùng nhanh chóng quay lại công việc họ đang làm.

Mặt khác, đối với những hoạt động như Chơi trò chơi, bạn thường muốn đưa người dùng đến màn hình chờ để họ có thể được định hướng trước. Vì lệnh thoại này rất có thể sẽ khởi động chế độ đắm chìm, nên bạn có thể cho rằng người dùng sẽ yên tâm khi nhìn thấy thêm các màn hình và trình đơn để bắt đầu trò chơi. Việc đưa ngay người dùng vào trải nghiệm chơi trò chơi ngay sau lệnh thoại thường là một trải nghiệm không hay đối với trò chơi.

Charades sử dụng lệnh thoại Chơi trò chơi . Sau khi người dùng gọi lệnh thoại, màn hình chờ Charades sẽ xuất hiện, nhắc người dùng Nhấn để xem thêm tuỳ chọn (Trò chơi mới hoặc Hướng dẫn trong trường hợp này).

Bố cục thẻ

Cho dù đang tạo chế độ nhập trực tiếp hay thẻ trực tiếp, bạn nên sử dụng CardBuilder hoặc bố cục XML nếu có thể.

Thông thường, bạn vẫn cần tạo bố cục của riêng mình, vì vậy, hãy làm theo nguyên tắc về giao diện người dùng của chúng tôi để có Đồ thuỷ tinh trông đẹp nhất.

Đồng hồ bấm giờ tuân theo các nguyên tắc chung về bố cục, nhưng có bố cục giao diện người dùng tuỳ chỉnh sử dụng các thành phần Android tiêu chuẩn như khung hiển thị và bố cục.

Phát triển

Để phát triển trải nghiệm chìm, bạn sử dụng chính các công cụ mà bạn từng dùng để phát triển Android nhằm tạo phần lớn Đồ dùng thuỷ tinh, sau đó sử dụng các API trong tiện ích bổ sung GDK để truy cập vào chức năng dành riêng cho Glass, chẳng hạn như trình phát hiện cử chỉ và lệnh thoại.

Bạn sẽ thường xuyên sử dụng các thành phần Android phổ biến để tạo Đồ thuỷ tinh, nhưng hãy lưu ý rằng một số khái niệm đôi khi sẽ khác. Ví dụ: đừng đánh đồng một lượt nhúng chìm với một hoạt động trên Android. Nhập vai là những trải nghiệm được thiết kế cho Glass, được tạo bằng một hoặc nhiều hoạt động Android, cũng như nhiều thành phần khác của GDK và SDK Android.

Phần còn lại của phần Phát triển sẽ trình bày cấu trúc của trò chơi Charades và các thành phần chính của dự án mà bạn đã nhập trước đó. Bạn nên thiết lập Android Studio ngay để có thể theo dõi. Bản thân mã nguồn sẽ được nhận xét, vì vậy, phần này sẽ nói về mục đích cấp cao của từng tệp và các mẹo hữu ích mà bạn có thể áp dụng cho Glassware của mình.

Dưới đây là thông tin tổng quan ngắn gọn về các thành phần chính của Charades:

  • Khai báo điều kiện kích hoạt bằng giọng nói để kết nối với trình đơn giọng nói chính của Google Glass.
  • Hoạt động trên màn hình chờ cho phép người dùng bắt đầu trò chơi hoặc xem hướng dẫn. Hoạt động này khởi chạy hoạt động hướng dẫn hoặc hoạt động chơi trò chơi
  • Hoạt động hướng dẫn chỉ cho người dùng cách chơi trò chơi bằng cách thực hiện các thao tác chính trong trò chơi
  • Hoạt động chơi trò chơi cho phép người dùng chơi trò chơi thực sự
  • Hoạt động kết quả cho thấy điểm số của trò chơi và danh sách các từ đã đoán và chưa đoán được. Thư viện này cũng cho phép người dùng bắt đầu trò chơi mới bằng một mục trong trình đơn.

Lệnh thoại

Bạn tạo lệnh thoại bằng một tệp tài nguyên XML chỉ định lệnh bạn đang sử dụng, sau đó chỉ định tài nguyên XML trong tệp AndroidManifest.xml.

Các tệp sau được liên kết với lệnh thoại Charades:

  • res/xml/voice_trigger_play_a_game .xml – Khai báo lệnh thoại để sử dụng.
  • AndroidManifest.xml – Khai báo hoạt động sẽ bắt đầu khi lệnh thoại được nói.

Hoạt động trên màn hình chờ

Màn hình chờ là thứ đầu tiên người dùng nhìn thấy khi bắt đầu trò chơi Charades và định hướng cho họ trước khi bắt đầu trò chơi.

Các tệp sau được liên kết với hoạt động này:

  • res/layout/activity_start_game.xml – Khai báo bố cục cho màn hình chờ.
  • res/menu/start_game.xml – Khai báo hệ thống trình đơn cho màn hình chờ, chứa các mục trong trình đơn Hướng dẫnTrò chơi mới.
  • res/values/dimens.xml – Khai báo các kích thước và khoảng đệm thẻ tiêu chuẩn mà các hoạt động của dự án này sử dụng theo kiểu Glass.
  • src/com/google/android/glass/sample/charades/StartGameActivity.java – Lớp chính cho màn hình chờ.
  • res/drawable-hdpi/ic_game_50.png – Biểu tượng trình đơn cho Trò chơi mới.
  • res/drawable-hdpi/ic_help_50.png – Biểu tượng trình đơn cho Hướng dẫn.

Mô hình trò chơi

Bạn nên tách mô hình trò chơi (trạng thái trò chơi) khỏi giao diện người dùng. Lớp CharadesModel theo dõi điểm số của trò chơi và số lượng cụm từ mà người dùng đoán được trong chế độ chơi và các hướng dẫn, cũng như liệu người dùng đã xem hết các cụm từ đó ở chế độ hướng dẫn hay chưa.

Các tệp sau được liên kết với mô hình trò chơi:

  • src/com/google/android/glass/sample/charades/CharadesModel.java

Hoạt động cơ bản của trò chơi

Vì chế độ hướng dẫn và chế độ chơi của trò chơi có chung chức năng và giao diện người dùng, nên lớp cơ sở này định nghĩa chức năng chung cho cả hai. Các hoạt động cho hướng dẫn và chế độ chơi cũng mở rộng lớp này.

Các tệp sau được liên kết với hoạt động này:

  • res/layout/activity_game_play.xml – Xác định bố cục được chia sẻ theo chế độ chơi và chế độ hướng dẫn của Charades.
  • src/com/google/android/glass/sample/charades/BaseGameActivity.java – Xác định chức năng cơ bản của các chế độ chơi và chỉ dẫn trong Charades (dùng chung).

Hoạt động liên quan đến hướng dẫn

Hoạt động hướng dẫn hiển thị 3 thẻ giải thích cách chơi trò chơi. Tính năng này phát hiện xem người dùng có thực hiện hành động hiển thị trên thẻ hay không trước khi có thể tiếp tục.

Các tệp sau được liên kết với hoạt động này:

  • src/com/google/android/glass/sample/charades/TutorialActivity.java – Mở rộng BaseGameActivity và xác định văn bản hướng dẫn sẽ hiển thị cũng như cách xử lý các cử chỉ khi người dùng thực hiện các hướng dẫn cho trò chơi.

Hoạt động chơi trò chơi

Hoạt động chơi trò chơi xác định luồng chính của trò chơi. Mô hình này tìm ra những từ sẽ hiển thị, cách duy trì điểm số, có trình phát hiện cử chỉ để xử lý các cử chỉ và khởi chạy hoạt động kết quả khi trò chơi kết thúc.

Các tệp sau được liên kết với hoạt động này:

  • GamePlayActivity – Mở rộng BaseGameActivity và chứa logic luồng trò chơi chính.

Hoạt động kết quả

Hoạt động kết quả cho biết các từ đã đoán, những từ không đoán được và điểm số của trò chơi. Tệp này cũng chứa một mục trong trình đơn cho phép người dùng bắt đầu trò chơi mới.

Các tệp sau được liên kết với hoạt động này:

  • res/layout/game_results.xml – Xác định bố cục cho thẻ "Game over" (Kết thúc trò chơi)
  • res/layout/card_results_summary.xml – Xác định bố cục để hiện các từ đã đoán và chưa đoán trong một danh sách.
  • res/layout/table_row_result.xml – Xác định bố cục hàng riêng lẻ cho phần tóm tắt kết quả.
  • src/com/google/android/glass/sample/charades/GameResultsActivity.java – Xác định hoạt động thực tế hiển thị bố cục và trình đơn được xác định bằng các tài nguyên XML nêu trên.
  • res/raw/sad_trombone.ogg – Âm thanh sẽ phát khi người dùng chưa hiểu hết các từ.
  • res/raw/triumph.ogg – Âm thanh sẽ phát khi người dùng nghe hết 10 từ.
  • res/drawable-hdpi/ic_done_50.png – Biểu tượng dấu kiểm xuất hiện cùng với các từ được đoán chính xác.

Tài nguyên ảnh động

Những tài nguyên ảnh động này giúp cải thiện thêm tính năng cho Charades:

  • res/anim/slide_out_left.xml – Thao tác này sẽ tạo hiệu ứng cho một khung hiển thị thoát ra ngoài để trượt sang trái (chẳng hạn như khi một từ được truyền).
  • res/anim/slide_in_right.xml – Thao tác này sẽ tạo hiệu ứng cho một khung hiển thị đang vào trượt vào từ bên phải (ví dụ: khi một từ mới xuất hiện trong khung hiển thị).
  • res/anim/tug_right.xml – Thao tác này xác định ảnh động kéo nếu bạn vuốt trên một khung hiển thị không sử dụng thao tác vuốt. Điều này cho người dùng biết rằng thao tác vuốt không có tác dụng.

Tệp kê khai Android

Tệp AndroidManifest.xml mô tả các thành phần chính của Phần mềm thuỷ tinh để hệ thống biết cách chạy phần mềm đó. Tệp kê khai cho Charades khai báo những nội dung sau:

  • Biểu tượng và tên của Glassware. Glass sẽ hiển thị thông tin này trên trình đơn cảm ứng chính nếu có nhiều Glassware phản hồi cùng một lệnh thoại.
  • Tất cả hoạt động liên quan đến Charades. Đây là yêu cầu bắt buộc để hệ thống biết cách bắt đầu các hoạt động của Phần mềm thuỷ tinh.
  • Lệnh thoại và bộ lọc ý định sẽ bắt đầu một hoạt động cụ thể khi đọc lệnh thoại.
  • Mã phiên bản cho Glassware. Mã này phải được cập nhật (và thường là cả tên phiên bản) mỗi khi một phiên bản mới của APK này được tải lên MyGlass.