Hướng dẫn này mô tả các thành phần bao gồm một trải nghiệm chơi đơ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 để thực hiện video nhúng, vì hầu hết trò chơi đều cần giao diện người dùng tuỳ chỉnh và các tuỳ chọn đ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 để xây dựng Glassware của riêng bạn.
Trước khi bắt đầu
Toàn bộ trò chơi Charades có trên Github. Nhập nó vào Android Studio trước khi bạn bắt đầu, vì hướng dẫn này đề cập đến nó rất nhiều.
- Trên màn hình Bắt đầu nhanh, hãy nhấp vào Check out from version Control > Git.
- Sao chép URL sao chép từ Charades.
- Dán URL sao chép vào URL kho lưu trữ Vcs rồi nhấp vào Nhân bản.
- Nhấp vào Yes (Có) trên màn hình tiếp theo.
- Nhấp vào OK trên màn hình tiếp theo.
- Tạo dự án và chạy dự án trên Glass đã kết nối của bạn bằng cách nhấp vào nút Play (Phát). Hãy nhớ kiểm tra
READMEcủ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 trong SDK Android để xây dựng hàng loạt trải nghiệm nhúng Lambda và sau đó là GDK để kết nối với trải nghiệm Glass. Sau đây là danh sách những chủ đề mà bạn sẽ tìm hiểu:
- Thiết kế luồng giao diện người dùng bằng các 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 Glassware
- 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 trình kích hoạt giọng nói trên trình đơn chính
- Sử dụng trình phát hiện cử chỉ GDK để 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ác phương pháp triển khai giao diện người dùng đơn giản trên Android giúp bổ sung thêm sự tinh tế và theo phong cách Glass
- Tìm hiểu về quy trình phân phối và nội dung chúng tôi tìm kiếm khi phát hành Glassware
Thiết kế
Trước khi bắt đầu phát triển, hãy dành chút thời gian và thiết kế Glassware của bạn. Cách này giúp bạn biết rõ luồng giao diện người dùng nào hoạt động hiệu quả nhất trên Glass, bạn sẽ dùng lệnh thoại nào và hình thức của thẻ.
Tất nhiên, việc thiết kế Glassware là một quy trình lặp lại và một số việc bạn thiết kế lúc này sẽ thay đổi, nhưng việc thực hiện phần lớn công việc này ngay từ đầu là rất quan trọng để có thể tạo ra trải nghiệm tuyệt vời.
Luồng giao diện người dùng
Thiết kế quy trình giao diện người dùng là một bài tập đơn giản và cho phép bạn trực quan hoá Glassware trước khi viết một dòng mã. Chúng tôi luôn làm điều đó cho Glassware mà chúng tôi tạo ra!
Hãy cùng tìm hiểu các thành phần trên giao diện người dùng chính của trò chơi Charades, bạn sẽ 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 Glassware 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 người dùng nhìn thấy khi bắt đầu sử dụng Charades. API này cho phép người dùng tự định hướng trước khi bắt đầu trải nghiệm trò chơi và là một cấu trúc trò chơi chung mà người dùng đã quen thuộc.
Khi người dùng nhấn vào bàn di chuột, hệ thống trình đơn với hai mục sẽ xuất hiện, New Game (Trò chơi mới) và Hướng dẫn.
Chế độ hướng dẫn
Khi nhúng video, cơ chế nhập liệu đôi khi rất mới mẻ, vì vậy, bạn nên cho người dùng biết cách thức tương tác với video đó, đặc biệt là với trò chơi.
Bộ thẻ này hiển thị 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ỉ dùng để điều hướng trên giao diện người dùng. Người dùng có thể chuyển đến đó 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 quy trình chơi chính. Người dùng có thể chuyển đến quy trình này bằng cách nhấn vào mục trong trình đơn 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 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 cho thấy kết quả của trò chơi. Màn hình "Trò chơi kết thúc" xuất hiện ban đầu 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 thẻ bất kỳ trong số các thẻ kết quả, mục trong trình đơn 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 khá sớm trong quá trình thiết kế. Các lệnh thoại cho phép người dùng khởi động Glassware từ trình đơn thoại Home Glass (Thẻ đồng hồ) (nếu cần) và là một phần quan trọng trong cách bạn thiết kế Glassware.
Ví dụ: lệnh Đăng nội dung cập nhật hoạt động tốt trong mô hình kích hoạt và quên, trong đó người dùng nói lệnh và một số văn bản và Glassware xử lý lệnh đó mà không cần thêm sự can thiệp của người dùng. Điều này cho phép người dùng quay lại những việc họ đang làm nhanh chóng.
Mặt khác, với một cái gì đó 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ể định hướng trước. Do lệnh thoại này rất có thể sẽ khởi động một trò chơi nhúng, nên bạn có thể kỳ vọng người dùng sẽ hài lòng với việc xem thêm màn hình và trình đơn để bắt đầu trò chơi. Ngay lập tức ném 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 tốt đố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ờ của Charades sẽ xuất hiện, nhắc người dùng Nhấn để có thêm tùy 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 nhúng video hay thẻ trực tiếp, bạn cũng nên sử dụng CardBuilder hoặc bố cục XML khi có thể.
Thông thường, bạn vẫn cần xây dựng bố cục của riêng mình, vì vậy, hãy tuân theo nguyên tắc về giao diện người dùng của chúng tôi để có Glassware đẹ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ư chế độ xem và bố cục.
Phát triển
Để ngâm chìm, bạn cần sử dụng các công cụ tương tự mà bạn dùng để phát triển Android nhằm xây dựng phần lớn Glassware, sau đó sử dụng các API trong tiện ích bổ sung GDK để truy cập 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 thường xuyên sử dụng các thành phần Android phổ biến để tạo Glassware, nhưng xin lưu ý rằng một số khái niệm đôi khi sẽ khác nhau. Ví dụ: không đánh đồng điều kiện sử dụng một hoạt động trên Android. Đắm chìm là trải nghiệm được thiết kế cho Glass được xây dựng với một hoặc nhiều hoạt động Android, cũng như nhiều thành phần khác của SDK GDK và Android.
Phần còn lại của mục Phát triển bàn về cách cấu trúc trò chơi Charades và các thành phần chính của dự án mà bạn đã nhập trước đó. Sẽ rất hữu ích nếu bạn có Android Studio ngay để có thể theo dõi. Mã nguồn chính sẽ được nhận xét, vì vậy, phần này trình bày 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 riêng 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 trình kích hoạt giọng nói để kết nối với trình đơn thoại chính của Glass.
- Hoạt động 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 sự thực hiện các hành động chính của 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 tế
- Hoạt động kết quả cho biết điểm số của trò chơi, cũng như danh sách các từ được đoán và đoán. Nó 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 các 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 và sau đó bằng cách 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 để bắt đầu khi lệnh thoại được đọc.
Hoạt động màn hình chờ
Màn hình chờ là nội dung đầu tiên mà người dùng nhìn thấy khi khởi động Charades và định hướng màn hình chờ 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ẫn và Trò chơi mới.res/values/dimens.xml– Khai báo kích thước thẻ và khoảng đệm tiêu chuẩn mà các hoạt động của dự án này sử dụng để tuân 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 mục Hướng dẫn.
Mẫu trò chơi
Lúc nào bạn cũng nên tách mô hình của trò chơi (trạng thái của 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ừ đã đoán theo trong chế độ chơi và các hướng dẫn khác nhau cũng như việc người dùng có xem các cụm từ đó trong chế độ hướng dẫn hay không.
Các tệp sau đây đượ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 trò chơi cơ sở
Vì các chế độ hướng dẫn và lối chơi của trò chơi có chức năng và giao diện người dùng rất giống nhau, nên lớp cơ sở này xác định chức năng chung cho cả hai. Các hoạt động dành cho hướng dẫn và chế độ chơi trò chơi sẽ 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 các chế độ chơi và hướng dẫn của Charades.src/com/google/android/glass/sample/charades/BaseGameActivity.java– Xác định chức năng cơ sở của lối chơi và các chế độ hướng dẫn của Charades (chia sẻ).
Hoạt động hướng dẫn
Hoạt động hướng dẫn cho thấy 3 thẻ giải thích cách chơi trò chơi. Thẻ này phát hiện xem người dùng có thực hiện thao tác hiển thị trên thẻ hay không trước khi họ 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ộngBaseGameActivityvà xác định văn bản hướng dẫn sẽ hiển thị, cũng như cách xử lý cử chỉ khi người dùng làm theo 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 quy trình chính của trò chơi. Tính năng này tìm ra những từ cần hiện, cách giữ điểm số, dùng trình phát hiện cử chỉ để xử lý cử chỉ và 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ộngBaseGameActivityvà chứa logic luồng trò chơi chính.
Hoạt động kết quả
Hoạt động kết quả cho thấy các từ đoán, các từ không được viết hoa và điểm số của trò chơi. Nó cũng chứa một mục trong trình đơn cho phép người dùng bắt đầu một 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ẻ "Trò chơi kết thúc"res/layout/card_results_summary.xml– Xác định bố cục để hiển thị các từ bị đoán và không được đoánres/layout/table_row_result.xml– Xác định bố cục của từng hàng cho bả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ế cho thấy bố cục và trình đơn được xác định bằng các tài nguyên XML nói trên.res/raw/sad_trombone.ogg– Âm thanh phát khi người dùng không hiểu được tất cả các từ.res/raw/triumph.ogg– Âm thanh phát khi người dùng đọc hết 10 từ.res/drawable-hdpi/ic_done_50.png– Biểu tượng dấu kiểm xuất hiện bằng các từ được đoán chính xác.
Tài nguyên ảnh động
Các tài nguyên ảnh động này sẽ giúp hoàn thiện hơn cho Charades:
res/anim/slide_out_left.xml– Ảnh động này tạo chế độ xem thoát để trượt ra bên trái (ví dụ: khi một từ được truyền).res/anim/slide_in_right.xml– Chế độ này sẽ tạo ảnh động cho chế độ xem nhập để trượt vào từ bên phải (ví dụ: khi một từ mới vào chế độ xem).res/anim/tug_right.xml– Hàm này xác định ảnh động kéo nếu bạn vuốt trên một thành phần 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 Glassware để hệ thống biết cách chạy ứng dụng này. Tệp kê khai cho Charades khai báo những thứ sau:
- Biểu tượng và tên của Glassware. Glass 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. Điều này là bắt buộc để hệ thống biết cách bắt đầu các hoạt động của Glassware.
- Lệnh thoại và bộ lọc ý định bắt đầu một hoạt động cụ thể khi lệnh thoại được đọc.
- Mã phiên bản cho Glassware. Mã này phải được cập nhật (và thường là 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.