รูปแบบ Immersion

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

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

ก่อนเริ่มต้น

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

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

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

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

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

การออกแบบ

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

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

โฟลว์ UI

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

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

หน้าจอเริ่มต้น (Slash Screen)

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

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

โหมดคำแนะนำ

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

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

โหมดเกมเพลย์

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

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

หน้าจอผลการแข่งขัน

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

คำสั่งเสียง

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

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

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

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

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

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

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

Mirror 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 - ประกาศกิจกรรมที่จะเริ่มต้นเมื่อมีการพูดคำสั่งเสียง

กิจกรรมหน้าจอเริ่มต้น (Splash Screen)

หน้าจอแนะนำเป็นสิ่งแรกที่ผู้ใช้เห็นเมื่อเริ่มใช้ 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 - กำหนดฟังก์ชันการทำงานพื้นฐานของเกมเพลย์และโหมดคำสั่งของ Charades ที่แชร์กัน

กิจกรรมวิธีการ

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

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

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

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

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

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

• GamePlayActivity - ขยาย BaseGameActivity และมี ตรรกะ Gameflow หลัก

กิจกรรมผลการค้นหา

กิจกรรมผลลัพธ์จะแสดงคำที่เดา คำที่ไม่ได้คาดเดา และคะแนนสำหรับเกม นอกจากนี้ยังมีรายการเมนูที่ให้ผู้ใช้เริ่มเกมใหม่

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

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