เกมเกี่ยวกับระยะใกล้ที่ได้รับแรงบันดาลใจจากเกมทุ่นระเบิด
ทีมที่พัฒนา squoosh.app กลับมาแล้ว ในครั้งนี้ เราสร้างเกมบนเว็บชื่อ PROXX (proxx.app) PROXX เป็นเกมเกี่ยวกับระยะทางที่ได้แรงบันดาลใจจากเกม Minesweeper อันโด่งดัง เกมตั้งอยู่ในอวกาศ และหน้าที่ของคุณคือค้นหาหลุมดำ โดยใช้งานได้บนอุปกรณ์ทุกประเภท ตั้งแต่เดสก์ท็อปไปจนถึงฟีเจอร์โฟน ผู้ใช้สามารถเล่นเกมโดยใช้เมาส์ แป้นพิมพ์ แผ่นบังคับทิศทาง หรือแม้แต่โปรแกรมอ่านหน้าจอ
เส้นฐานของเรา
ก่อนที่จะสร้างเกมนี้ เราตั้งเป้าหมายและงบประมาณดังต่อไปนี้สำหรับแอปพลิเคชัน
- ประสบการณ์การใช้งานหลักเหมือนกัน: อุปกรณ์ทุกเครื่องต้องทำงานในลักษณะเดียวกัน
- เข้าถึงได้: เมาส์, แป้นพิมพ์, หน้าจอสัมผัส, D-pad, โปรแกรมอ่านหน้าจอ
- มีประสิทธิภาพ:
- เพย์โหลดเริ่มต้นน้อยกว่า 25 KB
- TTI (เวลาในการโต้ตอบ) น้อยกว่า 5 วินาทีใน 3G ที่ช้า
- ภาพเคลื่อนไหวที่ราบรื่น 60 FPS
Web Worker
เกมนี้ประกอบด้วยเอนทิตีหลัก 4 รายการ ได้แก่ ตรรกะของเกมหลัก, บริการ UI, บริการของรัฐ และกราฟิกภาพเคลื่อนไหว เนื่องจากเราทราบตั้งแต่ต้นว่าจะต้องแสดงกราฟิกภาพเคลื่อนไหวจำนวนมากในเธรดหลัก เราจึงย้ายตรรกะเกมและบริการสถานะไปยังเวิร์กเกอร์เว็บเพื่อให้เธรดหลักทำงานได้อย่างเต็มที่
การแสดงผลก่อนเวลาบิลด์
UI ของเราสร้างขึ้นด้วย Preact เนื่องจากช่วยให้เราบรรลุเป้าหมายที่ท้าทายสำหรับเพย์โหลดเริ่มต้นที่มีขนาดน้อยกว่า 25 KB เราตัดสินใจที่จะแสดงผลภาพแรกแบบเป็นภาพนิ่งล่วงหน้าเพื่อให้ผู้ใช้ได้รับประสบการณ์การโหลดที่ดีตั้งแต่ต้น เราแสดงผลล่วงหน้าขณะสร้างโดยใช้ Puppeteer เพื่อเข้าถึงหน้ายอดนิยมและให้ DOM สร้างข้อมูลล่วงหน้า จากนั้นระบบจะแปลง DOM ที่ได้เป็นรูปแบบ HTML และบันทึกเป็น index.html
แคนวาสสำหรับภาพเคลื่อนไหว, DOM (มองไม่เห็น) สำหรับการช่วยเหลือพิเศษ
เราแสดงผลกราฟิกเกมใน Canvas โดยใช้ WebGL แคนวาส 1 ผืนมีหน้าที่แสดงภาพเคลื่อนไหวพื้นหลัง ส่วนอีก 1 ผืนแสดงตารางเกมที่ด้านบน นอกจากนี้ เรายังมีตาราง HTML ที่มีปุ่มเพื่อเหตุผลด้านการช่วยเหลือพิเศษ ซึ่งอยู่ด้านบนของผืนผ้าใบทั้ง 2 ผืนนี้ แต่ซ่อนไว้ (ความทึบแสง: 0) แม้ว่าสิ่งที่คุณเห็นจะเป็นการแสดงผลแคนวาสของสถานะเกม แต่ผู้เล่นจะโต้ตอบกับตาราง DOM ที่มองไม่เห็น ซึ่งทำให้เราสามารถแนบโปรแกรมรับฟังเหตุการณ์และอาศัยการจัดการโฟกัสของเบราว์เซอร์ได้
การเก็บองค์ประกอบ DOM ใน Canvas ช่วยให้เราสามารถใช้ประโยชน์จากฟีเจอร์การช่วยเหลือพิเศษในตัวเบราว์เซอร์ ตัวอย่างเช่น การตั้งค่า role="grid" ในตารางเกมจะช่วยให้โปรแกรมอ่านหน้าจออ่านแถวและคอลัมน์ของเซลล์ที่มีโฟกัสได้โดยไม่ต้องใช้การตั้งค่าดังกล่าว
การรวมสำหรับการจัดกลุ่มและการแยกโค้ด
ขนาดรวมของแอปลดลงเหลือ 100 KB เมื่อใช้การบีบอัดไฟล์ gzip โดย 20 KB นั้นสำหรับเพย์โหลดเริ่มต้น (index.html) เราใช้ Rollup.js สําหรับโปรเจ็กต์นี้ เราได้แชร์ทรัพยากร Dependency ระหว่างเทรดหลักกับ Web Worker ของเรา และ Rollup สามารถใส่ทรัพยากร Dependency ที่แชร์แบบแยกส่วนที่ต้องโหลดเพียงครั้งเดียวได้ เครื่องมือจัดกลุ่มอื่นๆ เช่น webpack จะคัดลอกข้อกําหนดร่วมกัน ซึ่งส่งผลให้มีการโหลดซ้ำ
การรองรับฟีเจอร์โฟน
ฟีเจอร์โฟนอัจฉริยะอย่างโทรศัพท์ KaiOS กำลังได้รับความนิยมอย่างรวดเร็ว อุปกรณ์เหล่านี้มีทรัพยากรจำกัดมาก แต่แนวทางของเราคือใช้ Web Worker เมื่อใดก็ตามที่เราสามารถทำให้ประสบการณ์การใช้งานตอบสนองระดับสูงบนโทรศัพท์เหล่านี้ได้เช่นกัน เนื่องจากฟีเจอร์โฟนมาพร้อมกับอินเทอร์เฟซอินพุตที่ต่างกัน (D-pad และแป้นตัวเลข ไม่มีหน้าจอสัมผัส) เรายังใช้อินเทอร์เฟซสำหรับแป้นด้วย
ขั้นตอนถัดไป
เรามีความสุขและทำงานอย่างหนักเพื่อสร้างเกมนี้ให้ทัน Google I/O 2019 ดังนั้นเราจะหยุดพักเพื่อพักผ่อนสักพัก แต่วางแผนที่จะกลับมาพร้อมเอกสารประกอบที่ละเอียดยิ่งขึ้นเกี่ยวกับแต่ละด้านของเกม
ในระหว่างนี้ โปรดดูการบรรยายของ Mariko ที่ I/O เกี่ยวกับโปรเจ็กต์นี้
คุณเรียกดูโค้ดได้ที่ที่เก็บข้อมูล GitHub ของ proxx
ขอแสดงความนับถือ Surma, Jake, Mariko