Trong bài trước chúng ta đã import được dự án vào IntelliJ và khởi chạy nó, tuy nhiên chúng ta vẫn chưa thể vào được game do chưa build được WebGL từ mã nguồn của Unity để tạo ra được các tập tin html, web bundle, thứ mà trình duyệt có thể hiểu và hiển thị được. Trong bài này chúng ta sẽ cùng nhau thực hiện các bước để build được WebGL và tạo ra được các tập tin cần thiết cho web nhé.
Để build được WebGL chúng ta sẽ cần trải qua bước sau:
  1. Cài đặt Cài đặt Unity Hub và mở dự án.
  2. Cài đặt WebGL cho dự án.
  3. Chạy project và chơi thử.
Kết quả chúng ta nhận được sau khi build sẽ là giao diện trò chơi với các tính năng:
  1. Audio : EzySmashers hỗ trợ nhạc nền trong game, hiệu ứng âm thanh trong quá trình chơi và giao diện cấu hình tắt / mở âm thanh.
  2. Payment : tích hợp EzyPayment, tính năng mua hàng trong ứng dụng cho phép người dùng mua vật phẩm trong trò chơi.
  3. Leaderboard : Hệ thống hỗ trợ sếp hạng game thủ.
  4. Achievement : Hệ thống phần thưởng, người chơi sẽ nâng cấp, kiếm được kim cường hoặc nhặt được đồ ngon khi đánh quái.
  5. Chat : Hệ thống chat hỗ trợ người chơi nhắn tin.

Cài đặt Cài đặt Unity Hub và mở dự án

Bạn sẽ cần trải qua các bước sau:
  1. Truy cập vào trang web Unity Hub
  2. Thực hiện download và cài đặt Unity Hub.
  3. Chọn Add project và mở thư mục .../ezysmashers/ezysmashers-unity.
  4. Unity sẽ tự động xác định phiên bản editor phù hợp với dự án và yêu cầu chúng ta download, phần này các bạn chỉ cần chọn Install để nó tải về và cài đặt.
Và đây là kết quả:
p3-1.webp

Cài đặt WebGL cho dự án

Nếu như project unity của bạn đã cài đặt WebGL rồi thì nó sẽ có biểu tượng WebGL như ở hình dưới đây:
p3-2.webp
Còn nếu không các bạn sẽ phải cài đặt WebGL như sau, các bạn nhấn nút hình bánh răng như hình dưới đây:
p3-33.webp
Chọn Add modules và chọn WebGL Build Support, bấm Tiếp tục và thực hiện cài đặt. Bạn chờ một lúc cho download về.
p3-44.webp
p3-5.webp
Sau đó mở project, ở giao diện màn hình chính unity, thực hiện mở Edit -> Project Settings -> Player -> Web settings tab -> Resolution -> WebGL Template.
p3-6.webp
Cập nhật tùy chọn để giảm thiểu kích thước bản dựng
  1. Truy cập Edit -> Project Settings -> Player -> Web settings tab.
  2. Chọn enable Strip Engine Code ở Other Settings.
  3. Chọn Gzip for Compression Format ở phần Publishing Settings.
p3-7.webpp3-8.webp
Build các gói assets
Truy cập vào File > Build Setting và đổi sang platform WebGL:
p3-9.webp
Sau khi đổi sang webGL platform, các bạn chọn build, unity sẽ hỏi bạn chọn build location, bạn chọn thư mục : ../ezysmashers/ezysmashers-theme/src/main/resources/static/unity/ và chờ unity build xong WebGL. Chú ý giai đoạn build này có thể tương đối lâu nếu máy của bạn cấu hình không đủ mạnh, vậy hãy kiên nhẫn nhé.

Chạy project và chơi thử.

Bước cuối cùng, các bạn mở Intelliji và thực hiện chạy 3 file EzySmashersAdminPluginStartupTest, EzySmashersSocketAppStartupTest, EzySmashersThemeStartupTest.
p3-10.webp
Sau đó các bạn truy cập http://localhost:8080 bấm play và cùng tận hưởng kết quả nào:
p3-11.png
p3-12.webp

Tổng kết

Build WebGL là một công việc tốn thời gian, thực ra lúc đầu mới tìm hiểu về WebGL của Unity cũng có chút chóng mặt vì nó ít tài liệu. Hy vọng rằng thông qua bài viết này các bạn có thể build được cả WebGL của EzySmashers và dự án của các bạn nhé.