Roll It là một Thử nghiệm của Chrome tái hiện một trò chơi lót ván cổ điển chỉ bằng trình duyệt trên điện thoại và máy tính. Trình duyệt trên điện thoại cho phép bạn nhắm và xoay quả bóng bằng cách xoay cổ tay trong khi trình duyệt trên máy tính sẽ hiển thị đồ hoạ theo thời gian thực của con hẻm Roll It bằng WebGL và Canvas. Hai thiết bị giao tiếp qua Websockets. Không có ứng dụng nào. Không cần tải xuống. Không có mã thông báo nào. Tất cả những gì bạn cần là một trình duyệt hiện đại.
Theo định hướng của Google Creative Lab, Legwork đã phát triển trải nghiệm người dùng, giao diện và môi trường trò chơi, sau đó hợp tác với đối tác phát triển Mode Set (Nhóm chế độ) để tạo ứng dụng Roll It. Trong suốt thời gian thực hiện dự án, có một số thách thức đặc biệt. Bài viết này trình bày một số kỹ thuật chúng tôi đã sử dụng, thủ thuật chúng tôi khám phá ra và bài học rút ra được để áp dụng Roll It.
Quy trình làm việc 3D
Một trong những khó khăn ban đầu là tìm ra cách tốt nhất để đưa các mô hình 3D từ phần mềm của chúng tôi sang định dạng tệp phù hợp với web. Sau khi tạo thành phần trong Rạp phim 4D, các mô hình được đơn giản hoá và chuyển đổi thành lưới đa giác thấp. Mỗi lưới được cấp một số thẻ lựa chọn đa giác để phân biệt các phần của đối tượng nhằm tô màu và tạo hoạ tiết. Sau đó, chúng tôi có thể xuất dưới dạng tệp Collada 1.5 (.dae) và nhập vào Blender, một chương trình 3D nguồn mở, để tạo các tệp tương thích cho Three.js. Sau khi đảm bảo các mô hình được nhập chính xác, chúng ta xuất lưới ở dạng tệp JSON và ánh sáng được áp dụng bằng mã. Dưới đây là thông tin chi tiết hơn về các bước chúng tôi đã thực hiện:
Viết mã
Roll It được phát triển với các thư viện nguồn mở và chạy nguyên gốc trong các trình duyệt hiện đại. Với các công nghệ như WebGL và WebSockets, web đang ngày càng hoàn thiện trải nghiệm chơi trò chơi và đa phương tiện chất lượng bảng điều khiển. Sự dễ dàng và thoải mái trong việc các nhà phát triển có thể xây dựng những trải nghiệm này đã có những bước tiến nhảy vọt khi ngày càng có nhiều công cụ hiện đại dành cho việc phát triển HTML.
Môi trường phát triển
Hầu hết mã gốc của Roll It được viết bằng CoffeeScript – một ngôn ngữ rõ ràng và súc tích, có khả năng biên dịch thành JavaScript định dạng hợp lý và được tìm lỗi mã nguồn. CoffeeScript nổi bật trong việc phát triển OOP nhờ mô hình kế thừa tuyệt vời và khả năng xử lý phạm vi rõ ràng hơn. CSS được viết bằng khung SASS, cung cấp cho nhà phát triển một số công cụ hữu ích để nâng cao và quản lý các biểu định kiểu của dự án. Việc thêm các hệ thống này vào quy trình xây dựng cần chút thời gian để thiết lập, nhưng kết quả xứng đáng, đặc biệt là đối với một dự án lớn hơn như Roll It. Chúng tôi đã thiết lập một máy chủ Ruby on Rails để tự động biên dịch các thành phần trong quá trình phát triển. Vì vậy, tất cả các bước biên dịch này đều trở nên minh bạch.
Ngoài việc tạo ra một môi trường lập trình đơn giản và thoải mái, chúng tôi còn tối ưu hoá các thành phần của mẫu quảng cáo theo cách thủ công để giảm thiểu yêu cầu và tải trang web nhanh hơn. Chúng tôi đã chạy mọi hình ảnh thông qua một vài chương trình nén – ImageOptim và ImageAlpha. Mỗi chương trình tối ưu hoá hình ảnh theo cách riêng, tương ứng với định dạng không tổn hao và có tổn hao. Với sự kết hợp phù hợp của các chế độ cài đặt, họ có thể giảm đáng kể kích thước tệp của hình ảnh. Việc này không chỉ tiết kiệm băng thông khi tải hình ảnh bên ngoài, mà sau khi được tối ưu hoá, hình ảnh của bạn sẽ chuyển thành các chuỗi mã hoá base64 nhỏ hơn nhiều để nhúng nội tuyến trong HTML, CSS và JavaScript. Mặc dù đối với chủ đề mã hoá base64, chúng tôi cũng trực tiếp nhúng các tệp phông chữ Open Sans WOFF và SVG vào CSS bằng kỹ thuật này, giúp tăng tổng số yêu cầu ít hơn nữa.
Cảnh 3D có hỗ trợ vật lý
THREE.js là thư viện JavaScript 3D phổ biến dành cho web. Nó kết hợp tối ưu hoá 3D dựa trên phần cứng và toán học 3D cấp thấp, cho phép những người bình thường dễ dàng tạo cảnh 3D tương tác sáng và đẹp mà không cần phải viết chương trình đổ bóng tuỳ chỉnh hoặc thực hiện chuyển đổi ma trận thủ công. Physijs là một trình bao bọc dành riêng cho THREE.js cho một thư viện vật lý C++ phổ biến đã được dịch sang JavaScript. Chúng tôi tận dụng thư viện này để mô phỏng các pha lăn, nhảy và bật bóng về phía đích trong chế độ 3D.
Ngay từ đầu, chúng tôi đã không chỉ làm cho trải nghiệm vật lý khi lăn bóng có cảm giác chân thực mà còn đảm bảo rằng các vật thể trong trò chơi có cảm giác thật. Điều này đòi hỏi phải lặp đi lặp lại nhiều lần để điều chỉnh trọng lực tổng thể của cảnh Physijs, tốc độ bóng khi bóng lăn từ cú ném của người chơi, độ dốc khi nhảy của làn đường cũng như các đặc tính ma sát và phục hồi (độ nảy) của bóng và vật liệu của làn. Sự kết hợp giữa trọng lực và tốc độ cao hơn mang lại trải nghiệm chơi trò chơi chân thực hơn.
Làm mịn
Hầu hết các tổ hợp trình duyệt và thẻ video hiện đại sẽ tận dụng được tính năng khử răng cưa dựa trên phần cứng gốc trong môi trường WebGL, nhưng một số thẻ sẽ không hoạt động tốt. Trong trường hợp tính năng khử răng cưa không hoạt động tự nhiên, mọi cạnh cứng và có độ tương phản trong cảnh FILENAME.js sẽ bị lởm chởm và xấu (ít nhất là đối với đôi mắt phân biệt của chúng tôi).
Rất may là đã có cách khắc phục: thông qua một đoạn mã, chúng tôi có thể xác định xem nền tảng này có hỗ trợ tính năng khử răng cưa đúng cách hay không. Nếu có, thì chúng ta đã hoàn tất. Nếu không, có một loạt các chương trình đổ bóng xử lý hậu kỳ đi kèm với ba.js có thể giúp chúng ta. Cụ thể là bộ lọc khử răng cưa FXAA. Bằng cách dùng lại chương trình đổ bóng này để vẽ lại cảnh đã kết xuất ở mọi khung hình, các đường và cạnh của chúng ta nhìn chung sẽ mượt mà hơn nhiều. Hãy xem bản minh hoạ dưới đây:
// 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;
Bộ điều khiển trò chơi dựa trên gia tốc kế
Phần lớn phép màu của Roll It bắt nguồn từ cử chỉ xoay bóng mà người chơi thực hiện bằng điện thoại. Các thiết bị di động hiện đã có quyền truy cập vào gia tốc kế trong trình duyệt từ lâu, nhưng với tư cách là một ngành, chúng ta chỉ mới bắt đầu khám phá khả năng nhận dạng cử chỉ dựa trên chuyển động trên web. Chúng tôi bị hạn chế một chút bởi dữ liệu mà gia tốc kế của điện thoại cung cấp, nhưng với một chút sáng tạo, chúng tôi có thể nghĩ ra những trải nghiệm mới tuyệt vời.
Việc phát hiện thao tác "đổ xúc xắc" chính của tính năng Đổ xúc xắc bắt đầu bằng việc theo dõi 10 lần cập nhật gia tốc kế gần đây nhất đến từ sự kiện deviceorientation của cửa sổ. Bằng cách trừ giá trị độ nghiêng trước đó cho giá trị độ nghiêng hiện tại, chúng ta lưu trữ góc delta giữa các sự kiện. Sau đó, bằng cách liên tục tính tổng của 10 delta góc cuối cùng, chúng ta có thể phát hiện động tác xoay liên tục khi điện thoại di chuyển trong không gian. Khi điện thoại vượt qua ngưỡng thay đổi góc quét, chúng ta sẽ kích hoạt thao tác đổ xúc xắc. Sau đó, bằng cách tìm delta nghiêng đơn lớn nhất trong lần quét đó, chúng ta có thể ước tính tốc độ của quả bóng. Trong Roll It, tốc độ này được chuẩn hoá bằng cách sử dụng dấu thời gian mà chúng tôi đính kèm vào mỗi bản cập nhật gia tốc kế. Điều này giúp làm ổn định tốc độ thay đổi mà nội dung cập nhật của gia tốc kế truyền vào trình duyệt trên các thiết bị khác nhau.
Giao tiếp WebSockets
Sau khi người chơi lăn bóng bằng điện thoại, một tin nhắn sẽ được gửi từ điện thoại sang máy tính xách tay yêu cầu điện thoại đó phóng bóng. Thông báo "roll" này được gửi qua một đối tượng dữ liệu JSON thông qua kết nối WebSocket giữa hai máy. Dữ liệu JSON nhỏ, chủ yếu bao gồm loại thông báo, tốc độ ném và hướng nhắm.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Mọi hoạt động giao tiếp giữa máy tính xách tay và điện thoại đều diễn ra qua các thông báo JSON nhỏ như thế này. Mỗi khi trò chơi cập nhật trạng thái trên màn hình hoặc người dùng nghiêng hay nhấn vào một nút trên điện thoại, một thông báo WebSocket sẽ được truyền giữa các máy. Để giữ cho việc giao tiếp này được đơn giản và dễ dàng quản lý, các thông báo WebSockets được phát bằng cách sử dụng một điểm thoát duy nhất từ một trong hai trình duyệt. Ngược lại, có một điểm truy cập duy nhất trên trình duyệt nhận, với một đối tượng WebSocket xử lý tất cả các thư đến và đi ở cả hai đầu. Khi nhận được thông báo WebSocket, dữ liệu JSON sẽ được phát lại trong ứng dụng JavaScript bằng phương thức trigger() của jQuery. Tại thời điểm này, dữ liệu đến hoạt động giống như bất kỳ sự kiện DOM tùy chỉnh nào khác, đồng thời bất kỳ đối tượng nào khác trong ứng dụng đều có thể nhận và xử lý dữ liệu này.
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));
};
Các máy chủ Roll It WebSocket được tạo nhanh chóng khi hai thiết bị được đồng bộ hoá với một mã trò chơi. Phần phụ trợ cho Roll It được xây dựng trên nền tảng Google Compute Engine và App Engine bằng Go.
Nghiêng màn hình trình đơn
Ngoài các thông báo WebSocket dựa trên sự kiện được dùng trong khi chơi, các trình đơn trong Roll It còn được kiểm soát bằng cách nghiêng điện thoại và nhấn vào một nút để xác nhận lựa chọn. Điều này yêu cầu một luồng dữ liệu độ nghiêng nhất quán hơn truyền từ điện thoại đến máy tính xách tay. Để giảm băng thông và tránh gửi nội dung cập nhật không cần thiết, những thông báo này chỉ được gửi nếu độ nghiêng của thiết bị thay đổi hơn vài độ. Chẳng có lý do gì phải gửi luồng dữ liệu về độ nghiêng nếu điện thoại nằm trên bàn! Tốc độ truyền cũng được điều tiết – không quá 15 thông báo WebSockets được gửi mỗi giây trong Roll It, ngay cả khi thiết bị đang bị nghiêng.
Sau khi chọn các giá trị độ nghiêng trên máy tính, các giá trị này sẽ được nội suy theo thời gian bằng cách sử dụng requestAnimationFrame để mang lại cảm giác mượt mà. Kết quả cuối cùng là một trình đơn xoay và một quả bóng lăn để giúp cho biết lựa chọn của người dùng. Khi điện thoại gửi dữ liệu độ nghiêng, các phần tử DOM này được cập nhật theo thời gian thực bằng cách tính toán lại phép biến đổi CSS bên trong vòng lặp requestAnimationFrame. Vùng chứa của thực đơn chỉ xoay, nhưng bóng có vẻ như lăn dọc theo sàn nhà. Để có được hiệu ứng này, chúng ta triển khai một số lượng giác cơ bản để liên kết các quả bóng có toạ độ x với góc quay của nó. Phương trình đơn giản là: số vòng quay = x / (đường kính * π)
Tóm tắt
Đổ xúc xắc là dấu hiệu của thời gian. Giữa các dự án nguồn mở đã hỗ trợ quá trình phát triển của công ty, khả năng xử lý của các thiết bị trên bàn làm việc và trong túi của chúng tôi cũng như trạng thái của nền tảng web, đó là thời điểm thực sự thú vị và biến đổi để được kết nối trên web mở. Chỉ vài năm trước, phần lớn công nghệ này chỉ tồn tại trong các hệ thống độc quyền, không có sẵn để tự do sử dụng và phân phối. Ngày nay, chúng ta có thể hiện thực hoá những trải nghiệm phức tạp mà không cần tốn nhiều công sức và trí tưởng tượng khi sáng tạo và chia sẻ các mảnh ghép mới mỗi ngày. Vậy bạn còn chần chừ gì nữa? Hãy tạo dựng một thứ gì đó tuyệt vời và chia sẻ với mọi người!
