Trò chơi kỷ niệm 5 triệu lập trình viên của Netlify: Trải nghiệm WebGL lấy cảm hứng từ Marble Madness thể hiện sự xuất sắc về mặt kỹ thuật và lỗi từ cộng đồng

BigGo Editorial Team
Trò chơi kỷ niệm 5 triệu lập trình viên của Netlify: Trải nghiệm WebGL lấy cảm hứng từ Marble Madness thể hiện sự xuất sắc về mặt kỹ thuật và lỗi từ cộng đồng

Với cách tiếp cận sáng tạo để kỷ niệm cột mốc đạt 5 triệu lập trình viên, Netlify đã cho ra mắt một trò chơi lăn bi dựa trên WebGL, thu hút sự chú ý của cộng đồng công nghệ, không chỉ vì thông điệp marketing mà còn vì cách triển khai kỹ thuật và lối chơi dựa trên vật lý.

Triển khai kỹ thuật

Trò chơi được phát triển bởi Little Workshop trong vòng 8 tuần với đội ngũ gồm hai người, thể hiện những thành tựu kỹ thuật ấn tượng sử dụng Three.js để render và động cơ vật lý Rapier 3D thông qua WebAssembly. Đội phát triển đã sử dụng Unity để thiết kế cấp độ, với quy trình phức tạp bao gồm lập trình Python trong Blender để tối ưu hóa hình học và xuất GLTF. Việc tích hợp nội dung 2D với môi trường 3D được thực hiện bằng CSS 3D transforms, thể hiện sự kết hợp mượt mà của các công nghệ web.

Ngăn xếp công nghệ:

  • Frontend: Sử dụng Three.js (để render WebGL)
  • Physics Engine: Sử dụng Rapier 3D (thông qua WebAssembly)
  • Thiết kế cấp độ: Unity Editor
  • Quy trình xử lý tài nguyên: Lập trình Python trên Blender
  • Định dạng: GLTF
  • Thời gian phát triển: 8 tuần
  • Quy mô nhóm: 2 lập trình viên

Vật lý và Lối chơi

Phần triển khai vật lý của viên bi đã nhận được nhiều lời khen từ cộng đồng về cảm giác chân thực. Các nhà phát triển tiết lộ họ đã sử dụng Rapier 3D cho mô phỏng vật lý cốt lõi, với mã tùy chỉnh cho các hiệu ứng đặc biệt như lực hút từ tính đến các điểm nóng. Thú vị là âm thanh nảy của quả bóng được tạo ra từ các bản ghi âm bóng rổ, vô tình tạo nên cảm giác đàn hồi thú vị mà người chơi rất thích.

Thách thức kỹ thuật và Báo cáo lỗi

Mặc dù có giao diện mượt mà, người dùng đã báo cáo một số vấn đề kỹ thuật, đặc biệt là về phát hiện va chạm và cơ chế hồi sinh. Nhiều người chơi gặp phải vòng lặp hồi sinh và lỗi phát hiện va chạm, đặc biệt là khi tốc độ khung hình giảm. Đội phát triển đã thừa nhận những vấn đề này và giải thích:

Đôi khi quả bóng có những hành vi kỳ lạ do cách hoạt động của phát hiện va chạm. Chúng tôi đã cố gắng tối ưu hóa và tránh hầu hết các vấn đề nhưng vẫn có thể xảy ra.

Các Vấn Đề Kỹ Thuật Đã Biết:

  • Lỗi phát hiện va chạm khi tốc độ khung hình bị giảm
  • Lỗi vòng lặp hồi sinh trong một số phần cụ thể của màn chơi
  • Vấn đề về độ nhạy điều khiển trên thiết bị di động
  • Xung đột cử chỉ điều khiển đặc thù trên hệ điều hành iOS

Tối ưu hóa cho thiết bị di động

Trải nghiệm trên thiết bị di động gặp phải những thách thức riêng, với một số người dùng báo cáo điều khiển quá nhạy và các vấn đề cụ thể trên iOS về xử lý cử chỉ. Các nhà phát triển đã triển khai giải pháp tạm thời cho tính năng chọn văn bản và chia sẻ trên Safari iOS, mặc dù một số thách thức vẫn tồn tại do giới hạn của nền tảng.

Phản hồi từ cộng đồng

Phản hồi từ cộng đồng kỹ thuật rất tích cực, đặc biệt là sự quan tâm đến tiềm năng của dự án như một nguồn tài nguyên học tập. Trong khi một số lập trình viên yêu cầu mã nguồn được mở, những người khác đã bắt đầu khám phá khả năng speedrun, nhấn mạnh khả năng chơi lại của trò chơi bất chấp nguồn gốc marketing của nó.

Dự án này đứng như một ví dụ điển hình về khả năng phát triển web hiện đại, thể hiện cách các sáng kiến marketing có thể đẩy giới hạn kỹ thuật trong khi tạo ra trải nghiệm người dùng hấp dẫn.

Nguồn tham khảo: Cloudflare 1.1.1.1