Mocha Casa เบื้องหลังการสร้างเดสก์ท็อปเพ็ตบน Windows

การสร้างสัตว์เลี้ยงดิจิทัลบนหน้าจอเดสก์ท็อปให้ออกมาดูสมจริงไม่ใช่เรื่องง่าย แม้ว่าตัวสัตว์เลี้ยงจะดูเป็นธรรมชาติในวิดีโอทั่วไป แต่เมื่อนำมาเดินบนหน้าจอเดสก์ท็อปจริงๆ กลับพบความผิดปกติในการเคลื่อนไหว ทีมพัฒนาของ Mocha Casa ซึ่งเป็นแอปพลิเคชันเพื่อนคู่ใจบนระบบปฏิบัติการ Windows ที่สร้างขึ้นด้วย Electron และ JavaScript ได้เผชิญหน้ากับความท้าทายนี้ และนำบันทึกการพัฒนามาเผยแพร่เพื่อแบ่งปันบทเรียนสำคัญในการจัดการความสอดคล้องของการเคลื่อนไหว การเปลี่ยนผ่านของสถานท่าทาง และการให้ผู้ใช้งานสามารถควบคุมสัตว์เลี้ยงที่แชร์พื้นที่ทำงานร่วมกันได้

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

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

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ในส่วนของการเปลี่ยนผ่านระหว่างสถานะ เช่น การเปลี่ยนจากช่วงเดินไปสู่สถานะพักผ่อนหรือนอนหลับ ทีมงานพบปัญหาการเปลี่ยนแปลงของความสว่างที่สังเกตเห็นได้ชัดเจนแม้ตัวคลิปจะถอดรหัสออกมาถูกต้อง วิธีการตรวจสอบคือการเปรียบเทียบตัวสัตว์เลี้ยงในช่วงท้ายของการกระทำหนึ่งกับจุดเริ่มต้นของอีกการกระทำ โดยหลีกเลี่ยงการใช้ค่าเฉลี่ยความสว่างของทั้งเฟรมซึ่งจะไปวัดโดนภาพพื้นหลัง (Wallpaper) แทน นอกจากนี้ ตัวจัดการแอ็กชันร่วม (Shared Action Director) ยังมีหน้าที่คัดแยกสถานะการวนลูป (Looping idle และ sleep) ออกจากการกระทำที่มีจุดสิ้นสุด เพื่อป้องกันไม่ให้เหตุการณ์การสิ้นสุดไปขัดจังหวะแอนิเมชันตัวอื่นที่กำลังเล่นอยู่บนหน้าจอ