Roll It เป็นการทดลองของ Chrome ที่พลิกโฉมเกมการเดินไม้แบบคลาสสิก โดยใช้เพียงเบราว์เซอร์บนโทรศัพท์และคอมพิวเตอร์ของคุณ เบราว์เซอร์บนโทรศัพท์ช่วยให้คุณเล็งและทอยลูกบอลได้ด้วยการสะบัดข้อมือ ส่วนเบราว์เซอร์ในคอมพิวเตอร์จะแสดงผลกราฟิกของซอย Roll It แบบเรียลไทม์ด้วย WebGL และ Canvas อุปกรณ์ 2 เครื่องจะสื่อสารผ่าน Websocket ไม่มีแอป ไม่ต้องดาวน์โหลด ไม่มีโทเค็น แค่มีเบราว์เซอร์ที่ทันสมัยก็ใช้ได้แล้ว
จากคำแนะนำของ Google Creative Lab ทำให้ Legwork ได้พัฒนาประสบการณ์ของผู้ใช้ อินเทอร์เฟซ และสภาพแวดล้อมของเกม จากนั้นร่วมมือกับพาร์ทเนอร์ด้านการพัฒนาอย่าง Mode Set เพื่อสร้าง Roll It ตลอดโครงการมีความท้าทายหลายอย่างที่ท้าทาย บทความนี้จะอธิบายถึงเทคนิคบางอย่างที่เราใช้ กลเม็ดเคล็ดลับที่ค้นพบ และบทเรียนที่เราได้เรียนรู้ไปเมื่อนำม้วนกระดาษมาใช้
เวิร์กโฟลว์ 3 มิติ
ปัญหาหนึ่งในช่วงแรกคือการหาวิธีที่ดีที่สุดในการนำโมเดล 3 มิติจากซอฟต์แวร์ของเราไปใช้รูปแบบไฟล์เว็บที่พร้อมใช้งาน หลังจากสร้างชิ้นงานใน Cinema 4D แล้ว เราได้ปรับโมเดลให้เรียบง่ายขึ้นและแปลงเป็นตาข่ายแบบรูปหลายเหลี่ยมต่ำ ตาข่ายแต่ละแบบจะได้รับแท็กการเลือกรูปหลายเหลี่ยมเพื่อใช้แยกแยะความแตกต่างระหว่างส่วนต่างๆ ของวัตถุสำหรับการลงสีและการกำหนดพื้นผิว จากนั้นเราสามารถส่งออกเป็นไฟล์ Collada 1.5 (.dae) และนำเข้าไปยัง Blender ซึ่งเป็นโปรแกรม 3 มิติโอเพนซอร์ส เพื่อสร้างไฟล์ที่ใช้งานร่วมกันได้สำหรับ 3.js เมื่อยืนยันว่านำเข้าโมเดลอย่างถูกต้องแล้ว เราจะส่งออก Mesh เป็นไฟล์ JSON และมีการใช้การจัดแสงโดยใช้โค้ด รายละเอียดเพิ่มเติมเกี่ยวกับขั้นตอนที่เราทำมีดังนี้
กำลังเขียนโค้ด
Roll It ได้รับการพัฒนาด้วยไลบรารีโอเพนซอร์สและทำงานในเบราว์เซอร์สมัยใหม่ เทคโนโลยีอย่าง WebGL และ WebSocket ทำให้เว็บก้าวเข้าสู่ประสบการณ์การเล่นเกมและมัลติมีเดียที่มีคุณภาพระดับคอนโซล ความสะดวกและความสะดวกสบายที่นักพัฒนาซอฟต์แวร์สามารถสร้างประสบการณ์การใช้งานเหล่านี้ได้นั้นก้าวไปข้างหน้า เนื่องจากมีการนำเครื่องมือที่ทันสมัยมากขึ้นมาใช้งานในการพัฒนา HTML
สภาพแวดล้อมในการพัฒนาซอฟต์แวร์
โค้ดต้นฉบับของ Roll It ส่วนใหญ่เขียนด้วย CoffeeScript ซึ่งเป็นภาษาที่กระชับและชัดเจน ซึ่งเปลี่ยนรูปแบบเป็น JavaScript ที่มีรูปแบบที่ถูกต้องและมีความซับซ้อน CoffeeScript โดดเด่นเรื่องการพัฒนา OOP ด้วยโมเดลการสืบทอดที่ยอดเยี่ยมและการจัดการขอบเขตที่สะอาดยิ่งขึ้น CSS เขียนขึ้นด้วยเฟรมเวิร์ก SASS ซึ่งช่วยให้นักพัฒนาซอฟต์แวร์มีเครื่องมือที่ยอดเยี่ยมจำนวนมากในการปรับปรุงและจัดการสไตล์ชีตของโปรเจ็กต์ การเพิ่มระบบเหล่านี้ในกระบวนการสร้างอาจใช้เวลาเล็กน้อยในการตั้งค่า แต่ผลตอบแทนก็คุ้มค่ามาก โดยเฉพาะอย่างยิ่งสำหรับโปรเจ็กต์ขนาดใหญ่อย่าง Roll It เราตั้งค่าเซิร์ฟเวอร์ Ruby on Rails ให้คอมไพล์เนื้อหาโดยอัตโนมัติในระหว่างการพัฒนา เพื่อให้ขั้นตอนการคอมไพล์ทั้งหมดมีความโปร่งใส
นอกเหนือจากการสร้างสภาพแวดล้อมในการเขียนโค้ดที่มีประสิทธิภาพและสะดวกสบายแล้ว เรายังปรับชิ้นงานด้วยตนเองเพื่อลดคำขอเพื่อให้โหลดเว็บไซต์ได้เร็วขึ้นด้วย เราได้เรียกใช้รูปภาพทุกรูปผ่านโปรแกรมบีบอัด 2-3 โปรแกรม ได้แก่ ImageOptim และ ImageAlpha แต่ละโปรแกรมจะเพิ่มประสิทธิภาพรูปภาพในแบบของตัวเอง เช่น ไม่สูญเสียรายละเอียดและสูญเสียข้อมูล ตามลำดับ การใช้การตั้งค่าร่วมกันอย่างเหมาะสมจะช่วยลดขนาดไฟล์รูปภาพลงได้อย่างมาก วิธีนี้ไม่เพียงช่วยประหยัดแบนด์วิดท์เมื่อโหลดรูปภาพภายนอก แต่เมื่อเพิ่มประสิทธิภาพแล้ว รูปภาพจะแปลงเป็นสตริงเข้ารหัส base64 ที่เล็กลงมากสำหรับการฝังในหน้าใน HTML, CSS และ JavaScript ในส่วนของการเข้ารหัส base64 เรายังได้ฝังไฟล์แบบอักษร WOFF และ SVG แบบ Open Sans ลงใน CSS โดยตรงโดยใช้เทคนิคนี้ ซึ่งทำให้จำนวนคำขอทั้งหมดลดลงไปอีก
ฉาก 3 มิติที่เปิดใช้ฟิสิกส์
THREE.js เป็นไลบรารี JavaScript 3 มิติทั่วไปสำหรับเว็บ โดยเป็นการผสมผสานการเพิ่มประสิทธิภาพ WebGL 3 มิติในระดับต่ำและใช้ฮาร์ดแวร์เพื่อให้สร้างฉาก 3 มิติแบบอินเทอร์แอกทีฟที่มีแสงสว่างเพียงพอและสวยงามได้โดยไม่ต้องเขียนตัวปรับเฉดสีแบบกำหนดเองหรือแปลงเมตริกซ์ด้วยตนเอง Physijs คือ Wrapper ที่มีความเฉพาะเจาะจง THREE.js สำหรับไลบรารีฟิสิกส์ C++ ที่ได้รับความนิยม ซึ่งมีการแปลเป็นภาษา JavaScript เราใช้ประโยชน์จากคลังนี้เพื่อจำลองการกลิ้งบอล การกระโดด และกระเด้งไปยังจุดหมายปลายทางในแบบ 3 มิติ
ตั้งแต่ต้น เราตั้งใจไม่เพียงทำให้ประสบการณ์จริงในการกลิ้งบอลดูสมจริงเท่านั้น แต่ยังทำให้วัตถุในเกมดูสมจริงอีกด้วย ซึ่งจำเป็นต่อการทำซ้ำหลายครั้งในการปรับแรงโน้มถ่วงโดยรวมของฉาก Physijs, ความเร็วของลูกบอลขณะที่หมุนจากการโยนของผู้เล่น, ความชันของการกระโดดของเลน ตลอดจนคุณสมบัติในการเสียดสีและการทดแทน (ความเด้ง) ของวัสดุลูกบอลและเลน เมื่อนำแรงโน้มถ่วงและความเร็วที่เพิ่มมากขึ้นมาผสมผสานกัน ทำให้เกิดประสบการณ์การเล่นเกมที่สมจริงยิ่งขึ้น
ทำให้เรียบ
ชุดค่าผสมเบราว์เซอร์และการ์ดวิดีโอที่ทันสมัยส่วนใหญ่ควรใช้ประโยชน์จากการลดรอยหยักที่ใช้ฮาร์ดแวร์แบบเดิมในสภาพแวดล้อม WebGL แต่บางชุดอาจทำงานได้ไม่ดี ในกรณีที่การลบรอยหยักไม่ทำงานตั้งแต่ต้น ขอบที่แข็งและตัดกันในฉาก THREE.js จะมีภาพหยักและน่าเกลียด (อย่างน้อยสำหรับสายตาของเรา)
โชคดีที่วิธีแก้ไขได้: เพียงใช้ข้อมูลโค้ด เราสามารถตรวจสอบได้ว่าแพลตฟอร์มนั้นรองรับการลบรอยหยักโดยตรงหรือไม่ ถ้าได้ผล เราก็พร้อมแล้วที่จะไปต่อ หากไม่ได้ผล เรามีชุดโปรแกรมให้เฉดสีหลังการประมวลผลที่มี THREE.js ที่ช่วยเราได้ ซึ่งก็คือตัวกรองการลบรอยหยักของ FXAA ด้วยการวาดภาพฉากทุกเฟรมใหม่ทุกเฟรมด้วยตัวปรับเฉดสีนี้ โดยทั่วไปจะทำให้เส้นและขอบของเราดูเรียบเนียนขึ้น ดูการสาธิตด้านล่าง
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
การควบคุมเกมแบบตัวตรวจวัดความเร่ง
ความมหัศจรรย์ส่วนใหญ่ของ Roll It มาจากท่าทางการกลิ้งบอลที่ผู้เล่นทำบนโทรศัพท์ ปัจจุบัน โทรศัพท์มือถือเคยเข้าถึงตัวตรวจวัดความเร่งในเบราว์เซอร์มาสักระยะหนึ่งแล้ว แต่ในฐานะอุตสาหกรรม เราเพิ่งเริ่มศึกษาเกี่ยวกับการจดจำท่าทางสัมผัสแบบใช้การเคลื่อนไหวบนเว็บ เราค่อนข้างมีข้อจำกัดจากข้อมูลที่ตัวตรวจวัดความเร่งของโทรศัพท์มอบให้ แต่เมื่อมีความคิดสร้างสรรค์เพียงเล็กน้อย เราก็สามารถสร้างสรรค์ประสบการณ์ใหม่ๆ ที่ยอดเยี่ยมได้
การตรวจหาท่าทางสัมผัส "หมุน" หลักจะเริ่มต้นด้วยการติดตามการอัปเดตตัวตรวจวัดความเร่ง 10 รายการล่าสุดที่มาจากเหตุการณ์ deviceorientation ของหน้าต่าง เราจะจัดเก็บเดลต้าของมุมระหว่างเหตุการณ์ด้วยการลบค่าการเอียงก่อนหน้านี้ออกจากค่าการเอียงปัจจุบัน จากนั้นเมื่อสรุปเดลต้าของมุม 10 สุดท้ายอย่างต่อเนื่อง เราจะสามารถตรวจจับการหมุนต่อเนื่องขณะที่โทรศัพท์เคลื่อนที่ผ่านอวกาศได้ เมื่อโทรศัพท์ผ่านเกณฑ์การเปลี่ยนมุมที่กว้าง เราจะทริกเกอร์ให้ทอยเลย จากนั้นถ้าหาเดลต้าเอียงเดี่ยวที่ใหญ่ที่สุดในการกวาด เราสามารถประมาณความเร็วสำหรับลูกบอลได้ ใน Roll It ความเร็วนี้จะได้รับการทำให้เป็นมาตรฐานโดยใช้การประทับเวลาที่เราแนบไปกับการอัปเดตตัวตรวจวัดความเร่งแต่ละครั้ง ซึ่งจะช่วยให้การปรับความเร็วของตัวตรวจวัดความเร่งที่อัปเดตสตรีมไปยังเบราว์เซอร์ในอุปกรณ์ต่างๆ เป็นไปอย่างราบรื่น
การสื่อสารของ WebSockets
เมื่อผู้เล่นทอยลูกบอลด้วยโทรศัพท์ของตน ระบบจะส่งข้อความจากโทรศัพท์ไปยังแล็ปท็อปเพื่อบอกให้เปิดบอล ข้อความ "roll" นี้จะส่งผ่านออบเจ็กต์ข้อมูล JSON ผ่านการเชื่อมต่อ WebSocket ระหว่างเครื่องทั้งสอง ข้อมูล JSON มีขนาดเล็ก โดยส่วนใหญ่จะประกอบด้วยประเภทข้อความ ความเร็วในการส่ง และทิศทางการเล็ง
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
การสื่อสารทั้งหมดระหว่างแล็ปท็อปและโทรศัพท์เกิดขึ้นผ่านข้อความ JSON ขนาดเล็กแบบนี้ ทุกครั้งที่เกมอัปเดตสถานะของเกมบนเดสก์ท็อป หรือเมื่อผู้ใช้เอียงหรือแตะปุ่มบนโทรศัพท์ จะมีการส่งข้อความ WebSocket ระหว่างเครื่อง เพื่อให้การสื่อสารนี้มีความเรียบง่ายและจัดการได้ง่าย ข้อความ WebSockets จะถูกเผยแพร่โดยใช้จุดออกเพียงจุดเดียวจากเบราว์เซอร์ทั้งสอง ในทางกลับกัน จะมีจุดแรกเข้าเพียงจุดเดียวบนเบราว์เซอร์ฝั่งผู้รับ โดยที่ออบเจ็กต์ WebSocket จุดเดียวจะจัดการข้อความขาเข้าและขาออกทั้งหมดของทั้ง 2 ฝั่ง เมื่อได้รับข้อความ WebSocket ข้อมูล JSON จะเผยแพร่อีกครั้งภายในแอป JavaScript โดยใช้เมธอด trigger() ของ jQuery ในจุดนี้ ข้อมูลขาเข้าจะทํางานเหมือนกับเหตุการณ์ DOM ที่กําหนดเองอื่นๆ และออบเจ็กต์อื่นๆ ในแอปพลิเคชันสามารถรับและประมวลผลได้
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
เซิร์ฟเวอร์ Roll It เป็น WebSocket จะสร้างขึ้นได้ทันทีเมื่ออุปกรณ์สองเครื่องมีการซิงค์ด้วยรหัสเกม แบ็กเอนด์สำหรับ Roll It สร้างขึ้นบนแพลตฟอร์ม Google Compute Engine และ App Engine โดยใช้ Go
การเอียงหน้าจอเมนู
นอกเหนือจากข้อความ WebSocket ที่ขับเคลื่อนด้วยเหตุการณ์ที่ใช้ระหว่างการเล่นเกมแล้ว เมนูใน Roll It จะควบคุมด้วยการเอียงโทรศัพท์และแตะปุ่มเพื่อยืนยันการเลือก ซึ่งจำเป็นต้องใช้การรับส่งข้อมูลการเอียงที่สม่ำเสมอมากขึ้นจากโทรศัพท์ไปยังแล็ปท็อป เพื่อลดแบนด์วิดท์และหลีกเลี่ยงการส่งการอัปเดตที่ไม่จำเป็น ระบบจะส่งข้อความเหล่านี้เฉพาะเมื่อการเอียงของอุปกรณ์มีการเปลี่ยนแปลงไปมากกว่า 2-3 องศา การส่งสตรีมข้อมูลการเอียงจะไม่มีประโยชน์หากโทรศัพท์วางราบอยู่บนโต๊ะ และยังควบคุมอัตราการส่งข้อมูล - ข้อความ WebSockets จะส่งไม่เกิน 15 ข้อความต่อวินาทีใน Roll It แม้ว่าอุปกรณ์จะเอียงอยู่ก็ตาม
เมื่อรับค่าการเอียงในคอมพิวเตอร์แล้ว ระบบจะประมาณค่าดังกล่าวเมื่อเวลาผ่านไปโดยใช้ requestAnimationFrame เพื่อให้รู้สึกราบรื่น ผลลัพธ์สุดท้ายคือเมนูแบบหมุนและลูกบอลที่หมุนวนเพื่อช่วยระบุการเลือกของผู้ใช้ เมื่อโทรศัพท์ส่งข้อมูลการเอียง ระบบจะอัปเดตองค์ประกอบ DOM เหล่านี้แบบเรียลไทม์โดยการคำนวณการเปลี่ยนรูปแบบ CSS ภายในลูป requestAnimationFrame อีกครั้ง ภาชนะของเมนูจะแค่หมุน แต่ดูเหมือนว่าลูกบอลจะกลิ้งไปตามพื้น เพื่อให้เกิดผลลัพธ์นี้ เราใช้ตรีโกณมิติพื้นฐานเพื่อเชื่อมโยงพิกัด x ของลูกบอลกับการหมุนของลูกโลก สมการง่ายๆ คือ การหมุน = x / (เส้นผ่านศูนย์กลาง * π)
สรุป
Roll It เป็นสัญลักษณ์ของเวลา ระหว่างโครงการโอเพนซอร์สที่ขับเคลื่อนการพัฒนา พลังในการประมวลผลของอุปกรณ์ที่อยู่บนโต๊ะทำงานในกระเป๋าของเรา และสถานะของเว็บที่เป็นแพลตฟอร์ม การเชื่อมต่อกันบนเว็บแบบเปิดถือเป็นช่วงเวลาที่น่าตื่นเต้นและพลิกโฉมได้อย่างแท้จริง เมื่อไม่กี่ปีก่อน เทคโนโลยีดังกล่าวส่วนใหญ่มีอยู่เฉพาะในระบบที่เป็นกรรมสิทธิ์ และไม่สามารถนำไปใช้และเผยแพร่ได้อย่างอิสระ ในปัจจุบัน เราสามารถรับรู้ประสบการณ์ที่ซับซ้อนได้โดยอาศัยการทำงานที่น้อยลงและจินตนาการที่เพิ่มมากขึ้นเมื่อเราสร้างและแชร์ปริศนาใหม่ๆ ทุกวัน อย่ามัวรอช้า สร้างสิ่งดีๆ และแชร์กับคนทั้งโลก!
