WebGL Game Development: Xuất Bản Game Lên Web Với Unity
Web là platform tiếp cận người chơi dễ dàng nhất - không cần download, không cần install, chỉ cần click link và chơi ngay trên browser. Với WebGL, Unity cho phép bạn xuất bản game lên web với chất lượng gần như tương đương native build. Bài viết này sẽ hướng dẫn bạn từ build settings đến optimization và hosting cho Unity WebGL game. Tham khảo các dự án WebGL mẫu tại kho source game LamGame.
1. Tại Sao Chọn WebGL?
WebGL (Web Graphics Library) là JavaScript API cho phép render đồ họa 2D và 3D trong browser mà không cần plugin. Unity compile C# code thành WebAssembly (Wasm) và sử dụng WebGL API để render, tạo ra game chạy trực tiếp trong browser với hiệu năng tốt. Các lý do chính để xuất bản game lên web:
- Zero friction distribution: Player không cần download hay install gì. Share link, click, chơi ngay. Đây là lợi thế lớn nhất cho game casual, game jam, và portfolio showcase.
- Cross-platform tự động: WebGL game chạy trên mọi thiết bị có browser hiện đại - Windows, Mac, Linux, ChromeOS, thậm chí mobile browser (với hạn chế).
- SEO và discoverability: Web game có thể được index bởi search engine, embed trong blog post, share trên social media với preview. Điều này không thể làm với native app.
- Instant updates: Update game chỉ cần upload file mới lên server. Player luôn chơi version mới nhất mà không cần update thủ công.
- Platform cho indie: itch.io, Newgrounds, CrazyGames, và nhiều platform khác chuyên host web game miễn phí, cung cấp audience sẵn có cho indie developer.
2. Unity WebGL Build Settings
Để build WebGL trong Unity, vào File → Build Settings, chọn WebGL platform và click Switch Platform. Sau đó cấu hình Player Settings cho WebGL:
Resolution and Presentation: Set default canvas width/height phù hợp (thường 960x540 hoặc 1280x720 cho game 2D). Bật "Run In Background" nếu game cần tiếp tục chạy khi tab không active. Chọn WebGL Template - Unity cung cấp Default và Minimal template, hoặc bạn có thể tạo custom template.
Publishing Settings: Đây là phần quan trọng nhất cho WebGL. Compression Format quyết định cách file build được nén. Gzip là lựa chọn an toàn nhất vì hầu hết web server đều hỗ trợ. Brotli cho compression ratio tốt hơn 15-20% nhưng cần server configuration đặc biệt. Chọn "Disabled" nếu hosting platform đã tự handle compression. Decompression Fallback nên bật để game vẫn load được trên server không hỗ trợ compression.
// Custom WebGL Template - index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{{ PRODUCT_NAME }}}</title>
<style>
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
#unity-canvas {
width: 100%; height: 100%;
background: #1a1a2e;
}
#loading-bar {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 300px; height: 20px;
background: #333; border-radius: 10px;
}
#loading-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, #e94560, #0f3460);
border-radius: 10px; transition: width 0.3s;
}
</style>
</head>
<body>
<canvas id="unity-canvas"></canvas>
<div id="loading-bar"><div id="loading-fill"></div></div>
<script src="{{{ LOADER_FILENAME }}}"></script>
<script>
createUnityInstance(document.getElementById("unity-canvas"), {
dataUrl: "{{{ DATA_FILENAME }}}",
frameworkUrl: "{{{ FRAMEWORK_FILENAME }}}",
codeUrl: "{{{ CODE_FILENAME }}}",
streamingAssetsUrl: "StreamingAssets",
companyName: "{{{ COMPANY_NAME }}}",
productName: "{{{ PRODUCT_NAME }}}",
productVersion: "{{{ PRODUCT_VERSION }}}",
}, (progress) => {
document.getElementById("loading-fill").style.width = (progress * 100) + "%";
}).then((instance) => {
document.getElementById("loading-bar").style.display = "none";
});
</script>
</body>
</html>3. Tối Ưu Build Size
Build size là yếu tố quan trọng nhất cho WebGL game vì player phải download toàn bộ game trước khi chơi. Mỗi MB thêm vào là thêm thời gian chờ và tăng bounce rate. Mục tiêu lý tưởng là dưới 20MB cho game casual, dưới 50MB cho game mid-core.
- Code Stripping: Bật Managed Stripping Level ở mức High trong Player Settings. Unity sẽ loại bỏ code không sử dụng, giảm đáng kể kích thước Wasm file. Tuy nhiên, stripping có thể loại bỏ code cần thiết nếu sử dụng reflection - thêm link.xml để preserve các type cần thiết.
- Texture Compression: Sử dụng ASTC hoặc DXT compression cho textures. Giảm texture resolution khi có thể - trên web, player thường chơi trong cửa sổ nhỏ hơn native resolution. Sử dụng Sprite Atlas để gộp textures và giảm overhead.
- Audio Compression: Chuyển tất cả audio sang Vorbis format với quality 40-70%. Giảm sample rate xuống 22050Hz cho sound effects. Audio thường chiếm 20-40% build size nếu không được tối ưu.
- Asset Bundles / Addressables: Không pack tất cả content vào initial build. Sử dụng Addressables để load content on-demand. Player download core game nhanh chóng, các level và content bổ sung được load khi cần.
- Remove unused packages: Kiểm tra Package Manager và loại bỏ các package không sử dụng. Mỗi package thêm code vào build dù bạn không dùng tính năng nào của nó.
4. WebGL-Specific Limitations Và Workarounds
WebGL có một số hạn chế quan trọng so với native build mà bạn cần biết:
Không có multi-threading: WebGL chạy single-threaded (mặc dù SharedArrayBuffer đang dần được hỗ trợ). Điều này ảnh hưởng đến physics, AI, và các heavy computation. Workaround: spread heavy work across multiple frames, sử dụng coroutines để tránh frame spike, và giảm complexity của physics simulation.
Memory giới hạn: Browser giới hạn memory allocation cho WebGL context. Trên mobile browser, giới hạn thường là 256-512MB. Set Memory Size trong Player Settings phù hợp - quá lớn sẽ fail trên thiết bị yếu, quá nhỏ sẽ crash khi load nhiều content. Unity 2022+ hỗ trợ dynamic memory growth, giảm bớt vấn đề này.
Không có file system access: WebGL không thể đọc/ghi file trên disk. Save data phải sử dụng PlayerPrefs (lưu vào IndexedDB) hoặc gọi JavaScript để interact với localStorage/server API. Đối với save data lớn, implement cloud save thông qua backend API.
Audio autoplay policy: Browser hiện đại block audio autoplay cho đến khi user interact (click/tap). Unity xử lý điều này tự động bằng cách resume AudioContext sau user interaction đầu tiên, nhưng bạn nên thiết kế game để không phụ thuộc vào audio trong giây đầu tiên.
5. JavaScript Interop
Unity WebGL cho phép gọi JavaScript từ C# và ngược lại thông qua .jslib plugin. Điều này mở ra khả năng tích hợp với web APIs, analytics, social sharing, và nhiều tính năng web khác.
// Plugins/WebBridge.jslib
mergeInto(LibraryManager.library, {
ShareToSocial: function(titlePtr, urlPtr) {
var title = UTF8ToString(titlePtr);
var url = UTF8ToString(urlPtr);
if (navigator.share) {
navigator.share({ title: title, url: url });
} else {
window.open("https://twitter.com/intent/tweet?text=" +
encodeURIComponent(title + " " + url));
}
},
SaveToLocalStorage: function(keyPtr, valuePtr) {
localStorage.setItem(UTF8ToString(keyPtr), UTF8ToString(valuePtr));
},
LoadFromLocalStorage: function(keyPtr) {
var value = localStorage.getItem(UTF8ToString(keyPtr)) || "";
var bufferSize = lengthBytesUTF8(value) + 1;
var buffer = _malloc(bufferSize);
stringToUTF8(value, buffer, bufferSize);
return buffer;
}
});
// C# side
public class WebBridge : MonoBehaviour
{
[DllImport("__Internal")] private static extern void ShareToSocial(string title, string url);
[DllImport("__Internal")] private static extern void SaveToLocalStorage(string key, string value);
[DllImport("__Internal")] private static extern string LoadFromLocalStorage(string key);
public void Share() => ShareToSocial("Check out my game!", "https://lamgame.vn");
}6. Hosting Và Distribution
itch.io là platform phổ biến nhất cho indie web game. Upload build dưới dạng ZIP, itch.io tự động serve với đúng MIME types và compression. Miễn phí, có audience sẵn có, và hỗ trợ monetization (pay what you want, donations). Sử dụng butler CLI tool để automate upload từ CI/CD pipeline.
GitHub Pages là lựa chọn miễn phí cho hosting static files. Push WebGL build vào repository, enable GitHub Pages, và game có URL công khai. Phù hợp cho portfolio và game jam submissions. Lưu ý cần cấu hình đúng MIME types cho .wasm và .data files.
CrazyGames, Poki, Newgrounds là các web game portal với hàng triệu player. Submit game của bạn để được featured và earn revenue từ ads. Mỗi platform có SDK riêng để tích hợp ads và analytics. Đây là cách tốt nhất để reach large audience cho web game.
Self-hosting trên VPS hoặc cloud (AWS S3 + CloudFront, Netlify, Vercel) cho full control. Cần cấu hình server đúng: set Content-Encoding header cho compressed files, set đúng MIME types (application/wasm cho .wasm, application/octet-stream cho .data), và enable CORS nếu load assets từ CDN khác domain.
7. Performance Monitoring
Sau khi deploy, monitor performance thực tế của player. Sử dụng Unity Analytics hoặc custom analytics để track: load time (thời gian từ click đến playable), FPS trung bình, memory usage, và crash rate theo browser/device. Các browser khác nhau có WebGL performance khác nhau - Chrome thường nhanh nhất, Firefox tốt cho Wasm, Safari có một số quirks cần xử lý riêng.
WebGL là cánh cửa mở ra thế giới web cho game Unity của bạn. Với optimization đúng cách, bạn có thể tạo ra trải nghiệm web game ấn tượng tiếp cận hàng triệu player mà không cần họ install bất kỳ thứ gì. Nếu bạn đam mê web game development, hãy xem các cơ hội việc làm game tại LamGame.
