รูปแบบการจุ่ม

คู่มือนี้อธิบายส่วนประกอบของประสบการณ์ที่สมจริง ในรูปแบบของเกม Charades เกมต่างๆ เป็น Use Case ที่เหมาะสําหรับการดื่มด่ํา เนื่องจากเกมส่วนใหญ่ต้องใช้ UI ที่กําหนดเองและการควบคุมอินพุต

ในขณะเดียวกัน คุณจะได้เรียนรู้เคล็ดลับด้านการออกแบบ การพัฒนา และการเผยแพร่ ที่สําคัญต่อการสร้าง Glassware ของคุณเอง

ข้อควรทราบก่อนที่จะเริ่มต้น

แหล่งข้อมูลแบบเต็มของเกม Charades พร้อมให้บริการใน GitHub นําเข้าโปรแกรมดังกล่าวไปยัง Android Studio ก่อนเริ่มดําเนินการ เนื่องจากคู่มือนี้เกี่ยวข้องกับ Android เป็นหลัก

1. จากหน้าจอการตั้งค่าด่วน ให้คลิกชําระเงินจากเวอร์ชันควบคุม > Git
2. คัดลอก URL การโคลนจากชาร์ด
3. วาง URL การโคลนใน URL ของที่เก็บ CS แล้วคลิกโคลน
4. คลิกใช่ในหน้าจอต่อไปนี้
5. คลิกตกลงในหน้าจอต่อไปนี้
6. สร้างโปรเจ็กต์และเรียกใช้ Glass ที่เชื่อมต่อโดยคลิกปุ่มเล่น อย่าลืมตรวจสอบ README ของตัวอย่างเพื่อดูรายละเอียดการเรียกใช้

สิ่งที่คุณจะได้เรียนรู้

ศึกษาวิธีใช้คอมโพเนนต์จาก Android SDK เพื่อสร้างความต่อเนื่องของสไตล์ Charades และทดลองใช้ GDK ใน Glass นี่คือรายการหัวข้อสําหรับเรียนรู้

• การออกแบบขั้นตอนของ UI ด้วยทรัพยากรการออกแบบที่เรามีให้
• การออกแบบทริกเกอร์ด้วยเสียงเพื่อเริ่ม Glassware
• การใช้กิจกรรม Android เพื่อกําหนดโครงสร้าง UI ของเกม
• การสร้างรายการในเมนู Android ที่ให้ผู้ใช้เลือกตัวเลือกเกม
• ผสานรวมเข้ากับประสบการณ์การใช้งาน Glass ด้วยทริกเกอร์ด้วยเสียงในเมนูหลัก
• การใช้เครื่องมือตรวจจับท่าทางสัมผัสของ GDK ซึ่งตรวจหาอินพุตของผู้ใช้และดําเนินการที่กําหนดเอง
• เรียนรู้การใช้งาน UI ของ Android แบบง่าย ที่ช่วยเพิ่มความพิเศษและทําตามสไตล์ Glass
• การเรียนรู้เกี่ยวกับกระบวนการจัดจําหน่ายและสิ่งที่เรามองหาเมื่อเปิดตัว Glassware

การออกแบบ

ก่อนที่จะเริ่มพัฒนา โปรดสละเวลา ออกแบบ Glassware ของคุณ การใช้วิธีนี้จะช่วยให้คุณเห็นภาพว่า UI ใดทํางานได้ดีที่สุดใน Glass จะใช้คําสั่งเสียงใดและจะทําอย่างไร

แน่นอนว่าการออกแบบ Glassware เป็นกระบวนการที่ต้องทําซ้ําๆ และสิ่งต่างๆ ที่คุณออกแบบตอนนี้จะเปลี่ยนไป แต่การทําหน้าที่ที่ดีในตอนเริ่มต้นนั้นสําคัญต่อการสร้างประสบการณ์ที่ดี

โฟลว์ UI

การออกแบบ UI เป็นกระบวนการง่ายๆ และช่วยให้คุณเห็นภาพ Glassware ก่อนที่จะเขียนบรรทัดโค้ด เราดําเนินการตลอดเวลาสําหรับ Glassware ที่เราสร้างขึ้นมา

มาดูองค์ประกอบหลักของ UI ที่สมจริงของ Charades กันสักนิด คุณจะได้เห็นภาพวิธีการทํางานของ UI และประโยชน์ของกระบวนการนี้เมื่อสร้าง Glassware ของคุณเอง

หน้าจอแนะนํา

หน้าจอนี้เป็นหน้าจอแรกที่ผู้ใช้จะเห็นเมื่อเริ่มใช้ "Charades" ซึ่งช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ได้โดยไม่ต้องผ่านประสบการณ์การเล่นเกมและเป็นโครงสร้างเกมทั่วไปที่ผู้ใช้คุ้นเคย

เมื่อผู้ใช้แตะทัชแพด ระบบเมนูที่มี 2 รายการจะปรากฏขึ้น ได้แก่ เกมใหม่และวิธีการ

โหมดวิธีการ

ในบางครั้งการดื่มด่ํากับกลไกมักจะเป็นพฤติกรรมที่แปลกใหม่ ดังนั้น วิธีนี้จึงช่วยให้ผู้ใช้ทราบว่าควรโต้ตอบกับการแช่น้ําอย่างไร โดยเฉพาะอย่างยิ่งกับเกม

การ์ดชุดนี้แสดงคําแนะนําเกี่ยวกับเกมและแนะนําวิธีการเล่นและท่าทางสัมผัสสําหรับไปยังส่วนต่างๆ ของผู้ใช้ผ่าน UI ผู้ใช้จะเข้าถึงเนื้อหาได้โดยแตะที่รายการเมนูวิธีการจากหน้าจอแนะนํา

โหมดการเล่นเกม

หน้าจอเหล่านี้ประกอบด้วยขั้นตอนการเล่นเกมหลัก ผู้ใช้สามารถไปยังขั้นตอนนี้ได้โดยแตะที่รายการเมนูเกมใหม่จากหน้าจอแนะนํา

การ์ดชุดนี้จะแสดงคําแบบสุ่ม (สูงสุด 10 คํา) ผู้ใช้ข้ามคําด้วยการปัดไปข้างหน้าและแตะทัชแพดเมื่ออธิบายคําอย่างถูกต้อง

หน้าจอผลการค้นหาเกม

หน้าจอนี้แสดงผลลัพธ์ของเกม หน้าจอ "เกมจบ" จะปรากฏขึ้นครั้งแรกและผู้ใช้สามารถปัดไปข้างหน้าเพื่อดูผลการแข่งขัน เมื่อผู้ใช้แตะการ์ดผลการค้นหา รายการในเมนูเกมใหม่จะปรากฏขึ้นเพื่อให้ผู้ใช้เริ่มเกมอื่น

คำสั่งเสียง

คุณควรคิดคําสั่งเสียงออกตั้งแต่เนิ่นๆ ในกระบวนการออกแบบ คําสั่งเสียงช่วยให้ผู้ใช้เริ่มใช้ Glassware จากเมนู Glass (การ์ดนาฬิกา) ได้หากจําเป็น และเป็นส่วนสําคัญในการออกแบบ Glassware

ตัวอย่างเช่น คําสั่ง Post a update ทํางานได้ดีในรูปแบบที่เริ่มทํางานและลืมปัญหา ซึ่งผู้ใช้จะพูดคําสั่งและข้อความบางอย่าง จากนั้น Glassware จะประมวลผลได้โดยไม่ต้องดําเนินการใดๆ เพิ่มเติมของผู้ใช้ ซึ่งจะช่วยให้ผู้ใช้กลับไปยัง สิ่งที่กําลังทําได้อย่างรวดเร็ว

ในทางกลับกัน หากเป็นเนื้อหาอย่างเช่นเล่นเกม โดยทั่วไปคุณจะต้องนําผู้ใช้ไปยังหน้าจอแนะนําเพื่อให้ผู้ใช้มองเห็นทิศทางก่อน เนื่องจากคําสั่งเสียงนี้น่าจะเปิดตัวประสบการณ์การใช้งานแบบเกมหนึ่ง คุณคาดหวังได้ว่าผู้ใช้จะเห็นหน้าจอและเมนูเพิ่มเติมเพื่อเริ่มเกม การพาผู้ใช้เข้าสู่ประสบการณ์การเล่นเกมทันทีหลังใช้คําสั่งเสียงมักเป็นประสบการณ์ที่ไม่ดีสําหรับเกม

Charades ใช้คําสั่งเสียงเล่นเกม หลังจากผู้ใช้เรียกใช้คําสั่งเสียง หน้าจอแนะนําของ Charades จะปรากฏขึ้นเพื่อแจ้งให้ผู้ใช้แตะเพื่อดูตัวเลือกเพิ่มเติม (เกมใหม่หรือวิธีการในกรณีนี้)

หมายเหตุ: Glass จะเพิ่มคําสั่งสัมผัสลงในเมนูหลักโดยอัตโนมัติหากผู้ใช้เลือกที่จะแตะแทนการพูดคําสั่งเสียง

เลย์เอาต์การ์ด

เคล็ดลับการออกแบบ

มิเรอร์ API สําหรับ Playground เป็นเครื่องมือที่มีประโยชน์สําหรับการเลียนแบบการ์ด GDK คุณสามารถใช้เทมเพลตใดเทมเพลตหนึ่งเป็นจุดเริ่มต้น แก้ไข HTML ของการ์ด และดูการเปลี่ยนแปลงแบบเรียลไทม์ได้

จากนั้นจึงใช้การจําลองเป็นข้อมูลอ้างอิงในการสร้างเลย์เอาต์ XML ที่กําหนดเองใน Android

ไม่ว่าคุณจะกําลังสร้างฟีเจอร์ใหม่หรือการ์ดแบบสด คุณควรใช้ CardBuilder หรือเลย์เอาต์ XML เมื่อเป็นไปได้

บ่อยครั้งที่คุณยังคงต้องสร้างเลย์เอาต์ของคุณเองโดยเฉพาะ โปรดทําตามหลักเกณฑ์สําหรับ UI เพื่อให้มี Glassware ที่ดูดีที่สุด

นาฬิกาจับเวลาเป็นไปตามหลักเกณฑ์ทั่วไปเกี่ยวกับเลย์เอาต์ แต่ใช้เลย์เอาต์ UI ที่กําหนดเองโดยใช้คอมโพเนนต์ Android มาตรฐาน เช่น มุมมองและเลย์เอาต์

พัฒนา

เคล็ดลับในการพัฒนา:

ข้อดีของการออกแบบ UI คือสามารถดูโครงสร้างของการพัฒนาจริงได้ ขั้นตอนสําคัญแต่ละขั้นที่เรากระทําก่อนนําไปต่อยอดเป็นกิจกรรมเดียว

ในการพัฒนาการแช่น้ํา ให้ใช้เครื่องมือเดียวกับที่ใช้ในการพัฒนาแอป Android ในการสร้าง Glassware จํานวนมาก จากนั้นใช้ API ในส่วนเสริม GDK เพื่อเข้าถึงฟังก์ชันเฉพาะ Glass เช่น ตัวตรวจจับท่าทางสัมผัสและคําสั่งเสียง

คุณมักจะใช้คอมโพเนนต์ทั่วไปของ Android เพื่อสร้าง Glassware แต่โปรดทราบว่าบางแนวคิดอาจแตกต่างกันไป เช่น อย่าให้กิจกรรม Android สมจริง การใช้งานแบบสมจริงเป็นประสบการณ์ที่ออกแบบมาเพื่อ Glass ที่สร้างขึ้นด้วยกิจกรรม Android อย่างน้อย 1 ข้อ รวมถึงคอมโพเนนต์อื่นๆ ของ GDK และ Android SDK

เนื้อหาที่เหลือของส่วน "พัฒนา" จะอธิบายโครงสร้างของเกม Charades และองค์ประกอบหลักของโปรเจ็กต์ที่คุณนําเข้าก่อนหน้านี้ การมี Android Studio เปิดอยู่ตอนนี้จะช่วยให้คุณติดตามไปพร้อมๆ กันได้ ซอร์สโค้ดนี้มีการแสดงความคิดเห็นไว้ ดังนั้นส่วนนี้จึงมีจุดประสงค์หลักสําหรับแต่ละไฟล์และเคล็ดลับที่เป็นประโยชน์ซึ่งคุณนําไปใช้กับ Glassware ของตนเองได้

ต่อไปนี้เป็นภาพรวมคร่าวๆ เกี่ยวกับองค์ประกอบหลักของ Charades

• การประกาศด้วยเสียงเพื่อเรียกใช้งานเมนูเสียงหลักของ Glass
• ฉาบกิจกรรมหน้าจอให้ผู้ใช้เริ่มต้นเกมหรือดูวิธีการ กิจกรรมนี้จะเปิดกิจกรรมวิธีการหรือกิจกรรมการเล่นเกม
• กิจกรรมบทแนะนําจะแสดงวิธีการเล่นเกมแก่ผู้ใช้โดยการดําเนินการ หลักๆ ของเกม
• กิจกรรมการเล่นเกมช่วยให้ผู้ใช้เล่นเกมจริงได้
• กิจกรรมผลการค้นหาจะแสดงคะแนนของเกมและรายชื่อคําที่เดาได้และไม่มีการคาดการณ์ และยังช่วยให้ผู้ใช้เริ่มเกมใหม่ได้ด้วยรายการในเมนู

คำสั่งเสียง

เคล็ดลับในการพัฒนา:

ดูรายการคําสั่งที่มีอยู่

คุณประกาศคําสั่งเสียงที่ต้องการได้โดยใช้โหมดการพัฒนาเสียงเพื่อวัตถุประสงค์ในการพัฒนา

คุณสามารถสร้างคําสั่งเสียงด้วยไฟล์ทรัพยากร XML ที่ระบุคําสั่งที่คุณใช้ จากนั้นระบุทรัพยากร XML ในไฟล์ AndroidManifest.xml

ไฟล์ต่อไปนี้เชื่อมโยงกับคําสั่งเสียง Charades

• res/xml/voice_trigger_play_a_game .xml - ประกาศคําสั่งเสียงที่จะใช้
• AndroidManifest.xml - ประกาศกิจกรรมเพื่อเริ่มเมื่อคําสั่งเสียง

กิจกรรมหน้าจอแนะนํา

หน้าจอแนะนําคือสิ่งแรกที่ผู้ใช้เห็นเมื่อเริ่มต้น Charades และนําทางผู้ใช้ก่อนที่จะเริ่มเกม

ไฟล์ต่อไปนี้เชื่อมโยงกับกิจกรรมนี้

• res/layout/activity_start_game.xml - ประกาศเลย์เอาต์สําหรับหน้าจอแนะนํา
• res/menu/start_game.xml - ประกาศระบบเมนูสําหรับหน้าจอแนะนํา ซึ่งมีรายการวิธีการและเมนูเกมใหม่
• res/values/dimens.xml - ประกาศขนาดการ์ดมาตรฐานและระยะห่างจากขอบที่กิจกรรมของกิจกรรมนี้ใช้เพื่อให้เป็นไปตามสไตล์ Glass
• src/com/google/android/glass/sample/charades/StartGameActivity.java - คลาสหลักสําหรับหน้าจอแนะนํา
• res/drawable-hdpi/ic_game_50.png - ไอคอนเมนูสําหรับเกมใหม่
• res/drawable-hdpi/ic_help_50.png - ไอคอนเมนูสําหรับวิธีการ

โมเดลเกม

การแยกโมเดลของเกม (สถานะของเกม) ออกจาก UI เป็นความคิดที่ดีเสมอ คลาส CharadesModel ติดตามคะแนนของเกมและวลีที่มีการคาดเดาในโหมดเกมและวิธีการต่างๆ รวมถึงดูว่าผู้ใช้เล่นผ่านด่านต่างๆ หรือไม่ในโหมดวิธีการ

ไฟล์ต่อไปนี้เชื่อมโยงกับโมเดลเกม

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

กิจกรรมเกมพื้นฐาน

เนื่องจากโหมดบทแนะนําและเกมเพลย์ของเกมมีฟังก์ชันการทํางานและ UI ที่คล้ายกันมาก คลาสพื้นฐานนี้จึงกําหนดฟังก์ชันการทํางานทั่วไปสําหรับทั้ง 2 โหมด กิจกรรมสําหรับวิธีการและโหมดเกมเพลย์จะขยายเวลาคลาสนี้

ไฟล์ต่อไปนี้เชื่อมโยงกับกิจกรรมนี้

• res/layout/activity_game_play.xml - กําหนดเลย์เอาต์ที่แชร์โดยเกมเพลย์และโหมดวิธีการของ Charades
• src/com/google/android/glass/sample/charades/BaseGameActivity.java - กําหนดฟังก์ชันการทํางานพื้นฐานของเกมเพลย์และโหมดชาร์ดซึ่งแชร์ร่วมกัน

กิจกรรมการสอน

กิจกรรมวิธีการจะแสดงการ์ด 3 ใบที่อธิบายวิธีการเล่นเกม โดยจะตรวจสอบว่าผู้ใช้ดําเนินการต่างๆ ที่แสดงในการ์ดหรือไม่ก่อนที่จะดําเนินการต่อ

ไฟล์ต่อไปนี้เชื่อมโยงกับกิจกรรมนี้

• src/com/google/android/glass/sample/charades/TutorialActivity.java - ขยาย BaseGameActivity และเป็นตัวกําหนดข้อความคําสั่งที่จะแสดงและวิธีจัดการท่าทางสัมผัสขณะที่ผู้ใช้ทําตามวิธีการของเกม

กิจกรรมการเล่นเกม

กิจกรรมการเล่นเกมกําหนดขั้นตอนหลักของเกม โดยจะค้นหาว่าคําใดจะแสดง วิธีรักษาคะแนน มีตัวตรวจจับท่าทางสัมผัสเพื่อจัดการท่าทางสัมผัส และเปิดตัวกิจกรรมเมื่อเกมจบ

ไฟล์ต่อไปนี้เชื่อมโยงกับกิจกรรมนี้

• GamePlayActivity - ขยาย BaseGameActivity และมีตรรกะโฟลว์เกมหลัก

กิจกรรมผลลัพธ์

กิจกรรมผลการค้นหาจะแสดงคําที่คาดเดาได้ คําที่ไม่คาดคะเน และคะแนนของเกม นอกจากนี้ยังมีรายการเมนูที่ช่วยให้ผู้ใช้เริ่มเกมใหม่ได้

ไฟล์ต่อไปนี้เชื่อมโยงกับกิจกรรมนี้

• res/layout/game_results.xml - กําหนดเลย์เอาต์สําหรับการ์ด "จบเกม"
• res/layout/card_results_summary.xml - กําหนดเลย์เอาต์สําหรับการแสดงข้อความที่คาดเดาได้และไม่มีการคาดการณ์ในรายการ
• res/layout/table_row_result.xml - กําหนดเลย์เอาต์แถวแต่ละแถวสําหรับสรุปผลลัพธ์
• src/com/google/android/glass/sample/charades/GameResultsActivity.java - กําหนดกิจกรรมจริงที่แสดงเลย์เอาต์และเมนูที่กําหนดโดยทรัพยากร XML ที่กล่าวถึงข้างต้น
• res/raw/sad_trombone.ogg - เสียงที่จะเล่นเมื่อผู้ใช้ไม่เข้าใจคําทั้งหมด
• res/raw/triumph.ogg - เสียงที่จะแสดงเมื่อผู้ใช้อ่านทั้ง 10 คํา
• res/drawable-hdpi/ic_done_50.png - ไอคอนเครื่องหมายถูกที่ปรากฏตามคําที่เดาได้อย่างถูกต้อง

แหล่งข้อมูลเกี่ยวกับภาพเคลื่อนไหว

เคล็ดลับในการพัฒนา:

คู่มือนักพัฒนาวิดเจ็ต UI จะแสดงแนวทางปฏิบัติ UI มาตรฐานเพิ่มเติม

แหล่งข้อมูลภาพเคลื่อนไหวเหล่านี้จะช่วยขัดเงาให้ Charades เป็นพิเศษ

• res/anim/slide_out_left.xml - การดําเนินการนี้จะทําให้ภาพเคลื่อนไหวที่ออกจากหน้าเว็บถูกเลื่อนไปทางซ้าย (เช่น เมื่อมีการส่งคํา)
• res/anim/slide_in_right.xml - การดําเนินการนี้จะทําให้มุมมองเข้าเลื่อนออกจากด้านขวา (เช่น เมื่อมีคําใหม่เข้าสู่มุมมอง)
• res/anim/tug_right.xml - การดําเนินการนี้จะกําหนดภาพเคลื่อนไหวแบบพุลหากคุณปัดบนมุมมองที่ไม่เลื่อน ซึ่งจะช่วยให้ผู้ใช้ทราบว่าการเลื่อนไม่มีผล

ไฟล์ Manifest ของ Android

ไฟล์ AndroidManifest.xml อธิบายส่วนประกอบหลักของ Glassware ที่จะทําให้ระบบรู้ว่าจะเรียกใช้ได้อย่างไร ไฟล์ Manifest สําหรับ Charades ประกาศสิ่งเหล่านี้

• ไอคอนและชื่อของ Glassware Glass แสดงข้อมูลนี้บนเมนูหน้าจอสัมผัสหลัก หากมี Glassware มากกว่า 1 รายการที่ตอบสนองต่อคําสั่งเสียงเดียวกัน
• กิจกรรมทั้งหมดที่เชื่อมโยงกับ Charades ระบบนี้จําเป็นสําหรับการเรียนรู้วิธีเริ่มต้นกิจกรรมของ Glassware
• คําสั่งเสียงและตัวกรอง Intent ที่เริ่มต้นกิจกรรมที่เจาะจงเมื่อพูดคําสั่งเสียง
• รหัสเวอร์ชันสําหรับ Glassware ต้องอัปเดตโค้ดนี้ (โดยทั่วไปจะเป็นชื่อเวอร์ชันด้วย) ทุกครั้งที่อัปโหลด APK เวอร์ชันใหม่ไปยัง MyGlass